3 Wirksame Webdesign-Prinzipien für den „Nicht-Designer“

Willkommen zu Teil 2 unserer Miniserie „Effective Divi Web Design Principles“, in der wir effektive Designpraktiken untersuchen, um neue Webdesigner und diejenigen zu unterstützen, die sich als jemand ohne „Auge für Design“ identifizieren.

In unserem vorherigen Beitrag haben wir uns mit der Vorbereitung Ihrer Denkweise befasst und einige Möglichkeiten besprochen, wie Sie ein besseres Auge für Design entwickeln können. In diesem Beitrag konzentrieren wir uns auf einige universelle Prinzipien guten Designs, die Sie sofort auf Ihre Webdesign-Bemühungen anwenden können, um auf der "Design"-Seite des Webdesigns besser zu werden.

Kommen wir gleich dazu!

3 Wirksame Webdesign-Prinzipien für den „Nicht-Designer“

Wie bereits in Teil 1 dieser Serie erwähnt, gibt es beim Design kein Richtig oder Falsch. Was wir in diesem Beitrag besprechen werden, wird in der Webdesign-Community allgemein als gute Designprinzipien akzeptiert. Dies ist auch meine persönliche Richtlinie als Grafik- / Druckdesigner, der zum Divi-Webdesigner wurde, mit fast einem Jahrzehnt Erfahrung und vor allem Hunderten von glücklichen und zufriedenen Kunden. Ich wende diese Prinzipien bei jedem Divi-Website-Design an, das ich erstelle, und obwohl es immer diesen einen Kunden gibt, der etwas Grausames oder Ungewöhnliches möchte, werden diese Ihnen mindestens 9 von 10 Mal gute Dienste leisten

1) Drittelregel

Eine der gängigsten Praktiken in Webdesign, Grafikdesign, Printdesign, Fotografie und anderen kreativen Medien besteht darin, einer einfachen Regel zu folgen – der Drittelregel. Kurz gesagt, bei der Drittelregel dreht sich alles um Symmetrie und Balance. Das Ziel der Drittelregel soll Ihnen helfen, mehr Ausgewogenheit und Harmonie im Design zu erreichen. Und das Beste daran ist – Sie können die Drittelregel auf Grafiken, Bilder, komplette Webseiten-Layouts und mehr anwenden!

Es gibt zahlreiche Online-Diskussionen darüber, ob die Drittelregel wissenschaftlich ist oder nicht, aber unabhängig davon zeigt die populäre Meinung, dass das Publikum es finden könnte, wenn ein Bild oder Design sowohl in der linken als auch in der rechten Hälfte oder oben und unten zu ähnlich ist langweilig oder langweilig. Wenn überhaupt, hält die Drittelregel es interessant und kann zu einem guten Fluss führen, den wir weiter unten behandeln werden.

In unserem vorherigen Beitrag zu Designtipps zur Optimierung Ihres Divi-Webinhalts wird es auch als Rastersystem bezeichnet, was eine großartige Möglichkeit ist, visuell darüber nachzudenken. Stellen Sie sich ein Raster vor, das so aussieht:

Mit diesem imaginären Raster auf Ihrem Bild, Ihrer Grafik oder Ihrem Layout können Sie Inhalte ganz einfach in der Nähe eines oder mehrerer der Hauptschnittpunkte platzieren.

Wenn Sie Objekte und Brennpunkte an einem oder mehreren der 4 Schnittpunkte halten, wird oft ein viel ausgewogeneres, symmetrischeres Aussehen erzielt als im zweiten Beispiel, bei dem sich das Motiv unterhalb des Schnittpunkts befindet. Schauen Sie sich das Bild unten an. Das erste Beispiel folgt NICHT der Drittelregel.

Dieses Beispiel folgt der Drittelregel.

Während das erste Beispiel immer noch ein schönes Bild ist, verleiht die Verwendung der Drittelregel dem Bild ein völlig anderes Gefühl, indem der Vordergrund mit den unteren Schnittpunkten in der Drittelregel geschnitten wird. Schauen wir uns das Bild mit dem Drittelregelraster an.

Schauen wir uns nun das Bild an, ohne die Drittel-Schnittpunkte auszurichten.

Sie können einen großen Unterschied darin sehen, wie sich die ansprechenden Designs oft mit einem oder mehreren der Schnittpunkte ausrichten. Während in der Fotografie und Videografie am häufigsten über die Drittelregel gesprochen wird, ist sie für das Website-Design genauso wichtig. Ich zeige Ihnen, wie ich die Drittelregel auf meine persönliche Website angewendet habe. Hier ist eine Momentaufnahme des ursprünglichen Designs „above the fold“, das für das gilt, was der Betrachter sieht, bevor er nach unten scrollt.

