Einfache Webdesign-Tipps für gute Ergebnisse

Es gibt unendlich viele Möglichkeiten, eine Website zu gestalten. In diesem Sinne gibt es auch unendlich viele Möglichkeiten, es durcheinander zu bringen. Es gibt zwei Hauptmethoden, um nicht in die zweite Kategorie zu fallen: Lernen Sie die Grundlagen des Designs und wenden Sie sie entsprechend an. Sie müssen auch genug Erfahrung haben, um gelernt zu haben, was gut funktioniert und was nicht.

Alle Designer gehen unterschiedliche Lernwege und befinden sich häufig in unterschiedlichen Phasen ihrer Reise. Wenn Sie dies lesen, versuchen Sie hoffentlich auch, Ihre Arbeit weiter zu verbessern und bessere Designs zu erstellen.

Leider gibt es keine Möglichkeit, das gesamte erforderliche Wissen in 1500 Wörter zu packen. Stattdessen werden wir nur ein paar Tipps geben, damit Sie überdenken, wie Sie mit UX / UI-Elementen umgehen können. Idealerweise kann diese Denkweise auch auf andere Bereiche Ihrer Entwurfsarbeit angewendet werden.

Beginnen Sie mit einem guten Verständnis des Produkts / der Website

Es ist äußerst schwierig, Design zu erstellen, wenn Sie den Inhalt / die Website nicht vollständig verstehen. Jetzt müssen Sie keine Medizin mehr studieren, um eine medizinische Website zu erstellen, das ist nicht das Ziel. Sie sollten jedoch wissen, wie ein Benutzer auf die Informationen zugreifen würde, die er möglicherweise benötigt.

Wenn Sie eine Musik-App entwerfen möchten, sollten Sie sich zunächst einige vorhandene Apps schnappen, mit ihnen herumspielen, um ein Gefühl für sie zu bekommen, über die dahinter stehende Theorie und die Funktionsweise bestimmter Elemente lesen.

Idealerweise sollten Sie mit Ihrem Kunden zusammenarbeiten, der sich ebenfalls sehr für das Projekt interessiert und Ihnen bei der Implementierung einer besseren Benutzeroberfläche für seine Benutzer helfen möchte.

Wenn Sie jedoch kein grundlegendes Verständnis dafür haben, worum es auf der Website geht und welches Problem sie löst, können Sie die Benutzererfahrung beeinträchtigen oder sich dazu zwingen, vorhandenen Lösungen zu folgen und sie einfach neu zu gestalten (was manchmal funktioniert).

Bei Websites sollte die Sitemap vor Ihnen liegen, um an der richtigen Navigation zu arbeiten und Entscheidungen darüber zu treffen, welche Elemente für bestimmte Zielseiten gut geeignet sind. Wenn Sie ein „Schokoladenfabrik“ -Design erstellen, können Sie den Herstellungsprozess visuell darstellen oder einen Info-Dump durchführen. Es hängt alles von den Zielen der Website ab.

All diese Informationen benötigen Sie im Voraus, um eine höhere Erfolgsquote zu erzielen. In Anbetracht dessen, wie kompliziert dies ist, kann es Ihnen passieren, wenn Sie ein freiberuflicher Designer für Anfänger sind. Daher ist es am besten, von Anfang an viele Fragen zu stellen. Wenn Sie in einem Team arbeiten, vergessen Sie nicht, sich mit Ihren Teammitgliedern über Inhalt, UX, Zweck und mehr zu beraten.

Designspezifische Tipps und Tricks:

Lassen Sie uns nun einige spezifische UI / UX-Tipps sehen, die Sie in Ihrem nächsten Design verwenden können:

1 - Kontrast!

Es ist so einfach, den Kontrast auf einer Site durcheinander zu bringen. Eine schnelle Möglichkeit, einen weniger erfahrenen Designer zu finden, besteht darin, den Gesamtkontrast zu überprüfen. Siehe dieses Beispiel:

Quelle

