11 Designfehler, die WordPress-Theme-Käufer normalerweise machen

Haben Sie schon einmal eine Website mit WordPress-Theme erstellt, aber das Endergebnis sah nicht so aus wie die Theme-Demo? Ich habe 11 häufige Designfehler aufgelistet, die von Website-Erstellern oft übersehen werden.

Sie haben das perfekte WordPress-Theme gefunden. Die Demo des Themas sah einwandfrei aus. Ihr Kunde hat es sehr gemocht und mit Ihnen zugestimmt, einen Kauf zu tätigen. Sie haben es gekauft, installiert und begonnen, das Design an die Bedürfnisse des Kunden anzupassen.

Sie haben das Logo geändert, die Farben des Themas geändert, die Slider-Bilder und den Inhalt eingefügt, aber am Ende sieht die von Ihnen erstellte Website überhaupt nicht wie die Demo aus. Sie wissen, dass etwas nicht stimmt, aber Sie können einfach nicht erkennen, was. Klingt vertraut?

In den letzten 5 Jahren habe ich als Designer im WordPress-Theme-Geschäft unzählige Beispiele für schöne Websites gesehen, die mit unseren WordPress-Themes erstellt wurden.

Aber hin und wieder sehe ich eine Website mit einem soliden Fundament, aber mit ein paar kleinen Designfehlern, die das Gesamterlebnis ruinieren. Ich spreche von Kleinigkeiten, die von jedem leicht behoben werden können.

Ich weiß, dass es schwierig ist, diese Fehler zu erkennen, besonders wenn Sie kein Designer sind. Aus diesem Grund habe ich mich entschlossen, einen Blogbeitrag darüber zu schreiben, wie Sie die Website Ihres Kunden verbessern können, damit sie noch besser aussieht.

Setzen Sie ein Lesezeichen für diesen Blogbeitrag und gehen Sie die Liste unten durch, wenn Sie das nächste Mal eine Website mit WordPress-Theme erstellen. Es dauert nur ein oder zwei Stunden, um alle Unvollkommenheiten zu entfernen, aber das Ergebnis wird 100 % besser aussehen.

1. Schlechter Kontrast des Textes auf dem Schieberegler

Ich habe über die Gebote und Verbote von Slider-Bildern gesprochen, also werde ich mich jetzt kurz fassen. Die Prinzipien sind einfach:

• Wenn die Farbe des Textes auf dem Schieberegler weiß ist, wählen Sie einen dunklen Hintergrund. Wenn der Schiebereglertext dunkel ist, wählen Sie einen hellen Hintergrund.
• Stellen Sie sicher, dass der Bereich, in dem der Text angezeigt wird, nicht zu viel visuelles Rauschen im Hintergrund aufweist. Ein überladener Hintergrund verringert die Lesbarkeit des Textes auf der Vorderseite und ein auf dem Slider geschriebenes primäres Wertversprechen könnte übersehen werden.

Zu Ihrem Glück enthalten die meisten unserer Themen die Option eines halbtransparenten, soliden Hintergrunds hinter dem Text. Bei unseren neueren WordPress-Themes wird auch ein Schatten auf den gesamten Text auf dem Schieberegler angewendet, sodass der Kontrast noch besser ist.

2. Zu große Slider-Bilder

Wenn ich mir die Websites anschaue, die mit unseren WordPress-Themes erstellt wurden, stelle ich ziemlich oft fest, dass Benutzer zu große Slider-Bilder verwenden. Ein Slider-Bild zu haben, das 100 % der Bildschirmhöhe einnimmt, ist nur akzeptabel, wenn Sie ein Fotograf sind und Fotos Ihr Endprodukt sind. Bleiben Sie ansonsten auf der sicheren Seite und halten Sie sich an die Themenempfehlungen. Es bewahrt das perfekte visuelle Gleichgewicht Ihrer Website.

3. Schlechter weißer (negativer) Raum

Weißer oder negativer Raum im Webdesign ist ein leerer Raum zwischen Widgets, Textblöcken, Bildern oder anderen Teilen der Website, der hilft, alles zu organisieren und einen klaren, logischen Fluss für den Endbenutzer zu liefern.

Egal wie sehr wir uns bemühen, wie wir jeden möglichen Aspekt des WordPress-Themes kugelsicher machen, die Benutzer finden immer einen Weg, den weißen Raum zu zerstören.

