5 Möglichkeiten, um Ihre Webdesigns intuitiver zu gestalten

Als Schöpfer, Designer, Denker und Problemlöser der digitalen Kommunikation treffen wir Entscheidungen basierend auf unserem Verständnis unserer Zielgruppe.

Diese Entscheidungen sind das Wissen, das wir aus unserer Kultur haben, wie das Lesen von links nach rechts, von rechts nach links oder von oben nach unten, sowie andere Faktoren wie die Platzierung wichtiger Bilder, Texte und interaktiver Elemente Schnittstellen- und Farbauswahl.

Jenseits der Kultur gibt es das menschliche Auge und wie das Gehirn die Wichtigkeit dessen registriert, was das Auge sieht. Mit ein wenig Verständnis der im kostenlosen E-Book beschriebenen visuellen Gestaltungsprinzipien Web-UI-Design für das menschliche Auge können wir unglaublich effektive Websites gestalten.



01. Design zuerst für das Gehirn

Um das richtige Design zu lernen, muss die Designgeschichte studiert werden. Die großen Künstler und Designer in der Geschichte folgten alle einfachen Designregeln, und ob sie diese Regeln befolgten, verbogen oder brachen, es waren die Grundlagen, die es ihnen ermöglichten, eine so hohe Wertschätzung zu erlangen.

In mehreren Studien folgt das Gehirn einem Muster der Registrierung von Informationen durch eine trainierte Hierarchie dessen, was präsentiert wird. Mutige Farben, kräftige Schrift, Kontraste und Platzierung zeigen sich immer bei thermischen Eye-Tracking-Tests, vor allem, weil wir so trainiert werden.

Bild mit freundlicher Genehmigung der Nielsen Norman Group: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

Bild mit freundlicher Genehmigung der Nielsen Norman Group: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/

* Interessanter Hinweis: Sehen Sie, wie die Aufmerksamkeit vom Lesen des letzten Drittels des Textes in den Bildern links und rechts abweicht? Benutzer lesen immer weniger. Brechen Sie lange Textspalten wie im mittleren Bild auf.

Denken Sie auch daran, dass Benutzer selten jedes Wort Ihres Textes lesen. Die ersten beiden Absätze sind die wichtigsten und sollten Ihren Punkt enthalten. Beginnen Sie Absätze, Unterüberschriften und Aufzählungszeichen mit verlockenden Schlüsselwörtern, um das Auge auf sich zu ziehen.

Wie bekomme ich alle vsco Filter kostenlos ios

Wenn der Chef oder Kunde behauptet: 'Lass es knallen!' oder 'mehr hinzufügen' UMPH! ' dazu! ' er oder sie fordert die einfachste Form der Augenerkennung - machen Sie sie größer und mutiger. Aus dem gleichen Grund zwingt die Verwendung eines negativen Raums das Auge, sich auf einen bestimmten Bereich zu konzentrieren, der möglicherweise nicht größer und mutiger ist.

Die Gestaltungsprinzipien der Z- und F-Muster (auch als Layout bezeichnet) folgen der Art und Weise, wie das menschliche Auge zum Scannen einer Website geschult wird. Große Kreationen verlassen sich oft auf den Fluss der Natur, um ein ansprechendes Design zu erzielen.

Das F-Muster, das auf dem Lesen von links nach rechts unter Verwendung des Gittermusters basiert, ist einfach, leicht und legt Informationen in einer einfachen Hierarchie für das Auge fest. Überschrift oben auf dem Bild mit Deskriptor, gefolgt von einem Link. Gehen Sie nach unten und starten Sie den nächsten Inhalt. Nicht viel Nachdenken erforderlich, aber auch nicht gerade aufregend.

Wie in beschrieben Web-UI-Design für das menschliche Auge Das F-Muster ist sehr hilfreich für Websites, die Werbung oder Handlungsaufforderungen einbetten, aber den Inhalt nicht vollständig verdrängen möchten. In diesem Fall ist die Seitenleiste vorhanden, um Benutzer auf einer tieferen Ebene einzubeziehen. Wie bei allen Mustern ist das F-Muster eher eine Richtlinie als eine Vorlage, da sich das F-Muster nach den oberen Reihen des F langweilig anfühlen kann.

