6 zeitlose Klassiker des Webdesigns - Robin Vieregge

6 zeitlose Klassiker des Webdesigns

Unter den unzähligen Möglichkeiten, eine Website oder App zu designen, gibt es stets Designarten, die sich als echte, erfolgreiche Klassiker herausstellen. Die wichtigsten werden hier einmal vorgestellt.

1: Material Design

Hinter dieser Designsprache von Google verbirgt sich eine Art des Designs, die die Funktion der jeweiligen Website oder App in den Vordergrund stellt. Eine benutzerfreundliche Interaktion soll durch eine verbesserte Orientierung und verkürzten Navigationswegen gewährleistet werden. Dabei werden großflächige Elemente genutzt, die Farbkontraste, Icons und verschiedene Schriften verwenden. Der Nutzer soll sich Intuitiv zurechtfinden und schnell einen Überblick über die Website bzw. die App gewinnen.

2: Card Design

Auch dieses Design setzt auf eine intuitive Verwendbarkeit durch den Nutzer. Es eignet sich besonders für Content-lastige Seiten, die an Übersichtlichkeit gewinnen sollen. Dazu werden ganz simple, rechteckige, visuelle Karten verwendet, die aus einem ansprechendem Bildteil und einem dazugehörigen, kurzen Text bestehen. Da dieses Format in alle Richtungen grenzenlos skalierbar ist, ist es auch für beinahe alle Endgeräte adaptierbar. Durch verschiedene Bildgrößen lässt der Nutzer sich führen und wichtige Themen wie News fallen dadurch besser auf.

Im Allgemeinen gibt es hier zwei verwendete Systeme:

Im Grid-System ist bereits festgelegt, wie breit die einzelne Karte ist, während sowohl die Breite, als auch die Höhe im Masonry-Layout flexibel bleibt. Mit den kostenlosen jQueryMasonry Plugins kann dieses Layout imitiert werden.

3: Scrollytelling

Erläuterung zum ScrollytellingIn Deutschland noch nicht sehr bekannt, aber in Amerika bereits weit verbreitet – das sogenannte Scrollytelling. Bei dem Begriff handelt es sich um eine Kombination der englischen Wörter „Scrolling“ und „Storytelling“. Bei Weibsites mit diesem Design handelt es sich meist um One-Pager, es ist also nur eine einzige lange Microsite vorhanden. Diese kommt völlig ohne Navigationselemente aus, da die Navigation allein übers Scrollen vorgenommen wird. Wichtig hierbei ist eine lineare Handlung der Story. Diese wird durch die Scrollgeschwindigkeit des Users aktiv beeinflusst. Ein solches Design erfordert allerdings sehr genaues und geschicktes Planen, da es sonst doch zu Unübersichtlichkeiten kommen kann.

4: Hero (Video) Header

Die Hero Header sind schon länger bekannt. Es handelt sich um visuelle und textliche Elemente, die das Display des jeweiligen Endgerätes vollständig oder fast vollständig einnehmen. Die Navigation wird so erleichtert und besonders im B2C-Sektor, also dem Buisness-to-Customer Sektor wird dadurch ein starker erster Eindruck beim jeweiligen Nutzer erzeugt.

5: Interaktive Loading Screens

Bei langsam ladenden Bilder oder Seiten kommt beim Nutzer schnell Langeweile und Frustration auf, was oft dazu führt, dass die jeweilige Seite oder das jeweilige Bild einfach wieder weggeklickt wird. Um dem vorzubeugen, werden immer mehr interaktive Loading Screens verwendet. Dabei wird der Nutzer während der Ladezeit mit unterhaltsamen Elementen beschäftigt, wie zum Beispiel Entertainment-Elemente oder interessante Informationen. Auch der sogenannte Hover-Effekt kann die Aufmerksamkeit des Nutzers oftmals lange genug halten, bis der Ladevorgang abgeschlossen ist. Dabei richtet sich der Loading-Screen nach der Maus-Bewegung des Users. Sogar Minigames sind möglich. Mit einem kreativen Design bestehend aus visuellem Erlebnis und Sound kann solch ein Loading Screen einen äußerst gelungenen Einstieg in die eigene Webpräsenz ermöglichen.

6: Combining Typefaces

War dies früher noch ein absolutes Tabu, ist es heute ein sehr beliebtes Mittel um vor allem Content-Felder interessanter und auch übersichtlicher zu gestalten. Beim Combining Typefaces geht es darum, mit immer größer werdenden Schriften und verschiedensten Textfeldern den Inhalt einer Seite ansprechender zu gestalten. Dabei werden sehr oft Serifen-Schriften mit serifloser Schrift kombiniert. Dies hat sich bereits als äußerst erfolgreich und beliebt bei den Nutzern herausgestellt.

Grafiken: Michell Zappa & David Bleasdale