Realistischer XD Prototyp

Damit sich ein Kunde bei der ersten Durchsicht der Webseiten-Entwürfe optimal auf die Struktur, Usability und das entsprechende Design einlassen kann, ist ein realistischer Prototyp unabdingbar.

Er ermöglicht dem Kunden sich auf die wesentlichen Fragen zu konzentrieren:

  • Macht der allgemeine Aufbau und die Struktur der Seite Sinn?
  • Wie benutzerfreundlich ist die Seite?
  • Stimmt die Navigation?
  • Findet der User wonach er gesucht hat?
  • Erkennt man allgemein klickbare Elemente oder nicht?
  • Darüber hinaus können einige der Effekte auch helfen, das Design und Erleben der Seite auf ein nächstes Level zu bringen!

Welche Möglichkeiten gibt es also einen realistischen XD Prototypen zu erstellen?

Hover

Als Hover-Effekt wird die optische Veränderung des betreffenden Elements bezeichnet, wenn der User mit dem Cursor darüber fährt. Dieser Effekt kommt häufig zum Einsatz, um den User auf die Klickbarkeit eines Elementes hinzuweisen.

Gängige Anwendungsmöglichkeiten

Navigation, Buttons, Bilder/Grafiken (zoom in/out, schwarz/weiß zu Farbe, Bild zu Overlay ­– Farbe oder Text)

Schwierigkeit

Einfach bis mittel

Buttons

Erstelle einen Button mit Hintergrund und Text im gewünschten Standard-Zustand. Markiere sowohl den Hintergrund, als auch den Text und lege eine neue Komponente an. Über das +Symbol wird ein neuer Zustand – Hover Zustand – für die Komponente angelegt (Windows Shortcut strg + k. Mac Shortcut cmd + k). Du kannst die Komponente nun bis zum gewünschten Ziel-Zustand bearbeiten. Wechsle nach der Bearbeitung zurück in den Standard-Zustand. In der Prototypen-Ansicht wird „Hover“ als Trigger ausgewählt und die Animation mit dem Aktions-Typ bearbeitet (beispielsweise Übergang oder Auto-Animate mit der gewünschten Dauer).

Nur aus Text bestehende Buttons findet man hauptsächlich in der Navigation, aber auch immer häufiger innerhalb einer Webseite, da sie für eine sehr cleane und übersichtliche Oberfläche sorgen. Hierbei ist es sowohl bei der Prototyp-Erstellung, als auch bei der Umsetzung des Projekts sinnvoll einen „Hintergrund“ anzulegen, da sonst die klickbare Fläche sehr klein und für den User schwer zu erfassen ist.


Bilder

Auch Bilder werden immer häufiger für Interaktionen mit dem User genutzt und daher ist es wichtig erkennbar zu machen, welche Bilder durch Interaktion weiter auf eine Unterseite, in eine Bildergalerie oder allgemein zu mehr Information führen.

Die Bearbeitung ist ähnlich, wie bei den Buttons. Erstelle ein Rechteck und ziehe das Bild hinein. Das Bild kann innerhalb dieses Rechtecks skaliert und positioniert werden – es dient quasi als Schnittmaske. Bearbeite das Bild zum gewünschten Standard-Zustand und lege es als Komponente an. Füge anschließend wieder einen Hover-Zustand hinzu und bearbeite die Komponente. Solltest du ein Overlay (Farbfläche und/oder Text) im Standard-Zustand angelegt haben, kannst du dieses nun im Hover-Zustand entfernen – oder umgekehrt auch hinzufügen. Hierbei kannst du das Overlay selbst ebenfalls bearbeiten, zum Beispiel mit Deckkraft und Füllmethode (probier dich aus! – hier kannst du Bilder verblassen/einfärben, mit einem Farb-Overlay versehen, von Schwarz/Weiß zu Farbe animieren oder umgekehrt)
Für einen Zoom-In-Effekt wird das Bild im Hover-Zustand innerhalb des Rechtecks einfach größer skaliert. Für einen Zoom-Out Effekt wird das genaue Gegenteil gemacht.

„Animierte“ Navigation (One-Pager)

Bei einer animierten Navigation führt ein Element durch Interaktion (Klicken) zur gewünschten Section.

Gängige Anwendungsmöglichkeiten

für Navigation/Header, Buttons, Bilder

Schwierigkeit

leicht

Header (One-Pager)

Erstelle das Design für die Webseite und lege im Header die jeweiligen Menüpunkte, passend zu den Sections an. Die Menüpunkte können auch mit einem Hover-Effekt versehen werden, um klar auf mögliche Interaktion hinzuweisen. Füge bei allen Sections einen separaten Hintergrund ein, welcher weder Flächenfarbe noch Rahmen besitzen muss. Der Hintergrund ist im Prototyp deshalb sinnvoll, da der zu verknüpfende Zielbereich einfacher zu bestimmen ist (Zielbereich = obere Kante des Hintergrunds). Verknüpfe in der Prototyp-Ansicht nun den jeweiligen Menüpunkt mit dem Hintergrund der gewünschten Section. In der Prototyp-Ansicht wird hier als Trigger „Antippen“ bestimmt, da es den üblichen Anwendungsprozess widerspiegelt. Für den Übergang eignet sich neben Auto-Animation ein Bildlauf. Zusätzlich kann auch die Dauer des Übergangs bearbeitet werden.

Buttons

Das gleiche Prinzip kann auch für Buttons innerhalb der Webseite angewendet werden (z.B. ein CTA, der auf ein Kontaktformular am Ende der Seite weiterleitet)

Elemente fixieren

Im Bildlauf fixierte Elemente bleiben trotz weiterscrollen auf der Webseite „sticky“, also unverändert an ihrem Platz.

