5 Retro-Webdesigns: Ein Hauch von früher

15. Januar 2015 von Sebastian Maier

Retro Webdesign Style Belle Epoque

Was alt ist, muss nicht zwangsläufig veraltet sein! Das beweist die ungebrochene Beliebtheit des Retro-Styles sowohl im Print- als auch im Webdesign. 

Mit “retro” ist dabei die aktuelle Adaption von Stilrichtungen gemeint, die vor ein paar Jahrzehnten modern waren. Als Gestaltungselement zeichnet sich der Retro-Stil durch ungesättigte Farben, grobkörnigere oder “verwitterte” Strukturen, auffällige, oftmals etwas verschnörkeltere Typografie und Designkomponenten wie Banner, Plaketten oder Bänder aus.

Anhand der folgenden fünf Webdesign-Beispiele möchte ich euch neben eleganten Designs vor allem zeigen, welche Inspirationen für eine technische Umsetzung daraus gezogen werden können.


www.dishoom.com

Retro Webdesign dishoom


Die drei in London verteilten Dishoom-Filialen bringen das Flair der in den 60er Jahren im damaligen Bombay sehr populären iranischen Cafés zurück. Das Interieur der Cafés ist dementsprechend inspiriert von der damaligen Zeit und deren Stil.

Doch nicht nur die Ausstattung der Dishoom-Cafés ist Retro Style pur, auch das Webdesign versetzt den Besucher ein paar Jahrzehnte in die Vergangenheit zurück. Gleichzeitig spiegelt es die Gemütlichkeit der Cafés wieder, die wie schon zu den Blütezeiten in Bombay einen Ort der Entspannung und des Austausches für jedermann bieten möchten.


Technische Inspirationen

Das Responsive Design in Kacheloptik lässt es zu, dass auf der Website verschiedene gedeckte Farben zum Einsatz kommen. Unterstrichen wird diese Vintage-Optik durch den Einsatz von älteren Fotografien, die das damalige Lebensgefühl in einem ursprünglichen Bombay-Café wieder heraufbeschwören.

Die Wertigkeit der Seite wird durch verschiedene Animationen weiter verstärkt. Beim manuellen Scrollen beispielsweise wird die Seitenansicht automatisch mit nachjustiert, sodass immer der gerade im Fokus stehende Bereich den Bildschirm voll einnimmt. Ein animierter Ladebildschirm sorgt zudem dafür, dass die aufgrund der großflächigen Bilder und Videos längeren Ladezeiten der Website gefühlt etwas kürzer wirken.

Beim sich unter “Journal” befindlichen Blog werden unten an der Seite durch eine Nachlade-Animation dynamisch weitere Artikel angezeigt. Verspielt ist die Mouseover-Animation bei den Social-Media-Buttons, die beim Darüberfahren mit dem Mauszeiger einen grauen Farbton annehmen.


www.chanel.com/fr_FR/Joaillerie/cafe-society

Retro Webdesign Chanel Responsive Design


Inspiriert von den 20er Jahren ist die neue Haute-Joaillerie-Kollektion von CHANEL. Diesen Look spiegelt auch die dazugehörige Landingpage im Responsive Design wider. Der schwarze Hintergrund setzt die in schwarz-weiß gehaltenen Bilder und Videos in Szene, die an die Eleganz vergangener Zeiten erinnern. Auch die schwungvolle Typografie ist von typischen Schriftarten in den “Golden Twenties” inspiriert.


Technische Inspirationen

Die Animationen auf der Seite unterstützen die Wirkung der Bilder und Videos. Mit einem Parallax-Effekt werden die Textkästen und Bilder beim Scrollen geschoben. Mit einem Klick rechts oben auf die Navigation verteilt sich diese als transparenter Overlay über den ganzen Bildschirm.

Die Landingpage steht damit in Hochwertigkeit, aber mit Sicherheit auch in Hochpreisigkeit, dem mit ihr beworbenen Schmuck in nichts nach. Letzteres betrifft nicht nur die Produktionskosten der Medien wie Bilder, Videos und Musik, sondern auch die Integration dieser Medien in die Website für eine gute Benutzerführung.

Die durchdachte Usability bemerkt man an Extras wie dem Play- und Pause-Button für die Musik, oder der Integration von Streaming-fähigen Elementen für Musik und Video, was die gefühlte Ladezeit reduziert. Um letztere noch weiter zu verringern, wurde eine Ladezustandsanzeige integriert.


agence-belle-epoque.fr/home

Retro Webdesign Belle Epoque


Die Webagentur Belle Époque versetzt den Besucher bereits mit ihrem Namen in die Zeit um die Wende vom 19. zum 20. Jahrhundert zurück. Das Webdesign steht dem in nichts nach! Die gedeckten Rosafarbtöne und der verschnörkelte Schriftzug erinnern an ein blühendes Europa und die allgemeine gesellschaftliche Lebensfreude vor dem 1. Weltkrieg.


Technische Inspirationen

Das Design sticht zudem besonders durch seine mobile Ansicht hervor. Wenn man oben links das Menü öffnet, wird der aktive Navigationspunkt in der Desktopversion durch zwei Pfeile eingerahmt. In der mobilen Version wird darauf verzichtet. Hier wird der aktive Navigationspunkt unterstrichen.


www.markgia.es

Retro Webdesign Margkia Retro Grafik


Die spanische Marketingagentur Markgia verbindet ihr Leistungsportfolio fantasievoll mit magischen Prinzipien und setzt diese Verspieltheit auch bei ihrem Retro-Webdesign fort. Besonders schön ist hier der Einsatz von Retro-Grafiken wie Bändern, Vorhängen, Vogelkäfigen etc.


Technische Inspirationen

Ein kleiner Wermutstropfen bei diesem üppigen Design ist die fehlende mobile Optimierung. Auch sind die Retro-Schriften größtenteils als Bilder eingebunden, was aus SEO-Gesichtspunkten nicht ideal ist die Suchmaschinen können Schriften aus Bildern (noch) nicht lesen. Dieses Problem kann auch nicht durch eine alternative Bildbeschreibung behoben werden.

Eine sinnvolle Lösung wären hier Webfonts im Retro-Stil. Vandelay Design bietet beispielsweise 30 Retro Fonts zum Download an. Auch auf 1001 Fonts sind einige Retro-Schriftarten zu finden. Ein weiterer Vorteil von Webfonts ist zudem, dass diese auf einem Retina-Display schärfer dargestellt werden.

Es gibt auch Situationen, in denen es Sinn macht, Schriften als Grafiken darzustellen, beispielsweise bei speziellen Positionierungen oder Verformungen. Hier kann es sich lohnen, schon frühzeitig im Design-Prozess den Webentwickler mit einzubeziehen.


www.cosyhair.at

Retro Webdesign cosyhair


Wenn man die Website des Friseur- und Make-Up-Salons COSY Hair aufruft, hat man das Gefühl, eine Zeitung aus den fünfziger Jahren in der Hand zu halten. Dies liegt an der Grobkörnigkeit der Bilder und an den Schriften, die an die Zeiten vor dem Digitaldruck erinnern. In der Moderne ist COSY Hair dennoch auch ein wenig geblieben – die Website ist komplett responsive.


Wie gefällt euch das Retro-Design? Habt ihr bereits Websites in diesem Style umgesetzt?

zurück
comments powered by Disqus