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

Willkommen zu Teil 3, dem letzten Beitrag 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.

Nachdem wir uns nun mit der Vorbereitung und dem Erlernen eines besseren Auges für Design befasst haben und einige effektive Designprinzipien für unsere Toolbox besprochen haben, konzentrieren wir uns auf 3 sehr wichtige Designbereiche, die der Schlüssel zum Erreichen eines gut gestaltete Seite.

Kommen wir gleich dazu!

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

Wenn Sie mit den ersten beiden Beiträgen dieser Serie Schritt gehalten haben, haben Sie mich darauf hingewiesen, dass es beim Design kein Richtig oder Falsch gibt, aber neben den effektiven Designprinzipien, die wir besprochen haben, gibt es einige wichtige , praktische Bereiche des Designs, auf die ich mich konzentriere, um jedes Mal eine erfolgreiche, ansprechende Website zu erstellen. Und das Beste daran ist, dass diese Ideen auf jede Branche oder jeden Webdesign-Stil übertragbar sind!

1) Typografie und Schriftarten

Ihre Website kann schöne Bilder, ansprechende Farben und ansprechende Designelemente aufweisen, aber wenn die Schrift abweicht oder nicht zum Stil der Website passt, kann dies eine große Abschreckung darstellen. Da wir in dieser Serie nicht auf die Grundlagen der Typografie eingehen, lesen Sie bitte unseren Beitrag 50 Typografiebegriffe, die jeder Webdesigner kennen (und verstehen) sollte, wenn Sie mehr über die Grundlagen erfahren möchten. Ein Verständnis von Kerning-, Leading-, Tracking-, Sans- und Sans-Serif-Schriften ist für die Person, die in Schrift und Design besser werden möchte, sehr hilfreich.

Lassen Sie mich Ihnen ein paar praktische Typografie-Richtlinien anbieten, an die ich mich als erfolgreicher Divi-Webdesigner mit Kunden halte, die sich in Designstilen und verschiedenen Branchen stark unterscheiden:

Verwenden Sie Schriftarten, die gut zu der Branche/dem Design Ihrer Sites passen – Im ersten Beitrag dieser Serie erinnerte ich mich an ein Beispiel, bei dem ich selbst zugegeben eine Site entworfen habe, die tolle Bilder und Farben hatte, aber die Schriftart passte nicht gut. Kurz gesagt, es war eine industrielle Produktionsstätte und die Schriftart, die ich anfangs verwendete, war ein modernerer, schlanker Stil, der tatsächlich nicht zum Look und zur Marke des Unternehmens passte.

Dies bedeutet nicht, dass Sie mit Schriftarten nicht kreativ werden können oder dem Status Quo der Branche entsprechen müssen, aber praktisch, wenn Sie an einer professionellen Service-Site arbeiten, werden Sie wahrscheinlich keine über- the-top, künstlerische Schriftart beteiligt. Und umgekehrt, wenn Sie an etwas mit einem einzigartigen, vielleicht künstlerischen Vibe arbeiten, werden Arial oder Helvetica vielleicht nicht zu Ihrem Vibe passen. Dies bringt mich zu meinem nächsten Punkt beim Mischen und Anpassen von Schriftarten.

Bleiben Sie bei 2 bis 3 Schriftarten – Ein seit Jahrzehnten bewährtes grundlegendes Gestaltungsprinzip besteht darin, die Anzahl der verwendeten Schriftarten zu begrenzen. Zu viele Schriftarten lenken den Leser ab, verwirren oft die Hierarchie und sehen am Ende wie ein alter Westernflieger aus, der eine Belohnung für einen Gesetzlosen sucht. Ich bleibe oft bei einer Schriftart für Kopfzeilen und Titel und verwende dann normalerweise eine leicht lesbare serifenlose Schriftart für meinen gesamten Absatztext. Manchmal habe ich eine dritte Schriftart für das Hauptmenü, aber meine Menüschrift ist oft mit meinen Titeln gestrafft.

