Haupt / Merkmal

Die besten Prototyping-Tools für responsives Webdesign

Da die meisten Websites jetzt standardmäßig reagieren, ist Prototyping eine Notwendigkeit. Wir entwerfen und bauen Baustellen, die auf die
Gerät verwendet, um sie anzuzeigen. Die Arbeit in oder so nah wie möglich an dem Medium, über das unsere Designs konsumiert werden, kann nur ein Vorteil für uns sein. Dies wird immer einfacher, da die uns zur Verfügung stehenden Tools immer ausgefeilter werden.

Der mit Abstand schwierigste Teil der Arbeit eines Designers besteht darin, anderen Ideen und Absichten angemessen zu erklären. Menschen zu ermöglichen, diese Ideen zu erleben, ist eine viel bessere Möglichkeit, ihnen das Verständnis zu erleichtern. Ich finde den Ausdruck 'Zeigen, nicht erzählen' besonders passend. Es hört hier jedoch nicht auf. Durch das Prototyping Ihres Designs können Sie auch sehen, wo es funktioniert und nicht, indem Sie es testen, optimieren und anpassen.

Die Profis des Prototyping

Wie oft haben Sie gesehen, wie etwas so gebaut wurde, wie Sie es entworfen haben, um festzustellen, dass es nicht das ist, was Sie wirklich erwartet oder gewollt haben? Zu diesem Zeitpunkt ist es zu spät.

Ich habe lange geglaubt, dass Designer codieren sollten. Ein tieferes Verständnis des Designs wird gewonnen, wenn Sie wissen, was darunter vor sich geht. Es macht Sie zu einem besseren Designer und sorgt für ein strengeres Design. Wie ein Dokument strukturiert ist, ist eine Entwurfsentscheidung.

Aber ich musste diesen Glauben kürzlich in Frage stellen. Ich habe angefangen, Apps zu sehen, die einige der Vorteile von HTML-Prototypen über eine Drag-and-Drop-Oberfläche bieten, sodass Sie von einer Idee zur Interaktion mit dieser Idee gelangen und sie relativ schnell vorantreiben können. Der mit Abstand größte Vorteil und das, was mich dazu gebracht hat, meine Meinung in Frage zu stellen, ist die Tatsache, dass diese Apps es so einfach machen, Prototypen auf reaktionsschnelle Weise zu erstellen.

Wenn Sie zuerst mobil sind, können Sie die Bildschirmgröße auf Desktop ändern und den Inhaltsfluss und gegebenenfalls die Neupositionierung beobachten. Dies vereinfacht den Prozess und die Überlegungen, die wir beim Entwerfen einer reaktionsfähigen Website berücksichtigen sollten, erheblich. Aber es ist ein Anfang und ein besserer Anfang als eine Reihe von Drahtmodellen und Grafiken unterschiedlicher Größe.

Prototyping von Apps

Im Laufe der Jahre habe ich viele Apps ausprobiert, in der Hoffnung, dass sie mir helfen, der Live-Version meines damaligen Entwurfs näher zu kommen, ohne dass es so lange dauern würde, einen Prototyp von Hand zu codieren. Die Antwort war immer: Es gibt keine Abkürzungen. Aber jetzt, da Apps auftauchen, die beim Entwerfen und Prototyping einer reaktionsfähigen Website helfen, wie können sie Ihnen helfen - und welche sollten Sie sich genauer ansehen?

Schauen wir uns drei Apps an, um eine Einführung in Ihren Workflow zu erwägen: Divshot , Staffelei und UXPin . Im Großen und Ganzen machen alle drei dasselbe: Sie können eine Seite erstellen, indem Sie eine Reihe von Standardelementen ziehen und ablegen.

Drag-and-Drop-Interface-Builder Divshot und Webdesign-Tool im Browser Staffelei Bootstrap als Grundgerüst: angesichts seiner kometenhaften Übernahme sinnvoll. Divshot hat auch kürzlich aufgenommen ZURB-Stiftung . UX / Wireframing-Tool Bei UXPin geht es nicht nur um Prototyping. Sie können Personas und andere Artefakte hochladen, um die Geschichte des Projekts zu erzählen.

