Wie präsentieren Sie interaktives Webdesign?

Die Interaktivität wird in unserem Design für das Web immer präsenter, aber hat jemand einen guten Weg gefunden, die Interaktivität dem Kunden zu präsentieren? Ich spreche hauptsächlich über kleine Animationen wie diese:

• Ein Schwebeflug auf einem Knopf
• Ein Effekt auf die Navigationsleiste, wenn der Benutzer einen Bildlauf durchführt.
• Ein Element im Design, das sich bewegt, wenn der Benutzer einen Bildlauf durchführt
• Eine Popup-Öffnung
• Eine Infobox, die angezeigt wird, wenn der Benutzer auf ein Element klickt
• ...

Ich habe noch keinen Weg gefunden, den ich wirklich mag. Ich bin gespannt, wie ihr es macht.

Dies hängt wirklich von Ihrem Workflow ab. Denken Sie daran, dass heutzutage viele Webdesigner auf die Verwendung von Grafiksoftware und Design direkt in ihrem Browser verzichten. Auf diese Weise präsentieren Sie Ihre Entwürfe in einem Browser, in dem sie landen. Löschen Sie eine kurze.

Wenn Sie in einem Teil Ihres Workflows statische Modelle verwenden, können Sie jederzeit ein kleines dynamisches Modell in einem Browser erstellen, um die von Ihnen geplanten interaktiven Teile anzuzeigen.

Normalerweise wähle ich interaktive Elemente in meinem Webdesign zu einem späteren Zeitpunkt als das statische visuelle Design. Sobald ein statisches Design vereinbart ist, beginne ich mit dem Codieren und verwende eine Vorschau-Site, um die interaktiven Teile des Designs zu präsentieren. Mit der Eingabe des Kunden entwickelt sich diese Vorschau-Site schnell zum eigentlichen Produkt.

Ihre Frage ist, warum ich die Codierung im Browser vorschlage (Referenz: Was sind die Schritte beim Entwerfen einer Website? ). Der beste Weg, um Interaktivität in einer Site, App oder etwas anderem anzuzeigen, ist das Medium, in dem sie verwendet werden soll. Ich sage nicht, dass Sie die Site vollständig entwickeln und bereitstellen. Was ich damit sagen möchte, ist, dass Sie Phasen im Design- / Entwicklungsprozess liefern können:

• Einfache (handgezeichnete) Skizzen in Papier- oder PDF-Form werden normalerweise als Brainstorming bezeichnet. Einige seriöse Unternehmen und Einzelpersonen verfügen über ein 4 x 8 Zoll großes Trockenlöschbrett mit Skizzen zur Anzeige einer App.

• Schwarz-Weiß- codiertes Modell der Site für Gerätetests und eine Demo für den Kunden, falls im Gebot enthalten. Normalerweise verwende ich Bacon Ipsum (mag die Speckreferenz " Alternative zu Lorem Ipsum (Dummy-Text) für Websites " nicht) als Dummy-Inhalt. Wenn ein Bild benötigt wird, platziere ich ein Modellbild mit der Aufschrift "Bild".
• Wenn der Gerätetest abgeschlossen ist, würde ich auf die Interaktionen und Effekte eingehen, wenn sie im Projekt speziell angefordert werden.
• Fügen Sie die Farbe, Verläufe und Tiefe für die Site hinzu.

Ich werde vorschlagen, im interaktiven Design nicht den Fehler zu machen, den Sie in vielen "Themen" finden, in denen alles animiert ist. Für mich wird das heikel und zieht die Bedeutung der Website und ihres Inhalts weg. Ich würde vorschlagen, Animationen in Schlüsselbereichen zu verwenden, die hervorstechen oder mehr als einen zu liefernden Inhalt anzeigen müssen.

Wenn Sie neugierig sind, wie Sie dies hosten sollen, würde ich hoffen, dass Sie, wenn Sie Webdesign betreiben, eine eigene Website haben und ich würde eine Subdomain erstellen, für die kein Follow-up angewendet wird.

Wenn es sich bei Ihrer Präsentation um ein gedrucktes Material handelt, zeichne ich persönlich ein Drahtmodell oder den Endentwurfsvorschlag und kommentiere ihn mit Kommentaren und Erklärungen. und ich präsentiere alle möglichen Interaktionen so - zum Beispiel.

• Wenn Sie beispielsweise ein Pulldown-Menü oder ein Mega-Menü in der oberen Navigationsleiste haben, rendere ich eine Datei mit der Navigationsleiste mit einem geöffneten Menüelement.
• Wenn es ein Szenario gibt, in dem ein Panel geöffnet wird, rendere ich bei Bedarf einfach alle Schritte.
• Manchmal kommentiere ich mein Design / Drahtmodell mit einer Online-Beispiel-URL-Referenz.
• Jedes Webseitenelement erscheint dem Benutzer als Blatt. Ich rendere es in meinen Designs.

