Definition

Flat Design kommt aus dem Bereich des Interface Designs von Applikationen und Internetpräsenzen. Wie der Name, „flat“ wie flach und „Design“ wie Gestaltung, bereits deutlich macht, geht es dabei um die möglichst einfache Gestaltung einer Benutzeroberfläche. Genauer gesagt heißt das, dass auf Schattierungen, aufwendige 3D Effekte sowie Verzierungen fast gänzlich verzichtet wird. Komplexe Objekte werden ausschließlich durch Umrisse oder die Silhouette zweidimensional dargestellt. Man handelt getreu dem Motto „weniger ist mehr“. Flat Design stellt also den Gegenpart zum sogenannten Skeumorphismus dar, denn dort wird darauf abgezielt, Objekte wie Uhren oder Telefone grafisch ins Interface eingebettet, um die Interaktion mit dem User zu fördern (beispielsweise das Diskettensymbol in jeder Textdatei als Knopf zum Speichern).

Trend geht in Richtung Flat Design

Derzeit geht der Trend bei Hardware- und Softwareentwickler klar zum Flat Design. Beispiele hierfür sind Microsofts Windows Phone und die Kachelfunktion bei Windows 8 und höher. Ebenfalls auf diese Form des Interface setzt Apple. Die Firma aus dem Silicon Valley steht seit Firmengründung für möglichst einfach zu handhabende Benutzeroberflächen. Mit dem iOS 7 änderte man zudem alle bisher bekannten UI-Elemente hin zu vereinfachten Versionen.

Das Prinzip des schlanken Designs ist gerade erst auf dem Vormarsch und wird sich weiter etablieren. Dennoch geht der Trend dahin, dass Interfaces zwar so kompakt und trivial wie möglich gehalten werden, aber mit minimalen Effekten wie beispielsweise Schattierungen versehen werden, um der oben genannten Gefahr zur Langeweile aus dem Weg zu gehen.

Im sich ein Bild von guten Websites die im Flat Design erstellt wurden zu machen können Sie awwwards einen kurzen Besuch abstatten.

Vorteile

Der Vorteil dieses minimalistischen Prinzips liegt in seiner einfachen Anwendung. Nutzer finden sich sofort auf der Benutzeroberfläche zurecht. Des Weiteren beschleunigt das schlanke Design die Ladezeiten von Webseiten sowie eine einfache Anpassung an verschiedene Bildschirmgrößen. In Zeiten der Coexistenz von PC und Smartphones ist letzterer Punkt auf dem Vormarsch der digitalen Endgeräte besonders von Bedeutung in Zukunft. Zudem rückt beim minimalistischen Design der Content in den Vordergrund. Unternehmen können Kunden gezielt auf ihren Content aufmerksam machen, ohne sie mit ausgefallenen Interfaces zu verwirren.

Nachteile

Aufgrund der Einfachheit von Objekten fällt es Unternehmen zunehmend schwer, individuelle Interfaces zu erstellen, welche denen der Konkurrenz nicht ähneln. Auf Dauer könnte dieser Trend also eher zum Langweiler werden. Des Weiteren besteht die Gefahr, dass Webseiten dadurch nicht responsive sind. Dem Nutzer fällt es durch das einfache Interface möglicherweise schwer, klickbare von nicht-klickbaren Elementen zu trennen.

Tipps und Tricks

Bei der Erstellung solcher Objekte ist auf die Pixelgenauigkeit zu achten. Sowohl bei Vektor- als auch bei Rastergrafiken müssen die Pixel genau sein, um eine gute Skalierbarkeit zu gewährleisten. Außerdem ist es von Vorteil, mit Farben zu experimentieren. Die komplexen Objekte werden möglichst vereinfacht, aber mit Hilfe von lebhaften Farben ansehnlich gestaltet. Ein weiterer Tipp für ein gutes Design ist die Verwendung von Typografie anstatt von Standardschriften.

Mobile First

Definition: Mobile First

Heutzutage gibt es viele Menschen, die mobile Geräte wie Smartphones oder Tablets sehr oft bis ausschließlich zum täglichen Surfen im Internet benutzen. Infolgedessen müssen Webseiteen dafür optimiert werden. Um dies zu gewährleisten gibt es viele Anbieter, die nach dem Konzept „Mobile First“ arbeiten. Das bedeutet, wie der Name schon sagt, dass die Version der Webseite, die für die Mobilgeräte vorgesehen ist, zuerst entsteht und optimiert wird. Dadurch erhoffen sich Webdesigner mehr Aufrufe ihrer Seite.

Motivation:

Warum sollte man die mobile Version einer Website zuerst programmieren? Was motiviert einen dazu? Die Antwort liegt auf der Hand: Die langfristige Entwicklung des Internets und des Webdesigns weisen auf einen klaren Trend hin. Während früher jede Website auf Desktops zugeschnitten war, so gibt es mittlerweile immer mehr Internetseiten, die für mobile Geräte optimiert werden. Das hat zur Folge, dass immer mehr Haushalte gar keinen Desktop oder Laptop mehr besitzen. Es wird viel mehr mit Tablets und Smartphones gearbeitet. Dies wird auch noch dadurch unterstützt, dass es für die mobilen Geräte immer schnellere Datenverbindungen gibt.

Vorteile:

  • Man geht immer mit dem Trend (immer mehr Nutzer, die ausschließlich Mobilgeräte nutzen).
  • Webseiten werden oft auf das Wesentliche begrenzt. Damit profitieren auch PC-User von „Mobile First“
  • Durch bessere Übersicht und komprimierten Inhalt kann die Webseite später besser angepasst und verändert werden.
  • Man muss in der Regel nur eine Version der ganzen Webseite verwalten (nicht eine mobil- und eine desktopoptimierte Version)

Tipps:

Dieses Konzept zu nutzen ist nicht immer die richtige Wahl. Zuerst muss man sich über einige Punkte im Klaren sein. Eine Webseite wird normalerweise für Desktop-Nutzer programmiert. Nutzer von Mobilgeräten stehen in dem Fall an zweiter Stelle. Dies bringt demnach auch viel mehr Aufwand mit sich. Dementsprechend sollte man sich über folgende Punkte vor der Realisierung der Webseite Gedanken machen:

  • An wen ist meine Seite gerichtet?
  • Was soll meine Webseite hauptsächlich übermitteln?
  • Welche Punkte auf der Webseite sollten auch mobile Nutzer sehen können?

Verfolgt man diese Tipps, so steht einer erfolgreichen Webseite nichts mehr im Wege.