Alles, was Sie über Flat Design wissen müssen

4

Flat Design entstand nach der Untersuchung von Benutzerabbrüchen. Die beiden Hauptursachen für Abbrüche waren Schwierigkeiten bei der Navigation und ein langsamer Download.

Erstens war der Benutzer zunehmend verwirrt von den Barrieren neuer Apps und Technologien. Engagierte Anwender könnten durch jedes technologische Meer segeln, aber einige junge Leute und viele alte Leute waren nicht motiviert genug, ihre Zeit und Energie zu investieren.

Der andere wichtige Grund für Benutzerabbrüche sind langsame Downloads. Flat Design lädt naturgemäß deutlich schneller herunter als Rich Design. (Reiches Design zeichnet sich durch die Verwendung digitaler Ornamente wie Reflexionen, Schlagschatten und Farbverläufe aus).

Daher machten sich grafische Kommunikationsdesigner an die Arbeit, um ein Layout und einen Stil zu entwerfen, die sich vertraut, konsistent, zugänglich und übersichtlich anfühlen. Nichts sollte auf dem Bildschirm bleiben, was dem Benutzer keinen Zugriff auf das gab, was er wollte. Dies war eine neue Ethik des digitalen Designs; wahrscheinlich der erste grafische Kommunikationsdesigner, der die digitale Bewegung anführte. Microsoft investierte stark in Kommunikationsdesign; und ihre Verwendung von Flat Design machte es zu einer internationalen Bewegung.

Beim Flat Design werden die Grenzen des Bildschirms angenommen, die Beschränkungen genutzt, nicht dagegen. Dies wurde zum Ausgangspunkt für eine radikale Straffung des Website-Designs, um sie funktionaler und in den Augen vieler Menschen attraktiver zu machen.

Apple kämpfte mit seinen klobigen Symbolen und Retro-Grafiken, bis auch sie ab iOS 7 anfingen, flaches Design zu verwenden.

Sehen Sie sich unten ein gutes Designbeispiel an, etwas anders. Flat muss nicht langweilig oder korporativ sein.


Das Böse ist das neue Schwarz – Quelle.

Flat Design hat auch die Entwicklung von Responsive Design unterstützt, das Google jetzt zu seiner empfohlenen mobilen Konfiguration gemacht hat; Dies bedeutet, dass Websites mit Mobiltelefonschnittstellen höhere Rankings haben. Mobiltelefonbildschirme unterliegen Größenbeschränkungen und erforderten in der Vergangenheit einen anderen Ansatz für ihr Inhaltslayout. Mit Flat Design lassen sich jedoch alle Geräte stilistisch, inhaltlich und einheitlich verknüpfen.

Google wollte Responsive Design, da Websites mit Responsive Design eine URL und denselben HTML-Code haben, der es Google ermöglicht, Inhalte zu crawlen und zu indexieren. Flat Design ermöglicht ein effizienteres Webdesign. Ohne zusätzliche Designelemente können Websites viel schneller geladen werden und sind einfacher in der Größe zu ändern und um den Inhalt herum zu formen. Es ist viel einfacher, gestochen scharfe Typografie und scharf definierte Kästchen auf mehreren unterschiedlich großen Geräten anzuzeigen, wenn Flat Design verwendet wird.

Ich würde vorschlagen, sich Flat Grid Mega Meny – Responsive als Ressource für Flat Design Grids und Icons anzusehen.

Grundprinzipien des Flat Designs

Dies sind die Merkmale, die bei der Entwicklung eines flachen Designs für eine Website berücksichtigt werden müssen:

Farbe

Beginnen wir mit der Farbe: Flat Design zeichnet sich durch den kühnen Einsatz von Farbskalen aus. Windows 8 war das erste, das ein Raster aus hellen Farben verwendete. Die Verwendung von Farbe und Größe des Elements gibt einen einfachen Fluss zu Hierarchien. Farbe wurde verwendet, um die Effizienz zu steigern, erwies sich jedoch als so ästhetisch ansprechend, dass sie jetzt der absolute Gewinner des Stils ist, da sie in der Lage ist, eine atemberaubende visuelle Hierarchie bereitzustellen. Aber die Farbe muss nicht grell sein, stimmungsvolle Blau-, Grau-, Jade- und Fliedertöne. Wählen Sie sorgfältig eine Farbpalette und experimentieren Sie.

Eine gute Möglichkeit, eine zusammenhängende Farbpalette zu erhalten, besteht darin, eine auszuwählen, dann den Farbton zu verringern und Grau hinzuzufügen, um eine Palette verwandter Farbtöne derselben Farbe zu erhalten. Minimalistisch, stylisch, individuell.

