4

Designupdate – Was hat sich verändert – Was macht ein gutes Design aus

2016 habe ich das Design dieses Blogs zweimal verändert.

WordPress war schon immer das Grundgerüst, nur die Themes und Plugins haben sich im Laufe der Zeit verändert.​ Im heutigen Artikel drehe ich die Zeit zurück.

Ich verrate, was ich verändert habe, warum ich es getan habe und was ein gutes Design ausmacht.

More...

Was hat sich verändert

So sah das Design in den Jahren zuvor aus

Warum das Design schlecht gewählt war

  • Zu kleine Schrift
  • Viele unterschiedliche Farben
  • Viel Schwarz, sehr wenig weiße Flächen

Ich habe mich wenig um das Design gekümmert. Mir waren die Inhalte am wichtigsten, das man auf meinem Blog etwas lernt.

Per E-Mail bekam ich Feedback, das genau das bestätigte: "Matthias, deine Inhalte sind toll. Sie sind der Grund, warum ich weitergelesen habe und die Seite nicht verlassen habe."

Jetzt gerade frage ich mich, wie ich diese Seite eigentlich jahrelang so stehen lassen konnte. Es gab mehrere Gründe, wichtigere Dinge zu erledigen.

Am 28.01 wechselte ich wieder das Design.

So sah das Design ab Anfang 2016 aus

Folgende Punkte hatte ich verbessert

  • Die verwendete Schriftart war dicker, größer und besser lesbar.
  • Die Zeilenabstände waren größer.
  • Ein neues Logo und darunter das Menü.
  • 2 Hauptfarben, Rot und Schwarz

Wer genau hinschaut, entdeckt das Optin-Formular, das sich weit unten befindet. Der Grund dafür war, dass ein Popup im Einsatz war und das untere Optinfeld beim Scrollen nach unten immer mitlief.

Das verwendete Theme hatte viele Einstellungsmöglichkeiten. Die meisten nutzte ich nicht und es machte die Konfiguration nur unnötig kompliziert.

Durch das günstige Hosting-Paket lag die Ladezeit der Seite zwischen 5 und 9 Sekunden. Zu langsam, deshalb wechselte ich den Hoster. Die Ladezeit verkürzte sich auf 3-4 Sekunden. Sie ist ein Rankingfaktor bei Google, deshalb lohnt es sich, darauf zu achten. Dieser Artikel hier lädt in 2,6 Sekunden.

Mit folgenden Punkten war ich noch nicht zufrieden

  • Es wirkte alles nicht wie aus einem Guss. Die Seite war wenig einladend gestaltet.
  • Das Logo nahm oben zu viel Platz ein.
  • Dunkelrot und Schwarz als Logofarben wirkten zu aggressiv. 
  • Durch die Artikelbilder kamen immer noch viele Farben vor.
  • Die Inhalte waren schlecht formatiert.
  • Die Zeilenzwischenräume zu klein.
  • Der viele Text erdrückte einen beim Lesen.
  • Bilder waren zu groß oder unpassend platziert.
  • Die Bildbeschreibungstexte waren sehr klein geschrieben.

Das alles zu ändern, wäre ein zu großer Aufwand gewesen und hätte langfristig zu wenig geändert. Ich entschied mich, zu ThriveThemes zu wechseln.

ThriveThemes bietet conversionoptimierte Themes und einen umfangreichen Drag&Drop Editor für Seiten, Artikel, Optin-Formulare, Popups, Lead- und Verkaufsseiten. Genau das, was ich suchte.

So sieht das Design aktuell aus

Was ich verbessert habe

  • Es gibt ein neues Logo mit 2 hellen, frischen Farben: Blau und Orange
    (Orange ist die Komplementärfarbe zu Blau)
  • Die Titelbilder enthalten eine Hintergrundfarbe im Branding der Seite.
  • In diesen 2 Farben gestaltet sich auch der Content, was das Branding verstärkt.
  • Die Artikel werden mit dem neuen Editor optisch ansprechend gestaltet.
  • Die Kontaktseite wurde vom Impressum getrennt und sieht aufgeräumt aus.
  • Es gibt eine zielführende Danke-Seite für neue Abonnenteneintragungen.

