WebStyleBoard

memowe präsentiert Euch
Die WSB Webdesign-Linie
(unterstützt von der Kommission zur Erhaltung und Kontrolle der Ästhetik und Vermeidung optischer Vergewaltigung in den neuen Medien im WS-Board, KzEuKdÄuVoVidnMiWSB)

Das vorliegende Dokument zeigt wichtige Grundsatzaspekte zu der Erstellung eines Internetangebotes auf, welches möglichst wenige Anfängerfehler innehat.
Wenn der geneigte Leser vorhat, hier seine Website vorzustellen, empfehlen wir hiermit, dieses Dokument zunächst durchzulesen und zu beherzigen. Viele Anfängerfehler sind so vermeidbar.

Dieses Dokument ist nicht fertig. Bei Vorschlägen zur Ergänzung oder Verbesserung bitte ich um ein Post in diesem Fred.

TOC:
1. Zielformulierung: das Webdesign-Soll
2. Farben und Hintergründe
3. Schriftarten
4. Keinen Ballast
5. Kompatibilität


1 Zielformulierung: das Webdesign-Soll
Das Ziel der Bemühungen soll ein klares übersichtliches Layout sein, welches nicht vom Inhalt ablenkt und das man wiedererkennt. Unter anderen Internetangeboten sollten die Bemühungen in Richtung der Eigenständigkeit gerichtet sein, wobei Orientierungen in Ordnung sind. Stumpfes Nachmachen hingegen bringt keinen Lerneffekt, dafür eventuell Ärger.
Unter den internen Bereichen sollte ein klarer eindeutiger Bezug hergestellt sein. Das bedeutet, dass das Design nicht von Seite zu Seite unterschiedlich sein soll und nennt sich dann CD (Corporate Design), CI (Corporate Identity).

2 Farben und Hintergründe
Verwendet Farben, die zueinander passen und auf keinen Fall zuviele! Zwei/drei Grundfarben reichen in den allermeisten Fällen, sonst wird das Internetangebot zu bunt und damit hässlich. Problematisch ist die Kombination von ungefähr gleichhellen Komplementärfarben, zB. Rot+Grün, Orange+Hellblau. Auch Hintergrundbilder sind problematisch, sie wirken oft billig und machen den Text schlechter lesbar. Besser ist eine (!) einfache Hintergrundfarbe und als Kontrast etwas bunteres, als anders herum. Oder einfach Schwarz auf Weiss. Understatement ist in.

3 Schriftarten
Verwendet nach Möglichkeit keine Schriften mit Serifen (zB. Times), die sich besser in Printmedien machen. Auf dem Bildschirm mit 72dpi sind sie schlechter lesbar als serifenlose Fonts. Eine gute Font-Definition für Fließtext ist zum Bleistift Verdana, Helvetica, sans-serif.

4 Keinen Ballast!
Versucht, Eure Site übersichtlich und klar (cleeean) zu halten, also vermeidet überflüssigen Schnique-Schnaque wie Counter, bunte eMail-Buttons, vor allem die ach so beliebten blinkenden "Under Construction"-Schilder. Diese auf den ersten unbedarften Blick raffinierten Gimmicks lenken nur ab und wirken auch schnell billig. Auch Animationen sind meistens überflüssig. Solcherlei falsch verstandenes Webdesign ist nicht zu empfehlen und hier eher verpönt. Versucht, Euren Inhalt klar und deutlich, so einfach wie möglich und idividuell zu zeigen.

5 Kompatibilität
Damit das in mühevoller Arbeit erstellte Internetangebot auch von möglichst vielen Menschen gelesen werden kann und dabei keine Fehler auftreten, empfiehlt es sich, seine Seiten einem gängigen HTML-Standard anzupassen (valider Code). Zur Überprüfung dieser Anpassung dient der Validator vom W3-Consortium, SelfHTML hilft beim Anpassen.
Weiterhin empfiehlt es sich, wichtige Elemente eines Internetangebotes wie die Navigation unter allen Umständen kompatibel zu halten. Das beste sind immer noch normale HTML-Hyperlinks, da das mit der größten Wahrscheinlichkeit mit allen Plattformen funktioniert. Problematisch bezüglich der navigationstechnischen Umsetzung ist JavaScript, da dieses von vielen bewusst deaktiviert wird, sowie Flash: auf das erforderliche PlugIn kann man sich als Webdesigner (noch) nicht verlassen. Also: haltet Eure Seite (insbesondere die Navigation) einfach, klar und kompatibel. Mit HTML und CSS kann man auch viele schöne Effekte erzielen.

Zum Thema Kompatibilität solltet Ihr auch unbedingt die Usability und Accessibililty - Linksammlung lesen!

Dieses Dokument ist nicht fertig. Bei Vorschlägen zur Ergänzung oder Verbesserung bitte ich um ein Post in diesem Fred.

Mirko Westermeier

Hier könnt Ihr Verbesserungsvorschläge zu dem Dokument Die WSB Webdesign-Linie posten. Diese werden in unregelmäßigen Abständen von mir eingearbeitet und dann hier gelöscht.

Vielen Dank für die Mitarbeit!

History

07.06.02 Erste Onlinestellung des Dokuments
08.06.02 Punkt 5 += Javascript, Flash (Anregung: jansurfer, Gaheris)
23.07.02 Hinweis auf die neue Usability und Accessibility - Linksammlung in Punkt 5.
31.08.02 Es wird zu voll im Forum. Ergänzungen zum Dokument können jetzt hier gepostet werden.

Mirko Westermeier

Anregungen von jansurfer und Gaheris wurden angenommen. Danke, Jungs.

Zitat

Original von Gaheris
PS: Guter, informativer, hilfreicher und sinnvoller Text.

Schankedön.

@woozy: Du warst OT

Mirko Westermeier aka memowe

P.S.: Ich finde, dass es hier oben im Meinungsforum zu voll wird. Darum könnt Ihr Ergänzungs- und Korrekturvorschläge, um die ich nach wie vor sehr bitte, um das Dokument besser zu machen, jetzt hier niederschreiben. Den speziellen Fred dafür habe ich fachgerecht entsorgt.

Passt das nicht eher zur Usability- und Accessibility-Linksammlung als zur WSB-Webdesign-Linie?

mem

Zitat

Original von Investorman
Du kannst es ja irgendwie ändern!

Immer bleibt alles an mir hängen...

mem