Eine gute Verwendung von Farbe widerlegt das allgemeine Argument gegen flaches Design, dass die fehlende Unterscheidung zwischen Elementen es für Benutzer schwierig macht, zu wissen, wo sie klicken müssen. Dies kann leicht durch die Verwendung von Farbe, Größe und Text überwunden werden. Denken Sie daran, dass je heller die Farbe ist, desto dominanter erscheint sie.

Sie können sich als Ausgangspunkt Farbressourcen für flache Designs wie flache UI-Farben ansehen.

Angemessenes Angebot

Ein Angebot ist ein Signal auf einer Website, dass etwas verwendet werden kann, um eine Aufgabe auszuführen. „Klicken Sie hier” ist ein Angebot. Ein weiteres Beispiel ist ein Symbol eines Hauses für eine Homepage.

Webentwickler müssen durch ihr Design die Erschwinglichkeit deutlich machen, und in den letzten dreißig Jahren wurde dies intuitiv von Experten auf dem Gebiet der Webentwicklung getan. Mit Flat Design wurden die Qualitäten, die einen Artikel auf einer Website ausmachen, neu gestaltet, um für Benutzer zugänglich zu sein, die keine Experten sind. Dies ist der Grund, warum die angemessene Erschwinglichkeit von allen in der Branche neu bewertet werden muss.

UI Patterns listet verschiedene Beispiele für Affordance auf.

Explizite Affordance

Wenn der Zweck eines Artikels auf der Webseite für jeden mit den geringsten Kenntnissen des Internets offensichtlich ist, dann ist dies eine ausdrückliche Erschwinglichkeit. Eine große Schaltfläche mit „Hier klicken” darüber wird Sie dazu bringen, darauf klicken zu wollen.

Es gibt zwei Szenarien, in denen es sehr wichtig ist, das explizite Angebot zu verwenden: für die Zielgruppen, die neue Benutzer sind, und wenn die Benutzeroberfläche neu oder einzigartig ist.

Die technisch nicht versierten Benutzer müssen zuversichtlich gemacht werden, damit sie bald in den Reihen der Technikexperten aufsteigen und die üblichen Symbole erkennen. Auch innovative Apps müssen selbst dem Erfahrenen erklärt werden, damit das Angebot „swipe to return” die Aktion anzeigt, die erforderlich ist, um das gewünschte Ergebnis zu erzielen.

Denken Sie daran, dass für junge, ältere und diejenigen, die in Gebieten mit schlechtem Internetzugang leben, gesorgt werden muss. Das ist ein schwieriger Balanceakt, weil es auch wichtig ist, nicht zu bevormunden. Außerdem ist das ganze Ziel, eine übersichtliche Seite zu haben.

Muster Affordance

Dies ist der Fall, wenn die Konvention festgelegt wurde, dass ein bestimmtes Objekt eine bestimmte Aufgabe erfüllt. Klicken Sie auf das Herz und die Seite wurde zu den Favoriten hinzugefügt. Ein unterstrichenes Wort ist ein Link; Wenn Sie darauf klicken, gelangen Sie zu einer anderen Website. Musterangebot ist die häufigste Art von Angebot. Schöne übersichtliche Seiten sind ideal für flaches Design.

Versteckte Affordance

Verstecktes Angebot ist, wenn das Angebot erst sichtbar wird, nachdem eine Aktion durchgeführt wurde – das Bewegen der Maus über ein Dropdown-Menü ist ein gutes Beispiel. Viele der Navigationsoptionen können auf diese Weise ausgeblendet werden, was wichtig ist, da es auf einer durchschnittlichen Website viel zu viele Optionen gibt, die auf einmal angezeigt werden können.

Natürlich besteht die Gefahr, dass der Benutzer das Angebot nicht findet, daher werden im Flat Design die wichtigsten Funktionen dominant gemacht. Benutzer können sich jedoch in sehr kurzer Zeit mit diesen Angeboten sehr gut auskennen.

Beim Entwerfen einer Website muss jedoch immer eine wichtige Frage gestellt werden: Könnte ein Benutzer die Website besuchen und glücklich verlassen, ohne von der Funktion zu wissen? Wenn die Antwort ja ist, dann ist verstecktes Angebot die richtige Entscheidung.

Falsche Anbietung

Das Web ist durchsetzt mit falschen Angeboten, Hinweisen, Signalen und Mustern, die darauf hindeuten, dass etwas passieren wird, wenn Sie den Mauszeiger bewegen oder klicken, und dann nichts, nada, nix. Manchmal ist es nur ein defekter Link, was an sich schon ein digitales Verbrechen ist, aber oft liegt es nur an schlechtem Grafikdesign. Dies ist eine der Hauptursachen für Benutzerabbrüche.

Metaphorische Affordance


Bunte flache Ikonen durch Michael Dolejs.