Gängige Anwendungsmöglichkeit

Navigation/Header, Menü-Button, Kontakt-Button, Zurück-Button, Chat-Button

Schwierigkeit

super einfach

Umsetzung

Markiere das gewünschte Element oder die Gruppe und aktiviere „Position bei Bildlauf fixieren“. In der Live-Ansicht kann das Ergebnis getestet und kontrolliert werden. Wichtig ist am Ende des Designprozesses zu kontrollieren, dass sich die im Bildlauf fixierten Elemente im Vordergrund befinden, da sie sonst beim Scrollen von anderen Elementen verdeckt würden

Vertikales und horizontales Karussell (Bildlauf-Gruppe)

Hierbei definiert man innerhalb einer Zeichenfläche Bereiche, die einen eigenen Bildlauf haben und so unabhängig verschoben werden Können.

Gängige Anwendungsmöglichkeiten

Bildergalerie – Bilder werden entweder durch Klicken und Ziehen oder horizontales Scrollen verschoben
Map – Bild bzw. Grafik wird entweder durch Klicken und Ziehen oder vertikales und horizontales Scrollen bewegt
Liste – durch Klicken und Ziehen oder Scrollen bewegt man sich innerhalb des definierten Bereichs auf und ab
Fake-Parallax-Effekt – Bild bewegt sich innerhalb eines definierten Bereichs während man scrollt; ½ Text Section bewegt sich beim Scrollen alleine weiter, während die andere ½ sticky ist.

Schwierigkeit

mittel – bissi anspruchsvoll

Vertikaler Bildlauf

Liste

Lege eine Liste für den gewünschten Anwendungsbereich an. Hierbei soll die Liste über den Bereich hinausragen, in dem schlussendlich gescrollt werden soll. Markiere alle Elemente und aktiviere den „vertikalen Bildlauf“ (Windows Shortcut Shift + Alt + V. Mac Shortcut Cmd + Shift + V). Bewege die Regler auf und ab und definiere so den Bereich, welcher anfangs ersichtlich sein soll. Anschließend kannst du den Effekt in der Live-Vorschau ausprobieren und gegebenenfalls weiter bearbeiten.


Hintergrundbild (Fake Parallax)

Lege ein Bild oder eine Grafik als Hintergrund der Section an, wobei diese*s höher sein soll, als die tatsächlich gewünschte Höhe der Section. Markiere das Hintergrundbild- oder die Grafik und aktiviere wieder den „vertikalen Bildlauf“. Kürze das Bild/die Grafik nun auf die gewünschte/tatsächliche Höhe des Section-Hintergrundes. Kontrolliere das Ergebnis in der Live-Ansicht und bearbeite die Größe und Position deines Hintergrundes bei Bedarf. Den Text kannst du über der angelegten Hintergrundfläche platzieren ­– so bewegt sich beim Scrollen kurzzeitig nur der Hintergrund.


Textbereich

Das gleiche Konzept kannst du auch auf Textbereiche anwenden – so ist es beispiels­weise möglich, auf einer Hälfte der Section eine Einleitung zu zeigen, welche sticky bleibt, während auf der anderen Seite mehr Infos beim Scrollen angezeigt werden.
Füge dafür die Texte in deine Webseite ein, wobei eine Hälfte der Section deutlich mehr Text hat bzw. länger ist als die andere. Füge einen Hintergrund ein, der Groß genug ist um beide Texte in sich zu tragen. Hierbei ist es sinnvoll den Hintergrund über die gesamte Webseitenbreite anzulegen, da dieser den Bereich definiert, in dem in der Live-Vorschau gescrollt werden kann. Ohne diesen Hintergrund müsste sich die Maus beim Scrollen direkt über dem Text befinden. Markiere sowohl Hintergrund als auch den längeren Text und aktiviere den vertikalen Bildlauf. Richte die Regler nun so ein, dass sie mit der Positionierung des kürzeren Textes übereinstimmt. Bei farbigen Hintergründen muss beachtet werden, dass sich der Text, der nicht mitscrollt im Vordergrund befindet, da dieser sonst verdeckt wird.


Horizontaler Bildlauf

Bildergalerie

Lege eine Bildergalerie an, wobei diese breiter sein soll als der gewünschte angezeigte Bereich. Hierbei kannst du die Bildergalerie sowohl nach links als auch nach rechts hinauslaufen lassen. Markiere die Elemente und aktiviere den „horizontalen Bildlauf“ (Windows Shortcut Shift + Alt + H. Mac Shortcut Cmd + Shift + H). Bewege nun die Regler bis zur gewünschten Breite des Bereichs, wobei es sinnvoll ist die äußeren Bilder an zu schneiden, damit man weiß, dass mehr Bilder da sind als angezeigt.


Horizontaler und vertikaler Bildlauf

Map

Lege ein Bild bzw. eine Grafik an, wobei diese*s sowohl breiter als auch höher sein soll als der gewünschte angezeigte Bereich. Markiere das Element und aktiviere den „horizontalen und vertikalen Bildlauf“ (Windows Shortcut Shift + Alt + D. Mac Shortcut Cmd + Shift + D).

Kommentar

Überrumpelt? Keine Sorge, natürlich musst du nicht gleich alle Effekte in deinem nächsten Projekt einbauen. Auch einzelne Effekte können bereits große Wirkung erzielen. Hab keine Angst vor kompliziert wirkenden Effekten – durch Ausprobieren und Erfahrung sammeln kommt der Fortschritt wie von Zauberhand.

Welcher ist dein Lieblings-Effekt? Hast du noch weitere Ideen für einen realistischeren XD Prototypen? Und was sind deine Erfahrungen und Tipps?