senäh

17senäh und so…

redesign_articlepic

Allgemein
18. Aug 2014
Kommentare: 2

Idee und erstes Mockup

Kategorien: Allgemein | 18. Aug 2014 | Kommentare: 2

Serie: Schritt-für-Schritt-Redesign eines Blogs

  • Teil 1: Idee und erstes Mockup

Nachdem mein letzter Beitrag auf diesem Blog ziemlich genau 6 Monate her ist und ich dafür sorge, dass ich konstant viel zu viel zu tun habe, um das zu ändern, überkam mich eines einsamen Samstagabends das Bedürfnis, dem Theme einen frischen Anstrich zu verpassen. 3 Stunden später stand ein erster Entwurf, also gehen wir es einfach an.

Statt das ganze hinter verschlossenen Türen durchzuziehen, möchte ich den Prozess hier dokumentieren. Ich kann mich ganz gut daran erinnern, dass mir diese “Komplettlösungen” zu Blog-Redesigns viele Aha-Momente beschert haben. Man bekommt Einblick in Arbeitsschritte, die in anderen, kürzeren Tutorials meist ignoriert werden – entweder aus vermeintlichem Mangel an Relevanz oder weil sie sich im Nachhineinen als nichtig herausstellen. Dennoch hat jedes fertige Projekt auch immer eine Geschichte, die ich versuchen werde an dieser Stelle regelmäßig festzuhalten.

In diesem ersten Teil möchte ich die grundsätzlichen Visionen schildern, die ich für das fertige Theme habe, und natürlich den ersten Entwurf für die Landing-Page.

Status Quo

Das aktuelle Theme ist mit nur sehr wenigen Anpassungen von Elmastudio übernommen worden (Klick auf Bild öffnet es in Originalgröße):

Aktuelles senäh-Theme

Aktuelles senäh-Theme

Es gibt einen Header mit Logo und Navigation, kein Visual und dann eine zweispaltige Aufteilung. Links die Blogposts, rechts verschiedene Widgets:

  • Suche
  • Kategorien
  • beliebte Artikel
  • neuste Kommentare
  • Tags
  • Archiv

