Halten Sie es einfach dumm. Dieses Konzept stammt aus dem Jahr 1960, als die US-Marine das KISS-Prinzip einführte, das besagt, dass die meisten Systeme am besten funktionieren, wenn sie einfach und nicht kompliziert sind. Dasselbe gilt für so ziemlich jedes Designprojekt.
Die meisten Grafikdesigner lernen KISS früh in ihrer Karriere kennen. Wie kannst du das machen? Ein einfaches Design zu erstellen ist etwas komplizierter als Sie vielleicht denken. Hier sind sieben Regeln, nach denen Sie entwerfen können, die Ihnen helfen, das ganze Durcheinander zu beseitigen und ein wunderschönes einfaches Konto zu erstellen.
1. Legen Sie ein Ziel pro Seite fest
Der Beginn eines einfachen Designs beginnt mit einem Ziel für das Projekt und spezifischen Zielen für jede Seite der Website. Jede Seite sollte Benutzer zu einer Aktion führen, mit Ausnahme der Navigation und der Fußzeile.
Dies kann alles sein, indem Sie auf einen Link klicken, Informationen in ein Formular eingeben, ein Video ansehen oder ein Spiel spielen. Jede Seite sollte sich jedoch auf eine einzelne Benutzeraktion oder Konvertierung konzentrieren.
Zu viele Dinge können die Benutzer überfordern. Sie können aus den Augen verlieren, welche Maßnahmen abgeschlossen werden sollten, und die weniger wünschenswerte Entscheidung treffen. Planen Sie das Design so, dass jede Seite Benutzer zu einem einzigen Ziel führt. Jede aktivierbare Schaltfläche oberhalb der Bildlaufleiste und unterhalb der Bildlaufseite auf derselben Seite sollte dasselbe tun. Diese Konsistenz hilft Benutzern zu verstehen, warum sie sich auf Ihrer Website befinden und was sie tun sollen. Die Einfachheit dieser Auswahlmöglichkeiten macht das Design einfach und einnehmend.
2. Bleiben Sie bei zwei Typfamilien
Es gibt so viele Designrichtlinien, die drei Schriftarten für ein Projekt empfehlen. Mit zwei robusten Typenfamilien können Sie das noch mehr optimieren.
Suchen Sie nach einer Typfamilie, die mehrere Strichstärken mit viel Kontrast zwischen der regulären und der fetten oder der schwarzen Option enthält. Für noch mehr Flair entscheiden Sie sich für eine Anzeigeauswahl, die einige alternative Zeichen enthält, die Sie in übergroßen Überschriften verwenden können.
Alles, was Sie tun müssen, ist das Mischen und Anpassen einer Körperschriftart und einer Darstellungsschrift, um großartige Kombinationen von Buchstaben für das gesamte Design zu erhalten. Verwenden Sie zwei Typenfamilien genauso wie Sie es tun würden, wenn Sie für bestimmte Gewichtungen oder Stile mehr Optionen für bestimmte Zwecke ausgewählt hätten.
Sie werden feststellen, dass Sie so eine gut lesbare und einfach zu verwendende Typografie-Palette erstellen können, die einfach zu verwalten ist und eine visuelle Konsistenz aufweist.
3. Verwenden Sie konsistente Ausrichtung
Links, in der Mitte oder sogar nach rechts - unabhängig von der Ausrichtung bleiben Sie während des gesamten Entwurfs dabei. Dies umfasst das Ausrichten ähnlicher Elemente, z. B. Textfelder und Elemente, die sich nicht ähneln, jedoch in Gruppierungen passen.
Adaptable macht dies mit dem Text auf dem Homepage-Schieberegler sehr gut. Trotz Text mit unterschiedlicher Zeilenanzahl im Bild steht jede Überschrift neben der Call-to-Action-Schaltfläche. Der Abstand zwischen den Elementen ist ebenfalls konsistent.
Diese konsistente Ausrichtung wird auf der Bildlaufleiste mit anderen Überschriften- und CTA-Paaren durchgeführt.
Die Ausrichtung stimmt mit dem Fluss des Schiebereglers überein, der sich auch in komplementärer Richtung bewegt. Linke und zentrierte Ausrichtung sind die häufigsten Optionen für Textelemente, da sie am lesbarsten sind. Bei längerem Text ist die linke Ausrichtung die bevorzugte Option.
4. Hierarchie festlegen
Benutzer sollten nicht darüber nachdenken müssen, was sie sich anschauen oder wie sie sich in einem Design bewegen. Selbst die einfachsten visuellen Kompositionen sollten eine eindeutige Hierarchie haben.
Es beginnt mit einem dominanten Bild. Es kann sich um ein Bild oder ein Video oder eine Textanzeige oder um etwas anderes handeln, das einen ersten Eindruck hinterlässt.
Dann sollte es eine Art Text geben, der dem Benutzer mitteilt, was das Design und die Website zu kommunizieren versuchen. Normalerweise handelt es sich hierbei um eine einfache Überschrift, die mit dem dominierenden Bild arbeitet.
Der dritte Teil ist ein sekundärer Text oder eine Aktion, die Benutzer abschließen müssen. Das letzte visuelle Element ist ein Navigationsmenü. Benutzer erwarten, alle diese Elemente zu finden, und das Auge ist darauf trainiert, sich im Wesentlichen in dieser Reihenfolge durch die Elemente zu bewegen. Machen Sie es ihnen einfach, indem Sie auf diese Weise gestalten.
5. Geben Sie den Elementen viel Platz
Wenn Sie es bis jetzt noch nicht wissen, legen Sie dies fest: Weißer Raum ist Ihr Freund.
Geben Sie jedem Element im Design viel Platz. Der Weltraum wird dazu beitragen, die Aufmerksamkeit auf einzelne Elemente zu lenken. Sie sind also nicht in der Versuchung, die Leinwand durcheinander zu bringen und ein Gesamtbild mit Fokus zu erstellen.
Der Trick, den Raum gut zu nutzen, ist Konsistenz. Legen Sie Regeln für den Abstand fest, der einzelne Elemente umgibt oder zwischen Textzeilen passt. Wenn das Design zu unfruchtbar aussieht, müssen Sie möglicherweise den Abstand ein wenig verringern. Sie wissen, dass der Abstand richtig ist, wenn Sie das Design frisch öffnen und direkt zu den Stellen gelangen, die die Benutzer zuerst sehen sollen. (Nicht sicher, was sie sind? Zurück zu Nr. 4 - Hierarchie etablieren.)
6. Amp Up Kontrast
Designelemente mit hohem Kontrast - von der Farbauswahl bis zur Größe der Elemente - können einem Projekt genau die richtige Menge an visueller Finesse verleihen, selbst in den minimalsten Rahmenbedingungen.
Versuchen Sie für eine trendige Option eine helle kontrastierende Farbpalette, um die Aufmerksamkeit des Benutzers zu erregen. Mutige Farben lassen ein einfaches Design komplexer und interessanter erscheinen als eine Schwarz-Weiß-Option. Um kontrastierende Farben optimal zu nutzen, wählen Sie Farbtöne aus gegenüberliegenden Positionen des Farbkreises mit ähnlichen Sättigungen. Wenn diese Option zu viel für Sie ist, versuchen Sie es mit anderen Farbradpaaren. (Möglicherweise finden Sie sogar einen unerwarteten neuen Favoriten, z. B. die Kombination aus Lila und Türkis.)
7. Verwenden Sie konsistente Symbole und Elemente
Konsistenz im Design ist eines der am besten gehüteten Geheimnisse des Killerdesigns. Dies ist eines der Dinge, die viel zu oft vergessen werden, da Designprojekte mit mehreren Schaltflächenstilen oder Symbolen für soziale Medien übersät sind, die einfach nicht zum Rest der Ikonografie der Website passen.
Elemente der Benutzeroberfläche sollten nicht nachträglich sein.
Es ist wichtig, dass Sie ein Symbol und ein Elementelement der Benutzeroberfläche sowie Regeln erstellen und diese im gesamten Projekt auf die gleiche Weise verwenden. (Sie können sogar eine Symbol-Schriftart oder ein Element-Kit für die Benutzeroberfläche kaufen oder herunterladen, wenn Sie diese nicht von Grund auf erstellen möchten.)
Wählen Sie eine Farbe für Elemente aus und verwenden Sie für jedes Element dieselbe Hover-Aktion oder denselben Effekt (eine für Elemente, die anklickbar sind, und eine andere für Elemente, die keine sind) und Größenelemente je nach Verwendung. (Es ist akzeptabel, sowohl eine Symbolgröße als auch eine übergroße Option für Elemente zu haben, die etwas grafischer sind.)
Praticca Vending Machines verwendet übergroße Symbole, um Benutzer darauf hinzuweisen, dass mehr Informationen vorhanden sind. Ein + befindet sich in einem farbigen Symbol. Alle drei Symbole sind abgesehen von der Farbe identisch. Sie alle machen im Hover dasselbe und verhalten sich auf die gleiche Weise, wenn ein Benutzer klickt. Das gleiche Symbol wird auf der gesamten Site kleiner verwendet, um neue Inhalte zu starten und Benutzern zu helfen, die Kopie zu scannen.
Fazit
Ein einfaches Design muss nicht vollständig minimal sein oder es fehlen spaßige Elemente oder Goodies der Benutzeroberfläche. Ein einfaches Design ist äußerst benutzerfreundlich und intuitiv, sodass Benutzer ohne Fragen oder komplizierte Anweisungen einbezogen werden können.
Während komplexere Websites oder Benutzerinteraktionen Platz finden, können die meisten Website-Designs vom KISS-Ansatz profitieren. Denken Sie nicht darüber nach, und Benutzer müssen dies auch nicht tun.