07. Januar 2020

Sieben Neujahrsvorsätze für Grafiker

1) Ich weiss, dass es mehr als drei Bildschirmgrössen gibt.

Das Layout einer Website muss heute vollständig flexibel aufgebaut werden. Das langjährige Mantra «Mobile / Tablet / Computer» war eigentlich schon immer eine Falle und nie wirklich gültig. Denn es gibt kleine Smartphones und grosse Telefone, die (fast) so gross sind wie Tablets und wiederum Tablets, die grössere Bildschirme haben als Laptops. Und Computermonitore gibt’s ebenfalls von klein bis riesig. Und wie gross das Browserfenster auf dem Monitor dann eingestellt ist, wissen wir sowieso nicht. Was lernen wir daraus? Websites müssen aus dem Inhalt heraus gestaltet werden. Das Layout muss ich an den Punkten verändern, wo es visuell und/oder aus Usability-Sicht nötig ist. Gut möglich, dass das Layout darum mehr als nur zwei Breakpoints benötigt: Denn zwischen den klassischen Device-Grössen spielt die Musik.

2) Ich nutze bei der Gestaltung von Websites immer einen Raster.

Wer beim Gestalten von Websites einen Raster benutzt, macht es dem Programmierer einfacher. Die Gestaltung ist nicht mehr willkürlich sondern folgt Regeln und vor allem einer nachvollziehbaren Logik. Josef Müller-Brockmann lässt grüssen. Auch im Web.

3) Ich nutze nie mehr InDesign für Webdesign.

InDesign ist ein tolles Programm. Für Print. Für Webdesign eher weniger. Einer der vielen Gründe: Die 100% Ansicht entspricht nicht 100% (dafür gibt es zwar Abhilfe - aber daran denkt kaum ein Grafiker - siehe folgenden Blogbeitrag). Mittlerweile gibt es zig bessere Programme für das Gestalten von Websites: Sketch, Adobe XD oder Figma, um nur einige zu nennen. Sie alle sind durch zahlreiche Plugins erweiterbar und mit ihnen lassen sich auch relativ einfach klickbare Prototypen erstellen. Neues Jahr und somit höchste Zeit, um etwas Neues zu lernen.

4) Ich bin mir bewusst, dass 72dpi nichts mit Webdesign zu tun hat.

72dpi ist eine Angabe für Print. Wirklich. 
72dpi = 72 Punkte per Inch.
Also 72 Punkte per 2,54 Zentimeter.
Oder 28,35 Punkte per Zentimeter.

Bildschirme haben auch keine Dots sondern Pixel. Heutige Bildschirme haben auch viel höhere Auflösungen. Ein paar Beispiele gefällig:

• 27 Zoll iMac mit Retina Display: 217ppi
• 13 Zoll MacBook Pro: 227ppi
• iPad Pros: 264ppi
• iPhone 8: 326ppi
• iPhone 11 Pro: 458ppi
• Samsung Galaxy S10: 550ppi

Und jetzt? dpi und ppi sind für’s Webdesign irrelevant. Es zählen nur die Pixel. Die physischen Pixel einerseits und die CSS-Pixel andererseits. Bei «normalen» Screens entspricht ein CSS-Pixel einem physischen Pixel und bei Retina-Screens entspricht ein CSS-Pixel vier physischen Pixeln (2x2). Bei Super Retina-Displays entspricht ein CSS-Pixel neun physischen Pixeln (3x3). Zu kompliziert? Ich erklär’s Dir gerne nochmals bei einem Bier.

5) Ich weiss, dass ein grosser Bildschirm nicht zwingend MausOver-Interaktionen zulässt.

Devices mit kleinen und mittelgrossen Bildschirme (also Mobiles und Tablets) werden per Finger und grosse Bildschirme (also Computer) werden per Maus bedient. So die weitverbreitete Meinung. Welch Irrtum!

So hat ein 12,9 Zoll iPad Pro einen grösseren Bildschirm als manch ein Laptop. Und zudem gibt es zahlreiche Windows-Laptops mit Touchscreens. Darum sollte man MouseOver-Menüs und auch andere MouseOver-Interaktionen mit grosser Vorsicht einzusetzen: Sie funktionieren nämlich auf Geräten mit Touchscreens nicht oder nur sehr schlecht.

6) Ich kläre die Lizenzbedingungen für Webfonts bevor ich das CI dem Kunde verkaufe.

Noch so ein Klassiker. Bei Webschriften gibt es verschiedene Lizenzmodelle: Pay-per-View, einmalige Gebühr, Monatsabo nach Anzahl Pageviews, etc. Es gibt günstige Anbieter und auch sehr teure. Ist der Kunde auch wirklich bereit, die Kosten für die Webfonts zu bezahlen? Bitte klären bevor die Drucksachen in den Druck gehen. Es wäre schade um die aufwändig gestaltete Corporate Identity, wenn das Budget nicht mehr für dieselbe Schrift für’s Web reicht.

7) Bevor ich dem Kunde das Layout für die Website präsentiere, prüfe ich die Machbarkeit mit einem Developer.

Um böse Überraschungen und enttäuschte Kunden zu vermeiden, lohnt es sich einen Programmierer über das tolle Layout schauen zu lassen, bevor es dem Kunden gezeigt und verkauft wird. Ein guter Frontend-Programmierer erkennt schnell potenzielle Schwachstellen eines Designs und wird sicherlich gerne Verbesserungsvorschläge anbringen. Es lohnt sich Programmierer als Partner und nicht als reine Lieferanten anzusehen.