Weitere Ideen zum Paaren von Schriftarten finden Sie in diesem vorherigen Beitrag zum Thema Schriftartenpaarung im Webdesign: 7 wichtige Prinzipien aufgedeckt und erklärt

Verwenden Sie visuelle Elemente für Ihren Text – Eine anständige Textmenge in Ihren Inhalten ist großartig. Tatsächlich wird empfohlen, mindestens 300 Wörter pro Seite zu verwenden, um aus SEO-Sicht zu helfen. Aber pass auf, dass du zu viel Text und nicht genug visuelle Hilfsmittel hast. Bei Büchern, Blogs, Artikeln und anderen langen Inhalten wird viel Text erwartet, aber wenn Sie eine ansprechende Landingpage entwerfen, wird der Benutzer zu viel Inhalt langweilen, bevor er weiter sucht. Ich entwerfe oft mit der Denkweise, dass die Titelseite der Verkaufstrichter sein sollte, der Kunden durch die Tür bringt, DANN können sie in weitere Seiten, Blogs und andere Ressourcen eintauchen, um detailliertere Informationen zu erhalten.

Die Elegant Themes-Homepage ist derzeit ein perfektes Beispiel dafür.

In diesem Beispiel sehen wir einen ansprechenden Titel, einen Textabschnitt mit einem Call-to-Action-Button und eine schöne visuelle Grafik, die die Nachricht einbindet und den Benutzer beschäftigt. Dies ist ein großartiges Beispiel, wenn Sie eine anständige Textmenge mit Bildern organisieren möchten.

Ich hatte einmal eine schöne Titelseite mit Text und Bildern gestalten lassen, und als ich sie meinem Kunden übergab, um grundlegende Änderungen vorzunehmen, hatten sie etwas, das wie ein kleines Kapitel eines Buches aussah, auf die Titelseite geworfen, was den Fluss des Designs völlig ruinierte Ich erschuf. Lassen Sie das also eine Lektion sein und wissen Sie, dass Inhalte zwar großartig sind, aber entsprechend platziert werden müssen!

Eine weitere großartige Ressource, auf die Sie zurückgreifen können, sind 20 Typografie-Trends, auf die Sie im Jahr 2016 achten sollten, da diese Trends auch heute noch sehr gültig sind und sich weiterentwickeln werden.

2) Bild- und Farbmanagement

Ähnlich wie bei der Typografie tendiere ich dazu, bei meinen Website-Builds maximal 2 bis 3 Primärfarben zu verwenden. Es sei denn, es handelt sich um ein Unternehmen oder eine Organisation mit einer Vielzahl von Farben im Branding, finde ich, dass zu viele Farben (insbesondere wenn sie nicht gut zusammenpassen) sehr ablenkend und oft verwirrend sein können. Hier sind einige Richtlinien, an die ich mich beim Mischen von Farben und Bildern halte:

Grundfarben und Akzentfarben – Eine Methode, die ich in den letzten Projekten als sehr erfolgreich befunden habe, besteht darin, das Branding eines Kunden zu übernehmen und, falls noch nicht geschehen, eine schöne Akzentfarbe für Call-to-Actions, Links usw. auszuwählen Website habe ich das Branding des Logos mit Grau und Orange übernommen und ein dezentes, dunkles Blaugrün/Blau hinzugefügt, um das Orange als Hauptakzentfarbe „knallen“ zu lassen.

Optimieren Sie Farbe mit Bildern – Eine Möglichkeit, Ihr Design und Ihre Bilder auf großartige Weise zusammenzubringen, besteht darin, die Farben der Website mit einigen der primären Bilder abzugleichen. Dieses Beispiel ist etwas selten, da ich die Website-Farben an das Outfit meines Kunden anpassen konnte, was für ein sehr schönes, stromlinienförmiges Gefühl zwischen den Bildern und der Website-Farbe sorgte.

