Mit Adobe XD setzen wir die Inhalte der Schlüsselseiten in einen interaktiven Entwurf um. Dabei ist es ein großer Vorteil, dass wir die Designbausteine Ihrer Website mit echten Inhalten entwickeln. Nur so können wir sicherstellen, dass Ihr Redaktionsteam später frei arbeiten kann und nicht – im schlimmsten Fall – die Textmenge an das Design anpassen muss.
Wir denken auch bereits an die technische Umsetzung der grafischen Bausteine, an das Programmieren der Module.
Nach dem Festlegen einer sinnvollen Seitenbreite, zum Beispiel für einen Full-HD-Notebook-Monitor, lege ich ein 12-spaltiges Raster fest, in dem sich der Seiteninhalt in XXL-Ansicht ausbreiten darf. Für den Kopf (Logo, Navigation) und den Fuß der Seite werden zunächst Platzhalter angelegt, denn es geht ja zunächst um die Inhalte der Seite.
Für jeden Typ Inhalt wird ein grafisches Element vorbereitet, zum Beispiel für
Gleiche Inhalte werden mit den gleichen grafischen Elementen umgesetzt. Beispielsweise zeichnen wir die Überschrift eines Abschnitts als H3-Überschrift aus, eine Absatzüberschrift als H4.
In einem Set von Schlüsselseiten sollte die Seite jeder Ebene bestimmte Merkmale haben, eine Übersichtsseite könnte von einem Herobild und den Teasern auf die Unterseiten bestimmt werden, auf einer Detailseite wirken stärker die Inhalte: Texte, Bildergeschichten, Videos.
Beim Gestalten des zweiten Sets von Schlüsselseiten erkennen wir, ob diese Merkmale für verschiedene Inhalte funktionieren.
Sobald wir zufrieden sind mit dem Entwurf der Inhalte der Schlüsselseiten können wir uns an das Rahmendesign machen.
Der Header kann folgende Elemente enthalten:
In den Footer gehören:
Die Ideen für die Gestaltung des Rahmendesigns entwickeln wir aus den Inhalten der Schlüsselseiten und aus allem, was wir seit dem ersten Interview gelernt haben über Ihr Unternehmen.
Die Elemente von Header und Footer werden harmonisch zum Satzspiegel des Contents montiert.
Mit den Prototyp-Funktionen von Adobe XD füge ich die Interaktionen und Übergänge ein – von einer Seite des Entwurfs auf die nächste. Beispielsweise vom Hauptmenüpunkt auf die zugehörige Übersichtsseite und dort von einem Teaser auf die zugehörige Detailseite. In Adobe XD kann jedes Element (Text, Bild, Icon) als interaktiv definiert werden; die Übergänge zur nächsten Seite werden als Linie gezogen. Einfacher geht’s nicht.
Das Look and Feel der fertigen Seiten lässt sich im XD-eigenen Player testen; besser ist es aber, für den Prototyp einen Freigabelink zu erstellen und so den interaktiven Entwurf direkt im Browser zu testen.
Diesen Freigabelink sende ich direkt an Sie, damit Sie das Design bewerten und den Prototyp testen können.
Wenn Sie einverstanden sind mit dem XXL-Entwurf, den Inhalten, der Art der Präsentation und der Benutzerführung, entwerfe ich die kleinste responsive Ansicht, die XS-Version. Das Smartphone-Menü, versteckt unter dem „Hamburger“ Icon, hat besondere Anforderungen: Es zeigt alle Menüpunkte der XXL-Version, muss aber mit dreihundert Pixeln Breite auskommen und sollte sich genauso komfortabel bedienen lassen wie das XXL-Menü.