Richtung des visuellen Inhalts Was Sie wissen müssen
Das visuelle Richtung des Inhalts ist ein weniger verbreiteter, aber entscheidender Aspekt von Webdesign mit hohem Conversion-Wert. Jeder Besucher "saugt" beim ersten Laden einer Seite eine neue Website ein - ob dies nun bewusst geschieht oder nicht.
Ästhetik spielt eine Rolle, aber es geht mehr um das Gesamtgefühl des Designs. Dieses Gefühl kann durch Whitespace, Typografie und Symmetrie beeinflusst werden Beziehungen zwischen Seitenelementen.
Designer wollen Besucher Bleib auf der Seite und Scroll weiter indem sie ihre Aufmerksamkeit auf sich ziehen und sie für die Website interessieren. Designprinzipien sollten immer im Mittelpunkt stehen auf funktion vor form. Das heißt das Design sollte den Inhalt ergänzen, schieben Sie es nicht als nachträglich ein.
In diesem Beitrag möchte ich Ihnen einige Tipps zeigen, wie Sie können Verbessern Sie Ihre Layouts und visuellen Inhaltsflüsse auf deiner Seite.
Konzentriere dich auf die Komposition
Jedes einzelne Teil einer Website wird erstellt auf dem Gesamtlayout. Dieses Gesamtlayout erzeugt eine Komposition, die den Regeln der Gestalttheorie folgt, die dies besagt Das Ganze ist immer größer als die Summe der Teile.
Einzelne Bereiche einer Seite kommen zusammen ein Ganzes bilden. Design-Elemente müssen eine erstellen Anziehungskraft auf den Inhalt; alles auf der Seite sollte Natürlich leiten Sie die Besucher weiter bis zum Ende der Seite.
Deshalb ist es so wichtig, dass Beziehungen zwischen verschiedenen Teilen des Inhalts (Grafiken, Text, Schaltflächen usw.) so gestaltet werden.
Dein Ziel sollte sein Menschen ermutigen um die Seite aus eigenem Antrieb zu durchsuchen. Es ist leichter gesagt als getan, aber man kann viel lernen echte Beispiele studieren.
Die Homepage für Monkop ist ein hervorragendes Beispiel für visuelle Hierarchie mit sowohl Text als auch Visuals. Zwischen den Elementen wird viel Platz benötigt, und die Typografie ergänzt die gebrandeten Vektorillustrationen.
Wenn Sie scrollen, werden Sie feststellen gerade horizontale Seitenblöcke geteilt durch Farben, Rahmen und Grafiken. Diese sind mit gebaut Designmuster im Verstand zu Konsistenz bieten auf der ganzen Seite.
Nach unten finden Sie eine zweispaltiger Split mit Bildern auf einer Seite, Text auf der anderen Seite. Die Bilder auch tauschen die seiten in einem Muster von rechts-links-rechts-links. Das zieht die Aufmerksamkeit auf sich und bricht die Monotonie auf der typischen Seite, solange noch einen natürlichen Fluss halten im inhalt.
EIN ähnliche Designästhetik finden Sie auf der Website von Picjumbo, einer Zielseite für ein Foto-Addon für Photoshop- und Sketch-Benutzer.
Die Startseite legt den Fokus auf das Logo und das Vorschau-Video. Beim Scrollen werden benutzerdefinierte Animationen angezeigt, die sich auf der gesamten Seite bewegen. Diese Animation wirklich Aufmerksamkeit erregt, und bekommt den Zuschauer interessiert, weiter zu scrollen.
Insgesamt fühlt sich die Seite an öffnen und einfach zu stöbern. Der Inhalt ist in horizontale Blöcke unterteilt mit gestochen scharfer Typografie und sauberen Icons.
Betrachten Sie die Art und Weise der verschiedenen Seitenelemente zusammen balancieren, der Abstand zwischen den Elementen, der Kontrast zwischen Farben und unterschiedlichen Formen. All diese Dinge spielen eine Rolle in der Gesamtkomposition. Jede Seite zieht natürlich ein gewisses Gewicht auf den Inhalt.
Es gibt keine absolute Antwort, denn es ist für jede Website anders. Zum Beispiel, Einige Navigationslinks sehen besser aus, wenn sie groß und übergroß sind. Andere passen besser, wenn sie sind klein mit Großbuchstaben.
Ich schlage vor, Sie studieren andere Websites in Ihrer Nische. Analysieren Sie wirklich, wie sie zusammengefügt werden. Versuchen Sie sogar, Layouts neu zu erstellen, um zu sehen, welche Elemente das Design letztendlich "zusammenbringen"..
Typ Design Matters
So wie Sie Ihre Typografie gestalten die Richtung des Inhalts beeinflussen auf deiner Seite. Dies hat mit der Typhierarchie und der Designstile verschiedener Seitenelemente B. Absätze, Kopfzeilen, Aufzählungslisten, Anführungszeichen und spezielle Layoutelemente wie Spalten oder Tabellen.
Visuals kann sich auch auf das Layout auswirken, daher ist es eine gute Idee, Inhalte zu entwerfen mit einem natürlichen Fortschritt. Schreiben Sie den Inhalt so fließt die Seite hinunter, und hält die Leute zu lesen durch jeden Absatz.
Das beste Werkzeug, das Sie zur Verfügung haben, ist dein Auge für Design. Lernen Sie, die Unterschiede zwischen typografischen Elementen und deren Beziehung zu anderen Seitenelementen zu erkennen. Erstellen Sie Beziehungen zwischen Seitenabschnitten, um Inhaltsbereiche zu unterscheiden.
Einige Dinge, die Sie berücksichtigen könnten:
- Textgröße
- Schriftfamilie
- Farbkontrast
- Beziehungen zu Seitenabschnitten
- Zeilenhöhe und Absatzränder
- Buchstabenabstand und Groß- / Kleinschreibung
Schauen Sie sich beispielsweise die Homepage von Campaign Monitor an. Die oberen Navigationslinks verwenden alle Großbuchstaben mit kleiner Beschriftung. Andere Überschriften auf der Seite folgen Sie diesem gleichen alle Kappenentwurf welche schafft ein Gefühl der Einheitlichkeit.
Andere größere Header auf der Website sind viel prominenter, und sie springen wirklich von der Seite. Wenn Sie sich ein typisches Header-Design anschauen, sollte es einfach sein Nenne den Unterschied zwischen einem Header und seiner gepaarten Hauptteilkopie.
Die typografischen Entwurfsstile in Campaign Monitor sind exquisit fügt sich natürlich in das Layout ein. Um ein solches Ergebnis zu erzielen, ist Übung erforderlich. Je mehr Sie versuchen, desto einfacher wird es sein.
Um etwas mehr zu lernen, empfehle ich die folgenden Links:
- Konstruktionsprinzipien: Visuelles Gewicht und Richtung
- Mit Visual Weight in Ihren Designs arbeiten
- 19 Faktoren, die das Gleichgewicht der Komposition beeinflussen
Leitender Inhalt
Verstehe das verschiedene Arten von Websites haben verschiedene Methoden um Besucher durch die Website zu führen. Zum Beispiel möchten Landing Pages Besucher mit leiten Leckerbissen von Informationen, kleine Icons, Screenshots, und Referenzen.
Andere Websites wie Blogs führen normalerweise keine Personen auf einmal zur Startseite. Die meisten Leute lande auf einer Artikelseite, also Blog-Layouts sind dazu gedacht Markieren Sie die Überschrift, und Leute zeichnen weiter in den Inhalt. Hier kommt qualitativ hochwertiges Copywriting ins Spiel, weil die Leser jedes Wort hängen lassen sollen.
Soziale Netzwerke und Web-Apps brauchen Qualität der Benutzererfahrung, Das ist ein etwas anderes Thema, aber bedenken Sie, wie der Facebook-Feed gestaltet wird fördern das Scrollen und die Benutzerinteraktion.
Die Entwurfsmethoden, die Sie verwenden, um die Benutzer auf der Website zu bleiben, werden dies tun im Laufe der Zeit ändern. Aber im Allgemeinen ist es dein Ziel Besucher führen mit einer visuellen inhaltlichen Richtung.
Werfen wir einen Blick auf a Zielseite und ein Blog-Design die Unterschiede erkennen.
Cactus ist ein statischer Standortgenerator für OS X. Ihre Homepage folgt Apples Designstil - Viele Leerzeichen und dünne serifenlose Schriftarten.
Der Inhalt ist in Spalten, Blöcken und Textblöcken mit einfachen Grafiken organisiert. Die gleiche Ästhetik ist gemeinsam mit Apple-Produkten, So können Mac-Benutzer diesen Designstil genießen.
Informationen zum Produkt - einschließlich Funktionen und Setup - sind direkt auf der Startseite aufgeführt. Die Seite selbst fördert das Scrollen durch einzigartigen Inhalt, grundlegende Symbole und ein abwechselndes Spaltenmuster aus linken / rechten Inhaltsblöcken.
Das Ziel hier ist, Informationen zu liefern existierende Benutzer, und zu verkaufen neue Nutzer die Idee von Kaktus.
Vergleichen Sie nun dieses Design mit der Homepage von The Next Web. Der Inhalt ist viel mehr sporadisch auf einer Blog-Homepage, denn es gibt viele verschiedene postthemen.
Rechtecke bilden ein Gittersystem, das einkapselt mehrere Beiträge in einem einzigen Layout. Das Ziel hier ist zu Benutzer dazu bringen, Inhalte zu lesen auf der Website. Es ist egal, ob Besucher etwas herunterladen, aber es ist wichtig, wenn sie etwas herunterladen Bleib rum, um etwas zu lesen.
Der Weg, um Leute zum Lesen zu bringen, ist mit Tolle Fotos und eingängige Schlagzeilen. TNW leistet einen tollen Job und das Layout ist gebaut, um die Leute zu browsen mit verwandten Postminiaturen in der Seitenleiste und im After-Content-Bereich.
Besucher zu einer bestimmten Aktion zu führen, ist auf jeder Website anders. Sie können jedoch viel lernen, wenn Sie die Aktivitäten anderer erfolgreicher Websites und das Kopieren von Texten untersuchen.
Vertraue deinen Augen
Einzelne Design-Eigenschaften können analytisch erklärt werden, die Implementierung ändert sich jedoch für jeden Standort. Ein Heldenbild mit einem Link "Weiterblättern" führt nicht dasselbe aus auf allen Websites.
Design lernen ist sehr a visueller Prozess. Ihr Auge für Design ist der wichtigste Aspekt. Du musst Dinge richtig sehen um das zu identifizieren visuelle Hierarchie. Wenn Sie es auf anderen Websites sehen, können Sie es auf Ihren eigenen Websites replizieren.
Der beste Rat, den ich habe, ist zu vertraue deinen Augen. Erstellen Sie eine Liste Ihrer Lieblingswebseiten und verbringen Sie jeweils 5 Minuten damit, diese zu durchsuchen. Notieren Sie sich Ihre Lieblingselemente auf der Seite und wie sich diese auf das Design auswirken. Das wird dir helfen Verinnerlichen Sie diese Konzepte aus UI / UX-Perspektive, eher als die Perspektive eines Benutzers.
Scheuen Sie sich auch nicht, Sachen auszuprobieren! Im Design ist niemand gut gerade durch das Lesen von Artikeln über Design. Ja, sie helfen - sie können tatsächlich viel helfen. Aber du brauchen zu Erstellen Sie Sachen von Grund auf, um zu erfahren, was funktioniert und was tut nicht.
Trainieren Sie Ihr Auge, indem Sie die gewünschten Website-Layouts studieren und neu erstellen. Im Laufe der Zeit bauen Sie in Ihrem Kopf eine Musterbibliothek auf, die das Entwerfen neuer Websites erheblich vereinfacht.
Einpacken
Diese Tipps helfen Ihnen hoffentlich beim Einstieg und geben Ihnen einen grundlegenden Fahrplan. Es ist nicht leicht, Webdesigner zu werden, aber die Welt braucht Talent, und es war noch nie einfacher, sich diese grundlegenden Konzepte beizubringen.
Studie Die besten Beispiele für Websites mit Seitenelementen, die Sie mögen. Zug Ihr Auge, um Beziehungen zu erkennen, und Sie werden schnell entwickeln die erforderlichen Fähigkeiten replizieren diese Beziehungen in Ihrer eigenen Arbeit.
