Content Wireframes für Responsive Design erstellen

Als ich zwischen 2011 und 2012 meinen Kurs in Responsive Webdesign leitete, stolperte ich immer wieder über den Prozess des Wireframing. Meine Studenten tendierten dazu, sich auf das Wireframe als Endspiel im Planungsprozess zu konzentrieren. Sie haben nicht verstanden, dass sich Responsive Design darauf konzentriert, wie Benutzer auf die Inhalte zugreifen.

Man kann sich meine Erleichterung kaum vorstellen, als ich 2012 zufällig auf ein Video von Stephen Hay stieß, der auf der Beyond the Desktop Konferenz sprach. Dort stellte er in seinem Vortrag über Responsive Design das Konzept des Content Wireframes vor. Dies war eine große Erleichterung für mich.

Weiterführende Literatur zu SmashingMag:

• Der Leitfaden für Skeptiker zum Low-Fidelity-Prototyping
• Wie das Erstellen einer Designsprache Ihr UX-Design optimieren kann
• Jenseits von Wireframing: Der reale UX-Designprozess

Ich wusste nur, dass es einen Schritt gab, bevor der Prozess real wurde, aber ich konnte ihn nicht artikulieren. In diesem Beitrag beschreibe ich die Methoden, die ich verwende, um vom Inhalt zum responsiven Wireframe zu gelangen – und wie Sie das auch können.

Einführung in das Inhalts-Drahtmodell

Das Konzept eines Content Wireframes ist ziemlich einfach zu verstehen, da es ein Ableger der grundlegendsten Designphilosophie ist: Verlieben Sie sich in den Benutzer, nicht in die Technologie.

Inhalts-Wireframes tun genau das. Sie blockieren allgemeine Inhaltskategorien und zwingen Sie, wie Stephen es so schön formuliert, dazu, vom Inhalt nach außen zu gestalten.

Es ist wirklich nicht kompliziert. Tatsächlich umfasst es zwei Schritte:

1. ein Inhaltsinventar erstellen,
2. Erstellen Sie eine visuelle Hierarchie der Überlebenden dieser Liste.

Wenn Sie das tun, haben Sie ein potenzielles Ergebnis für Ihren Kunden. Es neigt dazu, die Aufmerksamkeit des Kunden weg von dem, was „Ding“ wohin führt, und hin zu dem, was wichtig ist: dem Informationsfluss.

Keine Raketenwissenschaft

Das Hauptproblem bei Wireframes für meine Studenten und andere Designer ist, dass sie dazu neigen, eine ungerechtfertigte Bedeutung zu erlangen. Es ist fast wie das Ende einer Renovierungsshow im Fernsehen, wenn alle „Oohs“ und „Ahhs“ sagen, wenn der Kunde durch das Haus gehen darf.

Nicht für mich. Ich bevorzuge die Küchenrenovierungsszene, wenn der Bauunternehmer ein Blatt Papier und einen Zimmermannsbleistift zückt und sich mit dem Kunden an den Küchentisch setzt. Dann zeichnen sie einen einfachen Umriss des Raums und sagen: „Wie wäre es, wenn wir diese Wand herausziehen, eine Insel hierher stellen und die Theke dort drüben versetzen?“

Der Zimmermann legt die „Absicht“ seiner Herangehensweise an das Projekt fest, und der Kunde konzentriert sich auf die wichtigen Teile des Projekts und nicht auf Fliesen, Armaturen, Farbe und Beleuchtung.

In seinem Buch „Responsive Design Workflow“ verwendet Hay den Begriff „Content Reference Wireframe“, weil „er beschreibt, wie die Wireframes mit Inhalten umgehen: Sie beziehen sich einfach darauf, anstatt sie darzustellen .“

Ein Content Wireframe, wie die Skizze unseres Auftragnehmers, stellt die Platzierung dar – eine Wand, eine Theke, eine Kopfzeile, eine Fußzeile – und stellt eine Informationshierarchie und einen Informationsfluss her . Da der Prozess iterativ ist und das Gespräch mit einem einfachen „Wie wäre es mit …“ statt „Hier ist wie …“ beginnt, wird es vom Bereich der Raketenwissenschaft ferngehalten und dort platziert, wo es ursprünglich begonnen hat: Old-School-Boxen und -Pfeile.

Sobald dies feststeht, können wir in den Low-Fidelity- und High-Fidelity-Wireframe-Entwicklungsprozess einsteigen. Sehen wir uns an, wie ein Wireframe für Inhalte die Konversation fokussieren kann, indem eine einfache Seite dekonstruiert wird.

Dekonstruktion von Hand gemacht

Ich besuche Made by Hand regelmäßig. Wie der Name schon sagt, feiert die Website Handwerker, die Dinge von Hand herstellen. Die Homepage enthält eine Reihe von Videos, und wenn Sie sie zum ersten Mal besuchen, scheint sie ziemlich nüchtern zu sein, mit wenigen Schnörkeln. Das macht Sinn, weil die Filme selbst wichtig sind, nicht irgendwelche anderen Inhalte.

Das Inhaltsinventar für die Homepage ist verständlicherweise eher einfach und besteht aus:

• Kopfzeile und Navigation,
• fünf Videos (die wir hier als das Hauptvideo und die Videos 1 bis 4 bezeichnen),
• eine Fußzeile.

Dennoch können wir eine bestimmte Informationshierarchie im Spiel sehen. Die Liste der Hauptinhalte ist etwas vage, aber sobald Sie verstehen, dass die Absicht darin besteht, eine Reihe von Videos zu präsentieren, die einzelne Handwerker hervorheben, wird die Priorität jedes Inhalts klar:

• Hauptvideo,
• Videos 1 bis 4,
• die Fußzeile,
• Kopfzeile und Navigation.

Wenn Sie die Kopfzeile und die Navigation am Ende des Stapels sehen, erscheint Ihnen dies möglicherweise seltsam. Der ganze Zweck der Seite besteht jedoch darin, Sie dazu zu bringen, sich die Videos anzusehen und, wenn sie Ihnen gefallen, regelmäßige Benachrichtigungen über neue Inhalte zu abonnieren. Header und Navigation sind lediglich dazu da, die Navigation auf der Website zu erleichtern.

In vielerlei Hinsicht treibt das alte Sprichwort „Content is King“ – allgemein Bill Gates zugeschrieben – diese Website an. Der Fokus liegt auf der Sammlung von Videos und sonst nichts. Dies wirft einen wichtigen Punkt auf: Ein Wireframe für Inhaltsreferenzen legt den Vorrang des Inhalts fest, nicht den Seitenfluss.

Mit dieser Liste in der Hand können Sie mit der eigentlichen Erstellung der Content-Referenz-Drahtgitter fortfahren.

Erstellen von Wireframes für Inhaltsreferenzen

Obwohl Stephen Hay ein großer Befürworter der Erstellung dieser Wireframes für Inhaltsreferenzen mit einem Code-Editor wie Coda oder Adobes Brackets ist, ist für diejenigen von uns, die, sagen wir, Code-Herausforderungen haben, ein visueller Editor wie UXPin oder Adobes Illustrator oder a Responsive Editor wie Macaw oder Webflow wären eine gute Wahl. Jeder hat seinen Nutzen, obwohl ein reaktionsschneller Editor den Vorteil hat, dass er dem Designer mehr als eine Perspektive auf seine Arbeit gibt – insbesondere, wie seine Arbeit auf unterschiedliche Bildschirmgrößen reagiert. Das ist angesichts der heutigen Vielfalt an Bildschirmen von entscheidender Bedeutung.

Es gibt nicht das beste Werkzeug; wählen Sie diejenige, die am besten zu Ihnen passt. In diesem Tutorial gehen wir durch Illustrator. Hier ist der Grund:

• Obwohl Illustrator kein wirklich reaktionsschnelles Tool ist, können Sie mit seinen Zeichenflächen mit einem Mobile-First-Ansatz beginnen und mithilfe von voreingestellten oder anpassbaren Haltepunkten schnell zu einer Desktop-Version ausbauen.
• Die anpassbaren Raster ermöglichen ein konsistentes Design.
• Sie können damit Boxen mit präziser Größe für Drahtmodelle erstellen, indem Sie auf klicken und die Abmessungen festlegen.
• Wenn Sie Photoshop für detailgetreuere Mockups bevorzugen, können Sie Ihr Inhalts-Drahtmodell aus Illustrator kopieren und einfügen, um die Grundlage zu schaffen.

Hinweis: Wenn Sie es vorziehen, beim Wireframing oder Prototyping im Responsive Code zu arbeiten, können Sie unten im Abschnitt „Nächste Schritte“ nach weiteren nützlichen Ressourcen suchen.

Ein Mobile-First-Ansatz für Inhalts-Wireframes

Für dieses kurze Tutorial verwenden wir Illustrator als Teil eines Mobile-First-Ansatzes, um uns auf die wichtigsten Inhalte zu konzentrieren. Wir erstellen fünf Darstellungsbereiche, um die Grundlage für ein Drahtmodell für responsive Inhalte zu legen.

1. Erstellen Sie die Dokumente

