Professionelles Webdesign mit (X)HTML und CSS

Professionelles Webdesign mit (X)HTML und CSS

Björn Seibert, Manuela Hoffmann
Galileo Computing
366 S., 2. Auflage 2008

Standardkonformes Webdesign
Accessibility und Usability
Farbe, Grafik und Typografie

Die Qualität einer Website entscheidet über ihren Erfolg. Wie gut finden sich die Besucher zurecht? Wie durchdacht ist die Navigation, wie ansprechend das Design? Um wirklich professionelle Seiten zu bauen, reichen HTML- und CSS-Kenntnisse alleine nicht aus. Dieses Buch zeigt Ihnen anhand eines Beispielprojekts, wie Sie Ihre Website mit (X)HTML und CSS effektiv und standardkonform umsetzen. Hier wird erklärt, wie Sie Ihre Site strukturieren, welche Elemente Sie wozu einsetzen und wie Sie professionelles Design durch abgestimmte Farbschemata erzeugen. Ein Buch voller Profi-Wissen! Die 2. Auflage ist komplett aktualisiert und erweitert zu den neuen Standards und Browser-Versionen.

Damit Sie die im Buch beschriebenen Beispiele auch direkt nachvollziehen können, finden Sie auf der CD alle Quellcodes und weitere nützliche Software. Bilder und den vorkonfigurierten Webserver XAMPP. (Inhalte auf Anfrage)

Cascading Stylesheets sind der ideale Weg zur komfortablen Formatierung
und Platzierung von Elementen. Die Wahl des passenden
Farbschemas, der richtigen Typografie und der dezente Einsatz
von Grafik verhelfen zum harmonischen Gesamteindruck einer
Website, die schön und zugänglich zugleich ist.
5 Webdesign: Farbe, Grafik, Typografie und CSS
Bevor der Designprozess in der Praxis beginnen kann, müssen einige Fragen beantwortet werden, von denen die Gestaltung des Layouts abhängig ist, die den Gestaltungsprozess leiten und schnell und sicher zum Ziel führen. Die allgemeinen Überlegungen aus »Thema, Zielgruppe, Stil« gilt es nun zu konkretisieren.

5.1 Die Planung einer Webpräsenz

»Wir wollen eine Website, wo fangen wir an, und wo wollen wir hin?« Diese Fragen muss sich jeder stellen, der eine Präsenz aufbauen will, egal ob private Homepage oder Geschäftsseite, egal ob Designer oder Kunde. Der Planungsprozess beginnt mit einem Brainstorming, in dem die folgenden Fragen beantwortet werden:

1. Welchen Zweck soll die zu erstellende Website erfüllen?
2. Welche Inhalte soll sie tragen?
3. An welche Zielgruppe soll sie sich primär wenden?
4. In welchem zeitlichen Rahmen soll das Design erstellt werden und online gehen?
5. Wer soll die Website betreuen, sind Schulungen oder Seminare notwendig?

Punkt eins scheint auf den ersten Blick eindeutig zu sein, doch es ist wichtig, sich möglichst klar vor Augen zu führen, was man mit einer Site kurz-, mittel- und langfristig erreichen möchte. Es ist wichtig, sich zu fragen, inwieweit sich das Angebot von bereits bestehenden abgrenzen soll, welche Eigenheiten es haben soll.

Mit Punkt zwei wird klar umrissen, was konkret behandelt werden soll: also nicht »Tipps und Tricks zu Photoshop«, sondern eher »Artikel, Tutorials, Linkverzeichnisse, Plug-in-Besprechungen, Downloads« etc. Aus dieser Sammlung von Inhaltsbereichen entwickeln wir ein Schema der Seitenanordnung, die so genannte Sitemap.

Zur besseren Verdeutlichung der technischen und gestalterischen Anforderungen an das Design definieren wir eine fiktive Person, die wir als zugehörig zur Zielgruppe erachten. Wir definieren Alter, Gewohnheiten, Familienstand, Interessen, Beruf, Hobbys etc. Je plastischer und detaillierter wir diese Vorstellungen formulieren, umso lebendiger wird die Zielperson im Kopf, desto schwerwiegender werden ihre Einwände und Wünsche, wenn es um Entscheidungen im Designprozess geht. Wir fragen in diesem Bereich nach besonderen Merkmalen der Zielgruppe, die eventuell besondere Beachtung hinsichtlich der Zugänglichkeit einer Site erforern. Ebenso fragen wir nach technischen Voraussetzungen wie vorherrschendes Betriebssystem oder bevorzugter Browser.

Die zeitliche Planung der einzelnen Arbeitsabläufe des Webdesigns sollte so detailliert wie möglich erfolgen und immer wieder angepasst werden. Für Inspirationsphasen sollte es eine zeitliche Begrenzung geben, um diese nicht »ausufern« zu lassen. Dabei ist es individuell sehr unterschiedlich, wo und wie man sich am besten inspirieren lässt. Was für den einen ein Museumsbesuch ist, ist für den anderen ein Besuch der wichtigsten Webseiten- Galerien im Netz. Wichtig ist es, diese Phasen zu begrenzen und in ein abschließendes Sammeln von Ideen münden zu lassen. Auch in den Phasen der Designerstellung sollte man als Designer immer einen Blick auf die Uhr werfen, um an »schlechten Tagen«, an denen das Design nicht gut von der Hand geht, nicht wertvolle Zeit zu vergeuden. Wenn einmal gar nichts geht, sollte man es belassen und sich zur Ablenkung einer anderen Tätigkeit zuwenden.