Lassen Sie uns nun das Drittelregelraster über den Hauptbereich legen und sehen, wie es aussieht. In diesem Fall konzentriere ich mich auf den Inhalt unter dem Hauptmenü, in dem ich die Drittelregel implementiert habe.

In diesem Beispiel gibt es 4 Hauptelemente, die sich auf oder in der Nähe der Schnittpunkte befinden. Kurz gesagt, ich wollte Folgendes betonen:

1. Eine kurze Beschreibung, wer ich bin und worum es auf dieser Seite geht.
2. Ein Bild, das es neuen Benutzern ermöglicht, sich wohler und vertrauenswürdiger zu fühlen, indem sie sehen, von wem sie hören werden.
3. Eine Grafik meines neuesten E-Books, die den Leuten einen Grund gibt, sich anzumelden.
4. Schließlich meldet sich eine Call-to-Action-E-Mail in den letzten 2 Frames an, wo das Auge des Benutzers endet.

Mit der Drittelregel ist es im Allgemeinen nicht die beste Vorgehensweise, an jedem Schnittpunkt etwas zu haben (insbesondere in der Fotografie), aber ich folge diesem Layout oft in meinen Website-Builds. Und am Rande: Da wir von links nach rechts lesen, habe ich oft Call-to-Actions in der Mitte oder auf der rechten Seite des Bildschirms, da hier unser Auge endet. Wir werden im letzten Beitrag dieser Serie ausführlicher auf den Call-to-Action eingehen, aber dies ist ein gutes Beispiel dafür, wie ich die Drittelregel in mein Design implementiert habe.

Wenn Sie sich also nicht sicher sind, wie Sie eine Webseite gestalten sollen oder Probleme mit dem Mischen von Bildern, Text und vielleicht einem Call-to-Action haben, versuchen Sie, die Drittelregel zu befolgen und lassen Sie sich davon leiten.

2) Layout und Fluss

Auch bei der Gestaltung und Gestaltung einer Webseite gibt es keinen richtigen oder falschen Stil. Es hängt oft vom Projekt, den Wünschen Ihres Kunden, Ihrem Designstil und oft vom Zielmarkt ab. In digitalen oder Dienstleistungen wie Webdesign-Agenturen, Mode und Fotografie finden sich häufig moderne und trendige Designs mit minimalistischem Look and Feel. Modernes Design bringt oft mehr Freiraum, weniger textgesteuerte Inhalte, mehr Bilder und vielleicht mehr Scrollen mit sich. (Einige meiner altmodischen Kunden schauderten einfach!)

In traditionelleren Geschäftsmärkten wie der Fertigung, Anwaltskanzleien, Industrieunternehmen usw. werden Sie wahrscheinlich Websites mit mehr textgesteuerten Inhalten, weniger Freiraum und zweifellos weniger ansprechenden Bild- und Designelementen finden. Und aus welchen Gründen auch immer, die Mehrheit meiner Kunden in diesen Branchen ist strikt gegen zu viel Scrollen. Daher ist es wichtig zu wissen, wie man ein Layout mit gutem Fluss entwirft! Ich habe oft festgestellt, dass ich versuchen muss, MEINEN kreativen Designstil mit dem in Einklang zu bringen, was in der Branche meines Kunden, der Zielgruppe und den Wünschen und Bedürfnissen meiner Kunden funktioniert. Abgesehen davon gibt es einige grundlegende Layout- und Flussprinzipien, die unabhängig davon angewendet werden können, mit wem Sie zusammenarbeiten oder in welcher Branche sie tätig sind.

Rückblickend auf den oben erwähnten vorherigen Beitrag ist eine sehr wichtige Richtlinie, die zu befolgen ist, ein Z-Muster des Designs. Sie werden dies häufig bei vielen der neuen professionellen Divi-Layout-Kits finden, die wöchentlich bereitgestellt werden.

Schauen wir uns an, was ich meine.

Im ersten Beispiel links ist links ein Bild, rechts Text mit einem schönen Call-to-Action-Button, dann liest dein Auge nach unten und links zu einem anderen Textabschnitt / CTA dann mit einem anderen Bild rechts und wiederholen. Umgekehrt ist im Bild rechts ein umgekehrtes Muster zu sehen. Text-zu-Bild-zu-Bild-zu-Text usw. Das Befolgen dieses Musters im Z-Stil ist eine großartige Möglichkeit, das Interesse der Leser zu wecken, und ist eine wunderbare Möglichkeit, Text und Bilder miteinander in Einklang zu bringen.

