Webdesign f�r Printgestalter

Joely Tafanalo Dieser Beitrag soll weniger die legitimen Diskussionen über Sinn und Unsinn zu laufenden Entwicklungen befeuern, als vielmehr praktisch Hand bieten beim Ge­stalten für Bildschirme. Es ist mittlerweile zur Realität geworden, dass wir Publisher fast ausschliesslich digital gestalten und immer mehr neben dem geliebten Medium aus Zellstoff auch Bildschirme jeglichen Ausmasses bespielen.

Gedanken zu Webdesign

Im weiten Feld des Mediendesigns ist Webdesign eine eigene Disziplin. Per Definition beschreibt sie die visuelle, funktionale und strukturelle Gestaltung von Applikationen oder Websites für das Internet. Die hiermit verbundenen Gesetzmässigkeiten gelten meist gleichermassen für Digital Signage wie für Digital Publishing.

Bei der technischen Umsetzung von Websites spricht man treffender von Webentwicklung. Beide Disziplinen sollten jedoch ineinandergreifen und gemeinsam betrachtet angegangen werden. Was für Print schon länger gilt, lässt sich beim Screen- oder Webdesign gar nicht mehr vermeiden: Nur Gestaltungskompetenz gepaart mit Medienkompetenz und einem technologischen Verständnis führt zu akkuraten Ergebnissen.

Ein Webdesign lässt sich auf das grafische Design eines Bildschirmes reduzieren, bei welchem der Publisher einzig für eine gutaussehende Oberfläche sorgt. So wie sich jedoch das Web entwickelt hat, sind Mitdenken, Vorausdenken und Umdenken gefordert. Konkret wären dies die Disziplinen Konzept, Design, Interaktion und Programmierung, die zusammen Erlebnisse für das Web kreieren. Deshalb gilt: Zu Risiken und Nebenwirkungen der Screengestaltung auch die Webentwickler fragen.

Mobile oder Desktop First?

Was die Entwicklergemeinde zum Teil spaltet, muss Gestalter nicht unnötig aufhalten. Kommt man vom klassischen Printdesign, ist der Ansatz, mit der grossen Desktopansicht zu beginnen, völlig angebracht. Im Webdesign liegt oft bereits ein gedrucktes Produkt vor oder zumindest Corporate-Design-Richtlinien, welche an Print ausgerichtet sind. Hier ist es einfacher, zuerst gross zu denken und daraus dann die kleineren, responsiven Ansichten zu generieren.

Aus Entwicklersicht macht der Ansatz «Mobile First» durchaus Sinn. Stück für Stück werden dann nur die effektiv notwendigen Elemente hinzugefügt und eine Seite wächst. Je nach zugrunde liegender HTML-Rendering-Engine werden Webseiten im Browser unterschiedlich dargestellt. Eines sollten sich deshalb screenaffine Publisher merken: Es ist nahezu unmöglich, dass eine Website oder ein digitales Produkt auf jedem Gerät gleich (gut) aussieht, wie auf dem Entwurf. Muss sie auch nicht, denn hier spielen Inhalte und deren Kontext eine noch wichtigere Rolle.

Retina oder HiDPI?

Auflösungsunabhängigkeit bleibt auch nach Jahren der technologischen Innovation ein Traum. Je fragmentierter die Anbieter und deren Geräte, desto weniger gilt die altgediente Faustregel von 72 ppi für das Web. Immer höhere Auflösungen verbessern das Nutzererlebnis, erschweren aber zunehmend die korrekte Medienproduktion. Wer ausschliesslich mit Vektoren gestaltet, baut sein Projekt am besten in der Standardgrösse nach Gerätepixeln auf. Beim Export wird dann entsprechend dem geforderten Faktor exportiert.

Als neue Faustregel sei eine Exportgrösse von 200% geraten, da dies für die meisten Fälle noch passabel aussieht. iOS gibt für Retina die Namenskonvention grafikname@2x.png bzw. @3x vor. Die Android-Plattform von Google wartet gleich mit vier weiteren Grössen auf: 1.5× (HDPI), 2× (XHDPI), 3× (XXHDPI), 4× (XXXHDPI). Hier heissen alle Grafiken gleich, liegen aber in entsprechenden Ordnern. Im Desktop-Bereich gewinnen die hochauflösenden Bildschirme erst langsam an Bedeutung. Vor allem bei iMacs mit 5K-Auflösung sind die Ersteller von Website-Inhalten auch künftig gefordert. In der Regel ist hier die Rücksprache mit dem Webentwickler oder dem Lieferanten angebracht.

Ein gängiger Ansatz ist es, ein Pixelbild in doppelter Grösse bzw. Auflösung zu laden und entsprechend der Bildschirmgrösse zu skalieren. Andere Websites starten beim Laden eine Browserabfrage, die dann entsprechend der Gerätebeschaffenheit das passende Bild lädt.