01. Divshot

Das Ziehen und Ablegen kann mit Divshot schwierig sein: Sie können nur Elemente an einer Position platzieren, die dann in das DOM passt. Dies kann einschränkend sein, aber Sie erhalten den Code auf Produktionsebene von Bootstrap, der dem Design zugrunde liegt. Sie müssen Bootstrap verwenden und Ihr Design daran anpassen, sodass Sie benutzerdefiniertes CSS hinzufügen können, um das visuelle Design zu optimieren.

Beim Testen von Divshot verbrachte ich Zeit im integrierten Code-Editor, nachdem ich die ursprüngliche Struktur der Seite festgelegt hatte. Es dauerte jedoch nicht lange, bis diese anfängliche Struktur hergestellt war, und ich konnte schnell innerhalb der Benutzeroberfläche skizzieren. Ein Nachteil ist das Fehlen einer Option zum Verknüpfen von Seiten, um einen anklickbaren Prototyp zu erstellen. Sie müssen also Ihren Prototyp herunterladen und dann manuell Verknüpfungen zwischen Dateien erstellen. (Divshot plant, in einer zukünftigen Version die Möglichkeit hinzuzufügen, Seiten innerhalb der App zu verknüpfen.)

Es gibt zwei weitere bemerkenswerte Merkmale. Die Sichtbarkeitssteuerelemente von Divshot im Inspektor wenden eine Klasse auf die Elemente an, sodass Sie sie auf einem der vier für Sie eingerichteten Geräte (Telefon, Tablet, Desktop und HD) problemlos ein- oder ausblenden können.

Dann gibt es die Themen. Divshot hat sich eingehakt Bootswatch , über die Sie schnell das verwendete Thema wechseln und sogar Ihre eigenen benutzerdefinierten Themen verwenden können. Diese Themenfunktion ist im Moment einfach, aber bedenken Sie die Leistung, die sie Ihnen bieten könnte, wenn Sie Ihr benutzerdefiniertes Thema für Ihren Kunden anschließen. Divshot kostet zwischen 30 und 300 US-Dollar pro Monat.

02. Staffelei

Staffelei verwendet auch Bootstrap. Im Gegensatz zu Divshot können Sie in der Benutzeroberfläche schnell „skizzieren“, ohne die Layoutelemente zu verwenden. Sie können Seiten auch schnell und einfach zu einem anklickbaren Prototyp verknüpfen. Sobald Sie bereit sind, etwas mit Ihrem Team oder Kunden zu teilen, können Sie dies tun und im Kommentarmodus Feedback erhalten.

Ich würde dies auch in Betracht ziehen, um Lo-Fi-Usability-Tests durchzuführen: Die Möglichkeit, auf diese Weise Feedback zu geben, ist einer der größten Vorteile des Prototyping. Staffelei hat auch Unterstützung für Teams. Es kann nur gut sein, wenn Ihr Design nicht an eine bestimmte Person gebunden ist.

Ein Nachteil von Easel ist die feste Leinwandgröße für die Desktop-Ansicht, insbesondere wenn Sie das Design so einstellen möchten, dass es vollständig flüssig ist. Ich habe festgestellt, dass die Breite der Elemente eher auf die Leinwandgröße als auf den verfügbaren Platz im Browser festgelegt wurde. Staffelei kostet zwischen 15 und 99 US-Dollar pro Monat.

03. UXPin

Die Benutzeroberfläche von UXPin bietet mehr Funktionen als Divshot oder Easel, sodass sie sich wie eine umfassendere App anfühlt. Sie sind nicht an ein CSS-Framework gebunden. Sie können also vollständig ohne die Einschränkungen entwerfen, die sie Ihnen auferlegen. Sie können Ihr eigenes Raster einrichten und zwischen einigen verschiedenen Bildschirmgrößen wechseln. Fügen Sie bei Bedarf weitere hinzu, um viel Flexibilität zu erhalten.

Sobald Sie Ihren Prototyp erstellt und für Teammitglieder freigegeben haben, können diese einzelne Anfragen kommentieren, beantworten und lösen. Im Gegensatz zu den anderen Apps können Sie Iterationen erstellen, die überprüft und kommentiert werden können. Mir gefällt, wie dies die Arbeit hinter dem Design enthüllt - das Dokumentieren von Elementen, die nicht funktionieren, ist genauso nützlich wie das Dokumentieren der Dinge, die funktionieren. Zu oft achten wir nur auf die Dinge, die funktionieren, und vergessen, die Reise zu erklären.

UXPin konzentriert sich wirklich darauf, die Geschichte des Projekts zu erzählen, und bietet die Möglichkeit, zusätzliche Assets hochzuladen, die nicht in der App erstellt wurden, z. B. Personas, einen Projektstart oder eine Projekt-Framework-Vorlage. UXPin kostet zwischen 12 und 89 US-Dollar pro Monat.

Überlegungen zum Workflow

Alle drei Apps haben einen Platz in meinem Workflow. Sie decken viel Boden ab und ich kann sehen, wie sie an Bodenhaftung gewinnen. UXPin und Easel sind schnell in den Griff zu bekommen: Wenn Sie etwas benötigen, mit dem Sie Ideen schnell testen können, sind sie ein guter Ausgangspunkt.

Wenn Sie integrierter arbeiten, möglicherweise Seite an Seite mit einem Entwicklerteam, und überlegen, wie Komponenten wiederverwendbar zusammenpassen, können Sie Divshot bevorzugen (insbesondere, wenn Sie Bootstrap oder Foundation verwenden). Ich kann sehen, wie integrierte Teams die Möglichkeit nutzen, auf ein benutzerdefiniertes Thema zu verlinken.

Es wird Entwickler geben, die sagen, Sie sollten Ihr eigenes Framework erstellen. Aber wenn Sie etwas nehmen können, das Sie als Prototyp erstellt, getestet und dem Entwicklerteam übergeben haben, das es gerne verwendet, warum nicht?

Einfacher als es war

Diese drei Apps zeigen, dass Prototyping viel einfacher ist als es war. Das Level, auf das Sie es bringen, ist eine Frage der Wahl. Dies hängt vom Projekt, dem Team und der Zeit ab, die Sie haben. Ich kann immer noch Fälle sehen, in denen ich noch in den Code einsteigen möchte. Behandeln Sie diese Apps daher zu Beginn des Vorgangs als Verknüpfung.

Wenn die von uns verwendeten Tools ausgereift sind, werden die Eintrittsbarrieren sinken. Ich wage es zu sagen, aber es wird einfacher, Prototypen zu erstellen, indem verschiedene Elemente von Websites wie jsFiddle und GitHub zusammengeführt werden.

Die Zukunft des Prototyping

Jede App hat Vor- und Nachteile. Eine Sache, die mich an diesen Apps verwirrt, ist, dass sie alle standardmäßig mit dem Desktop beginnen und nicht zuerst mit dem Handy.

Wenn Sie auf diese Weise entwerfen, ist der Inhalt eines der entscheidenden Dinge - und keine dieser Apps macht es einfach, Inhalte gleich zu Beginn des Entwurfsprozesses einzubinden. Wenn unsere Entwürfe die Prinzipien verkörpern sollen, nach denen wir zu leben beginnen, müssen die Werkzeuge, die wir verwenden, mit ihnen im Herzen gebaut werden. Möglicherweise wäre ein Standardseitenstatus eine willkommene Ergänzung.

Trotzdem wird das Prototyping immer einfacher, sodass Sie Ihre Ideen effektiver testen und erklären können - so haben Sie Zeit, sich auf das Design zu konzentrieren.

Gavin Wye ist Senior User Experience Designer und arbeitet derzeit für Virgin Money.

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 245.