Sehen Sie, wie leicht der Text überall ist? Die grünen Knöpfe mit weißem Text, der hellgraue Text?. Vergleichen wir es mit einer kontrastreicheren Benutzeroberfläche:

Quelle

Ein großer Teil der Schrift ist schwarz (oder fast schwarz) mit weniger wichtigen Informationen, die etwas grauer sind. Das Grün ist dunkler, wodurch jetzt weißer Text oben angezeigt wird.

Der Tipp hier ist - wenn Sie mit Text arbeiten, beginnen Sie mit Schwarz auf Weiß oder Weiß auf Schwarz. Wenn Sie weitere Elemente hinzufügen und mit der visuellen Hierarchie trennen müssen, versuchen Sie zunächst, die Schriftgröße zu fetten oder zu ändern. Erst danach, wenn es nicht funktioniert, gehen Sie mit Farbänderungen, aber idealerweise nicht mehr als 30-40% Unterschied (im Allgemeinen wird die Deckkraft auf 70% eingestellt).

2 - Konsistenter Leerraum

Ein weiterer häufiger Fehler wäre ein inkonsistenter Abstand um die Elemente. Tatsächlich ist es so üblich, dass die meisten Designer nach Jahren der Arbeit weiterhin damit zu kämpfen haben, und es ist ziemlich verständlich - wir bewegen Kisten mit der Maus. Es ist einfach, ein bisschen zu rutschen und es ein oder zwei Pixel zur Seite zu bewegen. Oder Sie haben Ihr Auge noch nicht gut genug trainiert, um diesen Unterschied direkt zu erkennen.

Sehen Sie sich im folgenden Beispiel an, wie die verschiedenen Komponenten unterschiedliche Leerzeichen aufweisen. Einige sind überladen, andere sind sehr weit voneinander entfernt. Optisch sieht es nicht sehr stimmig aus.

Im Gegensatz dazu ist hier ein Beispiel mit mehr oder weniger ähnlicher Menge an Inhalt / Art von Komponenten, aber mit einem konsistenteren Aussehen:

Quelle

Es gibt verschiedene Möglichkeiten, dies zu erreichen, aber meistens funktioniert es nicht nur mit dem Messen. Es ist oft ein "Gefühl", wenn man es betrachtet. Sieht es ausgewogen aus? Wenn Sie Boxen haben, können Sie immer 30 Pixel von den Seiten, 30 Pixel unter dem Titel, 15 Pixel unter dem Untertitel usw. messen. Und es ist ein guter Ansatz! Bei größeren visuellen Elementen wie Titeln oder Bildern möchten Sie diese möglicherweise etwas erhöhen, um das schwerere Element auszugleichen.

3 - Farbe

Ein weiterer wesentlicher Bestandteil eines guten Designs. Farben müssen gut zusammenarbeiten. Eine einfache Möglichkeit, sich Websites zu nähern, besteht darin, sich an eine einzelne Primärfarbe zu halten und den Rest einfarbig zu halten.

Das folgende Beispiel folgt allen drei bisherigen Vorschlägen - Guter Kontrast, Ausgewogenheit und Verwendung von Farben:

Quelle

Eine einfache Möglichkeit, mit Farben zu beginnen, besteht darin, einige gut aufgenommene Farbschemata von Websites wie https://colorhunt.co/ zu befolgen oder sich von Dribbble für Kombinationen inspirieren zu lassen. Die Arbeit mit dem Farbkreis ist hilfreich, um die Kombinationen herauszufinden, aber oft müssen die Designer ein wenig mehr tun, um die besten Kombinationen zu finden. Farbräder erzeugen oft nicht die perfekten Farben für ein Design.

Beispiel aus dem Farbkreis von Adobe:

Quelle

Eine schöne grüne Farbe in der Mitte, aber die Ergebnisse auf der linken / rechten Seite sind schwer zu verwenden.

4 - Halten Sie sich auf der gesamten Website an einen Stil

