Wie eine Webseite entsteht (3): Sketches und Wireframes

07.01.2015 | Design

Mit Hilfe von Sketches und Wireframes lassen sich Ideen einfach visualisieren: Man braucht nur einen Stift und ein Blatt Papier.

Nachdem wir im ersten Teil unserer Serie eine Idee und ein Konzept für ein Redesign der Trendschau entwickelt haben und uns im zweiten Teil über die allgemeine Vorgehensweise klar geworden sind, kann es im dritten Teil endlich losgehen: Wir machen uns ein erstes grobes Bild von der späteren Webseite.

Mobile-Sketches

Dazu habe ich mich einfach hingesetzt, einen schwarzen Stift genommen und haufenweise bekrizeltes Papier zerknüllt. Am Ende ist jedoch etwas brauchbares dabei herausgekommen: Ein Sketch, der das Layout und die Funktionsweise der geplanten Webseite mit groben Strichen visualisiert. Die Geburtshilfe für den Sketch hat das Konzept geliefert:

  • Ein Zitat soll das Thema der Webseite irgendwo zentral auf der Startseite beschreiben und meine Person in Szene setzen. Auf den anderen Seiten soll es dezenter platziert sein.
  • Das Zitat soll auf eine Webseite verlinken, die den Entstehungsprozess einer Webseite visualisiert.
  • Die einzelnen Stufen des Entstehungsprozesses sollen aus Tags gebildet werden, sodass man sich über das Schema zu den Inhalten klicken kann.

Die Übersichtsseite mit den Tags lasse ich mal weg, stattdessen zeige ich die Startseite und eine Artikelseite:

Sketches Smartphone-Version

Die einzelnen Elemente

Auch wenn die Sketches selbsterklärend sind, beschreibe ich mal kurz die Details. Das ist auch deshalb wichtig, weil man sich bei jedem Element über den Sinn und dessen Funktionsweise klar sein sollte. Denn irgendwann muss man es jemandem erklären: Dem Designer, dem Entwickler oder dem Besucher.

  • Die Haupt-Navigation besteht aus lediglich drei Navigationspunkten. Zu viele Entscheidungsmöglichkeiten verwirren den Leser nur. Stattdessen soll er entweder über die Startseite direkt auf die Artikel gehen, oder sich auf der Themenübersicht einen Gesamtüberblick verschaffen (und nebenbei etwas über meine Arbeit als Product Owner erfahren). Unter dem dritten Navigationspunkt "Über" stelle ich mich kurz vor.
  • Unterhalb der Navigation erscheint auf der Startseite ein Zitat-Block. Der Block enthält ein Profil-Bild, das Zitat, einen Link zur Themenseite und Buttons zu meinen Social-Media-Profilen. Das ist eine ausgewogene Mischung aus Informationen und Profil-Neurosen.
  • Die Artikel-Teaser haben folgende Elemente: Headline, Datum, Tag, Teaser-Text und großer Link-Button zum vollständigen Beitrag. Auf Bilder verzichte ich an dieser Stelle, weil ich die Aufmerksamkeit eher auf die Buttons lenken möchte.
  • Unterhalb der Teaser-Liste kommen die Abo-Buttons: Newsletter, Feeds und Twitter-Kanal. Darunter wird es natürlich noch den Footer etc. geben.
  • Die Artikel-Ansicht birgt wenige Überraschungen, nur die Zitatbox wandert von oben nach unten. Eine Kommentarfunktion ist auch eingeplant, allerdings passen so viele Details nicht in den Sketch, womit auch schon eine Schwäche solcher Sketches genannt ist.

Die Desktop-Version

Nach der Smartphone-Version kommt die Desktop-Version an die Reihe. Viele Überraschungen gibt es nicht: Ich habe ein zweispaltiges Blog-Layout mit der Sidebar links und dem Content-Bereich rechts gewählt:

Sketch der Desktop-Version

Zusätzliche Ziele für die Erfolgsmessung

Bei der Erstellung der Sketches sind nicht nur die Vorgaben aus der Konzept-Phase eingeflossen, sondern auch noch Zielvorstellungen, mit denen später der Erfolg der Webseite gemessen werden kann. Bei Publishing-Seiten sind solche messbaren Ziele in der Regel die Reichweite der Inhalte und das Wachstum einer treuen Leserschaft. Reichweite, Leserbindung und Engagement können beispielsweise über Abonnements, Newsletter, Share-Buttons oder Kommentar-Funktionen unterstützt werden. Im Fall der Trendschau würde ich auch noch die Klicks auf die Social-Media-Profile und die Kontaktanfragen über Xing und Linkedin als Erfolgsindikator nutzen, da auch die Stärkung des eigenen Profils und eine bessere Vernetzung ein Ziel der Seite ist. Bei Shops würde man eher mit Verkäufen und Conversion Rates arbeiten. Bei vertrieblich orientierten Seiten mit Leads (also zum Beispiel das Ausfüllen von Kontakt-Formularen). Bei Support-Seiten könnte man zum Beispiel die gesunkene Quote von Rückfragen als Erfolgsindikator nutzen.

Solche Zieldefinitionen mögen bei einer einfachen Seiten wie der Trendschau trivial klingen. Dennoch helfen sie, die Ausrichtung der Seite noch stärker zu fokussieren und später zu optimieren.

Erste Design-Idee

