Checkliste Grafik-Design fürs Web
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 |
|
| Grafiken fürs Web |
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
