Responsive Design anschaulich visualisieren

Illustration Wireframes mobileWireframes sind eines der etablierten Werkzeuge bei der Konzeption von Websites und interaktiven Anwendungen. Und so nutzen wir Konzepter Wireframes, um moderne, responsive Sites zu planen. (Mit den Grundlagen responsiven Designs habe ich mich neulich befasst: Wireframes für responsive Websites – Praxistipps für Konzepter.)

Soweit, so einfach. Nicht ganz so einfach ist es aber leider wieder einmal in der Praxis: Denn um das Design einer responsiven Site zu visualisieren, komme ich nicht mehr mit einem Wireframe pro HTML-Seite aus. Ein üblicher Ansatz ist, drei Wireframes zu erstellen:

  • Einen für die Smartphone-Ansicht
  • Einen für die Tablet-Ansicht
  • Einen für die Desktopmonitor-Ansicht

Für die beiden Mobilgeräte kommen oft hinzu:

  • Ansicht Smartphone im Querformat
  • Ansicht Tablet im Querformat

Wie groß ist ein Bildschirm?

Und noch ein paar Entscheidungen müssen Sie treffen: Sie müssen festlegen, wie breit (und hoch) die jeweiligen Ansichten sind. Dabei gibt es kein richtig und kein falsch. Sprechen Sie eine allgemeine Zielgruppe an, müssen Sie von einem bunt gemischten Gerätezoo ausgehen, mit denen die Nutzer die Site besuchen – iPhone, iPad, Samsung Galaxy, Nexus, Kindle Fire, Playstation und viele mehr.

Um das zu vereinfachen, verwenden viele Konzepter einfach die Pixelmaße von iPhone und iPad und definieren alles größer als iPad als Desktop-Ansicht.

Pixelmasse Screens

Beispiel für gebräuchliche Pixelmaße bei der Konzeption responsiver Designs

Davon gehen wir im Folgenden der Einfachheit halber auch aus. Ohne Vereinfachungen können Sie kein Design effektiv kommunizieren.

Die stärkste Vereinfachung ist, dass wir drei oder fünf (oder vielleicht sogar noch mehr) feste Layouts konzipieren. In der Praxis gibt es aber immer Screens bzw. Fenster, die zwischen diesen Größen liegen. Was in diesen Fällen passiert, sollten wir ebenfalls dokumentieren.

Wo endet der Bildschirm?

Wie Sie die responsiven Designs erstellen, darum ging es wie erwähnt in meinem vorigen Beitrag. Nun gehen wir den nächsten Schritt – dahin, die fertigen Ergebnisse an Kunden und Kollegen weiterzugeben, also zu dokumentieren und zu präsentieren.

Was wir nicht vergessen dürfen: Andere Menschen haben oft Probleme, sich vorzustellen, wie die Seite auf den jeweiligen Geräten aussehen wird. Und auch erfahrene Konzepter vergessen manchmal, dass meist nicht alles auf einmal auf den Bildschirm passt, was wir eingezeichnet haben.

Daher sollten wir zumindest die Begrenzungen der Screens einzeichnen, die wir verwenden.

Wirefames mit und ohne Führungslininen

In dieser Darstellung links sieht man nicht, wo der Bildschirm endet. Führungslinien (rechts) helfen uns auch bei der Konzeption.

Mobilgeräte-Mockups für Wireframes

iPhone mit Wireframe

Wireframes in fotorealistischen Geräten sind hübsch, das Äußere lenkt aber ab.

Noch besser sind Abbildungen von Mobilgeräten, in die man seine Wireframes für die Präsentation einpasst. Diese Darstellungsform ist so konkret, dass alle Projektbeteiligten verstehen, wie die Seiten aussehen werden.

Dabei ziehe ich persönlich die stilisierten Geräte vor – das lenkt weniger ab, es betont die Vorläufigkeit der Wireframes und es erspart einem Diskussionen darüber, für welche Geräte nun konzipiert wird (die zu dem Zeitpunkt natürlich schon abgeschlossen sein sollten).