Retina-Tipps

• Retina muss nicht sein: Je nach Zielgruppe oder Gerätean­for­derung reicht auch die Standardauflösung
• Gestalte für die Mehrheit: Längst nicht alle Besucher der Website sind technisch auf dem neuesten Stand. Ein Blick in die Statistiken hilft weiter.
• Kenne deine User: Die Befürfnisse und Anforderungen an Webdienste sind so vielfältig wie Ihre User. Gute Statistiken zur Internet-Nutzung bietet z.B. das Portal Statista.com.
• Kenne deine Plattform(en): Ob mobile oder ausgewachsenes System, unbedingt die Guidelines lesen und verstehen.
• Lerne Fachchinesisch: Jede Plattform hat ihre spezifische Sprache und Namenskonventionen, die matchentscheidend sind.

Relative statt absolute Werte

Nicht wenige Publisher bekunden Mühe, sich vom bisherigen Pixel­denken in absoluten Werten zu lösen. Vor allem beim Aufbau von reaktionsfähigen Websites wird gerne von prozentualen und/oder relativen Werten ausgegangen. Eine Spalte nimmt dann einen bestimmten %-Wert der Gesamtbreite ein oder ein Textelement hat ein Grössenverhältnis zum übergeordneten Text. «rem» ist relativ zur Schriftgrösse im HTML-Element, «em» orientiert sich am jeweiligen Eltern-Element. Der Spaltenaufbau mit einem der zahl­reichen Grid-Systeme (ähnlich dem Typoraster) hilft in jedem Fall enorm und erleichtert auch die Zusammen­arbeit mit Entwicklern.

Der Webdesign-Workflow

Es gibt kein richtig oder falsch, doch es hat sich mehr als bewährt, genügend Zeit in die Konzeption und Planung zu investieren. Die Phase des Briefings und Strukturaufbaus wird an dieser Stelle jedoch ausgeklammert.

Bei der eigentlichen Gestaltung gelten ähnliche Gesetzmässigkeiten wie auf Papier – Farbkontraste, Proportionen und Typografie sind selbstverständlich auch hier wichtig. Im Vergleich zum herkömmlichen Print­design darf auf Bildschirmen ruhig grosszügiger mit Weissraum und Raum umgegangen werden. Er ist gratis und schafft ein besseres Erlebnis.

Für den Screenbereich kommt der Umgang mit Farbe im Web dazu. Dass RGB nicht gleich RGB ist, wissen natürlich alle Publisher. Es lohnt sich, mit aktiviertem Softproof zu arbeiten und möglichst früh auf verschiedenen Endgeräten und Plattformen zu testen, um Überraschungen zu vermeiden. Besonders hervorzuheben ist die Wichtigkeit von etablierten Design-Patterns im Web – Entwurfsmuster, die eine wiederverwendbare Lösung für häufige Gestaltungs- und Anwendungsfragen bieten, sei dies für die Gewichtung und Aufteilung von typischen Seitenelementen (Header, Footer, Content, Anzeigen) oder den Aufbau von Navigationen und Interaktionen. Es gibt hierzu genügend Fachliteratur in digitaler oder gedruckter Form.

Vom Entwurf zum Prototyp

Trotz den vielfältigen Möglichkeiten des digitalen Entwurfs auf Tablets (beispielsweise mit Comp CC) empfiehlt sich hier das gute alte Papier. Scribbles oder Grobentwürfe entstehen am schnellsten und einfachsten auf Papier. Wahlweise gibt es im Internet zahlreiche Vorlagen für Browserfenster oder Smartphone-Bildschirme zum Downloaden und Ausdrucken.

Abhängig von der Komplexität und Grösse des Projektes leisten Wire­frames, gefolgt von funktionalen Prototypen eine grosse Hilfe. Noch bevor sich die Beteiligten in der Diskussion über Farben und Schriften verlieren, liefern simple, farblose Wireframes ein Bild der Struktur und der Funktionsweise der späteren Website. Im Prototyping geht man einen Schritt weiter und testet auch das Verhalten des Users und allfällige Interaktionen mit Navigationselementen. Nützliche Program­me für Wireframes können neben dem eigentlichen Design-Programm auch OmniGraffle, Keynote (beide nur Mac) oder Powerpoint sein. Für die Erstellung von klickbaren Prototypen gibt es lokale Programme wie auch Online-Tools. Hier seien InVision, Balsamiq, Axure, JustInMind Prototyper etc. erwähnt. Adobe arbeitet zurzeit an einem vielversprechenden Werkzeug mit dem Arbeitstitel «Project Comet».

Typografie im Web