Bild mit freundlicher Genehmigung von Jerry Cao über http://speckyboy.com/

Bild mit freundlicher Genehmigung von Jerry Cao über http://speckyboy.com/

Eine ähnliche Verwendung der Augenbewegung bei Lesern von links nach rechts ist das Z-Muster. Ähnlich wie das F-Muster folgt das Z dem Lesen von links nach rechts als Augenscan der Seite und platziert wichtige Elemente im Pfad des Z-Scans des Auges.

Websites, die das Z-Muster verwenden, sind normalerweise nicht textlastig und haben einen definitiven Aufruf zum Handeln auf der Seite. Dieses Muster des Augenscannens bringt den Benutzer schneller zum Punkt, und schneller ist im Web besser.

Bild mit freundlicher Genehmigung von Jerry Cao über http://mailchimp.com/

Bild mit freundlicher Genehmigung von Jerry Cao über http://mailchimp.com/

02. Lerne die Regeln und wann du sie brechen sollst

Es gibt mehrere populäre 'Regeln' des Designgedankens. Alle haben gültige Punkte und natürlich können alle erfolgreich 'gebrochen' werden!

Im Folgenden werden einige gruppierte Bilder aufgeführt, um zu zeigen, wie diese Entwurfsregeln funktionieren. Eines ist einfach, Fotos auf Lager. Das andere ist eine Arbeit von jedem der vier hoch angesehenen Designer. Piet Zwart , Josef Müller-Brockmann , Paul Rand und Saul Bass . Lassen Sie uns anhand einiger spezifischer Websites sehen, wie diese Bilder unterschiedlichen Designregeln standhalten.

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Piet Zwart (oben links), Josef Müller-Brockmann (oben rechts), Paul Rand (unten links), Saul Bass (unten rechts)

Piet Zwart (oben links), Josef Müller-Brockmann (oben rechts), Paul Rand (unten links), Saul Bass (unten rechts)

03. Mit dem goldenen Rechteck

Auch bekannt als die Goldener Schnitt Dieser mathematische Albtraum in Form einer Muschel wurde über Jahrhunderte hinweg als Quelle für die Entdeckung des Sweetspots, des Bereichs maximaler Aufmerksamkeit auf einer Seite und der Bereiche verwendet, die das Auge direkt dorthin führen.

Das goldene Rechteck, auch bekannt als goldener Schnitt

Das goldene Rechteck, auch bekannt als goldener Schnitt

In der Geometrie ist ein goldenes Rechteck ein Rechteck, dessen Seitenlängen im goldenen Schnitt liegen:

1: tfrac {1 + sqrt {5}} {2}, dh 1: varphi (der griechische Buchstabe phi), wobei varphi ungefähr 1,618 beträgt.

Ja, es ist ein Kinderspiel, wenn Mathe Ihr Glück ist. Wenn nicht, versuchen Sie es Diese Internetseite für eine gründliche Erklärung und ein interaktives Diagramm. Eine einfache Erklärung ist, wenn Sie sich die Grundform und den Schwerpunkt ansehen (wobei zu berücksichtigen ist, dass die Form je nach Bild und Elementen im Design umgedreht, umgedreht oder gedreht werden kann), ist es einfach, das Design in Ihrem Kopf zu überlagern .

Sehen Sie anhand der Gruppe von Fotos, wie das Goldene Rechteck über das Design passt und den Bereich maximaler Aufmerksamkeit zeigt.

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Wenn Sie diese Regel nur für das Hintergrundbild verwenden, können Sie jedes Element (z. B. Textblock, Aufruf zum Handeln, Benutzeroberfläche usw.) dort platzieren, wo der Benutzer definitiv darauf aufmerksam wird.

Wenn Sie das Goldene Rechteck für die Arbeit von Zwart, Müller-Brockmann (der als Vater des Grid-Layouts bekannt ist), Rand und Bass (auch Anhänger des Grids) verwenden, werden Sie feststellen, dass es zwar wichtige Punkte des Auges zeigt wird das Design folgen, ist es wirklich ein notwendiger Schritt, wenn man die anderen Layoutmuster berücksichtigt, die die gleichen 'heißen' Bereiche zeigen?