Das Gefühl einer Website zu entwickeln, ist eine der Hauptaufgaben des Designers. Obwohl die Idee von „hübsch“ sehr schwer zu definieren ist, zumal die Leute oft eine andere Ansicht darüber haben, was schön ist und was nicht. . Anstatt sich darüber Gedanken zu machen, konzentrieren Sie sich auf Konsistenz und bleiben Sie beim Stil.

Was bedeutet das? Nun, lassen Sie uns einen Knopf entwerfen. Wir stellen die Schriftgröße, die Schriftart, die Farbe, den Hintergrund, den Abstand usw. ein. Und wir bekommen so etwas:

Wenn wir nun ein Bild und einen Titel hinzufügen, können wir vielleicht so etwas erreichen:

Siehe die Ecken. Alle perfekten 90-Grad-Ecken, keine Rundung. Das bedeutet, dass unser Design meistens scharfen Ecken folgt. Und es sieht konsistenter aus, wenn das Bild auch diese perfekten Ecken hat. Genau wie wenn wir Eingaben hinzufügen, hätten sie auch alle diese schärferen Ecken. Fügen wir noch ein Element hinzu:

Wir haben oben rechts und unten links ein Kästchen mit Feldern hinzugefügt. Dies könnten Kreise gewesen sein, aber um das scharfe Aussehen beizubehalten, haben wir sie auf Quadrate gesetzt. Das gleiche Denken sollte auf der gesamten Website beibehalten werden. Wenn Sie anfangen, Elemente zu ändern, verlieren Sie möglicherweise das Gefühl dafür, was wiederum zu einem inkonsistenten Design führen und die Marke schwächen würde.

Hier ist das gleiche Design von oben, aber mit abgerundetem Aussehen:

Es ist das gleiche, aber es fühlt sich jetzt so viel anders an.

5 - Design mit Komponenten

Komponenten sind in allen modernen Designtools wie Figma und Adobe XD vorhanden. Sie sind aus einem sehr guten Grund da - Entwickler implementieren Websites so, dass sie so oft wie möglich wiederverwendet werden können.

Wenn Sie ein Element wie das oben beschriebene erstellen, möchten Sie es einfach auf einer anderen Seite kopieren und einfügen, und es funktioniert einfach. Es ist nicht erforderlich, es mit geringfügigen Unterschieden erneut zu codieren. Idealerweise möchten Sie als Designer Ihre Komponenten auf ähnliche Weise wiederverwenden.

Wenn Sie eine Homepage mit 3 Posts hintereinander erstellen, können Sie möglicherweise denselben Post von der Homepage aus wiederverwenden. Dies spart Ihnen Zeit, spart dem Entwickler Zeit und hält das Design für Benutzer konsistent.

Quelle

Stellen Sie sich vor, Sie machen eine Abschnittsüberschrift. Wenn Sie 8 Abschnitte mit einer Überschrift benötigen, würden Sie diese jedes Mal entwerfen oder die vorherigen kopieren und einfügen? Idealerweise möchten Sie es wiederverwenden. Aber was ist, wenn Sie es von zentriert auf linksbündig ändern müssen? Vielleicht ein bisschen die Größe ändern, vielleicht die Farbe? Der Tipp ist, dies zu versuchen und NICHT zu tun. Versuchen Sie, es als Original beizubehalten. Wenn Sie wirklich unterschiedliche Ansichten benötigen (abgesehen von links / zentriert / rechts ausgerichtet), versuchen Sie, nur eine Variation vorzunehmen. Nicht fünf oder zehn von ihnen.

Beispiel von DevriX

In Summe:

Um gute Ergebnisse zu erzielen, benötigen Sie ein umfassendes Verständnis der Designgrundlagen wie Farbe, Kontrast, Leerraum, Balance, visuelle Hierarchie, Reihenfolge und mehr. Wenn Sie in diesem Sinne entwerfen und sich auf Benutzerfreundlichkeit, Konsistenz und Stil konzentrieren, und selbst wenn es kein „WOW!“ Ist. Design, es wird an allen Fronten solide sein und gut funktionieren, was auf lange Sicht oft zu besseren Ergebnissen für eine Marke führt.