Mit OmniGraffle und anderen Grafikprogrammen

Ob Sie mit OmniGraffle, Illustrator, Visio oder einem anderen Grafikprogramm arbeiten, spielt keine Rolle – die folgende Technik lässt sich überall anwenden.

1. Wireframe erstellen

Erstellen Sie eine Wireframe wie gewohnt.

2. Geräte-Grafik einbauen

Legen Sie eine neue Ebene an.

Erstellen Sie auf dieser eine Grafik, die den Rahmen des mobilen Geräts darstellt. Dazu gibt es auch viele kostenlose Vorlagen für praktisch jedes Programm im Web. Ich persönlich nutze diese kostenlose Vorlage für OmniGraffle/Illustrator: Mobile Devices.

Falls Ihre Vorlage das noch nicht bietet: Machen Sie den Bereich des Screens transparent. Das spart Ihnen später viel Feinarbeit beim Einpassen.

Schützen Sie die Ebene mit der Gerätegrafik vor weiterer Bearbeitung. Das erleichtert die Auswahl der Elemente.

OmniGraffle z.B. bietet “Shared Layer”, die hierfür übrigens sehr praktisch sind: Sie legen auf solchen Ihre Gerätegrafiken an und diese erscheinen dann automatisch auf all Ihren Arbeitsflächen.

3. Wireframe einpassen

Schieben Sie das Wireframe so hinter die Gerätegrafik, dass der Teil im Bereich des ausgesparten Screens zu sehen ist, den Sie zeigen möchten.

Steht der Wireframe noch über die Gerätegrafik hinaus, ist es am einfachsten, ein Rechteck in der Hintergrundfarbe auf die Ebene der Gerätegrafik zu legen. Diese sollte hinter der Gerätegrafik liegen.

OmniGraffle mit Shared Layer

Hier ist der Abdecker in der Hintergrundfarbe ausgewählt, der verhindert, dass der Wireframe hinter der Gerätegrafik herausschaut. Die beigefarbene Ebene ist ein “Shared Layer”, die auf allen Arbeitsflächen erscheint.

Übrigens: Über die Zwischenablage können Sie schnell Wireframe-Grafiken aus Axure in OmniGraffle bringen – kopieren Sie einfach alle Elemente in Axure und wählen sie Edit>Paste in OmniGraffle.

Zum Schluss noch ein Profi-Tipp für Axure, der Ihnen sehr viel Arbeit spart:

Darstellung in Axure

Mit Axure lässt sich dieser Vorgang vereinfachen. Sogar interaktive Prototypen können Sie damit erstellen, die innerhalb einer Gerätegrafik ablaufen.

Das Vorgehen ist zwar ein bisschen umständlich – wenn man es aber einmal umgesetzt hat, geht es einigermaßen schnell von der Hand:

1. Wireframe erstellen

Auch hier erstellen Sie Ihre Wireframes wie gehabt. Auch die Adaptive Views können Sie nutzen.

2. Geräte-Grafik einbauen

Kopieren Sie ein Bild der Gerätegrafik in eine neue Seite Ihres Axure-Dokuments.

3. Inline Frame anlegen

Ziehen Sie aus der Widget-Bibliothek einen Inline Frame auf die Seite.

Geben Sie diesem die Größe des Screens des Gerätes, welches Sie darstellen.

Gehen Sie auf den Inspektor Widget Properties und setzen Sie Frame Scollbars auf Never Show.

Machen Sie einen Doppelklick auf den Frame und wählen Sie die Seite mit dem Wireframe aus, den Sie als Erstes zeigen möchten. Klicken Sie OK.

4. Prototyp erstellen

Klicken Sie auf Preview in der Werkzeugleiste.

Die aktuelle Seite öffnet sich im Browser.