Was zukünftig noch verbessert wird

  • Die Startseite wird eine Landingpage erhalten und der Blog im Menü wählbar sein.

Was macht ein gutes Design aus

Farbauswahl

Die Farben sollten passend zum Branding gewählt sein.

Einfachheit

Weniger ist manchmal mehr.
"Keep it simple"

Textgröße

Die Schriftart sollte ausreichend groß und gut lesbar sein.

Abwechslung

Fließtexte sollten mit Absätzen, Aufzählungen, Nummerierungen, Grafiken und Bildern aufgelockert werden.

Abstände

Ein größerer Zeilenabstand vereinfacht den Fokus beim Lesen.

Textbreite

Eine schmalere Zeilenbreite erspart Augenbewegungen.

Linkfarbe

Die Farbe der Links sollte in hohem Kontrast zur Textfarbe stehen.

Menüplatzierung

Das Menü sollte sich oben, oben links oder oben rechts befinden.

Kontaktmöglichkeit

Die Kontaktseite sollte schnell und einfach von jeder Seite aus erreichbar sein.

Fokus

Je weniger Ablenkungen es gibt, umso höher ist die Conversionrate.

Smartphone optimiert

Die Webseite sollte über eine optimierte mobile Darstellung verfügen.

Tablet optimiert

Auch auf Tablets sollte die Seite gut dargestellt sein.

Welches Design bei einer Zielgruppe gut ankommt

Analysiere Konkurrenz-Seiten, die es zum jeweiligen Thema (Keyword) in die Top10 Suchergebnisse bei Google geschafft haben​.

Fazit

Es ist immer besser, sich von Anfang an Gedanken über das Design der Webseite zu machen, als einfach loszulegen und die Entscheidung auf später zu verschieben.

Der Wechsel eines Themes in WordPress kann dazu führen, dass themegebundene Shortcodes nicht mehr funktionieren und dann in jedem Artikel ausgetauscht werden müssen.

Auch wenn sich die Seitenbreite der Inhalte ändert, muss man die Bildgröße anpassen und optimierte Artikelbilder neu hochladen und austauschen.

Letztlich ist es immer besser, überhaupt zu starten, als lange zu überlegen und nichts umzusetzen. Im Laufe der Zeit korrigiert man seine Fehler und lernt dazu.

Ich bin mit ThriveThemes sehr zufrieden. ThriveThemes wurde von Marketern für Marketer entwickelt. Alle dort erhältlichen Themes und Vorlagen sind conversionoptimiert. Durch das Abo-Modell zahlt man zwar laufend Gebühren, dafür sind Produktneuentwicklungen, Updates und der Support im Preis inbegriffen.

Teilen:
  • Updated 29. August 2016
Matthias Szilagyi
 

Aufgabengebiet hier: Fachliche Inhalte bereitstellen, Produkte vorstellen, erklären. Wissen und Erfahrungen weitergeben. Andere Aufgaben: Erforschen, Entdecken, wer wir sind, was möglich sein kann und welche Potentiale in uns (verborgen) liegen.

  • Rainer Safferthal sagt:

    In meinem Shop, den ich mit dem Gambio CMS gemacht habe, habe ich nicht viel am Design gemacht. Nur etwas und die Schriftgröße geändert. Ich bin was Design angeht nicht so bewandert. Und als Hartzer ohne wirklichen Shop-Erfolg kann ich mir auch Design von eine Profi-Design-Bude leisten.

    In WP-Installationen lasse ich auch in der Regel immmer ein Standard-Theme und ändere auch hier nur etwas an den Farben und Schriftgröße. Das muss schließlich reichen. Zeit ist Geld und deswegen sollte man diese Zeit fürs Nichtstun verwenden.

    • Matthias Szilagyi sagt:

      Hallo Rainer,

      bei einem Online-Shop gibt es am Anfang auch wichtigere Dinge:

      – Traffic, also Besucher auf der Seite, die dann auch einkaufen
      – Produktauswahl, Produktpräsentation
      – Verkaufsabwicklung, Retourenmanagement

      Das Design kann man auch später noch verändern. Ich hab mir kurz deine Seite angesehen. Das Logo würde ich verkleinern und daneben nützliche zusätzliche Informationen einblenden. Du könntest auch ein paar deiner Gebrauchtwarenartikel abbilden. Zu jeder Kategorie eins. Gestalte es abwechslungsreicher. Das kann man auch mit einfachen Mitteln.

      Gerade mit wenig Geld muss man Kompromisse eingehen. Mich freut es, dass du den Shop eröffnet hast. Viele reden nämlich nur und handeln überhaupt nicht. Sie haben Ideen, setzen aber nichts um. Auch mit jeder falschen Entscheidung lernst du dazu. Und wenn es nur das ist, was nicht funktioniert.

      Zu WordPress: Du bist nicht der einzige, der das Standard-Theme nutzt. Es kommt immer darauf an, was man damit vorhat. Ich bin mit dem aktuellen Theme und den bei ThriveThemes enthaltenen Zusatzplugins sehr zufrieden. Ich kann die Beiträge optisch besser gestalten. Zuvor gab es viel Text und wenig Abwechslung.

      Aktuell wurde die Mehrwertreihe überarbeitet. Durch das Update wird sie ihrem Wert gerecht.

  • Hallo Matthias,
    dein neues Design finde ich toll und vor allem die grosse Schrift hier im Kommentar-Formular. Das ist sehr gut umgesetzt worden. Ich bin aber kein Webdesigner und dennoch muss ich ein bisschen auf die Theme-Auswahl beim WordPress CMS achten. Ich nehme meistens Free WordPress Themes, weil ich etliche WP-Blogs habe ich es ist nicht im Budget, für jedes Blog ein Premium-Theme einzusetzen.

    Ich setze auf TwentySixteen, was meinen Vorstellungen entspricht und bisher meckerte auch kein Leser. Ich würde aber trotzdem kein Premium-Theme kaufen, denn ich arbeite generell mit Free Themes, wovon es Abertausende gibt.

    Linkfarbe gefällt mir in Blau, Orange und Rot, manchmal auch grün-farben, wenn es zum Blog passt. Mobil arbeite ich nicht, sprich mobil Blogs ansurfen, aber die meisten Präsenzen in meinem Portfolio haben responsive Designs, auch die Blogger/CMS-Foren von mir haben das Mobile in sich.

    Übrigens ist heute mein Feedback-Freitag und gerne möchte ich diesen Artikel im späteren Blogpost auf Rostockerblogger.de empfehlen, weil es mir zusagte 🙂

    • Matthias Szilagyi sagt:

      Hallo Alexander,

      die Idee kam durch den Austausch mit einem meiner Leser. Er hat mir bewusst gemacht, wie gut die Inhalte seien – aber wie schlecht sie von der Aufmachung her waren. Ich hatte mich dann 1-2 Stunden hingesetzt und hab ein paar Dinge geändert. Dann ist mir klar geworden, dass das alles zu viel Aufwand gewesen wäre.

      Die Schrift in den Kommentarfeldern war zuerst winzig. Die Kommentarzahl ist daraufhin zurückgegangen. Ich habe dann dem Support geschrieben und 1 Tag später haben sie mir den CSS-Code für die Anpassung zugeschickt. Bei Gratis-Themes müsste ich mich um solche Sachen selbst kümmern.

      Der Vorteil bei ThriveThemes ist: Es kostet zwar monatlich 19$, wenn man jährlich zahlt. Dafür kann man alle dort erhältlichen Themes und Plugins auf allen eigenen Blogs einsetzen. Updates und Support sind mit inbegriffen. Allerdings nur auf Englisch. Genauso wie die Einstellungsmenüs alle in Englisch gehalten sind. Wer monatliche Kosten vermeiden will, kann Themes und Plugins auch einzeln erwerben. Dann wird es aber teuer, wie du schon richtig vermutet hast.

      Danke für dein Feedback und die Linkempfehlung. Das hier wird hoffentlich nicht der letzte Beitrag sein, der dir zusagte. 😉

      Viele Grüße
      Matthias

  • >