Wireframes, die Entwickler lieben

Foto Mauer

Raster geben nicht nur Mauern Struktur, auch fürs Screendesign sind sie kaum verzichtbar.

Wir Konzepter sagen, wir denken immer an die Nutzer. Wir haben stets im Blick, wie die Besucher mit der Site umgehen, wie die Kunden die App verwenden. Aber denken wir auch genug an diejenigen, die mit unseren Vorgaben im Projekt umgehen müssen?

Jeder, der eine Anwendung nicht ganz allein umsetzt, muss auch mit Designern und Programmierern kommunizieren. Ein ganz wichtiges Instrument dafür sind Scribbles und Wireframes. Mit ihnen halten wir fest, welche Elemente auf einer Seite stehen sollen, wie sie ungefähr angeordnet sind, wie groß sie sind und wo sie stehen.

Wie aber sorgen wir dafür, dass Designer und Programmierer uns richtig verstehen? Wie sorgen wir dafür, dass sie mit unseren Vorgaben nicht mehr Arbeit haben als nötig?

Kenne deine Nutzer & rede mit ihnen

Foto Scribble auf Serviette

Die Ideen für viele Anwendungen nehmen ihren Anfang auf der sprichwörtlichen Serviette.

Selbstverständlich ist es mittlerweile, dass man seine Nutzer so gut wie möglich kennenlernen sollte, bevor man mit dem Konzept anfängt.

Und sobald man etwas konkreter wird mit den Konzepten und Projektdokumenten, sollte man auch deren Nutzer kennenlernen. Man sollte sich also mit den Designern und Programmierern auseinandersetzen. Sie fragen, was sie gerne hätten. Überraschend oft stellt man fest, dass dieser Schritt einfach nicht stattfindet.

Wenn Sie in einem festen Team arbeiten, dann ist es einfach. Sie müssen sich einmal mit den anderen über das optimale Vorgehen einigen. Und doch schadet es nicht, sich bei jedem Projekt kurz mit den Kollegen abzustimmen. Vielleicht hat es eine Besonderheit, die Ihnen selbst nicht auffällt, weil diese für Sie nicht relevant ist – für die Umsetzung aber eventuell schon. Und es lohnt sich immer, bestehende Abläufe gelegentlich nochmal zu prüfen – wie bei der Usability von Anwendungen findet man immer etwas, was man verbessern kann.

Haben Sie immer wieder wechselnde Teams oder arbeiten Sie für Kunden, die verschiedene Abteilungen/Dienstleister für die Umsetzung haben, dann müssen Sie sich jedes Mal wieder neu abstimmen.

Aber sogar, wenn noch gar nicht klar ist, wer die Umsetzung machen wird, gibt es ein paar Dinge, die Sie tun können, um denjenigen das Leben zu erleichtern, die später die Umsetzung machen.

Von Serviette & Kuli zu HTML & CSS

Für komplexere Anwendungen sehen die Schritte der Konzeption oft so aus:

  1. Grobe Scribbles (handgezeichnete Seitenskizzen)
  2. Detailliertere Scribbles
  3. Wireframes (Seitenskizzen mit Grafikprogramm oder einem Tool wie Axure oder Balsamiq erstellt)
  4. Mockups (Skizzen, die schon fast aussehen wie die fertige Anwendung)
  5. Prototypen (Vorabversionen mit grundlegender Funktionalität – „Klickdummies“)

Die Scribbles (Schritte 1 bis 2) dienen vor allem dazu, schnell Ideen zu sammeln und verschiedene Ansätze auszuprobieren. Hier sollten Sie sich noch nicht einschränken lassen von bestehenden Vorgaben für Layout und weitere Umsetzung.

Foto Scribble

Solche kleinen Scribbles („Thumbnails“) zeichnet man so klein, damit man 1. schnell ist und sich 2. noch keine Gedanken über Details machen muss.

Doch ab dem Beginn von Schritt 3, dem Anlegen von Wireframes, ist es sinnvoll, kurz innezuhalten.

So vermeiden Sie, dass entweder die Designer/Programmierer unnötig viel Arbeit haben oder dass das Endprodukt nicht so aussieht, wie Sie sich das vorgestellt haben.

