Wie präsentieren Sie Wireframes und Designs für lange One-Page-Websites?

alle! Dies ist ein Problem, mit dem ich seit einer Minute zu kämpfen habe, und ich dachte, ich schreibe einfach, um zu sehen, was alle anderen tun.

Damals, als wir Wireframes präsentierten, steckten wir sie immer in eine schöne PDF-Datei mit einem Rahmen darum für unser Unternehmen, der schön und sexy aussah. Aber das war, bevor wir so viele superlange einseitige Wireframes und Designs gemacht haben.

Wie geht es euch jetzt? Erstellen Sie Wireframing und entwerfen Sie als eine wirklich lange .sketch-Datei und exportieren Sie sie dann in einem Stück in eine .pdf-Datei, um sie zu präsentieren? Oder schneiden Sie es auf und zeigen die verschiedenen Abschnitte des One-Pagers auf verschiedenen Seiten einer .pdf-Datei an?

Ich möchte alles in einem Stück zeigen, aber ich möchte auch das Firmenbranding beibehalten, also stecke ich fest. Ich bin sehr gespannt zu hören, wie du es machst.

Danke!

Wir drucken sie auf mehreren (Papier-)Seiten aus und heften sie dann an eine große Tafel - die Größe ist mehr oder weniger realistisch. Wenn sie per E-Mail gesendet werden müssen, verwenden wir einfach ein langes PNG / JPG / PSD. Müssen Sie sie NUR digital versenden?
In den Unternehmen, in denen ich gearbeitet habe, haben wir .psds verwendet

Antworten (4)

Ich benutze dafür die Invision App. Wenn Sie die Tutorials lesen, gibt es eine Möglichkeit, das Navigationssystem festzuhalten, sodass Sie oben eine Leiste mit Ihrem Branding erstellen können, die oben bleibt, wenn der Benutzer / Client die Seite nach unten scrollt. Hoffe das hilft.

www.invisionapp.com

https://support.invisionapp.com/hc/en-us/articles/203730455-How-do-I-set-fixed-headers-and-or-footers-

Süss. Ich habe die Marvel App ausprobiert, aber Invision noch nicht. Vielen Dank!

Meine 2 Cent.

Nehmen wir an, ich habe ein Drahtmodell oder ein Vordesign in Illustrator erstellt.

Ich exportiere einfach ein großes langes JPG und platziere es in einem HTML-Code, der Folgendes enthält:

<html>
<head>
<style>
 body {margin: 0; padding:0;}
 img {width: 100%}
</style>
</head>
<body>
 <img src="MyBigImage.jpg">
</body>
</html>

Und ich bin fertig.

Aber wenn Sie denken, dass Ihr Mockup zu lang ist ... wahrscheinlich wird das fertige auch sein, also machen Sie es nicht so lange.

Willst du es interaktiver machen?

Exportieren Sie jeden Abschnitt als separates Bild und fügen Sie eine ID hinzu

<img id="One" src...>
<img id="Two" src...>

Und machen Sie ein schwebendes Menü.

Natürlich können Sie etwas Jquery hinzufügen, um den Sprung reibungslos zu gestalten. Für die erste Lieferung klingt das wahrscheinlich zu viel Arbeit. Aber es ist eine Vorlage, die Sie verwenden und wiederverwenden können. Es lohnt sich also.

Danke, Alter. Genau das überlege ich mir beim nächsten Mal.

Für das Web codiere ich normalerweise das Wireframe und lasse den Client es durchlaufen. Wenn dies nicht möglich ist und Sie sich in einer Vorstufe des Wireframes befinden, können Sie es im PDF nach Abschnitten trennen. Wenn dies für ein Gerät ist, können Sie immer ein Massen-Storyboard erstellen und dem Kunden erlauben, hereinzukommen oder ihm etwas wie das Folgende per E-Mail zu senden:

Geben Sie hier die Bildbeschreibung einentnommen aus Speechboy

oder so auf einem Whiteboard:

Geben Sie hier die Bildbeschreibung ein

von UI-Schablonen

Wenn dies keine Option ist, würde ich vielleicht einen Hangout oder eine Art Videokonferenz vorschlagen, damit Sie das Wireframe erklären können. All dies hängt immer noch davon ab, in welcher Phase des Wireframe-Prozesses Sie sich befinden.

Ich kann mich nicht entscheiden, ob ich diese Whiteboard-Schablone liebe oder hasse. :)
Ja, sie haben andere Werkzeuge, aber wenn Sie drei 4 x 8 trocken abwischbare Tafeln nebeneinander haben, ist es praktisch
@DA01 Ich denke, ich werde das Konzept lieben, die Farbe hassen. Scheint eine ausgewogene Lösung zu sein.
Danke für das Feedback, alle! Manchmal mache ich Modelle oder platziere Dinge in der Marvel App, aber wenn ich es nicht bin, war ich einfach super neugierig, wie andere damit umgehen. Ich liebe Whiteboards, aber ich glaube nicht, dass ich eine Schablone brauche.

Wie geht es euch jetzt?

Indem Sie PDFs nicht zur Präsentation von Websites verwenden. Websites sind dynamische Dokumente, die am besten im Browser als funktionierende Website dargestellt werden. Wir können immer noch einige Wireframes zeigen (aber diese sollen niemals „sexy“ sein) und vielleicht einige visuelle Kompositionen, um ein Gefühl für das Gesamtbild zu vermitteln, aber wir vermeiden „ganzseitige Mockups“ so weit wie möglich für eine Reihe aus Gründen ... der geringste betrifft den Umgang mit reaktionsschnellen Layouts.

Wie präsentieren Sie Wireframes und Designs für lange One-Page-Websites?
AntwortenHierDatenschutz-Bestimmungen1y, 0v