Ich habe eine schöne kastanienbraune und orange Farbe von meinem Kundenoutfit genommen und konnte die gesamte Site in einem schönen uniformierten Look zusammenbringen. Jetzt werden Sie selten in einer Situation sein, in der Sie eine ganze Site mit einem Bild versehen können, aber das gleiche Prinzip kann angewendet werden, wenn Sie Hintergrundbilder mit Call-to-Actions usw. verwenden!

Wenn Sie sich nicht sicher sind, wie Sie bestimmte Farben auswählen sollen, finden Sie hier 10 Farbauswahlwerkzeuge

Vermeiden Sie zu lebhafte Farben – ich sehe oft, dass neuere Designer superhelle Grün-, Rosa-, Gelbtöne usw. verwenden, die einen zusammenkneifen und vom Bildschirm wegziehen. Ich werde hier keine schlechten Beispiele nennen, aber ich bin sicher, Sie haben viele Seiten gesehen, auf denen die Farben Sie dazu gebracht haben, sich abzuwenden und nie mehr zurückzuschauen. An leuchtenden Farben ist sicherlich nichts auszusetzen, aber stellen Sie sicher, dass sie diesen Effekt nicht erzeugen. Hier kann sich konstruktive Kritik und Feedback von anderen Designern auszahlen.

Meine Empfehlung ist, eher neutrale Farben für Grundfarben wie Text, Hintergrundgrafiken usw. zu verwenden und dann lebendigere Farben für Handlungsaufforderungen, Links und mehr Aufmerksamkeit erregende Bereiche des Seitendesigns zu verwenden. Wenn Sie neu im Design sind und Farbe für Sie kein angenehmer Bereich ist, können Sie sich gerne auf unsere Farbabstimmungstechniken für WordPress-Webdesigner beziehen, die viele Optionen zur besseren Farbauswahl bieten.

3) Starke Call-to-Actions

Schließlich ist ein sehr wichtiger Bereich des Webdesigns ein starker und klarer Call-to-Action (CTAs). Eines der häufigsten Probleme bei schlechtem Webdesign besteht darin, dass umfangreiche textbasierte Inhalte ohne klare Handlungsaufforderungen vorhanden sind. Inhalt ist großartig, aber wenn es sich nur um Informationen und keine Konvertierung handelt, wird Ihr Kunde sicherlich nicht zufrieden sein. Ich empfehle, Ihre CTAs durch eine Akzentfarbe oder einen schönen Schwebeeffekt von anderen Elementen in Ihrem Design abzuheben.

Hier ist ein Beispiel dafür, wie ich einen Call-to-Action für einen neuen Kunden implementiert habe.

In diesem Fall besteht der primäre Call-to-Action des Kunden für Website-Benutzer darin, sich für E-Mail-Updates anzumelden. Daher erscheint das Logo auf Anhieb aus einem dunkleren Hintergrundbild, ein wenig Text mit einer sofortigen Möglichkeit zur Anmeldung bevor Sie nach unten scrollen. Idealerweise möchten Sie die Aufmerksamkeit Ihrer Benutzer auf Ihren Call-to-Action lenken. Hier ist eine lebendige Akzentfarbe oder ein lebendiger Effekt auf einer Website äußerst vorteilhaft.

Hier sind ein paar Richtlinien, an die ich mich bei Call-to-Actions halte:

Beenden Sie Ihre Homepage mit einem starken Aufruf zum Handeln – Meistens sind meine Homepage-Designs fast eine Zusammenfassung der Site als Ganzes. Wenn eine Site beispielsweise eine Struktur wie diese hat:

• Über uns
• Dienstleistungen
• Referenzen
• Blog
• Kontakt

Ich werde für jeden dieser Abschnitte auf der Homepage einen Call-to-Action machen und dann ein endgültiges, schlankes Design für den Haupt-Call-to-Action, der in diesem Fall die Anmeldung wäre. Hier ist ein Paradebeispiel für das, was ich meine:

