Bereits in einem früheren Blogpost mit dem Titel «Status Quo im Web Design?» haben wir uns mit «Design Prinzipien» befasst, die wir in unseren Konzepten jeweils anwenden. Es wird also höchste Zeit, die damals geschriebenen Zeilen zu revidieren, verifizieren und neue Ansätze zu etablieren.

Design principles

Form follows Function…

…und «content defindes design» sind Gestaltungsleitsätze, denen ein Web- und UX-Designer sein Leben lang begegnet. Obwohl ersterer seinen Ursprung bereits im 19. Jahrhundert hatte, ist er aktueller denn je, denn erst die Definition des Inhalts mit all seinen Elementen entscheidet, in welches «Raster» er gesetzt werden kann.
So kann es vorkommen, dass ein Designkonzept mit «Lorem ipsum»-Blindtext überhaupt nicht mit dem finalen Inhalt übereinstimmt und somit nicht funktioniert. 

Häufig werden dann auch noch Textzeilen optisch gekürzt und fürs Auge aufgehübscht, um bei der Designpräsentation keinen unangenehmen Fragen ausgesetzt zu sein. Sobald aber dann der Editorial Prozess ansteht und die Redaktion die Artikel mit reellem Inhalt abfüllt, werden diese Mängel unmissverständlich aufgedeckt. Da der Designprozess unter Umständen bereits schon fortgeschritten oder gar abgeschlossen ist, kann oft nur noch mit Notlösungen entgegengewirkt werden.

Abhilfe schaffen da vorgängige Gespräche mit den Stakeholdern, das in einem klaren Briefing endet – wie lautet die Message – dem Definieren der Inhaltskomponenten (Bild, Text, Video, Ton, Infografiken, etc.) und das Erfassen von User Stories – was muss die Plattform können. Erst der Abschluss dieser Phase ist die ideale Voraussetzung, um mit dem Designkonzept zu starten.

Responsive IST standard

Seit April 2015 bevorzugt Google Websites, die für mobile Endgeräte optimiert sind. Der enorme Anstieg an Suchanfragen von mobile Devices überstieg nach eigenen Angaben die Anfragen via Desktop bei weitem. Somit ist bei einem Redesign eine responsive Umsetzung unumgänglich.
Dabei ist es nicht einfach damit getan, den Inhalt auf das jeweilige Endgerät anzupassen und den Text 4 Pixel grösser zu setzen.

Responsive Design heisst auch, auf unnötige Javascript-Libraries zu verzichten, Reihenfolge von Komponenten zu ändern, Bilder in geräte-optimaler Grösse auszugeben und Klickflächen von Links und Buttons in touchfreundlicher Grösse und mit genügend Abstand zu kreieren.

Somit schafft man nicht nur die optimale Mobile-Lösung, sondern setzt die Voraussetzung für ein bestmögliches Nutzererlebnis, das die Erwartungen des Users erfüllt.

One Page, infinite Scrolling

Infinity scroll

Der Begriff «Above the Fold» war bis vor Jahren noch ein wichtiges Argument beim Design einer Website. So wird der Bereich einer Webseite bezeichnet, der für den Besucher auf den ersten Blick und ohne zu Scrollen sichtbar ist. Das Userverhalten auf den heute gebräuchlichen Touch-Devices ist geprägt von Swipe- bzw. Scroll-Gesten und hat diesen Grundsatz obsolet werden lassen. Besucht man die populärsten Communities wie Facebook, Twitter oder auch Newsportale wie 20min.ch ist man sich lange Lese- und Teaser-Strecken mittlerweile gewohnt und das vor Jahren noch gängige «Blättern» wirkt eher störend und unterbricht den Lesefluss.

Zudem begreift das Konzept einer One-Page-Seite jeder User sofort und die Absprungrate infolge Konfusion ist relativ gering. Einzige Voraussetzung dabei: der Inhalt muss scroll-tauglich sein und das Verhalten unterstützen, sowohl in der Aufbereitung und dem Aufbau der Information, als auch hinsichtlich der Ladezeiten.

Fullscreen und Backgrounds

Am meisten Aufmerksamkeit und Emotionen erreicht man nach wie vor über ein Bild: sei dies als Hintergrund unterstützend zum darüber liegenden Text, animiert oder gar als Video, alleinstehend, um eine Stimmung zu vermitteln oder als Storytelling-Element, mit subtilem Parallaxeffekt. Die Suche nach einem vorproduzierten Bild, das die Aussage trifft, die man vermitteln will, gleicht dabei einer Lotterie. Deshalb ist die Wahl eines Stockfotos in den meisten Fällen nicht optimal und man muss oft Kompromisse eingehen.

Dank dem Einsatz von «responsive images» kann dabei auch bei langsameren Verbindungen das optimale Bild ausgeliefert werden und man verhindert lange Wartezeiten.

Umgang mit Schriften

Typo

«Typografie im Web muss in erster Linie funktional sein.» Auch, aber nicht nur, denn durch die Verbreitung von Webfonts ist der Zugriff auf die unterschiedlichsten Schriftschnitte möglich. So kann man mit der richtigen Mischung der Schriften, dem sogenannten «Font pairing», dem Inhalt nebst der kommunikativen eine weitere Ebene verleihen, nämlich die der Dramaturgie. Eine prägnante Headline im richtig gewählten Font, kann die Message der Website zusätzlich unterstützen, denn durch die Gewichtung der Headline und der Grösse, die sie einnimmt, wird sie fast schon wie ein Bild wahrgenommen. Dabei halten auch fürs Web eher untypische Schriften wie Schreibschriften oder Fonts im Vintage-Retro-Look Einzug und passen grossartig zu modernen Grotesk-Fonts.

Redundanz vermeiden

Während Redundanz in der klassischen Printwerbung ein gern eingesetztes Stilmittel darstellt, ist im Web möglichst darauf zu verzichten. Ein Suchfeld kombiniert mit dem Icon einer Lupe braucht nicht noch den Titel «Suche», auf unnötigen «Ballast» verzichten heisst, sich aufs Wesentliche zu konzentrieren und dies immer aus der Sicht des Benutzers. So schafft man eine erhöhte User Experience und wiederkehrende User. Grundsätzlich gilt: Erzähl deine «Geschichte» (sei es in Wort oder als Bild) nur einmal, dafür gut. Eine mehrfache Nennung derselben Information ist nicht aussagekräftiger, ganz im Gegenteil. Die Information wird durch Redundanz verwässert, ist verwirrend und schlussendlich leidet die Aufmerksamkeit darunter.