Vom Wireframe zum Wow-Effekt

Jedes interaktive Projekt beginnt mit einem Wireframe – einem groben Entwurf, der die Größe und Struktur von Seiten- und Navigationselementen sowie die Funktionalität darstellt. Ein Wireframe bietet Auftraggebern und Team-Mitgliedern einen ersten Eindruck vom User-Flow, dem geplanten Content und dem Design.
 
 

Vom Wireframe zum Wow-Effekt
Wenn Sie beispielsweise eine neue Microsite für Ihr Unternehmen erstellen, können Sie mithilfe von Wireframes alle Seiten und Seitenelemente darlegen und demonstrieren, wie sie miteinander interagieren. Durch die Darstellung eines Designs in dieser einfachen Entwurfsform – ohne finale Farbgebung, ausformulierten Text oder zusätzliche visuelle Aspekte – können sich Auftraggeber und Team-Mitglieder ganz auf die Funktionalität, die zugrunde liegende Struktur und den User-Flow konzentrieren. Dieser Schritt sollte nicht ausgelassen werden, zumal Wireframes auch helfen, Fehler oder Lücken in der Logik aufzudecken.
 
Mit Wireframes als Ausgangsbasis sind alle Beteiligten – auch Sie selbst – in der Lage, das Projekt auf Usability hin zu überprüfen, Ideen klar und deutlich zu vermitteln bzw. zu verstehen und dann auf diesem Framework aufzubauen. Die Erstellung von Wireframes mit Adobe XD ist einfach. Wie es geht, erfahren Sie auf dieser Seite.
  • 1. Mit Grundformen beginnen

  • 1. Mit Grundformen beginnen

    Wählen Sie die passende Größe für Ihre erste Zeichenfläche. Ausschlaggebend hierfür sind die Endgeräte, auf denen das Design verwendet werden soll. Sie können entweder eine vordefinierte Größe wählen oder eigene Maße festlegen.
    Doppelklicken Sie auf den Titel der Zeichenfläche links oben, um einen Namen einzugeben.
    Beim Hinzufügen von Objekten zur Zeichenfläche denken Sie immer daran, welchen Zweck sie erfüllen und wie der Anwender mit ihnen interagieren soll. Verwenden Sie möglichst einfache Formen, um Ihr Konzept zu vermitteln. Die Details sollten an dieser Stelle der Vorstellungskraft überlassen werden.

    Sie sind noch nicht mit Zeichenflächen vertraut? Hier erfahren Sie, wie Sie damit arbeiten.

  • 2. Formen als Platzhalter für Bilder verwenden

    Wenn Ihr Wireframe Bilder enthalten soll, können Sie Grundformen wie Rechtecke und Kreise als Platzhalter einsetzen.
  • 2. Formen als Platzhalter für Bilder verwenden
  • 3. Zeitsparende Symbole verwenden

  • 3. Zeitsparende Symbole verwenden

    Viele Screens sind sich sehr ähnlich, da auf jedem Screen dieselben Hauptelemente wie Menüleisten und Kopfzeilen verwendet werden.
    Sie müssen den Screen jedoch nicht jedes Mal von Grund auf designen, wenn Sie eine neue Zeichenfläche hinzufügen. Stattdessen können Sie wiederkehrende Elemente einfach in Symbole konvertieren und diese in neue Zeichenflächen einfügen. Da die Symbole miteinander verknüpft sind, werden alle Instanzen aktualisiert, sobald Sie eine ändern.

    Sie haben noch nie mit Symbolen gearbeitet? So geht’s.

  • 4. Zeichenflächen anordnen

    Ziehen Sie ein Auswahlrechteck um mehrere Zeichenflächen, oder halten Sie beim Anklicken die Umschalttaste gedrückt, um mehrere Zeichenflächen auszuwählen und sie dann alle auf einmal zu verschieben. Sie können auch die Schaltflächen oder Menüoptionen zum Anordnen verwenden, um die ausgewählten Zeichenflächen neu zu platzieren.
  • 4. Zeichenflächen anordnen
  • 5. Raster verwenden

  • 5. Raster verwenden

    Mithilfe von Rastern können Sie Objekte und Text an Hilfslinien ausrichten. Beim Zeichnen rasten Objekte automatisch ein. Raster erleichtern auch das Einschätzen von Abmessungen, wenn Sie Objekte oder Text auf Zeichenflächen anordnen.

  • 6. Wireframe animieren

    Sobald Sie mehrere Zeichenflächen erstellt haben, können Sie sie mithilfe von Animationen miteinander „verdrahten“, um eine Vorschau der Interaktionen zu erstellen. Adobe XD bietet für den Wechsel zwischen Bildschirmen die Übergangstypen „Hineinbewegen“ und „Schieben“, jeweils „Nach links“, „Nach rechts“, „Nach oben“ und „Nach unten“, sowie „Ausblenden“. Sie können auch das Easing und die Dauer des Übergangs festlegen. Adobe XD verwendet Ihre zuletzt gewählten Einstellungen als Standard, sodass das Wireframing beschleunigt wird, wenn Sie mehrere Übergänge desselben Typs definieren.
  • 6. Wireframe animieren
  • 7. Wireframe präsentieren

  • 7. Wireframe präsentieren

    Sobald der Entwurf zur Weitergabe bereit ist, können Sie eine URL erstellen oder das Design in eine Web-Seite einbinden. Falls Sie Feedback einholen möchten, aktivieren Sie die Kommentierungsfunktion. Auch die Aufzeichnung einer Demo im MOV-Format ist möglich.
    Öffnen Sie die Adobe XD-Datei, die Sie weitergeben möchten. Klicken Sie auf das Symbol zur Freigabe und dann auf „Prototyp veröffentlichen“. Geben Sie einen Namen ein, und klicken Sie auf „Öffentlichen Link erstellen“. XD erstellt eine URL, die Sie kopieren können. Wenn Sie Ihr Design geändert haben und den veröffentlichten Prototyp aktualisieren möchten, klicken Sie auf „Aktualisieren“. Sie können den Entwurf im Vorschaufenster oder im Vollbildmodus aufrufen. Über das Vorschaufenster lassen sich auch Interaktionen aufzeichnen.
    Wenn Sie Korrekturen vornehmen, müssen Sie dazu das Vorschaufenster nicht schließen. Ihre Änderungen werden sofort übernommen.

Weitere Informationen

In den Tutorials zu XD finden Sie weitere Informationen zu Screendesign. Sie können auch Adobe-Experten bei der Erstellung von Wireframes und Prototypen in Echtzeit folgen.
Jetzt sind Sie dran.
Wenn Sie die Screens für ein Projekt schon auf Papier entworfen haben, versuchen Sie, die Skizzen mithilfe von Zeichenflächen und einer einfachen Animation in XD nachzubilden. Durch Importieren von Dateien aus Photoshop und Illustrator in XD können Sie jederzeit weitere Zeichenflächen und Objekte für die Interaktion hinzufügen. Sie werden feststellen, dass ein klar strukturiertes Wireframe Ihrem Team und Auftraggebern einen guten ersten Eindruck verschafft. Durch einfache Ergänzungen lässt sich dieses Grundgerüst anschließend in einen Prototyp umwandeln.
Erste Schritte mit Adobe XD ›