Die Titelseite umfasst im Wesentlichen die gesamte Site und ist ein Ausgangspunkt für Benutzer, um Galerien, Videos und weitere Informationen anzuzeigen. Vielleicht hilft Ihnen diese Denkweise wie bei Ihren Homepage-Designs!

Haben Sie einen Call-to-Action in Ihrer Sidebar – Vergessen Sie nicht die Gelegenheit für einen starken Call-to-Action in der Sidebar! Vor allem, wenn Sie eine Website mit Blog-Posts oder anderen Seiten haben, die häufig eine Seitenleiste verwenden. Dies ist eine großartige Gelegenheit, eine zusätzliche E-Mail-Anmeldung, einen Spenden-Button oder einen Link zu einem anderen Haupt-CTA hinzuzufügen.

Ähnlich wie bei der obigen Website ist eine der wichtigsten Handlungsaufforderungen für meine persönliche Website eine E-Mail-Anmeldung, und obwohl dies auf meiner Homepage im Vordergrund steht, wollte ich es auch auf meinen Blog-Posts und Tutorial-Seiten deutlich machen .

Hier habe ich es oben rechts in jeder Beitragsvorlage zusammen mit einem starken Bild über und unter dem Hauptanmeldungsformular. Wenn Sie also Seiten mit Seitenleisten haben, denken Sie daran, dass diese Bereiche wertvolle Immobilien für einen starken Aufruf zum Handeln sind! Und Sie möchten sicher sein und Ihre CTAs sichtbar machen und vorzugsweise oben in der Seitenleiste, die auf Mobilgeräten zuerst unter dem Hauptinhalt angezeigt wird.

Call-to-Action nach Inhalten von Unterseiten – Schließlich und vielleicht am meisten übersehen, sollten Sie daran denken, auf Ihren normalen Seiten einen Call-to-Action zu haben! Ich habe dies selbst zugegebenermaßen bis vor kurzem übersehen, als es von einem Kunden angefordert wurde. Das folgende Beispiel enthält einen starken Aufruf zum Handeln am Ende der Hauptdienstseiten.

Wenn ein Website-Benutzer diese Seite ansieht, nimmt er alle Informationen auf und hat dann die Möglichkeit, meinen Kunden bei Interesse zu kontaktieren, mit einem schönen, einladenden Bild rechts und einem CTA-Button auf der linken Seite, der von einem leuchtenden Orange unterstützt wird, was diesem Abschnitt hilft knall von der Seite. Ja, ich weiß, ich habe in einem früheren Beitrag gesagt, dass ich meine CTAs normalerweise in die Mitte oder rechts platziere, aber dieses Layout schien einfach gut zu funktionieren

Serienzusammenfassung

Nun, ich hoffe, diese Serie hat Sie mit einigen guten Webdesign-Prinzipien und -Taktiken inspiriert, die Sie auf Ihre Webdesign-Bemühungen anwenden können! Lassen Sie uns kurz zusammenfassen, was wir in der gesamten Miniserie besprochen haben:

Teil 1

• Vorbereitung Ihres Mindsets
• Wie man gute Designtrends lernt
• Holen Sie sich Feedback und konstruktive Kritik zu Ihrer Arbeit

Teil 2

• Befolgen Sie die Drittelregel
• Layout und Fluss
• Visuelle Hierarchie

Teil 3

• Typografie und Schriftarten
• Bildsprache und Farbe
• Starke Call-to-Actions

Auch hier sind ganze akademische Studien dem guten Design gewidmet, also kratzen wir hier nur an der Oberfläche, aber ich hoffe, dass diese Prinzipien und Praktiken denen von Ihnen geholfen haben, die im Design besser werden wollen, in die richtige Richtung zu weisen. Wenn Sie andere Designprinzipien oder -methoden haben, die Ihnen geholfen haben und die Sie gerne teilen möchten, teilen Sie uns dies gerne in den Kommentaren unten mit!

Wir alle werden jeden Tag bessere Divi-Webdesigner!

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!