Aber wenn Ihre Präsentation eine visuelle Präsentation ist, mache ich alles, was ich will, mit Animationen, Übergängen, Sounds, Videos ... usw. um das Konzept mit einer der Präsentationssoftware zu zeigen. und diese Methode lohnt sich. wie Sie dem Kunden alle möglichen Interaktionen auf attraktive Weise zeigen und sich keine Sorgen machen, eine Kopie Ihres Designs in seinen Händen zu halten - wenn Sie wissen, was ich meine;)

In letzter Zeit scheint es einen Trend zu geben, animierte GIFs für UI-Interaktionen zu erstellen ( eine schnelle Suche in Dribbble wird mehr enthüllen). Ich stelle mir vor, dass viele davon mit After Effects zusammengestellt werden. InVision hat kürzlich einen Artikel veröffentlicht, in dem dargelegt wird, wie sie dies intern tun.

Obwohl ich die Attraktivität dieser Art von Leistungen verstehen kann (sie sind en-vougue, sie sehen sehr beeindruckend aus und sie sind leicht zu transportieren), scheinen sie mir in vielerlei Hinsicht von Natur aus problematisch zu sein:

1. Sie stellen aus Sicht des Kunden ungenaue Erwartungen auf - Mit AE können Sie alle Arten von visuellen Effekten hinzufügen, die bei der Übersetzung in CSS möglicherweise nicht realisierbar sind
2. Sie reagieren nicht - sowohl im Sinne der Medienabfrage als auch der Tatsache, dass der Benutzer keine Interaktion mit ihnen hat. Der Client kann die Hover-Aktionen nicht ausprobieren, sondern beobachtet sie nur passiv.
3. Sie erfordern mehr Arbeit - irgendwann im Projekt müssen diese Animationen und Interaktionen in CSS übersetzt werden. Warum viel Zeit investieren, um diese Elemente in einem Medium zu animieren, wenn Sie einfach alles beiseite schieben und es in CSS tun?

Ich würde zwei verschiedene Ansätze empfehlen und anwenden:

Verwenden Sie zunächst das Papier-Prototyping für die Interaktionen und Inhaltsbeziehungen auf hoher Ebene. Auf diese Weise kann der Kunde ziemlich früh im Projekt ein mentales Modell bilden. Ich bevorzuge die Papierprototypen gegenüber bereits vorhandenen Prototyping-Frameworks oder -Kits (a la Bootstrap). Obwohl diese minimal sein sollen, finde ich, dass sie immer noch zu viel visuelle Wirkung haben und den Kunden davon ablenken können, zu denken, dass das Endprodukt tatsächlich so aussehen wird. Dies ist weniger wahrscheinlich, wenn Sie Stift- und Papierskizzen verwenden.

Für die detaillierteren Interaktionen (die sich nach Ihren Wünschen anhören) verwenden wir Stilkacheln , eine vereinfachte einzelne Seite mit einer Reihe verschiedener Komponenten. Das Tolle daran ist:

1. Der Client zeigt sie im Browser an, kann also die Interaktion testen und sehen, ob sie reagiert
2. Das gleiche CSS wird dann im Endprodukt / auf der Website verwendet
3. Das CSS kann während des gesamten Builds gründlich dokumentiert werden, um einen Styleguide zu entwickeln.

Es funktioniert gut für uns, wir können ziemlich schnell iterieren. Dies hängt natürlich von einem ziemlich robusten Workflow ab, den wir schon eine ganze Weile entwickelt haben, aber wir sehen dies als fortlaufende Investition an, da jedes nachfolgende Projekt immer schneller wird.

Dafür gibt es verschiedene Anwendungen. Es gibt einige gute, die kostenlos sind, aber sie sind in einigen Fällen auf die Funktionalität beschränkt, die Sie Ihrem Kunden demonstrieren können. Invision ist fantastisch und kostenlos, bietet jedoch mehr Funktionen für mobile Geräte als für Desktop-Geräte. Sie können einen Link an den Client senden und Kommentare abgeben und zurücksenden. Ein Wort der Warnung mit diesen Jungs. Stellen Sie sicher, dass die Anwendung alles tut, was Sie brauchen, bevor Sie eintauchen.

Es gibt andere Anwendungen, die die volle Funktionalität ermöglichen, aber Sie müssen dafür bezahlen. Meiner Meinung nach das Geld wert, da Sie die Funktionalität erarbeiten können, bevor Sie mit dem Codieren beginnen.