In den letzten Jahren war das Pinterest-Layout bei Websites mit vielen Inhalten sehr beliebt. Der grundlegende Entwurfsablauf verwendet das F-Muster. Effektiv, aber für das Gehirn nicht aufregend, wenn es mit dem Auge gescannt wird.

Bild mit freundlicher Genehmigung von http://zergnet.com/

Bild mit freundlicher Genehmigung von http://zergnet.com/

Eine inhaltsreiche Nachrichten-Website wie die New York Times entwirft seine Seite mit dem Goldenen Rechteck, um das Auge von der wichtigsten Geschichte bis zur niedrigsten über der Schriftrolle zu lenken. Dies ist eine großartige Möglichkeit, mehrere Textblöcke auf einer Website zu platzieren und dennoch jeden in der Hierarchie der Seite zu platzieren.

Bild mit freundlicher Genehmigung von http://www.nytimes.com/

Bild mit freundlicher Genehmigung von http://www.nytimes.com/

Hier ist ein kleiner Cheat für diejenigen, die nicht rechnen möchten: Kopieren Sie einfach ein goldenes Rechteck und legen Sie es auf eine Ebene über Ihrem Design. Es zeigt auch die Bereiche mit maximaler Aufmerksamkeit auf einer Seite und ist beim Entwerfen der Seite leicht vorstellbar.

  1. Zeichnen Sie zunächst eine diagonale Linie von der linken oberen Ecke (wenn Sie für ein Publikum entwerfen, das von links nach rechts liest, kehren Sie diesen Schritt um) in die untere rechte Ecke.
  2. Zeichnen Sie von der unteren linken Ecke aus eine Linie zur Diagonale, die das Rechteck halbiert, und lassen Sie es diese diagonale Linie in einem Winkel von 90 Grad treffen.
  3. Wiederholen Sie das gleiche von der oberen rechten Ecke.

Die Punkte der rechten Winkel sind die beiden Bereiche maximaler Aufmerksamkeit für die Augen des Benutzers. Eine einfache und schnelle Möglichkeit, das Design einer Website-Seite zu planen.

  • Sie können auch diese hilfreichen Tools ausprobieren, um die Lernkurve zu verkürzen:
  • Freebie PSD mit benutzerdefinierten Verhältnissen für mehrere Formen
  • Freebie PSD mit anpassbaren Verhältnisrechtecken
  • Erklärung zum Stapelüberlauf zum Festlegen von Goldenen Verhältnissen in CSS

04. Anwendung der Drittelregel

Die Drittelregel (Ro3), auch als 'Design to the Nine' bekannt, ist das am häufigsten von Websites verwendete Layoutmuster. Die Aufteilung des Designbereichs gibt dem Designer bestimmte Bereiche von Bedeutung. Die Bereiche können in obere, mittlere und untere Bereiche unterteilt werden, links, mittel und rechts oder nur ein Drittel als separater Bereich, z. B. eine Seitenleiste.

Bild mit freundlicher Genehmigung von McDonalds.com

Bild mit freundlicher Genehmigung von McDonalds.com

In diesem Strom McDonald's Homepage (ihre Seite ändert sich regelmäßig ) schnitzt der Ro3 Platz heraus, sodass Ihre Augen zu folgenden Bereichen wandern können:

So ändern Sie alle Farben in Photoshop
  1. Front-and-Center-CTA nutzt Inhalte, um den Benutzer zum weiteren Erkunden zu verleiten. Da es sich nicht auf das Produkt konzentriert, erfährt dieser CTA wahrscheinlich weniger Reibung.
  2. BEEINDRUCKEND! Nur 2,50 $ für die gesamte Mahlzeit? Ich bin begeistert, bevor ich überhaupt zu dem lächelnden Mitarbeiter gehe, der meine tatsächliche Benutzererfahrung angenehmer macht, im Gegensatz zu dem spöttischen Mann in der oberen rechten Ecke, aber aufgrund der Auswirkungen, die dieser Bereich auf mein Augenscannen hat, nicht so auffällt .
  3. Ah-HA! Mit dieser Handlungsaufforderung kann ich andere herrliche Essenskombinationen sehen. Mal sehen, ob ich verkauft werden kann, indem ich auf diese Schaltfläche in der Mitte meines aktuellen Universums klicke - auf diese Webseite.
  4. Aber zuerst locken mich diese farbigen Kästchen. Ja, gegrilltes Hühnchen ist gut, und ich frage mich, ob diese Dinge in meinem Mund echte Kartoffeln sind, aber vor allem fasziniert mich das Versprechen, in die Liebesaktion einsteigen zu können.
  5. Als ständige Erinnerung sind das Logo und das Essen oben links sichtbar. Ich sehe was ich will und wo ich es bekommen kann!

Beachten Sie, dass die Schnittlinien des Ro3-Rasters die wichtigsten Bereiche für das Auge hervorheben, wenn Sie sich ansehen, wie dies mit den Beispielbildern in diesem Artikel funktioniert. Beachten Sie beispielsweise, wie sich die Linien auf dem ersten Foto um das Gesicht und die Glühbirne des Mannes schneiden. Sehen Sie auch, wie sich die Linien im Gesicht des Schriftstellers und am Aktionspunkt (Feder und Hand) schneiden.

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Bilder mit freundlicher Genehmigung von GL Stock Images, http://graphicleftovers.com/

Bild mit freundlicher Genehmigung von www.awwwards.com

Bild mit freundlicher Genehmigung von www.awwwards.com

Schauen Sie sich nun die Drittelregel an, die auf die Websites angewendet wird, auf denen die Trends und Beispiele Seite von awwwards (über). Sehen Sie noch einmal, wie die sich kreuzenden Bereiche Punkte von großem Interesse sind? Denken Sie daran, wenn Sie das nächste Mal die Zusammensetzung Ihrer Benutzeroberfläche planen.

05. Das Raster beherrschen

Beim Entwurf ist ein Gitter eine Struktur, die aus einer Reihe sich kreuzender gerader oder gekrümmter Hilfslinien besteht, die zum Strukturieren von Inhalten verwendet werden. Das Raster dient als Leitfaden, anhand dessen ein Designer grafische Elemente auf rationale, leicht zu absorbierende Weise für Auge und Gehirn organisieren kann.

Wie unten im nützlichen Prototyping-Tool UXPin gezeigt, hilft ein Raster dabei, grafische Elemente entsprechend zu organisieren:

  • In Bezug auf eine Seite
  • In Bezug auf andere grafische Elemente auf der Seite
  • In Bezug auf andere Teile desselben Grafikelements in Bezug auf eine Seite, auf andere Grafikelemente auf der Seite oder auf andere Teile desselben Grafikelements.

Dennoch kann das Raster für viele ein verwirrendes System sein. Dies liegt daran, dass es normalerweise von Designlehrern nicht richtig unterrichtet wird.

Bild mit freundlicher Genehmigung von UXPin

Bild mit freundlicher Genehmigung von UXPin

Wie bereits erwähnt, gilt Josef Müller-Brockmann als einer der Väter des modernen Netzlayout-Systems. Warum ist seine Arbeit über 70 Jahre später so frisch und innovativ?

Vielleicht half ihm das Erstellen des Rasters, die Grenzen und die Freiheit zu verstehen. Die meisten Leute denken, dass das Gitter die Gestaltungsfreiheit einschränkt. In der Realität ist das Raster keine Einschränkung der Entwurfsauswahl, sondern eine Hilfe für den Entwurfsprozess. Es hilft dabei, die Elementbeziehung in der wichtigsten Hierarchie der Seite anzuzeigen - genau wie die anderen in diesem Artikel beschriebenen Entwurfslayoutregeln.

Eine Google-Suche nach 'The Grid Layout' bringt zig Millionen Renditen. Beim Scannen der von der Google-Suche bereitgestellten Bilder registriert Ihr Auge Blöcke, horizontale und vertikale Linien, die häufig über das gesamte Layout gleich weit voneinander entfernt sind.

