WIR WISSEN...

Kommunikation trifft auf Design

Gutes individuelles Design hat seinen Preis - und ist ihn auch wert!


Aber was ist ein seriöser Preis für eine Webseite und wie ensteht eine Webseite bei uns im Hause?

Gerade bei Webseiten variieren die Preise sehr stark, obwohl diese sich Design-Aufwand-Technisch vielleicht kaum unterscheiden. Es passiert daher nicht selten das Kunden den Aufwand ganz falsch einschätzen. Dies ist darauf zurückzuführen dass für den Laien auf den ersten Blick nicht ersichtlich ist, welcher Aufwand hinter einem Projekt steckt. Im Zuge dieser Webseite möchten wir genau zu diesem Thema etwas Aufschluss zu unserer Arbeit geben.

Es ist oftmals der Fall, dass ein Kunde nicht die anfallenden Kosten eines Webdesigners auf den ersten Blick wahrnimmt und deswegen vielleicht zu einer erteinmal preisgünstig erscheinenden Lösung greift. Anfallende Kosten eines professionellen Webdesigners sind z.B. Arbeitszeit für die Screen-Erstellung, Template-Umsetzung und Anpassungen, Lizenzen für Bilder, Fotos, Schriften und Logos, Hardware-Verschleiß (Computer, Bildschirm, Maus, etc.), Support für den Kunden (Telefon, E-Mail, etc.), Stromkosten, Software (Office, Photoshop, andere Designertools) und andere Kosten (Miete, Hardware, Versicherungen, etc.).

Wie entsteht ein Design für Webseiten bei uns

Und nachdem der Inhalt und die Struktur erstellt wurden, stürzen wir uns auf das Design. Design für Internetseiten wird über CSS 3 erstellt. Dies „stülpen“ wir über das HTML 5 und bekommen so schnelle, schlanke und funktionierende Seiten, deren Pflegeaufwand sehr gering ist.

In CSS 3 werden Farben, Abstände, Rahmen und sonstige Bestandteile des Erscheinungsbildes definiert. Die Stärke von CSS 3 ist, dass mit wenigen Befehlen, die alle untereinander kombiniert werden können, alle Design-Varianten möglich sind.


HTML5 + CSS3


Das Web wird mobil und wir müssen mit

Der wichtigste Anspruch beim Responsiven Web ist so einfach wie bedeutend: Das Web-Design reagiert auf den Nutzer - egal welche Auflösung er verwendet. Ob Bilder, Tabellen, Logos, Texte, Videos: Alles muss anpassungsfähig sein.

Beim Responsiven Webdesign stehen somit einfache Bedienbarkeit und klare Aussagen im Mittelpunkt - und zwar unabhängig davon, ob der Nutzer diese Website mit einem Smartphone, Tablet, Laptop oder normalen PC betrachtet.

Zusätzlich werden noch die entsprechenden JavaScript-Code benötigt. JavaScripts werden in separaten Dateien notiert. Sie werden dann zur Laufzeit vom Web-Browser interpretiert. Dazu besitzen moderne Web-Browser entsprechende Interpreter-Software.


“Fazit für uns ist, dass wir nicht nur eine CSS-Datei und eine Script-Datei schreiben, sondern, wie man rechts sieht, es gleich ein paar mehr sind.”

Projekt-Webseite zum testen erstellen

Um das Wissen über HTML 5 und CSS 3 zusammenzuführen und umzusetzen, erstellen wir Schritt für Schritt eine komplette Internetseite mit Typografie, Steuerungselementen, Inhalt und Design. Hier testen wir verschiedene Layout-Arten gründlich.


Diese ist als Beispiel hier im folgenden zu sehen.

Dateien die am Anfang durch uns erstellt werden

typografie-steuerung-muster.html
[437 Zeilen Code für diese Webseite]

style.css
[2615 Zeilen Code für diese Webseite]

style.ie7.css
[110 Zeilen Code für diese Webseite]

style.responsive.css
[526 Zeilen Code für diese Webseite]

script.js
[1984 Zeilen Code für diese Webseite]

script.responsive.js
[527 Zeilen Code für diese Webseite]

jquery.js
[diese ist zu finden unter jquery.org]

und alle Grafiken, Icons usw.
[die für diese Webseite benötigt]

Um Hilfstexte bzw. Erklärungen zu sehen einfach die Maus auf den Dateinamen halten.

Responsives Design


Grafiken & Fotos

© Ingo Granatyr von der
© CyberInterface Limited im
© Verbund der CyberInterface Ltd.
© HTML5 Logo und Bild by W3C


weitere Weblinks

Typografie und Steuerungselemente

Normaler Überschriftentext, Link in der Überschrift, Besuchter Link in der Überschrift, Aktiver Link in der Überschrift


Ein Bild, zum Vergrößern einfach klicken.

[zum Vergrößern einfach auf das Bild klicken]

Überschrift 1

Überschrift 2

Überschrift 3

Überschrift 4

Überschrift 5
Überschrift 6

Das ist ein Link, ein besuchter Link, ein aktiver Link innerhalb des normalen Textes.

Natürlich kann man Texte auch hoch bzw. tief stellen.

Dies ist ein ganz normaler Satz. Und hier folgt gleich noch ein normaler Satz um alles einmal über mehrere Zeilen darzustellen. Und um ganz sicher zu gehen schreiben wir gleich noch einen dritten Satz dazu.

Auch werden Zitate in Kursivschrift hervorgehoben.

Um Hilfstexte zusätzlich mit darzustellen benutzt man Akronyme, z.B. CyberInterface Ltd. (die Maus auf den Firmennamen stellen) welche dann zusätzlich angezeigt werden.

Auch für die Erklärung von Abkürzungen gibt eigene Befehle wie man hier sehen kann: z.B. (die Maus auf die Abkürzung stellen)


“Dieses Stylesheet wird so verdammt viel helfen um einiges optisch hervorheben zu können.”
-Blockquote

Auflistung

  • Aufzählung 1
  • Aufzählung 2
  • Aufzählung 3

Tabelle

Kopfzeile Kopfzeile Kopfzeile
Daten Daten Daten
Daten Daten Daten
Daten Daten Daten

Steuerung

Schaltflächen

Passive SchaltflächeBesuchte SchaltflächeAktive Schaltfläche

Steuerung

Pager

Social Icons

Kommentare

Avatar image
Autor am 01/05/2014 00:00:00
Kommentar

Einen Kommentar hinzufügen


Ein Kontaktformular benutzen
















* Diese Angaben sind Pflichtangaben. - Ihre Daten werden entsprechend des Hinweises zum Datenschutz behandelt.