Kurzvorstellung: Website-Wireframes mit Adobe Xd

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.

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. Schnell mal den Warenkorb seines Onlineshops nachbauen und Elemente, Artikel und funktionierende Buttons platzieren. Alles kein Problem mit Adobe Xd!
Wireframes mit Adobe Xd - Beispielgrafik
Wireframes mit Adobe Xd - Beispielgrafik

Demo ansehen

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.

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.