Erstellen Sie in Illustrator fünf neue Dokumente mit den folgenden Breiten und Höhen (in Pixel):

• 320 × 800
• 768 × 1200
• 992 × 1400
• 1224 × 1600
• 1440 × 1800

(Je nachdem, welche Version von Illustrator Sie verwenden, können Sie auch verschiedene Zeichenflächen im selben Dokument erstellen.)

2. Erstellen Sie die Container

Erstellen Sie in dem 320 Pixel breiten Dokument sieben unlinierte Kästchen, die mit neutralem Grau gefüllt sind.

3. Erstellen Sie die Etiketten

Platzieren Sie Text über jedem Feld – in absteigender Reihenfolge: Kopfzeile, Hauptvideo, Video 02, Video 03, Video 04, Video 05 und Fußzeile. Ich habe weißen Text als Kontrast zu den relativ dunklen Kästchen verwendet.

4. Ändern Sie die Größe der Boxen

Machen Sie das Hauptvideofeld etwas größer als die anderen , um seine Priorität anzuzeigen . Verkleinern Sie bei Bedarf die Kopf- und Fußzeile – behalten Sie sie aber in voller Breite bei .

5. Kopieren Sie die Boxen

Nachdem Sie nun ihre relativen Größen und Beschriftungen haben, kopieren Sie die Felder in die anderen Dokumente oder Zeichenflächen.

Passen Sie die Größe nach Bedarf an und denken Sie daran, dass es sich bei diesen Feldern um ungefähre Angaben handelt. Sie stellen das Vorhandensein von Inhalten dar, nicht die genaue Größe oder den Abstand des Inhalts.

Nächste Schritte

Es gibt keine große Enthüllung oder andere Aufregung bei der Erstellung von Content-Referenz-Drahtmodellen.

Sie fügen sich in den Workflow zwischen dem Content-Inventar und den Low-Fidelity-Wireframes ein. Dies liegt daran, dass ihr Zweck einfach darin besteht , eine Informationshierarchie zu etablieren und, falls der Kunde beteiligt ist, ihn dazu zu bringen, mehr über das Konzept von Inhalt und Informationsfluss nachzudenken als über den eigentlichen Inhalt selbst.

Der gesamte Prozess ist eher ein „Wie wäre es mit…“-Gespräch als ein „Hier ist wie…“ Sobald sich alle einig sind, wird die nächste Iteration des Projekts darin bestehen, echte Low-Fidelity-Inhalte in die Boxen zu gießen, die die Content-Referenz-Drahtgitter bilden.

Wie wir gesehen haben, können Sie Wireframing von Inhalten üben, indem Sie beliebte Websites in ihre Grundbausteine ​​zerlegen . Beginnen Sie mit groben Informationsbehältern, fügen Sie den eigentlichen Inhalt hinzu und beginnen Sie dann, sie in fertigere Formen zu meißeln. Auf diese Weise werden Sie besser in der Lage sein, das zu entwerfen, was den Benutzern wirklich am Herzen liegt: den Inhalt.

• UXPin Dieses kollaborative Designtool ist nützlich, um ein grobes Drahtmodell zu entwerfen und dann Interaktionen hinzuzufügen, um einen schnellen Prototyp zu erstellen.
• „Responsive Design Workflow“ (Folien), Stephen Hay, Mobilism 2012 Diese Folien fassen kurz zusammen, wie man effizient für responsive Layouts entwirft. Hay bietet einige großartige Ratschläge zum Auditieren von Inhalten, Priorisieren von Inhalten, Wireframing von Inhalten und Verwenden von Entwicklungs-Frameworks.
• „Content Reference Wireframes (PDF), Neil Hao Dies ist ein schöner Überblick über einen codebasierten Ansatz für Content Wireframes, der anhand eines realistischen Design-Szenarios beschrieben wird.
• „Mobile First“, ZURB University ZURB, eine Designagentur, bietet dieses hilfreiche Ressourcenportal an, das Kontext für Wireframing von Inhalten bereitstellt.
• „Dive Into Responsive Prototyping With Foundation“, Jonathan Smiley, A List Apart Smileys nützliches Tutorial zeigt, wie man Wireframes und Prototypen für responsive Designs in Code erstellt. Obwohl es nicht vollständig mobil ist, erklärt Smiley sehr gut, wie Inhalte auf allen Geräten konsistent angezeigt werden.
• „Design Last“, Rik Schennink, Smashing Magazine In diesem interessanten Artikel geht es darum, wie man responsives Design zuerst mit Inhalt und HTML erstellt. Dabei verbindest du von Anfang an Inhalt mit Struktur.