Nutzen Sie ein Raster

Gestaltungsraster (englisch grids) sind aus der Gestaltung nicht wegzudenken. Seien es Zeitschriften, Websites oder Apps – kaum ein professioneller Designer arbeitet hier ohne ein Raster.

Das heißt, er legt Führungslinien mit definierten Abständen an, um der Seite Struktur und Rhythmus zu geben.

Screenshot Raster mit Führungslinien in Axure

Raster mit Führungslinien in Axure

Screenshot Axure Create Guides

In Axure legen Sie ein Raster am besten mit „Grid and Guides>Create Guides“ an.

Wenn Sie Wireframes anlegen, dann erleichterten Sie sich mit einem Raster selbst die Arbeit. Denn damit ist es viel einfacher, eine gut aussehende Anordnung zu finden. Vor allem aber erleichtern Sie demjenigen die Arbeit, der später ihr Wireframes in HTML und CSS bzw. Programmiercode übersetzen muss.

Wie legt man nun sinnvollerweise ein Raster an?

Viele Raster fürs Screendesign arbeiten mit 12 Spalten. Das ist keine Willkür, sondern Mathematik: 12 lässt sich gerade durch viele andere Zahlen teilen. Warum ist das wichtig? Weil Sie so sehr flexibel sind – Sie können auf der Seite 1, 2, 3, 4, 6 oder 12 gleich breite Elemente anordnen und haben nie krumme Werte oder ungleiche Abstände oder Größen. Die folgende Abbildung zeigt das Prinzip.

12er-Raster mit 960gs

Beispiel für die Verteilung von Elementen im 12er-Raster von 960gs

Übliche Gesamtbreiten sind 960 Pixel, oder 1100 oder auch 1200 Pixel. Sehr viel breitere Layouts sind wenig sinnvoll, da dann auch Nutzer mit Desktop-PCs und kleineren Monitoren nicht mehr die gesamte Seite sehen.

Zwischen den Spalten bleiben meist 20 Pixel, so dass zwei Elemente in zwei aneinander grenzenden Spalten jeweils 10 Pixel Pufferzone um sich herum haben.

Für das 960er Raster ergeben sich also z.B. folgende Abstände für die Rasterlinien:
10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10+10+60+10

Noch einige hilfreiche Übersetzungen, wenn Sie englische Vorlagen für Ihr Gestaltungsraster verwenden:

  • grid = Raster
  • gutter = Zwischenraum (zwischen Elementen bzw. Spalten)
  • margin = Rand (normalerweise links und rechts von der 1. bzw. letzten Spalte)
  • column = Spalte
  • row = Zeile

Welches Raster nehme ich?

Sie können ein eigenes Raster definieren, das ist besser, als ohne Raster zu arbeiten. Noch sinnvoller ist es, das Raster zu nutzen, mit dem später die Anwendung umgesetzt wird.

Für Websites verwenden fast alle Entwickler zur Zeit eines der zwei Frameworks Bootstrap oder Foundation . Diese Frameworks („Code-Grundgerüste“) definieren grundlegende Codebestandteile, damit die Programmierer nicht immer für die gleichen Bausteine den ganzen Code neu schreiben müssen – und damit der Code leichter zu vereinheitlichen, anzupassen und zu pflegen ist.

Und beide Frameworks geben ein Gestaltungsraster vor.

Bestimmen Sie selbst, welches Framework zum Einsatz kommt, finden Sie hier eine kleine Entscheidungshilfe: Should You Use Bootstrap or Foundation?

Interessant ist außerdem Materialize. Dies basiert auf dem Google Material Design. In der derzeitigen Form ist das aber mehr was für Programmierer, ich habe zumindest keine Vorlagen für UXler gefunden bisher.

Der Vollständigkeit halber sei noch 960 gs genannt. Das war früher sehr beliebt, wirkt aber inzwischen etwas in die Jahre gekommen.

Sinnvolle Positionen finden

Im Wireframing- oder Zeichenprogramm lassen sich Elemente beliebig anordnen – was gut aussieht, funktioniert.