Zu Ihrem Glück verwenden wir in unseren Themen einen leistungsstarken Page Builder, sodass Sie Ihre Abstände auf der Website problemlos anpassen können. Mit Page Builder können Sie die Polsterung des Widgets und der Zeile ändern und die Bundsteggröße zwischen den Spalten ändern.

Ich werde nicht auf Details eingehen und Ihnen lieber einige praktische Beispiele geben.

• In den meisten Fällen verwenden Website-Ersteller zu wenig Weißraum, wodurch der Inhalt nicht atmen kann. Je mehr Weißraum Sie verwenden, desto besser ist das Ergebnis.
• Zeigen Sie die Beziehung zwischen Elementen mit Abständen an. Die Elemente, die zusammengehören, zum Beispiel der Titel des Blogbeitrags und das Datum des Beitrags, sollten näher beieinander liegen als die Elemente, die einen anderen Zweck haben, wie das Datum des Blogbeitrags und die Kopfzeile der Seite.
• Seien Sie konsistent mit dem Abstand. Das bedeutet, dass jede einzelne Zeile Ihrer Website oben, unten, links und rechts die gleiche Menge an Weißraum haben sollte.

Es geht also um Widgets. Sie sollten die gleiche Menge an Auffüllungen und Rändern haben, egal wo auf der Seite sie erscheinen. Konsistenz wird Ihre Website ins Gleichgewicht bringen und den Fokus auf das Wesentliche lenken – den Inhalt.

4. Schlechte Handyfreundlichkeit

Die Vorgehensweise und die Regeln sind die gleichen wie auf dem Desktop oben. Sie müssen immer noch auf den weißen Bereich achten, aber für Mobilgeräte gibt es ein paar zusätzliche Regeln:

• Eines davon ist ein fingerfreundliches Design. Da Finger unsere Werkzeuge sind, um uns beim Surfen auf dem Handy auf der Website zu bewegen, müssen wir die Seite an sie anpassen. Wenn wir ein WordPress-Theme entwerfen, achten wir darauf, dass Schaltflächen und anklickbare Elemente nicht kleiner als 50 Pixel sind. Wenn Sie dem WordPress-Theme Elemente von Drittanbietern hinzufügen, stellen Sie sicher, dass sie groß genug sind. Stellen Sie außerdem sicher, dass diese umsetzbaren Komponenten nicht zu stark zusammenkleben, um Fehlklicks zu vermeiden.
• Optimieren Sie Bilder für Geschwindigkeit. Viele Menschen greifen unterwegs auf Websites zu, was eine unzuverlässige, manchmal schlechte Verbindung bedeutet. Versuchen Sie, ein langsames Laden der Website (auf Mobilgeräten) zu vermeiden und Ihre Bilder zu optimieren.
• Testen Sie Ihre Website auf einem echten Mobilgerät. Sie können die Größe des Browserfensters ändern, um die mobile Ansicht anzuzeigen, aber wenn Sie mit allen Anpassungen fertig sind, sehen Sie sich an, wie die Website auf dem tatsächlichen mobilen Gerät aussieht.

Betriebssysteme, Browser und die allgemeine Benutzererfahrung unterscheiden zwischen Desktop und Mobile und es könnte zu einigen Ungleichheiten kommen.

Google hat einen Mobile-Friendly-Test entwickelt, ein Tool, mit dem Sie überprüfen können, ob Ihre Website für Mobilgeräte optimiert ist.

Wir stellen sicher, dass jedes unserer WordPress-Themes es problemlos besteht.

5. Farben verwenden, die einfach nicht zusammenpassen.

Die Wahl der richtigen Farbkombination ist eine knifflige Sache. Wenn Sie talentiert sind, können Sie Ihrem Bauchgefühl folgen. Verwenden Sie andernfalls die speziell dafür hergestellten Werkzeuge.

Ich zeige Ihnen ein Beispiel:

Die meisten unserer WordPress-Themes bestehen aus Primär- und Sekundärfarben. Wenn Ihr Logo wie das von Shell aussieht, ist die Entscheidung, die Primär- und die Sekundärfarbe auszuwählen, einfach. Rot wird als Primärfarbe für Call-to-Actions verwendet. Gelb ist eine Sekundärfarbe, die für Hintergründe und unterstützende Elemente verwendet wird.