Die Verwendung von Schrift hat sich in den letzten Jahren zum Glück extrem gemausert, nicht zuletzt dank der technischen Entwicklung. Waren in den Anfängen des Internets lediglich eine handvoll Schriftfamilien verwendbar, stehen Webdesignern heute (fast) alle erdenklichen Schrifttypen zur Auswahl.

Verantwortlich dafür sind Webfonts. Erhältlich im Web Open Font Format (WOFF) und für Nutzer älterer Versionen des Internet Explorer das Embedded-OpenType-­Format (EOTF). Webfonts ermöglichen es Publishern, im Web Schriftarten zu verwenden, die nicht auf den Computern der Website-Besucher installiert sind. Die Fonts sind auf dem eigenen Web-Server oder bei einem Cloud-Dienst hinterlegt. Ausschlaggebend ist jedoch nicht das Format, sondern das Hinting, welches die Darstellungsqualität der Schrift im Browser und auf dem Screen verbessert. Vorsicht übrigens bei kosten­losen Schriften: Sie verfügen häufig über kein Hinting oder lediglich über ein Auto-Hinting. Google Fonts bietet eine umfangreiche und kostenlose Sammlung von Webfonts an. Der Dienst Typekit ist Teil der Adobe Creative Cloud und als solcher nahtlos in alle Anwendungen integriert. Bevor eine Schrift für den Website-Entwurf verwendet wird, empfiehlt es sich immer, abzuklären, ob auch eine entsprechende WOFF-Schrift verfügbar ist.

Export der Elemente

In der Praxis scheint es nach wie vor verbreitet zu sein, den Entwicklern eine JPG- oder sogar PDF-Datei von verschiedenen Screens abzuliefern. Im Hinblick auf Effizienz, Qualität und gute Zusammenarbeit plädiere ich einzig für die Übergabe der notwendigen Elemente in vorher abgesprochener Form. Das Wasserfallprinzip darf im Web-Projektmanagement durchaus in Frage gestellt werden.

Das tot­gesagte Format Scalable Vector Graphic (SVG) erlebt durch seine Vorzüge im modernen Web eine Renaissance. Bei Pixelgrafiken sprechen Farbraum und Transparenzen für PNG. Programme wie Sketch von Bo­hemian Coding oder Illustrator und Photoshop beherrschen den Export aller relevanten Grafikformate und sogar Cascading Stylesheets (CSS). Diese sind, kurz gesagt, das Web-Pendant zu Absatz- und Objektformaten im Printlayout.

Da Gestaltung und Programmierung selten in den gleichen Händen liegen, sollten Styleguides definiert werden, um die Konsistenz der Umsetzung zu sichern. In Analogie zu einer Printkampagne sind auch hier Elemente wie eingesetzte Farben, typografische Struktur, Bildsprache oder wiederkehrende Elemente (Buttons, Eingabefenster) festgehalten.

Das Werkzeug der Wahl

Ein altes Sprichwort sagt: «Ein schlechter Handwerker schimpft immer auf sein Werkzeug». Auf den Screenbereich angewendet ist es heute wichtiger denn je, sich mit den branchenüblichen Werkzeugen und Plattformen auszukennen um ein gutes Produkt abzuliefern. Bei der Wahl ist es aber wichtig, dass man sich bei der Umsetzung der Gestaltung nicht in seiner Kreativität eingeschränkt fühlt.

Neben den üblichen Verdächtigen hat auch Newcomer Affinity Designer als Webdesigntool auf sich aufmerksam gemacht. Für schnelle und brauchbare Ergebnisse ohne Web-CMS im Rücken sorgt nach wie vor Muse CC. Vor allem, wenn mehrere Templates parallel oder verschiedene Screengrössen gestaltet werden, ist ein Tool nützlich, welches mehrere Zeichenflächen bietet. Mein Favorit ist Illustrator, weil der Weg vom Wireframing zur finalen Gestaltung so kurz ist. Immer schon wurde Photoshop für Webdesign verwendet. Mit den neusten Funktionen und dem speziellen Designbereich (Technologie-Vorschau) sehen sich viele bestätigt.

Fazit und Ausblick

Auch wer lieber auf vorprogrammierte Templates und Web-CMS-Systeme wie WordPress oder Drupal setzt, kommt um die Werkzeuge und das Know-how für eine mediengerechte Darstellung nicht herum. Zurzeit schiessen Online-Design-Tools wie Froont, Webflow oder Wix wie Pilze aus dem Boden, weshalb es sich erst noch weisen wird, in welche Richtung die Reise geht. Technologien wie CSS, HTML und Javascript sind längst etablierte Standards im modernen Web, doch die Veränderungen im Gerätebereich gehen weiter. Daraus resultieren erhöhte Anforderungen an Screen- und Webdesigner, welche aber dank neuer, vernetzter Workflows auch erfüllbar bleiben.