Beachten Sie dabei ein paar einfache Grundregeln, sparen Sie möglicherweise sehr viel wertvolle Entwicklerzeit. Das gilt vor allem beim Anlegen von responsiven Varianten. Nehmen wir als Beispiel drei Textkästen, die in der Desktop-Ansicht nebeneinander stehen. Diese auf dem Smartphone untereinander anzuordnen ist kein Problem. Einen der Kästen allerdings an eine ganz andere Position auf dem Bildschirm zu schieben, ist dagegen schon ein Problem – ob diese nun vor den anderen Kästen auf der Seite liegt oder danach.

Natürlich gibt es Fälle, wo genau das aus Usability-Sicht die beste Lösung ist. Dann sollte man die natürlich so einplanen. Wenn es aber eigentlich keinen großen Vorteil bringt, das Element weiträumig zu verschieben, dann verzichten Sie lieber darauf – dann freuen sich die Programmierer.

Das ist nur ein Beispiel – unterhalten Sie sich am besten einmal mit einem Programmier-Kollegen über solche Dinge – Sie werden sicher viele neue Dinge dazu lernen. Und der Kollege freut sich garantiert, wenn Sie sich für seine Probleme interessieren.

Sparsam mit Änderungen umgehen

Je weniger Sie definieren, desto weniger Arbeit haben Sie und auch die umsetzenden Kollegen.

Überlegen Sie also z.B., ob es sinnvoll ist, unterschiedliche Schriftgrößen für alle Textelemente für alle 6 Breakpoints zu definieren. In den meisten Fällen ist es das nicht. Natürlich brauchen Sie eine andere Größe für Überschriften auf dem Smartphone als auf dem Desktop. Aber braucht es für Tablets wirklich eine weitere Zwischengröße? Oder für die Ausrichtung im Querformat?

Bibliotheken zur Arbeitserleichterung

Es lohnt sich praktisch immer, Bibliothek mit eigenen Vorlagen für Wireframes anzulegen. Das geht in praktisch jedem Zeichen- oder Wireframing-Programm. Und auch eine Dokumentenvorlage mit dem eingezeichneten Grundraster ist sehr praktisch. So müssen Sie dieses nicht jedes Mal neu zeichnen und stellen sicher, dass es auch tatsächlich immer wieder das gleiche ist.

Vorlagen für Raster

Zum Abschluss ein paar Links zu guten Vorlagen, mit den Sie gleich starten können:

Grids for Skecthing von Ben Martineau PDF mit ganz einfacher Raster-Einteilung von 3 bis 16 Spalten.

Foundation 4 Stencil Sets Stencils für OmniGraffle sowie PDFs; allerdings nur für Elemente, keine Rastervorlage

20 Free Wireframe, Grid and UI Templates for Bootstrap Tolle Sammlung mit Vorlagen für alle möglichen Programme von Photoshop über Illustrator bis Balsamiq – und auch einfache PDFs.

960 Grid System Der Download enthält u.a. auch PDFs zum Ausdrucken. Wer nur die will, findet diese auch hier: 960-Grid-System>sketch_sheets (GitHub)

Grid Calculator by Nicolaj Kirkgaard Nielsen Hier kann man sich für beliebige eigene Größen ein Raster darstellen und ausgeben lassen – z.B. als Photoshop-Datei oder als PNG.

Portraitfoto: Jens Jacobsen

Jens Jacobsen

Inhaber

benutzerfreun.de

Bisher veröffentlichte Beiträge: 47

2 Kommentare

  • Jan

    Ein ganz wichtiger Punkt, der eigentlich immer vergessen wird, fehlt: Probieren Sie die Vorlage mit unpassendem Inhalte aus. Zu lange Überschriften, unterschiedlich lange Texte in Kacheln, unpassende Bilder, Wörter länger als eine Zeile, etc. Da sieht immer für viele Fragen und Probleme bei der Umsetzung. Da wird dann schnell eine Lösung aus der Hüfte geschossen, die die Technik unnötig verkompliziert.

  • Jan, vielen Dank für den Hinweis, sehr wichtiger Punkt!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.