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.
Inhaltsverzeichnis:
Must Have: Responsive Design
Responsive 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.
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.
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.
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
- http://html5templates.com/
- http://wordpress.org/themes/search.php?q=responsive
- http://www.hongkiat.com/blog/free-joomla-responsive-themes/
Flat-Design Kits
- http://www.webdesignerdepot.com/2013/05/flat-ui-kit-free-download/
- http://graphicburger.com/blogmagazine-flat-ui-kit/
- http://dribbble.com/shots/947782-Freebie-PSD-Flat-UI-Kit
One Page Templates
Responsive, Flat, One Page Sammlung
