Kurzvorstellung: Website-Wireframes mit Adobe Xd

Von der Idee zum funktionalen Prototyp

Bei aufwendigen und tief durchdachten Website-Prototypen reicht es nicht mehr aus, das Konzept auf ein Blatt Papier zu schreiben und zu definieren. Oft müssen aus Usability Gründen (UX) viele komplexe Sachverhalte, Klick-Events oder auch Bedienelemente vor der Umsetzung visuell aufbereitet und erläutert werden. Für diese Scenarios eignen sich sogenannte Wireframe Tools. Eines unter ihnen ist Adobe Xd. Die Software von Adobe befindet sich zwar aktuell noch in der Beta-Phase (Stand April 2017), hat aber schon beeindruckend tolle Ergebnisse in den ersten Tests abgeliefert.

Adobe Xd Logo
Adobe Xd Logo
Quelle: Adobe Xd, © Adobe

Was sind Wireframes?

Wireframes sind konzeptionelle Entwürfe von Websites um Positionen von Designelementen zu testen und festzulegen. Während einer Entwurfsphase werden oft die unterschiedlichsten Elemente verändert, den Ansprüchen angepasst und manchmal auch wieder verworfen. Hier bietet es sich an, ein sogenanntes Wireframe Tool zu nutzen. Adobe Xd zum Beispiel unterstützt den Designer und Entwickler während der Konzeptionsweise auf denkbar einfache Weise.

Anzeige

Schnell mal den Warenkorb seines Onlineshops nachbauen und Elemente, Artikel und funktionierende Buttons platzieren.  Alles kein Problem mit Adobe Xd!

Videovorstellung von Adobe Xd, Quelle: YouTube

Viele Endgeräte schon als Vorlage vorhanden

Mit wenigen Klicks können Sie sich alle wichtigen Eigenschaften zur Größe für den Prototypen konfigurieren. Dabei sind schon alle wichtigen Devices bzw. Endgeräte wie IPhones, Tablets oder Android Smartphones als Vorauswahl hinterlegt. Eigene Werte für Individuelle Displays sind natürlich kein Problem und können per benutzerdefinierter Größe hinterlegt werden.

Die ausgewählten Größen können auch separat später auf den einzelnen Zeichenflächen definiert werden. So kann man das gleiche Layout auf verschiedenen Devices ausgeben lassen. Das macht unter anderem für responsive Design Sinn.

Einfachheit ist der Schlüssel

Mit wenigen Handgriffen ist auch ein Seitenwechsel mit einer Schaltfläche kein Problem. Verknüpfen Sie einfach Elemente miteinander und ziehen das Ziel für den Klick einfach auf eine neue Seite. Sie können dann noch weitere Effekte wie Überblendungen angeben, Easings vergeben und die Dauer definieren. Schon haben Sie einen voll funktionsfähigen Klickdummy als Prototyp erstellt.

DEMO online ansehen

Apple UI Components
Material Design - UI Components
Apple UI Components

Adobe Xd in der Creative Cloud

Das Tool kann man aktuell in der Adobe Creative Cloud beziehen.

Feature Liste & Neuerungen

Alle wichtigen Neuerungen der Adobe Xd Beta können Sie hier nachlesen.

[the_ad_group id=”259″]

Fazit

Natürlich gibt es auf dem Markt weitaus komplexere Prototype-Software. Was jedoch nicht heißen muss, dass sich Adobe Xd in Zukunft dahinter verstecken muss. Gerade weil die Software noch in der Beta Phase ist, kam noch viel passieren. Aber für mich als Gelegenheitsanwender hat mich die Einfachheit beeindruckt. Ohne vorab viel Erfahrung damit zu haben, konnte ich für mich ausreichende Wireframes erzeugen und so einigen Kunden meine Ideen anschaulich präsentieren.

Die Möglichkeit meine Prototypen online zu teilen und so anderen Mitarbeitern und Kollegen oder auch Kunden zu zeigen, macht das ganze super bequem. Das hat mir schon sehr gefallen.

Von mir also eine klare Empfehlung!
Zudem bin ich gespannt, wohin sich das Projekt in den nächsten Monaten noch Entwickelt.

Habt Ihr weitere Erfahrungen mit Prototype-Software gemacht?

Kommentar verfassen

Menü