Dies ist nicht die einzige Option für das Layout im Fluss in einem guten Seitendesign, aber es ist eine gute Praxis, dass wir den Inhalt von links nach rechts und dann nach unten aufnehmen. Dann von links nach rechts, dann runter und so weiter. Versuchen Sie also im Zweifelsfall, dem Z-Stil-Muster zu folgen, um den Fluss Ihres Seiteninhalts zu organisieren. Und noch eine letzte Anmerkung zum Scrollen – ich neige dazu, meine Sites innerhalb von 3-5 Scrolls zu halten. Je mehr Sie scrollen müssen, desto größer wird die Seite und desto langsamer wird sie geladen. Auch hier gibt es kein Richtig oder Falsch beim Scrollen, aber wenn Sie noch nicht mit Kunden mit einer eher altmodischen Denkweise gearbeitet haben, werden Sie garantiert auf Widerstand stoßen. Ich versuche diesen Kunden zu versichern, dass Scrollen nicht zu befürchten ist. Social Media hat uns trainiert, ständig zu scrollen und Inhalte schnell aufzunehmen.

3) Visuelle Hierarchie

Das letzte Hauptprinzip, auf das ich hier hinweisen möchte, ist die visuelle Hierarchie. Kurz gesagt, Hierarchie hilft dem Benutzer, die wichtigsten Informationen zu erkennen und gibt ihm eine sehr klare Richtung, wohin sein Blick in Ihrem Design gehen sollte. Hierarchie wird oft mit Typografie referenziert (auf die wir in unserem dritten Beitrag eingehen), aber sie kann auch in den grafischen Elementen, Bildern und dem Gesamtdesign der Site sehr wichtig sein.

Ich werde nicht absichtlich auf Websites hinweisen, die meiner Meinung nach in der Abteilung für „gutes Design“ fehlen, aber ich bin sicher, Sie sind auf viele Websites gestoßen, die ein Sammelsurium von Texten und Bildern haben, die alle die gleiche Größe haben, ohne dass sie klar sind Aufruf zum Handeln, oder? Das wollen wir vermeiden. Die Verwendung einer guten Hierarchie ist der beste Weg, um Ihren Website-Benutzern zu zeigen, WAS sie als nächstes anklicken oder tun sollten.

Hier ist ein Beispiel für ein aktuelles Design, das ich unter Berücksichtigung der Hierarchie erstellt habe:

Während das Logo und die Telefonnummer oben rechts deutlich groß und sichtbar sind, ist der größte Inhalt und die lebendigste Farbe oberhalb des Falzes der Aufruf zum Klicken auf die Schaltfläche.

Mein Kunde wollte speziell, dass die Leute einfach eine Inspektion anfordern, wenn sie die Website betreten, also habe ich diese Idee der visuellen Hierarchie verwendet, um hoffentlich genau das zu erreichen! Ein weiteres Beispiel dafür, wie ich in letzter Zeit Hierarchie verwendet habe, ist das Design oberhalb der Falte auf dieser Site:

In diesem Fall besteht die Hauptaufforderung des Kunden darin, entweder online einzukaufen oder ihn direkt zu kontaktieren. Das Logo, die kurze Beschreibung und sogar die Telefonnummer sind weit verbreitet, aber der Divi Double Button ist das größte Element, das Sie anfangs sehen, in der Hoffnung, dass Benutzer klicken, wonach sie suchen, wenn sie nicht weiter scrollen.

Auch wenn dies nur ein paar Beispiele für visuelle Hierarchien sind, kann es eine sehr leistungsfähige Methode sein, um Ihre Website-Benutzer anzuweisen, das zu tun, was Sie von ihnen erwarten, oder dorthin zu gehen, wo Sie möchten! Als Nebenbemerkung empfehle ich dringend, unseren vorherigen Beitrag zu häufigen Webdesign-Fehlern zu lesen, die es zu vermeiden gilt.

Abschließend

Ich hoffe, diese effektiven Designprinzipien haben Ihnen bei Ihren Designbemühungen geholfen, egal ob Sie neu im Webdesign sind oder sich im Design verbessern möchten! Auch hier gibt es viele Prinzipien, die wir durchgehen könnten, aber dies sind die Top 3, die ich in all meinen Website-Designs zu implementieren versuche.

Wenn Sie weitere Designprinzipien haben, die Sie teilen möchten, teilen Sie uns dies in den Kommentaren unten mit!

Morgen: 3 wichtige Designbereiche, auf die Sie sich bei jedem Website-Build konzentrieren sollten

Nachdem wir uns nun mit der Vorbereitung unserer Denkweise, dem Erlernen eines besseren Auges für Design und einigen grundlegenden Designprinzipien befasst haben, wird unser letzter Beitrag einige der wichtigsten Aspekte des Webdesigns untersuchen, auf die wir uns konzentrieren sollten jeder Website-Build. Bis dann!

Abonnieren Sie unbedingt unseren E-Mail-Newsletter und unseren YouTube-Kanal, damit Sie keine große Ankündigung, keinen nützlichen Tipp oder ein Divi-Werbegeschenk verpassen!