HTML-Prototyp von Axure

Der Wireframe ist im Browser im Fenster Ihres virtuellen Gerätes gezeigt.

Das Schöne daran ist: Wenn Sie die Links richtig anlegen, dann können Sie direkt im Wireframe navigieren, also per Klick auf die jeweiligen Links.

Sie müssen “Open Link” und dort “Current Window” wählen.

Anlegen der Verlinkung in Axure

Achten Sie auf die richtige Verlinkung, dann funktioniert sie auch in Ihrem virtuellen Gerät.

5. Optional: Weitere Geräte anlegen

Sie können weitere virtuelle Geräte anlegen. Entweder direkt auf der gleichen Seite oder auf weiteren.

Sie gehen dabei genau so vor, wie oben beschrieben. Axure wählt automatisch den Adaptive View aus, welcher der Breite des Inline Frame entspricht.

HTML-Prototyp Axure mit mehreren Geräten

Portrait und Landscape mit zwei Inline Frames

Optimierung 1: Inhalte scrollbar machen

So wie ich es eben beschrieben habe, sehen Sie immer nur den oberen Teil Ihres Wireframes im virtuellen Gerätefenster. Das lässt sich ändern:

Gehen Sie auf den Inspektor Widget Properties und setzen Sie Frame Scollbars auf Show as Needed.

Verbreitern Sie den Inline Frame, da die Scrollbalken leider vom Inhalt abgezogen werden. 339 Pixel ist für die iPhone-Breite von 320 Pixel der richtige Wert. (Nehmen Sie mehr, dann wird die nächste Breite bei den Adaptive Views gezeigt, also z.B. iPhone Landscape.)

Erstellen Sie ein Rechteck, das die Scrollbalken genau verdeckt. Geben Sie ihm die Hintergrundfarbe des Gerätes. So sind die Scrollbalken nicht sichtbar, mit dem mittleren Mausrad bzw. einem Touchpad können Sie nun aber dennoch im HTML-Prototypen den Inhalt bewegen.

Optimierung 2: Seitenwechsel im Inline Frame über Buttons

Wollen Sie die Seiten in Ihren virtuellen Geräten wechseln, ohne Links auf den Wireframes selbst anzulegen? Auch das ist kein Problem:

Legen Sie einen Button an, z.B. mit dem Namen der Seite, die Sie aufrufen möchten.
Nun legen Sie bei dessen Interaktion fest, dass er die Seite in allen Ihren Inline Frames auf dieser Seite öffnet (s. Abbildung rechts).

Axure Seite in Inline Frame wechseln

Interaktions-Einstellungen, um eine andere Seite in den Frames anzuzeigen.

Fazit

Das alles liest sich jetzt vielleicht wie eine Menge Arbeit. Aber wie gesagt, wenn Sie es einmal durchgespielt haben, dann geht es in Zukunft recht schnell von der Hand.

Und ich denke, die Mühe lohnt sich, weil so alle Projektbeteiligten wissen, wie die zukünftige Site/Anwendung genau aussehen soll.

Was sind Ihre Erfahrungen? Haben Sie noch mehr Tipps zum Darstellen responsiver Designs?

3 Gedanken zu „Responsive Design anschaulich visualisieren

  1. Lennart

    Hey Jens,
    netter Artikel, der einen guten Überblick über Axure und mobile Prototyping liefert.

    Ich habe vor ein paar Tagen die zweite Edition meines Buches „Axure for Mobile“ veröffentlicht, dass ich für Axure 7.0 weitestgehend neu geschrieben habe.
    Das eBook steht schon bei Amazon im Regal, die Print-Version dauert noch eine gute Woche.
    Für mehr Infos:

    http://www.axureformobile.com/

    Viele Grüße
    l.

    Antworten
  2. Pingback: Top-Themen der UX-Welt in den letzten 30 Tagen - Usabilityblog.de

Schreibe einen Kommentar

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