Die Auflistung der Blogposts enthält nur eine Vorschau, nicht den ganzen Artikel. Mich stört es sehr, wenn ich einen neuen Blog finde, überfliegen will, was die letzten Themenschwerpunkte waren und dann komplette Artikel durchscrollen muss. Außerdem hat jeder Artikel ein kleines Artikelbild und Zusatzinfos (Kategorien, Veröffentlichungsdatum, Kommentaranzahl, Tags, ggf. um welchen Teil einer Artikelserie es sich handelt.

Artikelvorschau auf der Startseite

Artikelvorschau auf der Startseite

Das Sammelsorium an Previews endet vorerst nach 10 Artikeln, kann aber über eine klassische Pagination am Ende der Seite fortgesetzt werden.

Wir müssen leider draußen bleiben

Viel davon soll im neuen Theme nicht mehr da sein. Weniger ist mehr, gerade im Webdesign gilt diese Devise zur Zeit mehr als je zuvor. Meine Grundidee war ein Einspalter mit Fokus auf Lesbarkeit. Große Header, großer Body-Text, hübscher Font und vor allem weg mit dem ganzen Müll, der nicht unbedingt notwendig ist. Und ordentlich Whitespace reinknallen.

Unnötige Details bei der Auflistung der neusten Blogposts

Wenn ein Leser auf die Startseite kommt – was selten passiert – soll er schnell eine Übersicht über die letzten Artikel bekommen. Headerbild wie bisher, Überschrift und kurzer Textausschnitt + “Weiterlesen”-Link. Das war’s. Kein Veröffentlichungsdatum. Die behandelten Themen sind selten zeitkritisch genug, um das zu rechtfertigen. Keine Kommentaranzahl, keine Tags, keine Kategorien. Das sind alles nette Zusatzinfos, die aber in den meisten Fällen mehr ablenken, als dass sie neugierig machen. Zum Anteasen gibt es Überschrift und die Artikelvorschau. Wieviele Artikel sollen zu sehen sein? Ich habe mich vorerst für 12 entschieden. Dabei werden 3 mit Vorschau angeteast, die restlichen 9 nur per Überschrift in 3 Spalten. Wer noch mehr will, wird in Form eines Links zum Archiv bedient. Keine Pagination (mMn überholtes Prinzip), kein Infinite Scroll (mMn weniger zielführend als der Archiv-Link).

Sidebar-Inhalte und dauerhaft sichtbare Navigation

Zwar will ich die Sidebar loswerden, aber dennoch Möglichkeiten geben bestimmte Artikel zu entdecken. Einerseits soll auf die Artikelserien hingewiesen werden, andererseits auf die beliebtesten Blogposts. Die neusten Artikelserien sollen mit Vorschaubild aufgelistet werden. Die beliebten Blogposts einfach in 2 Spalten zu je 5 Stück. Ansonsten möchte ich die grundsätzliche Farbgebung – weißer Hintergrund, blaues Highlight – und das Logo in der Form behalten. Ein Fullwidth-Header darf es gern sein. Und die Navigation inklusive Links zu Kategorien, Archiv und Artikelserien soll von vornherein hinter dem klassischen Hamburger-Icon versteckt werden.

Mockup v1

Mit diesen Ideen im Kopf habe ich Sketch angeworfen und das hier ist dabei herausgekommen (Klick auf Bild öffnet es in Originalgröße):

Markup zum Redesign, Version 1

Markup zum Redesign, Version 1

Header

Es handelt sich nicht um die finalen Fonts. Ich wusste nur, dass es etwas serifenloses für die Überschriften sein sollte und eine nicht zu verzierte Serifenschrift für den Fließtext. Bei der Implementierung werd ich mich vermutlich der hier demonstrierten Auswahl bedienen. Außer dem Logo, das vermutlich im Laufe des Designprozess noch etwas flatter – und ja, auch schärfer – wird, braucht es den Blognamen und den neuen, auch noch nicht in Stein gemeißelten Claim “Ginger. Bart. Code” im üppigen, aber wie ich finde nicht übertriebenen Header. Oben rechts findet sich das angesprochene Hamburger-Icon. Über das Aussehen des Menüs an sich habe ich mir bisher wenig Gedanken gemacht.

Artikelvorschau

Ich achte vergleichsweise penibel darauf, dass Fließtext mit maximal 80 Zeichen pro Zeile auskommt, zwecks zielsicheren Sakkadensprüngen, also besserer Lesbarkeit. Entspricht in diesem Fall 650px. Ich wollte die Überschriften aber nicht auch auf diesen Raum beschränken. Das “Überstehen” der breiteren Überschriften gefiel mir ganz gut, nur ergibt sich dabei der Zwang die diese zu zentrieren. Andernfalls wäre der vertikale Rhythmus nicht eindeutig und gerade einzeilige Überschriften sähen etwas fehlplatziert aus.

Links ausgerichtete Überschriften

Links ausgerichtete Überschriften

Ex-Sidebar-Inhalte

Für die restlichen Sektionen wollte ich Überschriften haben, die gar nicht erst versuchen die Blogpost-Überschriften zu dominieren. Dennoch sollte die Zäsur deutlich werden, weswegen den dicken (Pseudo-)Kapitälchen eine seichte Trennlinie folgt. Die 3-spaltige Ansicht der weiteren Artikel sieht momentan etwas seltsam aus, weil viele der Artikel recht kurze Überschriften haben. Das wird sich mit der Zeit ändern. Bei den Artikelserien war ich mir unsicher. Die beliebten Artikel sehen eigentlich ziemlich genau so aus, wie ich es mir ausgemalt hatte. Allerdings könnten es wohl auch ein paar weniger sein. Vielleicht wird hier nachträglich noch heruntergeschraubt.

Mockup v2

Das bisherige Werk habe ich anschließend an Blog-Compagnon Pipo weitergeschickt, der korrekterweise anmerkte, dass der Fließtext der Artikelvorschau etwas größer sein könnte. In v1 waren es 20px, in v2 sind es 22 geworden. 24 waren zu viel. Die Schriftgröße habe ich dann auch in den restlichen Bereichen angepasst. Die Breite des Fließtextes konnte ich auf 700px erhöhen, ohne die 80-Zeichen-Grenze zu sprengen. Damit der Breitenunterschied zwischen Überschrift und Text nicht wie ein Versehen wirkt, haben auch die Überschriften ein paar Pixel Breite spendiert bekommen. Außerdem hat Pipo dafür gesorgt, dass bei den Artikelserien die Thumbnails der rechten Spalte ebenfalls links vom Artikel sind. Ergebnis (Klick auf Bild öffnet es… ihr wisst schon):

Markup mit Pipo-Einflüssen

Markup mit Pipo-Einflüssen

Das ist der momentane Stand der Startseite. Bevor ich mich an die Umsetzung dieser in HTML und CSS mache, würde ich gern noch die Einzelansicht eines Artikel durchgestalten, inklusive Blockquotes, Code-Snippets und Kommentaren. Daraus wird folgerichtig Teil 2 dieser Serie bestehen.

Autor: Enno

Ich bin Enno. PHP ist mein Ding, aber auch alles Neue rund um die Themen HTML5, CSS3 & Co finde ich interessant. Ich mag es Leuten zu helfen und mein Wissen weiterzugeben. Sollte dir mein Beitrag gefallen haben, lass doch nen Kommentar da oder benutze einen der Social Buttons, um deinen Dank auszudrücken ;)

Kommentare (2)

  1. Coole Sache! Danke für die Einblicke! Auch der Schreibstil ist schön locker und doch präzise – und *thumbs-up* Fachbegriffe verlinkt zu anderen erklärenden Blog-Artikeln. Vom Designansatz sind die Ideen bisher schick – sieht zwar wie eine Produkt-Landingpage aus – aber why not – bin gespannt wie es weitergeht.

    • Danke für den Kommentar, Ronny. Ein freundlicher Reminder, dass ich mich dem Redesign mal wieder widmen sollte :D

      Dass der bisherige Entwurf dem einer Produktseite ähnelt, finde ich gar nicht so sehr. Einspalter sind bei Blogs und allem, was textlastig ist, recht beliebt. Die klassischen Produktpages bleiben aber in der Regel eher bei den Hero-Sektionen im Header, den Multi-Columns für die Features und einem kontrastreichen Footer. Aber selbst wenn, ist ja vielleicht auch nicht verkehrt :D