Es ist ganz einfach die Verwendung von Symbolen. Beispielsweise ermöglicht (ermöglicht) ein Druckersymbol das Drucken eines Dokuments. Hier ist der richtige Ort, um ein Wort über Skeuomorphismus zu sagen, das Erstellen von Symbolen, die detailliert und realistisch gezeichnet sind; Dies ist nicht der Weg des Flat Designs. Das metaphorische Angebot des Flat Designs verwendet nur flache Minimalbilder und reduziert das Objekt auf ein leicht verständliches Symbol. Dribbble hat eine gute Auswahl an schön minimalistischen flachen Symbolen, die Sie kostenlos herunterladen können, wenn Sie möchten.

Unten sehen Sie ein großartiges Beispiel für Skeuomorphismus versus Ikone.

Typografie

Flat Design ist von Natur aus minimalistisch und übersichtlich und muss sich durch die Schriftarten und Fähigkeiten des Kommunikationsdesigns ausdrücken, die zur Entwicklung neuer Websites verwendet werden.

Normalerweise gibt es sehr wenig Text und wenige große Textabschnitte, daher müssen die wenigen Brocken gut durchdacht sein.

Design-Puristen würden sagen, dass serifenlose Schriften für Überschriften und Fließtext das offensichtliche Muss sind. Gehen Sie trotzdem noch weiter, um ein klares, sauberes Aussehen zu erhalten.

Entfernen Sie alles, was nicht unbedingt erforderlich ist.

Hören Sie auf, Anfangsbuchstaben in jeder Überschrift zu verwenden. Großbuchstaben sind für Eigennamen und das erste Wort eines Satzes.

Überprüfen Sie abschließend alle Satzzeichen, ob sie wirklich notwendig sind? Wenn Sie die Nachricht ohne sie verstehen können, entfernen Sie sie.

Typografen lieben metaphorische Erschwinglichkeit, weil sie auf die 1930er Jahre und die Arbeit von Isotype (International System of TYpographic Picture Education) zurückgeht, eine Methode zur Darstellung von Statistiken, die zu den Icon-Designs führte, die uns heute überall umgeben.


Ideen für Klassenprojekte.


Kartierung mit Isotype

Checkliste für flaches Design

Bevor Ihr Webdesign zur Kundenbewertung freigegeben wird, überprüfen Sie Folgendes, um sicherzustellen, dass Sie die Ästhetik des Flachbildschirmdesigns einhalten:

  • Sind die Bilder und Symbole klar und sauber mit klaren Call-to-Action-Symbolen?
  • Gibt es auf jeder Seite eine klare Überschrift, die genau sagt, was die Seite tut?
  • Wird der Speicherplatz mit minimalem Scrollen maximiert?
  • Funktionieren alle Angebote und sind sie angemessen?
  • Sind die Hierarchien übersichtlich dargestellt?
  • Haben Sie die soziale Validierung der Website maximiert? Sind Social-Media-Websites mit einem Klick einfach zu teilen?

Die Zukunft des Flat Designs

Es wird noch einige Zeit dauern, bis Flat Design von einer anderen digitalen Ästhetik abgelöst wird. Je mehr etwas verwendet wird, desto stärker wird es. Benutzer werden alle Elemente erkennen und Flat-Design-Sites vertrauen.

Als Apple beschloss, Rich Design und Skeuomorphismus nicht mehr zu verwenden, war dies der Todesstoß für alle singenden, alle tanzenden Websites, sie begannen veraltet und ungeschickt auszusehen. Ich habe nicht das Gefühl, dass Apple Flat Design noch nicht vollständig angenommen hat; Ihre iOS 8-Symbole sehen immer noch überladen aus.

Interessanterweise ist Google nicht komplett auf flaches Design umgestiegen, sondern verwendet weiterhin eine Mischung aus flachem und reichhaltigem Design. Zum Beispiel verwenden sie immer noch Farbverläufe, also werden Entwickler vielleicht in naher Zukunft anfangen, immer reichhaltigere Designs einzuführen, und eine andere Ära des Stils wird anbrechen. Seien wir ehrlich, der aktuelle Designtrend für Wohnung wird von den Designern der 1920er und 1930er Jahre beeinflusst. Insofern müssen wir auch akzeptieren, dass es „nur” eine Mode ist. Es ist jedoch eine nützliche und funktionelle Mode.

Designer und Entwickler werden ihrer Arbeit immer ihren Stempel aufdrücken wollen und es liegt in der Natur des Flat Designs, sich einem strengen Minimalismus zu unterwerfen. Es ist eine Kunst zu wissen, was zu entfernen und zu vereinfachen ist; aber es braucht Willenskraft, um dem flachen Design-Ethos des Minimalismus wirklich zu folgen.

Trotzdem kann ich den Flachbildschirm nicht verschwinden sehen, er ist so elegant, so einfach und leicht zu bedienen. Es ist ein sehr reines Design und sehr anpassungsfähig.

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen