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

Zur Transparenz: Dieser Artikel kann Affiliate-Links enthalten. Durch Deinen Einkauf über diese Links unterstützt Du meine Arbeit ohne zusätzliche Kosten. Vielen Dank!


Autor: Matthias

Aktualisiert: 19. Mai. 2021

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 sah das Design bis 2019 aus

Was ich verbessert hatte

  • 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.

Fehler beim aktuellen Design, 2020

Im November 2019 wurde das Design geändert. Die Menüs werden nun auf allen Geräten gut dargestellt. Ich habe viele Elemente ausgetauscht, was ich besser nicht gemacht hätte.

Der Suchmaschinen-Algorithmus könnte Wochen brauchen, bis er die Seite wieder stufte, wie zuvor. Folgendes wurde mir klar, im Nachhinein:

  • zu viele externe Links mit Do-Follow. Ich hatte auf 100+ Beiträgen, jeweils 2 Webseiten erwähnt. D. h. diese 2 Webseiten, bekamen insgesamt über 200 Backlinks von meiner Seite. (Das denke ich, führte auch zur Abwertung)
  • das andere waren zufällige Beiträge. Ich hatte diese in jedem Beitrag angezeigt und aus Nutzersicht, ergibt es keinen Sinn, weil die Zielgruppe, die meine Seite öffnete, suchte nach einem bestimmten Thema und was interessierte sie, irgendwas, was sie nicht gesucht hatte
  • ich entfernte die "beliebtesten Beiträge", die zu jedem Beitrag angezeigt wurden. Das waren ebenfalls um die 700 interne Links, die auf einmal nicht mehr da waren und die Besuchern dabei halfen, sehr gute Beiträge auffinden zu können.

Optimiere die Inhalte für die Zielgruppe. Die Suchmaschine (und wie diese Inhalte einstuft) sollte uns laut Google, wenig interessieren.

Denke aus Nutzersicht: Was ist gut für die Leser (was ist relevant, hilft ihnen).
Was es mir klarmachte ist, dass ich nur aus meiner Sicht gedacht hatte, weniger aus Sicht des Nutzers auf meiner Webseite.

mehr Fokus auf Inhalte

Der direkt sichtbare Bereich enthält auf mobilen Geräten mehr Inhalte. Schmalere Abstände, eine kleinere Überschrift und schmalere Beitragsbilder im Format 2:1

Die Überschriften enthalten den Text, schmaler dargestellt.

Die Umsetzung erfolgte über die Einstellungen des Thrive Theme Builders für die Beiträge.

Was macht ein gutes Design aus

  • Farbauswahl: Die Farben passend zum Branding (der Marke wählen)
  • Einfachheit: "Keep it simple" - weniger ist manchmal mehr
  • Textgröße: ausreichend groß und gut lesbar
  • 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üs: Das Menü sollte sich oben, oben links oder oben rechts befinden.
  • Kontaktseite: Die Kontaktseite sollte schnell und einfach von jeder Seite aus erreichbar sein.
  • Fokus: Je weniger Ablenkungen es gibt, umso höher ist die Conversionrate.
  • Mobile-Responsive: Die Webseite sollte über eine optimierte mobile Darstellung verfügen. (50%+ aller privaten Nutzer rufen Webinhalte von Mobilgeräten aus ab, etwa 30% sind es im Business-Umfeld)
  • 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.

Veröffentlicht: 28. Jan. 2016 | Zuletzt aktualisiert: 19. Mai. 2021

Autor:

Matthias


Matthias’ schreibt über Online Marketing Themen, wie Content-, E-Mail- und Affiliate-Marketing. Er schätzt Menschen, die in ihrer Mitte sind. Sein Motto: „Jeden Tag finden Lernprozesse statt.“ Sogenannte „Fehler“ führen zu Erkenntnisprozessen und Erfahrungswerten.


  • Kommentare:
  • 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.

    • 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 :-)

    • 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

  • {"email":"E-Mail-Adresse ungültig","url":"Website-Adresse ungültig","required":"Pflichtfeld fehlt"}

    Diesen Beitrag teilen:

    Beitrag vom Smartphone teilen


    • Ähnliche Beiträge:
    Webinare – So brillierst du mit deinem Auftritt
  • Weitere Inhalte:
  • WERBETEXTER 1×1: ✓ Wie du ansprechende & klickstarke Werbetexte erstellst → GRATIS Buch sichern
    Wie ich automatisiert bis zu 1.000 Besucher im Monat über XING auf meine Seite locke

    >
    Success message!
    Warning message!
    Error message!