Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

Responsive Webdesign: Workflow

Schritt 2: Content Wireframe

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Ein Content Wireframe dient dazu, die Content-Choreographie festzulegen.

Transkript

Kommen wir nun zum zweiten Schritt in Responsive Webdesign Workflow. Der Stellung der sogenannten Content Wireframes. Content Wireframes oder auch Content Reference Wireframes sind einer Angabe, welche Inhalt sich später wo befinden soll. Hier ist es wichtig ausschließlich mit beispielsweise Rechtecken zu arbeiten und nicht mit konkreten Designelementen. Der Kunde versucht sich sonst sofort auf das Design zu versteifen und ist nicht offen um über Content oder grundsätzlich über Bereiche zu reden, in denen sich Content befindet. Wichtig ist, dass Sie in Mobile First anfangen. Sie könnten beispielsweise auch mit Stift und Papier ran gehen in einem Workshop und einfach eine kleine Flache zeichnen, die beispielsweise einen iPhone entspricht. Wichtig ist, dass Sie diese Zeichnungen, oder Wireframes, für jeden, der vorher festgelegten Major-Breakpoints durchführen. Einfach damit Sie ein Gefühl dafür kriegen: Wie viel Platz habe ich überhaupt? Wo kann welcher Content hin? Wenn Sie beispielsweise am Desktop eine Suche haben, dann können Sie die überall positionieren. Auf eine kleine Fläche wird das schon schwieriger. Vielleicht können Sie dann die Suche nicht mehr neben den Logo positionieren, sondern müssen sie in eine eigene Zeile packen. Oder Sie verwenden nur ein Icon. Wenn Sie drauf klicken, kommt ein Suchfeld rausgefahren. Wichtig ist auch, dass Sie für jeden Seitentyp ein Content Wireframe erstellen und auch, für jeden Inhaltstyp, der sich auf der Seite befinden wird. Sie sehen auch jetzt, warum es wichtig ist Content First vorzugehen. Da wir uns im ersten Schritt über den Content Gedanken gemacht haben, können wir nun im zweiten Schritt auch genau sagen, wo soll dieser Content genau hin. Das Stichwort hier ist die sogenannte Content-Choreografie. Denn Content verändert seine Position, wenn ich wenig Platz oder viel Platz habe. Wie das Beispiel vorhin mit der Suche. Zuerst befindet sich die Suche oben rechts neben den Logo. Dann später eventuell weiter unten, vielleicht im Content, vielleicht sogar am Footer. All das muss geplant werden, damit ich genau weiß, welcher Inhalt ist auf welcher Größe wie optimal zu sehen. Grundsätzlich könnte ich beginnen beispielsweise indem ich sage: Na ja, ganz oben habe ich eine Hauptnavigation, dann das Logo, hier passt die Suche und ein paar Links direkt hin, dann irgendein Plugin vielleicht, Überschrift, der Inhalt, und dann der Footer. Solche Zeichnungen sind völlig ausreichend für einen Anfang um mit den Kunden zusammen zu erarbeiten, wie der Content aufgebaut werden soll. Hier ein anderes Beispiel, indem ich die Bereiche nur mit A, B, C, D, E und ähnliches bezeichne. Wie gesagt, für jeden Breakpoint, für jeden Seitentyp und für jeden Inhaltstyp. Ein anderes Beispiel zeigt Referenzen, die dann durchgängig sind. 1.1 ist das Logo, es ist in jeden der drei Darstellungen zu finden. Selbstverständlich haben wir mit der rechten Darstellung begonnen, der Mobil Ansicht. Nun sehen wir auch, dass beispielsweise die Navigation in allen Bereichen Platz hat. Aber die infopanels, zum Beispiel vier übereinander sind in der Mobil Ansicht, in der Tablet Ansicht immer je zwei und in der Deskyop Ansicht alle vier nebeneinander. Es gibt zur Erstellung von Content Reference Wireframes natürlich auch eine Menge guter Tools. Eines der Beste in diesen Bereich ist sicherlich Axure. Dann gibt es noch Balsamiq. Dort ist der Unterschied, dass die Wireframes wie gezeichnet aussehen und somit noch mehr das Gefühl an Schribles vermitteln. Weiter geht es mit getwirefy.com oder Wireframe-Tools, die unter Codecondor zu finden sind. Auch unter creativeblog.com habe ich Ihnen eine Auflistung der wichtigsten Wireframes-Tools hier als Links hinterlegt. Axure eignet sich deswegen schon besonders gut, da es ein Tool ist, dass responsive beziehungsweise adaptive direkt mit eingebaut hat. Das heißt, ich kann bestimmte Views definieren und sehe auch sofort, wenn ich den Viewport verändere wie sich die Bereiche verändern, also die Choreografie. Dies ist natürlich besonders wichtig, da ich dann mit einer Vorlage arbeiten kann und nicht verschiedene Vorlagen brauche. Weiterhin gibt es das Tool Typostrap. Momentan noch in der Betaphase, aber wahrscheinlich demnächst direkt für alle erhältlich. Hier kann ich direkt Prototypen mit Drag and Drop und einfach indem ich reiklicke erstellen und habe dann sofort einen richtigen Prototyp und nicht nur ein Wireframe. Weiterhin gibt es mehrere Quellen im Netz, die das Thema Content-Choreografie ausführlich behandeln. Beispielsweise von Jonas Hellwig die Content Choreograohy Präsentation oder auf trentwalton.com Content Choreography als Artikel.

Responsive Webdesign: Workflow

Machen Sie sich die Prozesse, die hinter Responsive Webdesign stehen, zu Eigen und werden Sie zum erfolgreichen Projektleiter, Kunden oder Auftraggeber.

1 Std. 34 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!