Designtrends: Was macht Sinn?

In letzter Zeit schießen wieder mehrere Designtrends aus den Tiefen des Internets. Doch welcher macht für Euer Projekt Sinn? Flat-, Responsive- oder One Page-Design? In diesem Artikel möchte ich Euch einmal erklären, warum und wann Ihr diese einsetzen solltet.

Ein paar Fundgruben für Templates und Kits findet Ihr am Ende des Artikels.

Must Have: Responsive Design

Responsive DesignResponsive Design bedeutet, dass sich die Darstellung Eurer Website an das jeweilige Gerät anpasst, mit dem die Website aufgerufen wird. Die Größe und Auflösung variiert bei Laptops, Tablets und Smartphones teilweise erheblich, sodass es in der heutigen Zeit immer Sinn macht ein Responsive Design für Eure Seite zu nutzen. Erreicht wird diese Reaktionsfähigkeit in den meisten Fällen durch das Verwenden von HTML5 und CSS3.

Wie Eure Website auf anderen Endgeräten aussieht, könnt Ihr im Internet mit einem Responsive Design Viewer testen.

Flach aber nicht langweilig: Flat Design

Flat-Design bedeutet einfach aber funktional.  Alles nach dem Motto „Weniger ist mehr“ gibt es beim Flat-Design keine aufwendigen 3D-Effekte und Verzierungen. Falls Ihr jetzt immer noch keine Vorstellung habt, wie das Ganze aussieht, umgesetzt wurde diese Design-Art gerade erst bei Windows 8 und iOS 7.

Flat-Design Login
Beispiel für einen Anmeldebildschirm im Flat-Design

Das Design ist hier wieder funktionales Werkzeug und lenkt den Besucher nicht durch Effekte ab. Ein weiterer Vorteil einer Website im Flat-Designs ist, dass diese der ideale Ansatz für ein Responsive Design ist. Es ist einfach viel flexibler und leichter anzupassen, als ein klassisches Design, welches auf viele Bilder und Effekte baut.

Einen Ableger des Flat-Design gibt es mittlerweile ebenfalls. Das Long-Shadow-Design gleicht dem Flat-Design, einziger Unterschied ist, dass auf den Icons übermäßig lange Schlagschatten zu finden sind. Es ist also nur eine Weiterentwicklung des ursprünglichen Flat-Designs und wird vermutlich nicht die Einzige bleiben.

checkdomain-Logo: Long-Shadow-Design
Checkdomain-Logo im Long-Shadow-Design

Eine Seite – Alle Informationen: One Page-Design

Beim One Page- oder auch Single Page-Design befindet sich der komplette Inhalt auf einer Seite. Navigiert wird auf der Website durch Scrollen nach unten oder zur Seite. Wenn Eure Website nur wenig Inhalt hat oder Ihr nur 1 – 2 Artikel zum Verkauf anbietet, ist diese Variante genau die richtige für Euch. Verbunden mit Parallax-Scrolling (Inhalt- und Hintergrundebene werden in verschieden Geschwindigkeiten bewegt) lassen sich schöne Tiefen-, Einblend- und Ausblendeffekte erzielen.

Ein gutes Beispiel für einen One Page-Shop ist der Stripe-Shop. Der Shop ist Open Source und steht auf GitHub zur Verfügung.

Stripeshop Demo
Quelle: https://shop-demo.parseapp.com/

Wenn Ihr sehen wollt, was mit Parallax Scrolling bei einer One Page Seite erreicht werden kann, sind die unteren genannten Seiten Eure Anlaufstelle.

  • http://www.kitkat.com
  • http://40.wwf.fr
  • http://www.quinq.jp
  • http://lookbook.bolia.com

Fundgruben

Unter den aufgeführten Links findet Ihr komplette Templates und Grafiken, die Ihr zur Umsetzung Eurer Seite benötigt.

Responsive Design

Flat-Design Kits

One Page Templates

Responsive, Flat, One Page Sammlung

Noch keine Stimmen.
Bitte warten...

Schreibe einen Kommentar

Die von Ihnen hier erhobenen Daten werden gemäß unserer Datenschutzerklärung zur Veröffentlichung Ihres Kommentars in unserem Blog verarbeitet.