Design = Emotionen + Benutzerfreundlichkeit
Während Kunst ein subjektives Feld ist, ist Grafikdesign in seinen Grundlagen eher formelhaft. Ein effektives Design sollte Menschen dazu bringen, sich auf eine bestimmte Art und Weise zu fühlen und bestimmte Maßnahmen zu ergreifen . In diesem Artikel möchte ich Gravity Switch's teilen Webdesign-Prinzipien und unser Denken hinter ihnen.
Diese Regeln sind: Ziele zuerst definieren; Fokus auf Benutzer zweitens; Design für Emotionen; folgen Sie den Regeln des visuellen Designs; eine klare, visuelle Hierarchie aufbauen; konsequent sein; breche die Regeln (wenn nötig); Übertreibe keine Gimmicks; und schließlich testen, messen und verbessern.
1. Definieren Sie zunächst Ziele
Ich wette, du dachtest, ich würde sagen "konzentriere dich zuerst auf die Nutzer", das ist was die meistenMenschensagen. Vergiss das, lass uns mit deinen Zielen beginnen. Beginnen Sie jedes Website-Design-Projekt mit einer Brainstorming-Sitzung, in der klare, realistische Website-Ziele beschrieben werden, die Ihre Geschäftsziele unterstützen.
Um das besser zu veranschaulichen, schauen wir uns Amazon an. Ihr Ziel ist es, den Produktverkauf zu maximieren. Durch "Upselling" und "Cross-Selling" können sie die Kaufkraft eines jeden Nutzers maximieren, aber um damit erfolgreich zu sein, verlangsamen sie den Kaufprozess. Im Gegensatz zu vielen Mitbewerbern hat Amazon in seinen Suchergebnissen keinen "Jetzt kaufen" -Button. Benutzer müssen eine weitere Seite (mit potenziellen Upsells) besuchen, bevor sie einen Kauf tätigen. Dies ist ein perfektes Beispiel dafür, wie ein Website-Design klare Geschäftsziele erfüllen kann.
Die meisten modernen E-Commerce-Websites haben den "Jetzt kaufen" -Button aus ihren Suchergebnissen entfernt, obwohl es in einigen stationären Geschäften immer noch vorhanden ist.
2. Fokus auf Nutzer als zweites
Mit Ihren klaren Zielen müssen Sie dann die Benutzer definieren und priorisieren . Sei so genau wie möglich. Einige Beispiele für Fragen sind:
- Männlicher vs. weiblicher Zusammenbruch?
- Bildungsniveau?
- Orte in Land?
- Verwandte Hobbys?
- Einkommensgruppe?
- Wer fährt die Produktkäufe von Kindern? Kinder? Eltern? Großeltern?
Der entscheidende Punkt ist, dass Designer sich der Benutzer bewusst sein sollten, damit sie sicherstellen können, dass ihre Designs Schlüsselverwendungspfade nicht blockieren.
3. Design für Emotionen
Achten Sie darauf, welche Emotionen Ihre Marke vermitteln sollte . Geistesblitz. Fragen stellen. Einvernehmen erzielen. Und vielleicht am wichtigsten, konzentrieren Sie sich auf diese Emotionen bei der Präsentation zurück zu Ihren Kunden. Fragen Sie nie, ob Ihr Kunde ein Design "mag". Wenn Sie Designs ausliefern, sollten Sie stattdessen Fragen stellen wie "Welche davon macht Sie am professionellsten?" Oder "Wenn Sie diese zwei Designs vergleichen, werden Sie sehen, dass dieses moderner ist, während dieses dynamischer ist. Das waren beide Emotionen, die dir wichtig waren, jetzt, wo du sie visuell siehst, was ist deiner Meinung nach die wichtigste Emotion, die du deiner Zielgruppe präsentieren kannst? "
Welche dieser Organisationen macht Spaß? Entspannend? Innovativ? Beschäftigt? Echt? (Entwürfe von @JessicaShiner und Christine Mark)
4. Befolgen Sie die Regeln des visuellen Designs
Es gibt viele kleine Elemente, die Websitebenutzer bewusst und unbewusst verwenden, um zu entscheiden, ob sie einer Website vertrauen. Die wichtigsten sind:
- Zuschneiden: Die Auswahl von Fotos ist nur die halbe Miete, das Zuschneiden von Fotos ist das, was ein Seitenlayout ausmacht oder bricht.
- Negativer Raum: Die sorgfältige Beachtung der Ränder, der Polsterung und der Zeilenhöhe ist der Unterschied zwischen dem Aussehen der New York Times und einem High School-Newsletter.
- Schriftarten: Jeder mag es, Schriften zu wählen, aber ein großer Designer kann schnell eine professionelle Schriftart erkennen und hat die Zurückhaltung, die Anzahl der Schriftarten auf der Website auf 1-2 zu halten (ohne das Logo, das oft seine eigene Schriftart ist).
- Farben: Farben sind eines der schwierigsten Dinge, die Designer effektiv anwenden können. Es gibt so viele Regeln für die Auswahl einer guten Farbpalette und es ist verlockend, online zu verwenden Farbpalettengeneratoren , verbringen Sie Zeit mit der Gestaltung Ihrer eigenen Farbpalette.
- Layout: Erstellen Sie eine gute visuelle Seite "fließen", so dass die Augen des Benutzers gehen, wo Sie wollen, dass sie auf der Seite gehen, ohne dass andere Elemente Ihre Ziele optisch trüben.
5. Erstellen Sie eine klare, visuelle Hierarchie
Website-Besucher überfliegen. Sie lesen nicht. Nehmen Sie ihre Aufmerksamkeit auf sich und bringen Sie sie mit einer klar definierten, gut durchdachten visuellen Hierarchie zu den wichtigsten Informationen. Ein gut durchdachter Design - Seite> Seite> - führt den Benutzer durch die Seite, wie Sie es möchten. Benutzer sollten in der Lage sein, einen Blick auf Ihre Seite zu werfen und sie in Sekundenbruchteilen zu verstehen.
Sehen Sie sich das folgende Beispiel eines Artikels an und beachten Sie, dass es für Ihr Auge schwierig ist zu sagen, worum es auf der Seite geht oder wo der Artikel beginnt!
Unten ist ein Modell, das ich gemacht habe, indem ich ungefähr ein Dutzend CSS-Zeilen geändert habe, um auf dieser Seite eine klarere visuelle Hierarchie auf folgende Weise zu erzeugen:
- Der Artikeltitel sollte das prominenteste Element auf der Seite sein. Es ist derzeit eine kleinere Schriftgröße als die Überschrift weiter unten auf der Seite! Also habe ich den Artikeltitel vergrößert und die Überschriften verkleinert.
- Die Überschrift weiter unten auf der Seite wurde ebenfalls von dem Inhalt getrennt, den sie visuell anzeigte, also verschärfte ich auch den Abstand unterhalb der Überschrift, während ich den Abstand über der Überschrift beließ, damit die Benutzer wissen, dass es eine Überschrift für den darunter liegenden Absatz ist .
- Ich habe auch das kleine Bild rechts neben den Titel anstatt links verschoben, so dass, wenn ein Benutzer die linke Seite der Seite scannt, um sich zu orientieren, der Artikeltitel in seiner Vision ist.
- Ich entfernte die Rand- und Hintergrundklassen auf dem blauen Klappentext, so dass es nicht mehr mit der Überschrift konkurriert und den oberen Rand entfernt. Es gab bereits eine Klasse, um sie grau zu machen, was in diesem Fall gut funktioniert.
- Ich habe auch den ablenkenden Text und das Bild entfernt, der hervorhebt, dass es sich um einen Nachdruckartikel handelt, sowie um einige leere Absätze und
Stichworte.
Ich habe absichtlich alle Werbeanzeigen so belassen, wie sie ursprünglich codiert waren, vorausgesetzt, dass dies ein kritischer Teil dieser Seite ist.
6. Sei konsistent
Verwechsle deine Benutzer nicht. Links sollten konsistent und eindeutig sein. Wenn Sie sich dafür entscheiden, Symbole, Fotos und Illustrationen zu verwenden, stellen Sie sicher, dass sie aussehen und sich so anfühlen, als gehörten sie zu einem zusammenhängenden Satz. Inkonsistenzen werden den Benutzer ablenken und Ihre Nachricht verschleiern. Verwenden Sie nicht mehr als 3 Schriftarten - am besten, wenn sie alle zur selben Familie gehören. Beschränken Sie sich auf 5-6 Farben (Hinweis: die Logo kann eine andere Schriftart sein, und sollte oft sein).
7. Brechen Sie die Regeln (wenn nötig)
Wenn es etwas besonders Einzigartiges oder Wichtiges gibt , das Sie hervorheben müssen, müssen Sie möglicherweise "die Regeln brechen". Sie können eine oder zwei kontrastierende Farben verwenden, um das Element hervorzuheben. Zum Beispiel hebt die britische Website unten den Steuersatz hervor, indem es dieses ein größeres Element mit einem Knall der Farbe macht.
Wenn Leute die Infoseite über die Mehrwertsteuer, Die Designer von GOV.UK haben dafür gesorgt, dass die Informationen, die die meisten Menschen benötigen, im Vordergrund stehen.
8. Übertreib Gimmicks nicht
Machen Sie Ihrem Design Spaß, stellen Sie jedoch sicher, dass diese Elemente das unterstützen, was Sie auf der Website erreichen möchten. Zum Beispiel die Inze Die Seite ist schön anzusehen und wunderbar auf Handy, aber als ich sie auf meinem Desktop-Computer besuchte, war ich verloren. Es stellt sich heraus, dass die Navigation ausgeblendet ist, bis Sie mit dem Scrollen beginnen, was leider meine Aufmerksamkeit auf den unteren Rand der Seite gelenkt hat. Als Ergebnis habe ich nicht einmal die subtile Navigation an der Spitze bemerkt. Ich scrollte den größten Teil des Weges nach unten, bevor ich überhaupt merkte, dass es (endlich) eine Navigation oben gab. Die "versteckte" Navigation ist ein netter Effekt, aber das "Design" hat mich daran gehindert, die gewünschte Aktion auszuführen. Am Ende vermittelt es ein verwirrendes, schlampiges Markenimage.
Vergleichen Sie Inze mit dem, was in diesem Artikel hier passiert Web Designer Depot wenn Sie einen Link auf Ihrem Desktopcomputer rollen. Wir haben einen ordentlichen Effekt, aber es schafft keine "Barriere" für die Benutzer um ein Gimmick. Es verschlechtert sich auch in graziöser Weise, so dass es bei mobilen oder älteren Browsern nicht beschädigt wird.
9. Test. Messen. Verbessern
Websites entwickeln sich. Design für Flexibilität und Anpassungsfähigkeit. Durch das Sammeln und Analysieren laufender Testdaten wird eine ständige Verbesserung erzielt. Denken Sie daran, es geht darum, ein Design zu schaffen, das Ihre Ziele erfüllt.
Durch das sorgfältige Messen der Ergebnisse einer Reihe kleiner Designänderungen auf der ursprünglichen Zielseite (links) haben wir ein neues Design (rechts) entwickelt, das den Prozentsatz der Anmeldungen um 60% erhöht hat!
Merken
Effektives Grafikdesign muss den Nutzer emotional mit der Marke verbinden und gleichzeitig dazu bringen, das zu tun, was Sie wollen. Es kann getan werden.
Stimmen Sie diesen Gestaltungsregeln zu? Würden Sie noch mehr hinzufügen? Teilen Sie uns Ihre Meinung in den Kommentaren mit.
Ausgewähltes Bild / Vorschaubild, Gefühlsbild über Shutterstock.