7 Regeln zum Erstellen eines einfachen Designs
Halten Sie es einfach dumm. Dieses Konzept stammt aus dem Jahr 1960, als die US-Marine das KISS-Prinzip umsetzte, wonach die meisten Systeme am besten funktionieren, wenn sie einfach und nicht kompliziert sind. Das gleiche gilt auch für so ziemlich jedes Designprojekt.
Die meisten Grafikdesigner lernen KISS früh in ihrer Karriere kennen. Wie kannst du das machen? Das Erstellen eines einfachen Designs ist etwas komplizierter als Sie vielleicht denken. Hier sind sieben Regeln zum Entwerfen, mit denen Sie die Unordnung beseitigen und ein wunderschön einfaches Konto erstellen können.
Entdecken Sie Designressourcen
1. Legen Sie ein Ziel pro Seite fest
Der Beginn eines einfachen Entwurfs 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, vom Klicken auf einen Link, Eingeben von Informationen in ein Formular, Ansehen eines Videos oder Spielen eines Spiels. Jede Seite sollte sich jedoch auf eine einzelne Benutzeraktion oder Conversion konzentrieren.
Zu viele Dinge können Benutzer überfordern. Sie können aus den Augen verlieren, welche Aktionen ausgeführt werden sollten, und möglicherweise die weniger wünschenswerte Wahl treffen. Planen Sie das Design so, dass jede Seite die Benutzer zu einem einzigen Ziel führt. Jede umsetzbare Schaltfläche über dem Bildlauf und unter dem Bildlauf 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 ansprechend.
2. Halten Sie sich an zwei Typenfamilien
Es gibt so viele Gestaltungsrichtlinien, die drei Schriften für ein Projekt empfehlen. Mit zwei robusten Typenfamilien können Sie dies noch weiter optimieren.
Suchen Sie nach einer Typenfamilie, die mehrere Gewichte mit viel Kontrast zwischen den regulären und den fettgedruckten oder schwarzen Optionen enthält. Für noch mehr Flair entscheiden Sie sich für eine Anzeige, die einige alternative Zeichen enthält, die Sie in übergroßen Überschriften verwenden können.
Dann müssen Sie nur noch eine Körperschrift und eine Anzeigeschrift kombinieren, um großartige Schriftkombinationen für das gesamte Design zu erhalten. Verwenden Sie zwei Typfamilien wie bei einer Auswahl weiterer Optionen mit bestimmten Verwendungszwecken für bestimmte Gewichte oder Stile.
Sie werden feststellen, dass dies Ihnen helfen kann, eine gut lesbare und benutzerfreundliche Typografie-Palette zu erstellen, die einfach zu verwalten ist und eine visuelle Konsistenz aufweist.
3. Verwenden Sie die konsistente Ausrichtung
Links, mittig oder sogar rechts - egal welche Ausrichtung Sie möchten, bleiben Sie während des gesamten Designs dabei. Dies umfasst das Ausrichten ähnlicher Elemente wie Textfelder und Elemente, die nicht gleich sind, aber in Gruppierungen zusammenpassen.
Adaptable leistet hier mit dem Text auf dem Homepage-Schieberegler hervorragende Arbeit. Trotz Text mit unterschiedlicher Anzahl von Zeilen im Bild wird jede Überschrift mit der Schaltfläche "Aufruf zum Handeln" ausgerichtet. Der Abstand zwischen den Elementen ist ebenfalls konsistent.
Darüber hinaus wird diese konsistente Ausrichtung im Bildlauf mit anderen Überschriften- und CTA-Paaren fortgesetzt.
Die Ausrichtung entspricht dem Fluss des Schiebereglers, der sich ebenfalls in eine komplementäre Richtung bewegt. Links- und Mittelausrichtungen sind die häufigsten Optionen für Textelemente, da sie am besten lesbar sind. Bei längerem Text ist die Ausrichtung nach links die bevorzugte Option.
4. Hierarchie einrichten
Benutzer sollten nicht darüber nachdenken müssen, was sie betrachten oder wie sie sich über ein Design bewegen sollen. Selbst die einfachsten visuellen Kompositionen sollten eine eigene Hierarchie haben.
Es beginnt mit einem dominanten Bild. Es kann sich um eine Bild-, Video- oder Textanzeige oder etwas anderes handeln, das einen ersten Eindruck hinterlässt.
Dann sollte es eine Art Text geben, der dem Benutzer sagt, was das Design und die Website zu kommunizieren versuchen. Dies erfolgt normalerweise in Form einer einfachen Überschrift, die mit dem dominanten Bild arbeitet.
Drittens ist ein sekundäres Stück Text oder eine Aktion, die Benutzer ausführen müssen. Das letzte visuelle Element ist ein Navigationsmenü. Benutzer erwarten, alle diese Elemente zu finden, und das Auge ist darauf trainiert, sich in dieser Reihenfolge durch die Elemente zu bewegen. Machen Sie es ihnen einfach, indem Sie auf diese Weise entwerfen.
5. Geben Sie den Elementen viel Platz
Wenn Sie es bis jetzt nicht wissen, schreiben Sie dies in Erinnerung: Leerraum ist Ihr Freund.
Geben Sie jedem Element im Design viel Platz. Der Platz hilft dabei, die Aufmerksamkeit auf einzelne Elemente zu lenken, „Platz“ einzunehmen, damit Sie nicht versucht sind, die Leinwand zu überladen, und ein Gesamtdesign zu erstellen, das den Fokus hat.
Der Trick, um den Raum gut zu nutzen, ist die Konsistenz. Legen Sie Regeln für den Platz fest, der einzelne Elemente umgibt oder zwischen Textzeilen passt. Wenn das Design zu unfruchtbar aussieht, müssen Sie möglicherweise den Abstand etwas zurückziehen. Sie wissen, dass der Abstand richtig ist, wenn Sie das Design frisch öffnen und direkt zu den Stellen gehen, die Benutzer zuerst sehen sollen. (Sie sind sich nicht sicher, was sie sind? Gehen Sie zurück zu Nr. 4 - Hierarchie einrichten.)
6. Amp Up Contrast
Kontrastreiche Designelemente - von der Farbauswahl bis zur Größe der Elemente - können einem Projekt genau die richtige visuelle Finesse verleihen, die es benötigt, selbst in den kleinsten Frameworks.
Versuchen Sie für eine trendige Option eine hell kontrastierende Farbpalette, um die Aufmerksamkeit des Benutzers zu erregen. Durch kräftige Farben wirkt ein einfaches Design komplexer und interessanter als eine Schwarz-Weiß-Option. Um die Kontrastfarbe optimal zu nutzen, wählen Sie Farbtöne von entgegengesetzten Positionen im Farbkreis mit ähnlichen Sättigungen. Wenn diese Option zu viel für Ihren Geschmack ist, versuchen Sie es mit anderen farbradbasierten Paaren. (Möglicherweise finden Sie sogar einen unerwarteten neuen Favoriten, z. B. die Kombination aus Lila und Blaugrün oben.)
7. Verwenden Sie konsistente Symbole und Elemente
Konsistenz im Design ist eines der am besten (und am schlechtesten gehüteten) Geheimnisse des Killer-Designs. Dies ist eines der Dinge, die viel zu oft vergessen werden, da Designprojekte mit mehreren Schaltflächenstilen oder Social-Media-Symbolen übersät sind, die einfach nicht mit dem Rest der Ikonografie der Website übereinstimmen.
Elemente der Benutzeroberfläche sollten kein nachträglicher Gedanke sein.
Es ist wichtig, ein Symbol und einen Satz von Elementen und Regeln für die Benutzeroberfläche zu erstellen und diese im gesamten Projekt auf dieselbe Weise zu verwenden. (Sie können sogar eine Symbolschrift oder ein Element-Kit für die Benutzeroberfläche kaufen oder herunterladen, wenn Sie diese nicht von Grund auf neu erstellen möchten.)
Wählen Sie eine Farbe für Elemente aus, verwenden Sie dieselbe Hover-Aktion oder denselben Effekt für jedes Element (eines für Elemente, auf die geklickt werden kann, und eines für Elemente, die nicht anklickbar sind) und passen Sie die Elemente je nach Verwendung an. (Es ist akzeptabel, sowohl eine Symbolgröße als auch eine übergroße Option für Elemente zu haben, die etwas grafischer sind.)
Praticca-Verkaufsautomaten verwenden beispielsweise übergroße Symbole, um Benutzer darauf hinzuweisen, dass mehr Informationen vorhanden sind. Ein + befindet sich in einem farbigen Symbol. Alle drei Symbole sind bis auf die Farbe identisch. Beim Hover machen sie alle dasselbe und verhalten sich beim Klicken eines Benutzers gleich. Das gleiche Symbol wird auf der gesamten Website kleiner verwendet, um neue Inhalte zu starten und Benutzern das Scannen der Kopie zu erleichtern.
Fazit
Ein einfaches Design muss nicht ganz minimal sein oder es müssen lustige Elemente oder Extras für die Benutzeroberfläche fehlen. Ein einfaches Design ist sehr benutzerfreundlich und intuitiv und ermöglicht es Benutzern, sich ohne Fragen oder komplizierte Anweisungen zu engagieren.
Während es einen Platz für komplexere Websites oder Benutzerinteraktionen gibt, können die meisten Website-Designs vom KISS-Ansatz profitieren. Überdenken Sie es nicht, und Benutzer müssen es auch nicht.