Wir verwenden Axure bei der Arbeit, bevor wir mit dem Entwurf oder Code beginnen. Diese Anwendung ist ein erstaunliches interaktives Drahtrahmen-Tool. Sie können eine vollständige Anwendung mit enthaltener Logik erstellen. Es ermöglicht Ihnen, die vollständige Anwendung / Website zu erstellen, bevor Sie sie entwerfen oder codieren. Es hatte auch eine Schaltfläche, die in einen Demo-Modus startet, in dem Sie Ihr Design präsentieren können. Diese App ist ein Favorit unter UX-Designern.

Und meine letzte Empfehlung ist Indesign. Mit Indesign können Sie mit Ihren Designdateien eine voll funktionsfähige Website-Demo erstellen. Sie können Rollover-Status testen und auf andere Seiten in Ihrem Dokument klicken.

Hoffe diese Hilfe. Wir verwenden alle diese Methoden bei der Arbeit, je nachdem, wie viel Zeit und Budget wir für das Projekt haben, an dem wir arbeiten.

Ich ziehe es vor, die Interaktionen zu erstellen und sie im Browser zu präsentieren. Bevor wir ihnen dies zeigen können, kommentieren wir normalerweise Interaktionen, versuchen jedoch nicht, sie außerhalb des Webcodes zu replizieren. Wenn Sie versuchen, Interaktionen außerhalb des Webcodes (After Effects, animiertes GIF, Axure usw.) zu replizieren, besteht das Risiko, dass Sie sich eher um diese bestimmte Software als um den tatsächlichen Code kümmern, der im realen Produkt verwendet wird.

Ich verwende oft HTML / CSS und Javascript, um komplexe Interaktionen anzuzeigen. Wenn die Änderung jedoch einfach ist, zeige ich die verschiedenen Zustände in Layer-Kompositionen an (und verwende ein übergroßes Cursorsymbol), um die verschiedenen Zustände anzuzeigen.

1. Originalzustand
2. Zeigen Sie bei Bedarf ein Maussymbol und eine Anmerkung an
3. Statusänderung anzeigen ...

Das hängt davon ab, was Sie präsentieren.

Wenn Sie die Animation und Erfahrung auf niedriger Ebene präsentieren, müssen Sie dies im Medium des Endprodukts tun. Alles andere ist entweder eine schlechte Annäherung oder nicht umsetzbar. Sie würden niemals präsentieren, wie sich ein Papier faltet oder wie sich seine Textur auf der Hand anfühlt oder wie subtil es auf einem Bildschirm riecht. Warum sollten Sie versuchen zu präsentieren, wie sich eine Schaltfläche auf Papier bewegt?

Wenn Sie die Interaktion auf hoher Ebene zwischen Benutzern und den Komponenten präsentieren, können Sie sie nicht realisierbar erstellen, ohne viel Zeit damit verbracht zu haben, sie zu erstellen. Daher benötigen Sie einen Ersatz. Außerdem kann eine Präsentation auf hoher Ebene auf dem tatsächlichen Medium durchgeführt werden Machen Sie den falschen Eindruck, dass Sie fast fertig sind oder dass Sie bereits auf Details auf niedriger Ebene eingestellt sind, die eigentlich nicht das Hauptthema für die aktuelle Präsentation sind, nämlich die Interaktion auf hoher Ebene. Eine skizzenhafte Präsentation würde den Überblick auf hoher Ebene vermitteln, ohne den Kunden mit den Details zu überfordern.

Wichtig ist auch, dass Sie bei der Präsentation von Animationsdetails auf niedriger Ebene diese in den Kontext stellen, in dem sie verwendet werden. Wenn Sie also eine Menüleiste präsentieren, rahmen Sie sie bei der Präsentation mit den übrigen Seiten ein Präsentieren Sie sie als Schwebeeffekt, wie sie in einer Form verwendet werden. Achten Sie darauf, diese Kontextelemente zu betonen, damit sich die Benutzer auf den aktuellen Punkt konzentrieren können (z. B. ihre Farben stummschalten, generische, neutrale Bilder verwenden, Lorem-Ipsum-Texte verwenden usw.).

Wenn Sie diese Animation im endgültigen Medium präsentieren, können Sie gleichzeitig auch Machbarkeitsstudien durchführen. Nichts ist schlimmer, als ein sehr tolles Design zu versprechen, das Ihr Kunde nur in After Effects liebt, nur um am Ende nicht in der Lage zu sein, sie zu liefern, da sie im Medium einfach nicht möglich sind.