Während der Erarbeitung der Sketche ist mir bereits eine Idee für das Design gekommen: Die Seite soll mehr oder weniger farblos sein, nur die Abo-Buttons für Newsletter, Twitter, RSS und Co. sollen über die typischen Brand-Farben herausstechen. Ob es tatsächlich etwas bringt, die Aufmerksamkeit der Leser so stark auf die Abo-Funktionen zu lenken, werden dann später die Messungen zeigen. Zunächst klingt es aber sinnvoll, die Leser vor möglichst wenige Entscheidungen zu stellen und die aus meiner Sicht guten Entscheidungen optisch hervorzuheben.

Weitere Hilfestellungen

Wer noch weitere Tipps, Hilfestellungen und Inspirationen bei der Konzeption und beim Sketching von Webseiten sucht, der kann sich mal auf der Seite von Katrin Kerber das Core-Model anschauen. Bei diesem sehr einfachen Ansatz macht man sich zu jeder Seite Gedanken über deren Zielsetzung, das Nutzerbedürfnis und die Klickwegen der Nutzer (inward-paths und forward-paths). Daraus entwickelt man den optimalen Seiteninhalt und -aufbau.

Core-Model für Webseiten

Dieses Model hat vor allem einen großen Vorteil: Als Seiten-Entwickler oder Seitenbetreiber begreift man seinen Webauftritt automatisch als Einheit und geht von der Homepage als zentraler Anlaufstelle (Landing-Page) aus. Das entspricht jedoch in den meisten Fällen nicht der Wahrnehmung der Nutzer, denn die kommen häufig von Google oder von sozialen Netzwerken und steigen direkt in einer tiefen Inhaltsseite ein, die dann die Landing-Page ist. Das Core-Model zwingt einen immer wieder neu dazu, jede Seite des Webauftritts als möglichen Einstiegspunkt und als Landing-Page zu konzipieren. Als Gedankenstütze finde ich das Modell auf jeden Fall hilfreich.

Vom Sketch zum Klick-Dummy: Begriffe und Tools

Jetzt haben wir also fertige Sketches und damit ein Grundmuster für die Webseite. Doch mit den Sketches endet der Prozess natürlich nicht: Man kann seine Idee in kleinen Stufen bis hin zu einem "lebensechten" Klick-Dummy weiterentwickeln. Das werde ich jetzt nicht durchexerzieren, aber es gibt als Hilfestellung ein paar Begriffserklärungen und Tool-Tipps:

  • Sketches: Wie oben gezeigt sind Sketches grobe Skizzen vom Layout (Seitenaufteilung, Elemente) und von der Funktionalität einer Webseiten. Sketches fertigt man offline an. Tools sind ein schwarzer Stift und ein weißes Blatt Papier. Mit der App POP kann man aus Papier-Sketches auch interaktive Prototypen (s.u.) bauen, um ein besseres Gefühl für die Funktionalität zu bekommen.
  • Wireframes: Wireframes erfüllen den gleichen Zweck wie Sketches, werden jedoch digital erstellt. Auch Wireframes sind in schwarz-weiß gehalten. Bilder, Texte und Buttons werden nur stilisiert dargestellt. Da einige Wireframe-Tools den Sketch-Modus imitieren, benutzen viele die Begriffe synonym. Bekannte Tools sind Balsamiq oder Axure.
  • Mockups: Im Gegensatz zu Wireframes enthalten Mockups nicht nur das Layout, sondern bereits ein fertiges Design mit Farben, echten Bildern und richtigen Texten. Tools sind bekannte Grafik-Programme wie Photoshop oder Fireworks.
  • Click-Dummies: Klick-Dummies oder Prototypen sind Designs mit einer simulierten Interaktion: Bei einem Klick auf einen Button wird eine neue Grafik angezeigt und damit ein Seitenwechsel simuliert. Tools sind beispielsweise InVision.

Selbst wenn man keine Ahnung von Webseiten, Design oder Entwicklung hat, sollte jeder in der Lage sein, fertige Sketches oder Wireframes zu erstellen. Selbst ein kleiner Prototyp sollte drin sein (POP, InVision oder auch spezielle Wireframe-Programme wie Hotgloo bieten solche Simulationen an). Wichtig ist, dass man sich über die Ziele, den Aufbau und die Funktionsweise der Webseite klar wird. Wenn man die Funktionsweise detailliert beschreiben kann und das grobe Layout vor sich hat, kann man im zweiten Schritt einen externen Designer für ein Mockup oder Klick-Dummy engagieren. Mit einem fertigen Design und einem Klick-Dummy kann man dann bereits einen ersten Nutzertest durchführen und Feedback einholen, ohne sein Konto mit einer kostspieligen Programmierung zu plündern.

Worum es im nächsten Beitrag geht…

Ich selbst überspringe Wireframes und Mockups und steige sofort in die HTML- und CSS-Entwicklung ein. Das mag ein paar Nachteile haben, zum Beispiel, dass man sehr schnell in den "Pixel-Modus" übergeht und die Kreativität von den Tücken der Frontend-Entwicklung eingeschränkt werden kann. Da ich aber zwei sehr schlanken und einfachen Frameworks bzw. CMS nutze (Statamic für Webseiten und Slim für Web-Applikationen), funktioniert die Frontend-Entwicklung recht einfach und der Übergang in die Funkions-Entwicklung verläuft mehr oder weniger nahtlos. Das senkt den Gesamt-Aufwand für ein Projekt deutlich.

Dennoch geht es im nächsten Beitrag noch nicht um das Coden, sondern ich zeige in einem kurzen Artikel erst einmal den Übergang vom Sketch zum fertigen Design.

Dieser Beitrag gehört zu der Serie "Webseite". Das sind alle Artikel der Serie:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.