Checkliste Grafik-Design fürs Web

This entry was posted by on Sunday, 19 June, 2011 at

Seit über einer Dekade arbeite ich im Web-Bereich. Immer wieder hatte ich mit Grafiker zu tun die gut für den Print-Bereich ausgebildet und erfahren waren. Aber leider sind nicht alle Grafiker auch erfahren im Web-Bereich und nicht alles Wissen aus dem Print ist direkt anwendbar. In einem größeren Projekt ist dieser Guideline entstanden das recht viele Web-Fragen beantwortet.

@todo: translate to english

 

Guidelines für Design im Web

Farbraum RGB
Auflösung 72 DPI
Hintergrund Transparent bei allen Grafiken
Farbprofile schaden nicht, aber die wenigsten Monitore sind kalibriert, jeder Monitor wird Farbabweichungen haben
Maße Für Schriften, Abstände, Höhen Breiten:  Pixel sind der kleinste gemeinsame Nenner, im Web ist die Größenangabe EM üblich, die in Relation zur Standard-Schriftgröße des Browsers steht, dh abweichen kann (Schätzung: 1 EM = 16 Pixel im IE, andere Broser können sich anders verhalten).

 

Bildschirmauflösungen 1024 * 768: Bildschirmauflösung, nicht verfügbare Pixel  (verfügbare Pixel im GUTFALL ca 995 * 580, bei eingeblendenten Toolbars weniger als 580)

1280 * 1024 und 1920 * 1080 ebenso.

Best Practice: Beim Start des Design einen Screenshot mit einer Bildschirmauflösung 1024 bzw 1280 machen (am eigenen Bildschirm umstellen) und in diesem Framework designen. Darin festlegen ob Content breiter wird, wo Weißräume auftauchen, was Mindest- und Maximalbreiten sind. Diese dokumentieren.

 

Wiederkehrende Elemente Menues, Banner, Icons:  müssen immer die gleiche Breite haben. Diese werden im CMS einmal gemacht und wiederholt auf die Seiten „kopiert“. Genauso Bilder für einen „Slot“ (zb rechter Bereich mit Bild) immer exakt die gleichen Maße. Wiederkehrende Elemente idealerweise nur 1 mal designen und dann so importieren das sie von mehreren Seitenlayouts verwendet werden. Faustregel: Es wird Änderungen geben.

 

Icons In Pixeln, Vektorgrafiken sind unbrauchbar. Alle Icons einer Familie müssen die gleichen Größen und Ausrichtung haben. Transparenz um Icons ist gut. Verläufe auf Transparenz (zB um Buchstaben) müssen auf einzelne Pixel genau gearbeitet werden. Da im Web kein Alpha-Kanal verfügbar ist (Ausnahme PNG 24, da ist aber die Unterstützung schlecht) bleiben nur Halbtöne die in Richtung Hintergrundfarbe gehen.

 

Schriften Es gibt kein Antialiasing im Web. Schriftgrößen und Abstände in Pixeln. Am Client sind nur Standard-Schriften verfügbar, bei  Spezialschriften gibt es noch keine brauchbare Lösung die überall funktioniert

Demo-Page mit Schriften: Alle Überschriften und Textblöcke auf einer Seite zusammenstellen und Formatierungen dort festlegen und dokumentieren

 

Texte Mindest- und Maximallängen für Text festlegen – dabei muss man sehr flexibel sein da der Content über Jahre von unterschiedlich geschulten Autoren eingegeben wird.

Andere Sprachen haben bei gleichem Text andere Textlängen. Oft sind das bedeutende Unterschiede. Russisch zB ist bei gleichem Content mindestens 20 % länger.

Nicht alle Sprachen werden von links nach rechts geschrieben. Arabisch oder chinesisch wird von Rechts nach Links geschrieben.

 

PSDs
  • Komplexe Elemente in Folder legen und sprechend benennen
  • Textebenen nicht rendern
  • Hilfslinien sind gut
  • Farbpaletten benutzen um Abweichungen zu vermeiden

 

Grafiken fürs Web
  • GIF: optimal für Buttons / Grafiken mit wenigen Farben.  Benutzt eine Palette mit maximal 255 Farben, eine „Farbe“ davon kann transparent sein
    • Bei Reduktion der Palette ist genau auf die Farben zu achten, Photoshop versucht intelligent die Farben zu wählen, verfälscht aber dabei die Farben. Händisch die Company-Farben prüfen

 

  • JPG: optimal für Fotos und Grafiken mit Verläufen
    • Handoptimierung der Größe per Slider. Wenn die Komprimierung zu groß ist entstehen hässliche Artifakte

 

  • PNG8:  Ähnlich zu verwenden wie Gif, gleiche Problemfelder bei Reduktion der Palette. Erfahrungsgemäß bei gleicher Qualität mehr Speicherverbrauch als GIF
  • PNG24: analog zu JPG, hat aber zusätzlich einen vollen Alpha-Kanal. Dh transparente Verläufe sind möglich. Allerdings noch nicht in allen Browsern unterstützt, dh noch nicht verwendbar

 

Es kommt unvermeidlich zu Farbabweichungen zwischen unterschiedlichen Clients. Nur die allerwenigsten Monitore sind kalibriert. Kontraste und Farbtemperatur sind ebenfalls  abweichend.

 

If you rather drive your html guy screaming mad follow this article: 20 things to drive web developers crazy


Leave a Reply