Arbeitsbeispiel WebDesign

Welcher Aufwand und welche Gedanken stecken eigentlich in einer Website, was wird da alles gemacht und worauf wird geachtet? Diese Fragen möchte ich Ihnen gerne am Beispiel dieser Seite beantworten.

Am Anfang ist alles weiß - Papier, Bildschirm und die Gedanken.

Konzepte und erste Skizzen auf Papier (meistens ganz viele)

Layouts am Bildschirm (manchmal mehrere)

Codierung und Testphase (manchmal lange)

Inhalte einpflegen über das CMS

Launch (Endlich - *Yiphie*@!)

Die einzelnen Phasen lassen sich wiederum in viele Einzelschritte unterteilen. Folgend eine Auflistung der wichtigsten Schritte pro Phase ohne Anspruch auf Vollständigkeit ...

Konzept und Skizzen

Dieser Projektabschnitt wird in großen Teilen auf Papier durchgeführt. Die fertige Konzeption wird bei größeren Projekten in entsprechenden Diagrammen und ToDo-Listen "digitalisiert".

- Gliederung der Informationsstruktur
- Auswahl der geeigneten Navigation
- Auswahl der geeigneten Funktionalitäten
- Entscheidung bezüglich eines Content Management Systems
- Anzahl Layouts (benötigte Templates)
- Anzahl Sprachversionen (Datenstruktur)
- Datenbanken und Scriptfunktionen

Gestaltung und Layout

Übertragung der Ideen und Skizzen in die digitale Form (Photoshop). Auf Basis dieser Grafik wird später die Website gestaltet.

- Einbeziehung eines vorhandenen CI
- Bestimmung der Zielgruppe(n)
- Beachtung der Barrierearmut
- Beachtung der Usability (Benutzerfreundlichkeit)
- Auswahl der geeigneten Stilmittel
- Bildrecherche und/oder Fotografie
- Feinanpassung Konzept
- Layout der Website in Photoshop

Codierung und Test

Codierung und Programmierung von Templates und Scripten in Verbindung mit den erstellten Grafiken. Einbindung in ein Content Management System, Einrichtung und Anpassung des CMS.

- Valide Codierung von XHTML/HTML und CSS
- Auswahl von Frameworks
- Beachtung der Barrierearmut
- Beachtung der Usability (Benutzerfreundlichkeit)
- Beachtung des Suchmaschinenrankings - SEO
- Programmierung von Scriptfunktionen
- Installation und Anpassung CMS
- Test mit unterschiedlichen Browsern
- Gliederung und Dokumentation
- Versionsverwaltung und Backup

Farbgebung

Rot und Schwarz auf weißen Grund sind die Hausfarben von ExusuDesign. Der Kontrast wurde zu Gunsten der besseren Lesbarkeit mehr in Richtung Grau verschoben. Insgesamt wurde auf zu große Kontraste verzichtet um sich sachlich auf den Inhalt zu konzentrieren.

Struktur und Raster

Eine geringe Navigationstiefe und ein zweispaltiges Raster sollen die Bedienung so einfach wie möglich halten und trotz großer Informationsmengen für einen schnellen Überblick sorgen. Aktuelle Browser unterstützen die Bedienung der Website durch zusätzliche Funktionen. Nicht zwingend notwendige Inhalte können teilweise ausgeblendet werden.

Layout und Erscheinungsbild

Eine leichte, typografische Gestaltung mit viel Freiraum soll den Blick auf die wichtigsten Informationen fokussieren. Es sollte ein ruhiges, harmonisches Äußeres mit moderner Codierung und Funktionalität kombiniert werden. Eine gewisse Zurückhaltung (Understatement) ist an dieser Stelle durchaus beabsichtigt.

Codierung

Die Codierung erfolgte in XHTML/CSS und ist valide nach dem internationalen Standard des W3C. Zusätzliche Funktionen und Gimmicks wurden so angelegt, dass die Nutzung durch ältere Browser auch ohne diese Funktionen möglich ist. Für den Internet Explorer älter als Version 6 gibt es eine spezielle Darstellung ohne zusätzliche CSS Versionen nutzen zu müssen. Eine grundsätzliche Barrierearmut wurde berücksichtigt.

Validierung und Browsertests

Onlinevalidierung der einzelnen Seiten und Test der gesamten Präsentation mit den folgenden Browsern:
WinXP: Internet Explorer 5.5, 6.x, 7.x, 8.x. OSX: Camino 1.6, Safari 4.x. OSX&WinXP: Opera 9.x, Firefox 3.5, Navigator 9.

Unter der Haube

Im Backend wird die Website mit Weblication CMS gepflegt und gesteuert. Der Blog (Feulliton) wurde mit WordPress realisiert. Als Framework kommt jQuery zum Einsatz. Für Statistik und Tracking werden Mint und GoogleAnalytics genutzt.