Wenn Ihr Logo wie das Logo von Starbucks aussieht und nur aus einer Farbe besteht, müssen Sie die Zweitfarbe finden.

Eine Möglichkeit besteht darin, die gleiche grüne Farbe für die Primär- und die Sekundärfarbe zu wählen, aber davon würde ich dringend abraten.

Wenn Sie kein Designertalent haben und es Ihnen schwer fällt, die Farbkombinationen auszuwählen, habe ich eine Lösung für Sie, genannt Coolors. Es ist ein einfach zu verwendendes Werkzeug zum Erstellen schöner Farbkombinationen.

Gehen Sie zu ihrer App und geben Sie den Hex-Farbcode (in meinem Fall #006241) Ihrer Primärfarbe am Ende der Spalte ein. Sperren Sie es dann, indem Sie auf das Schlosssymbol klicken und die Leertaste drücken.

Tipp: Sie wissen nicht, wie Sie den Hex-Code Ihres Logos erhalten? Prüfen Sie, ob es dafür eine nützliche Chrome-Erweiterung gibt.

Mein Ergebnis sieht so aus.

Wie Sie sehen können, haben sich alle Farben geändert, aber Ihre Primärfarbe bleibt gleich. Wenn Sie die gewünschte Farbe nicht erhalten haben, drücken Sie weiterhin die Leertaste.

Wenn Ihr einziger Grund für die Auswahl der Sekundärfarbe darin besteht, sie auf der Website zu verwenden, und diese Farbe nirgendwo anders angezeigt wird, wählen Sie keine zu kräftige Farbe. In unserem Fall ist das leuchtende Orange out.

Sie müssen eine subtilere Farbe wählen, die Ihre Marke nicht zerstört und Ihre Hauptfarbe, in unserem Fall Grün, nahtlos unterstützt.

Meine persönliche Wahl wäre das zweite Beige (#d8c99b), weil es perfekt mit Grün funktionieren würde und es definitiv nicht überholen wird.

Vielleicht ist diese spezielle beige Farbe nicht die perfekte Farbe, aber sie ist eine gute Option. Hier ist der Grund. Wenn Sie eine Farbe auswählen, denken Sie darüber nach, wie dunkler oder weißer Text darauf aussehen wird.

In meinem Beispiel würde der dunkle Text gut aussehen, aber das Hinzufügen von etwas mehr Kontrast und die Auswahl einer etwas helleren beige Farbe würde es noch besser machen.

Zum Glück für Sie hat die Coolors App eine weitere großartige Funktion. Sie können verschiedene Farbtöne jeder Farbe auswählen. Bewegen Sie den Mauszeiger über eine farbige Spalte und klicken Sie auf das erste Symbol namens „Alternative Schattierungen“. Wählen Sie dann die helleren oder dunkleren Farbtöne und behalten Sie immer den Kontrast im Auge.

Ich habe eine kurze Demo gemacht, wie diese beiden Farben zusammenarbeiten würden. Zu diesem Zweck habe ich unser Adrenaline WordPress-Theme genommen und es in eine Starbucks-Website konvertiert.

Ich war beeindruckt, wie schnell ich das Adrenaline-WordPress-Theme in buchstäblich 2 Minuten in etwas völlig anderes geändert habe. Alles, was ich tun musste, war, zwei Farben zu ändern, das benutzerdefinierte Heldenbild hochzuladen und ein benutzerdefiniertes Logo hochzuladen. Versuch es selber.

6. Überladen Sie nicht Ihre Website-Navigation

Strukturieren Sie Ihre Website-Navigation auf lesbare, verdauliche Weise. Gruppieren Sie weniger wichtige Dinge in Dropdowns oder fügen Sie sie in die obere Leiste oder die Fußzeile ein. Gestalten Sie die Navigationshierarchie logisch und stellen Sie sicher, dass alle gleichen Ebenen des Menüs die gleiche Priorität haben.

Beispielsweise sind Bedingungen und Vereinbarungen normalerweise weniger wichtig als der primäre Call-to-Action, daher können sie nicht beide auf derselben Ebene erscheinen. Fügen Sie die Bedingungen in eine Fußzeile und den primären Aufruf zum Handeln in die Kopfzeile ein.

Halten Sie Ihre Hauptnavigation sauber, mit maximal 5 oder 6 Optionen.

7. Logo ist zu groß

Es gibt einen berühmten Satz, den wir alle irgendwann von unseren Kunden hören – „mach das Logo größer“. Ihre Aufgabe als Website-Ersteller ist es, Ihren Kunden aufzuklären, dass ein 400 Pixel breites Logo nicht erforderlich ist, da Website-Besucher nicht auf Ihre Website kommen, um zu sehen, wie schön Ihr Logo ist.

Laden Sie das Logo in der vom WordPress-Theme-Autor empfohlenen Größe hoch. Sie wissen wahrscheinlich am besten, welche Logogröße am besten zu dem jeweiligen Thema passt.

Das Logo ist nur eines von vielen Dingen auf der Website und muss mit anderen Inhalten harmonieren.

Wenn Sie mir nicht glauben, schauen Sie sich irgendeine große Marke im World Wide Web an und Sie werden feststellen, dass 98 % von ihnen ein Logo haben, das gerade groß genug ist, um den gesamten Inhalt zu unterstützen. Der Nutzer muss wissen, welche Marke hinter der Website steht, aber er muss sich auch auf Dienstleistungen, Angebote und zentrale Handlungsaufforderungen konzentrieren.

8. Schlechte Logoqualität

Es ist mir einmal passiert, dass ich das Logo im Microsoft Word (.doc) Format bekommen habe. Was ich sagen möchte ist, dass Kunden immer einen Weg finden werden, Sie zu überraschen.

In Bezug auf das Logo ist es wichtig, dass es in bestmöglichem, pixelgenauem Zustand ist. Dazu benötigen Sie ein Vektorformat (.pdf, .ai, .svg, .eps). Dann müssen Sie zu Ihrer bevorzugten Vektoranwendung (z. B. Adobe Illustrator) gehen und dieses Logo in der vom Designersteller empfohlenen Größe exportieren. Das ist die beste Möglichkeit für Sie, das schärfste Logo zu erhalten.

Wenn Sie das Logo in einer .png-Datei erhalten, könnte es gut funktionieren, aber es kann bei der Größenänderung etwas an Schärfe verlieren. Wenn die Größenänderung das Logo ruiniert, gehen Sie zu fiverr.com und investieren Sie 5 $, um es in ein Vektorformat neu zu zeichnen. Eine weitere kleine Investition für ein großes Ergebnis.

9. Schlechte Bildqualität

Die Situation wird jedes Jahr besser, aber ich finde immer noch Unternehmen, die nicht genug Aufmerksamkeit oder Ressourcen in hochwertige Fotos investieren.

Wenn Sie eine Website haben, die ein bestimmtes Produkt verkauft, haben hochwertige Bilder wahrscheinlich den größten Einfluss auf den Interessenten und spielen eine entscheidende Rolle, wenn ein potenzieller Kunde entscheidet, ob er ein Produkt kauft oder nicht.

Wenn Ihr Kunde Ihnen keine hochwertigen Fotos zur Verfügung gestellt hat oder keine hat, ist es Ihre Aufgabe, ihn davon zu überzeugen, 100 US-Dollar zu investieren und sie online zu kaufen.

Eine ausgezeichnete Quelle für hochwertige Fotos ist Shutterstock, wo Sie 50 Bilder für 99 $ pro Monat erhalten können. Es reicht für eine kleine Website aus und wird einen enormen Einfluss auf die Benutzer Ihrer Website und das allgemeine Vertrauen in die Marke Ihres Kunden haben.

Tipp: Vermeiden Sie bei der Auswahl eines Fotos allgemeine, ausgefeilte, unrealistische Fotos. Ein Beispiel dafür ist ein Kaukasier mit superweißen Zähnen und makelloser Haut.

Es kann einen Gegeneffekt erzielen, wird aber mit Sicherheit keine Auswirkungen auf die Besucher haben. Versuchen Sie, Bilder mit etwas Echtheit zu finden. Um es einfach zu machen, verwenden Sie Bilder, die ein realistisches Erscheinungsbild haben.

10. Kein Styling der Plugins von Drittanbietern

Bei der Erstellung eines neuen WordPress-Themes recherchieren wir immer die Nische, für die wir ein Thema erstellen. Wir sind immer bestrebt, alle notwendigen Funktionen in das Thema aufzunehmen, aber manchmal möchte Ihr Kunde einfach etwas anderes. Das ist die Zeit, in der WordPress-Plugins ins Spiel kommen.

Daran ist nichts auszusetzen. Nachdem Sie das Plugin installiert und in das WordPress-Theme aufgenommen haben, sehen Sie sich an, wie es auf dem Frontend aussieht.

Ich bemerke oft, dass unsere Kunden vergessen, Schaltflächen, Formen und Farben im gleichen Stil wie der Rest des Themas zu gestalten.

Das Anwenden bereits geschriebener CSS-Klassen auf Ihr 3-Party-Plugin dauert nur 10 Minuten, hat aber am Ende einen erheblichen Einfluss.

Wenn Sie das Wissen dazu nicht haben, können wir es für Sie tun.

11. Schlechte Lesbarkeit

Es gibt eine berühmte Behauptung, dass Typografie 95 % des Webdesigns ausmacht – also mach es richtig.

Wenn Sie Widgets auf die gleiche Weise verwenden, wie wir die Demo des Themas erstellt haben, gibt es keine Probleme, da wir viel Mühe auf eine gute Lesbarkeit legen, aber wenn Sie das Layout und den Stil der Schriftarten ändern, machen Sie es Beachten Sie unbedingt die folgenden Regeln:

• Jede Zeile sollte 60-80 Zeichen inklusive Leerzeichen haben.
• Wenn Sie eine benutzerdefinierte Zeilenhöhe einrichten, multiplizieren Sie die Schriftgröße mit 1,4 bis 1,6. Wenn Sie eine Schriftgröße von 16 Pixel haben, sollte Ihre Zeilenhöhe zwischen 22,4 und 25,6 liegen.
• Lassen Sie genügend Platz um den Text herum.
• Verwenden Sie keine zu helle Textfarbe. Alles, was heller als #777777 ist, wirkt sich negativ auf die Lesbarkeit aus.
• Verwenden Sie keine kleineren Schriftarten als empfohlen. Das niedrigste, was Sie erreichen können, ist 14px, aber ich würde Ihnen empfehlen , 16px oder 18px zu wählen .
• Seien Sie vorsichtig , wenn Sie benutzerdefinierte Schriftarten im Design installieren. Einige Schriftarten sind nur für Überschriften gedacht und funktionieren bei kleineren Größen nicht gut. Einige Schriftarten sind für den Druck gemacht und funktionieren nicht gut auf Bildschirmen, und einige Schriftarten sind einfach schlecht gemacht. Denken Sie zweimal darüber nach, wenn Sie die Schriftart des Standard-WordPress-Designs durch etwas anderes ersetzen möchten. Wenn Sie es dennoch ändern möchten, bleiben Sie auf der sicheren Seite und wählen Sie die beliebtesten aus.

• Verwenden Sie die richtige Ausrichtung. In 95 % der Fälle ist die linke Textausrichtung der richtige Weg. In den anderen 5 % erlaube ich Ihnen, die zentrierte Ausrichtung zu verwenden, aber stellen Sie bitte sicher, dass Sie sie nur für kurzen unterstützenden Text verwenden.

Rechtsbündigkeit (außer bei rechts-nach-links-Sprachen) und Blocksatz kommen nicht in Frage. Zeitraum.

Fazit:

Wenn Sie das nächste Mal eine Website für Ihren Kunden erstellen, gehen Sie die obige Liste durch und versuchen Sie, all diese kleinen Mängel zu beheben. Es dauert nur ein oder zwei Stunden, aber am Ende erhalten Sie ein viel besseres Ergebnis, was einen zufriedeneren Kunden und eine bessere Referenz bedeutet. Darüber hinaus tun Sie uns einen Gefallen, weil wir ein fantastisches Live-Beispiel bekommen, das wir zeigen können.

Wenn Sie Fragen haben, können Sie diese gerne unten kommentieren.

BEARBEITEN: Dieser Artikel wurde ins Niederländische übersetzt – lassen Sie mich in den Kommentaren unten wissen, ob Sie ihn in Ihre Sprache übersetzen möchten.