Die berühmte U-Bahn-Karte von NYC aus dem Jahr 1972, die von Massimo Vignelli entworfen wurde, war ein innovatives Design für ein großes Transitsystem. Es hat und inspiriert Transitkarten auf der ganzen Welt. Offensichtlich ist es auf das Gitter ausgelegt. Es nutzt das Netz selbst stark und behandelt das Transitsystem und vier der Bezirke von New York City eher als Entwurf als als genaue Darstellung von Meilen und Entfernung (was die Hauptbeschwerde über den Entwurf war).

Bild mit freundlicher Genehmigung der New York City Transit Authority, http://www.mta.info/nyct

Bild mit freundlicher Genehmigung der New York City Transit Authority, http://www.mta.info/nyct

Diese beiden Websites scheinen den Ro3 zu verwenden, wenn Sie über die Schriftrolle schauen. Da jedoch die gesamten Seiten angezeigt werden, ist es offensichtlich, dass die Seiten für das Raster entworfen wurden.

Bild mit freundlicher Genehmigung von GeneralAssembly.com und TreeHouse.com

Bild mit freundlicher Genehmigung von GeneralAssembly.com und TreeHouse.com

Hier sind einige wichtige Punkte, die Sie mit dem Raster als Grundlage für Ihr UI-Design beachten sollten:

  • Das Gitter ist ein Leitfaden und kein Gefängnis aus Linien und Würfeln.
  • Es hilft Ihnen dabei, Ihr Design und Ihre Platzierung auf die gleiche Weise zu organisieren wie das F-Muster, das Z-Muster, die Dreierregel und das Goldene Rechteck.
  • Es ist nur eine Anfangsebene, mit der Sie Segmente von Elementen darauf platzieren können.
  • Sie können perfekt gestapelt oder auf der Seite herumgewirbelt werden, jedoch in einer logischen Reihenfolge, in der das Auge scannen und das Gehirn reagieren muss.

Warum das wichtig ist

Da Vision der stärkste menschliche Sinn ist, muss eine Webseite eine Geschichte erzählen auf den ersten Blick.

Ihr Benutzer weiß innerhalb von 10-20 Sekunden Wenn sie gehen wollen, müssen Sie sie so schnell wie möglich überzeugen. Das Gesamtdesign erzählt eine Geschichte, und der Benutzer muss vom ersten bis zum letzten Kapitel dieser Geschichte geführt werden. Diese Entwurfsmuster sind die Lösung für diese Herausforderung.

Alle Kreativen haben diesen Selbstzweifel, wenn es um Designentscheidungen geht. 'Ist das die richtige Platzierung?' 'Ich bin fertig, aber nicht glücklich.' 'Was kann ich tun, um sicherzustellen, dass ich die richtigen Entscheidungen treffe?' Die Layoutmuster helfen bei korrekter Verwendung beim Entwerfen der Benutzeroberfläche (oder eines webbezogenen Designproblems) für maximale Effizienz und schaffen visuelle Harmonie. Und da schöne Dinge funktionieren besser All diese Taktiken tragen dazu bei, die bestmögliche Benutzererfahrung zu erzielen.

Weitere Tipps zum visuellen Design der Benutzeroberfläche finden Sie im kostenlosen E-Book Best Practices für das Web-UI-Design . Es ist eine gründliche, aber schnell lesbare Anleitung, die anhand von 33 Beispielen für großartiges Design von Unternehmen wie Houzz, Fitbit, Google und AIrbnb lehrt.

Wörter: Pfadfinder Schneider

Speider Schneider ist ein Produktdesigner, der unter anderem an Projekten für Disney / Pixar, Warner Bros., Harley-Davidson, ESPN, Mattel, DC und Marvel Comics, Cartoon Network und Nickelodeon gearbeitet hat. Er hat auch Hunderte von Artikeln über Webdesign und UI / UX verfasst

wie man einen Umriss einer Person zeichnet

Mochte dies? Probiere diese...