Skip to main content

Mit einem Klick mehr über uns erfahren

TYPO3 Camp Mallorca 2014

TYPO3Camp Mallorca 2014: “New Responsive Concepts”

Erfahrungen und Gedanken zu Tools und Methoden für Responsive Webdesign, im Speziellen zum Thema “Wireframing”.

Der Rahmen…

Mitte September haben sich Entwickler, Designer, Projektmanager und weitere TYPO3 Interessierte aus verschiedenen Ländern in Mallorca getroffen. Wir von PAGEmachine haben das 3. internationale TYPO3 Camp Mallorca mit organisiert. Und natürlich waren wir auch als Teilnehmer bei verschiedenen Sessions dabei.

Was ist eine Session?

Bei Barcamps gibt es keine vorgeplanten Beiträge oder Sprecher. Jeder kann ein Thema vorschlagen. Die Teilnehmer bestimmen selbst, worüber gesprochen wird. Finden sich genügend Interessenten für ein Thema, findet eine Session dazu in einem der Räume statt. Eine Session innerhalb eines Barcamps ist vergleichsweise kurz, dient sie doch nur dem schnellen Erfahrungsaustausch.

Ich habe an einer ergiebigen Diskusionsrunde zum Thema Responsive Webdesign teilgenommen. Im folgenden Artikel findet Ihr die unterschiedlichen Erfahrungen und Ideen, die im Rahmen der “Wireframing” Session zur Sprache kamen.

Wir haben folgende Fragen diskutiert:

•    Warum sind Wireframes wichtig, gerade für Responsive Design?
•    Welche Tools und Methoden werden von den Teilnehmern verwendet?
•    Wie werden Wireframes dem Kunden kommuniziert?

Warum sind Wireframes so wichtig? Kann man denn nicht gleich mit dem Design loslegen?

Einig waren sich alle, egal ob Programmierer, Gestalter oder Kundenbetreuer: Wireframes sind vielleicht die wichtigste Gesprächsgrundlage für den Planungsprozess. Der Vorteil: gleich mit Design anzufangen, lenkt ab. Der Fokus von Wireframes, meist einfachen Schwarzweiß-Zeichnungen, liegt klar auf Strukturen.

Das ist wichtig, denn strukturelle Entscheidungen sollten möglichst vor der Design Phase stattfinden.
Gerade wenn es um die Planung responsiver Strukturen geht, wird das Projekt sonst schnell unüberschaubar. Später ist es dann viel einfacher, eine funktionierende und leicht bedienbare Struktur zu stylen. Zuerst die Struktur und erst danach den passenden Stil festzulegen, spart also viel Arbeit. Design und Styling der Website könnte man sich einfach als “anmalen” der Wireframes vorstellen.

Welche Tools und Methoden werden von den Teilnehmern verwendet?

Wichtig beim Auswählen der Wireframing Tools ist, dass sie einfach sein sollten. Zu viele Möglichkeiten und Features, so war zumindest die Meinung der Teilnehmer, verlangsamen die Arbeit. Die Mehrzahl greift entweder einfach zu Stift und Papier oder zum Wireframing Tool Balsamic.

Interessant war, dass einige Teilnehmer meinten, Zeichnen sei so einfach, dass man auch Kunden aktiv am wireframing beteiligen kann. Weil schließlich jeder ein Viereck zeichnen kann, können erste Entwürfe so direkt beim Briefing Meeting entstehen.

Wireframing Tools sind um so wichtiger, je mehr echte Inhalte integriert werden sollen. Eben dafür setzen viele der Teilnehmer dann auf Balsamic oder überarbeiten Zeichnungen mit Photoshop. Für die Texte können Handschrift-Fonts verwendet werden. Dabei kann auch ein Set von gut zusammen passenden Wireframe Design Elementen hilfreich sein, die man in verschiedenen Projekten verwenden kann.

Vor- und Nachteil zugleich ist der Eindruck handgezeichneter Wireframes, dass alles noch abgeändert werden kann. Einerseits ist das eine Einladung an Kunden, einfach alles mögliche auszuprobieren. Andererseits geht das Erstellen von Wireframes wirklich schneller als eine komplette Website fertig zu gestalten. Man kann also mehr Varianten testen, bis die Struktur für das Projekt passt.

Und wie geht es weiter?

Ob danach zunächst in Photoshop gestaltet wird oder direkt nach dem Skizzieren mit HTML und CSS erste Strukturen umgesetzt wird, dafür hatte hier jeder seine ganz eigenen Favoriten. Abhängig von den Skills von Designern und davon, ob der Code in der späteren Programmierung weiter verwendet werden kann.

Wie werden Wireframes dem Kunden kommuniziert? Erfahrungsberichte

Die Session Teilnehmer haben ganz unterschiedliche Erfahrungen mit der Planung von Webseiten und Kundenanforderungen gemacht. Und damit, was man braucht, damit Kunden die Strukturen verstehen.

Einig war man sich, dass Struktur und Funktion der Website so früh wie möglich getestet und mit dem Kunden abgestimmt werden müssen. Aber reichen dafür Wireframes aus, oder braucht man sogar Clickdummies?

Natürlich verstehen Kunden mit Clickdummies das responsive Verhalten viel besser. Bei sehr großen Projekten geht es mit Sicherheit nicht ohne, weil ein vorab erstellter Prototyp das Risiko von kostspieligen Fehlentwicklungen reduziert.

Wie weit man mit Wireframes, Clickdummies oder einfachen Prototypen gehen kann, hängt aber letztlich immer auch vom Budget ab.

Wichtig ist die passende Lösung für das Projekt zu finden. Komplexere größere Projekte benötigen vielleicht Clickdummies. Bei kleineren Projekten sind Clickdummies auf jeden Fall zu aufwändig. Hier hatte eine Teilnehmerin einen einfachen und praktischen Ansatz: Abläufe kann man auch mit ausgedruckten Wireframes zeigen, die man einfach durch ein ausgedrucktes iPad zieht.

Am Ende war man sich einig: je besser die Struktur durchdacht ist, desto weniger Dokumente und Ansichten müssen Designer erstellen. Eine gut durchdachte Struktur kann auch der Kunde leicht verstehen.

Mehr Infos:

•    Wireframing Software Balsamic: http://balsamiq.com/products/mockups/
•    Clickdummy Tool Marvel App: https://marvelapp.com/
•    Clickdummy Tool InVision: http://www.invisionapp.com/

Ein Gedanke zu „TYPO3Camp Mallorca 2014: “New Responsive Concepts”

Schreibe einen Kommentar

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