Prototyping für das Web mit Framer

Framer ist ein wirklich leistungsfähiges Werkzeug, das alles, was Ihnen einfällt, prototypieren kann. Wenn Sie sich jedoch die Framer's Gallery ansehen, werden Sie schnell etwas bemerken:

Von den 54 Beispielen sind 48 Apps, 4 für Apple Watch, 1 für iPad und 1 für Apple TV. Ist Framer überhaupt für "traditionelles" Web / Desktop-Design gedacht?

Absolut.

Bei IBM Design sind die meisten meiner Designs für Desktop-Webanwendungen für Unternehmen konzipiert. Die meisten Designer, mit denen ich arbeite, benutzen Skizzieren (inklusive mir). Diese Sketch-Dateien werden dann mithilfe eines Tools wie Prototyp erstellt InVision oder neu erstellt und in Code prototypisiert. Als Front-End-Entwickler eines Designteams habe ich eine einzigartige Position, in der ich Prototypen entwerfe und programmiere.

Nachdem ich die Grundlagen von Framer gelernt hatte, entschloss ich mich, sie meinem Workflow hinzuzufügen, was meinen Designprozess wirklich verbesserte. Der mächtigste Teil ist es, eine statische Sketch-Datei in Framer zu importieren und sie in relativ kurzer Zeit zu einem realistischen interaktiven Prototyp zu machen.

Damit muss ich am Anfang des Prozesses keine wertvolle Zeit damit verbringen, Designs im Code neu zu gestalten. Ich kann Ideen viel schneller vor Stakeholdern und Benutzern einholen. Ich kann Codierung für später speichern, wenn das Projekt mehr verfestigt ist.

Nachdem ich Framer ein paar Monate benutzt habe, habe ich einige Dinge gelernt:

Planen und erweitern Sie Ihre Prototypen

Bevor ich ein Projekt starte, entscheide ich mich für ein paar Dinge:

Was versuche ich zu erreichen?

Ob der Prototyp für das Testen von Benutzern oder für die Konzeption einer Idee gedacht ist, welches Minimum an Arbeit ist erforderlich , um meine Idee umzusetzen oder Erkenntnisse aus Tests zu gewinnen? Ich bin nicht nur faul;), dies hilft, die notwendigen Interaktionen, Animationen und Bildschirme zu bestimmen, die benötigt werden.

Lassen Sie uns den obigen Prototyp als Beispiel verwenden.

Ich arbeitete an einem neuen Projekt und wollte herausfinden, wie ein kartenbasiertes Layout mit "Shuffling" -Animationen aussehen würde. Ich skizzierte die Grundidee, die ich machen wollte und benutzte das als Ausgangspunkt.

Wenn du Schau mal Am fertigen Prototyp kann in jedem Schritt nur die erste Karte angeklickt werden. Es gibt keine Möglichkeit, zurückzugehen, keine Hover-Zustände, der Inhalt auf dem letzten Bildschirm ist nicht vollständig und es ist nicht annähernd pixelgenau. Keiner von diesen war notwendig, um meine Idee zu vermitteln, also habe ich keine Zeit mit ihnen verbracht. Framer kann fast alles, aber das bedeutet nicht, dass Sie versuchen sollten, alles in Ihrem Prototyp zu machen.

Erstellen Sie UI-Flows mit dem fantastischen ViewController-Modul von Andreas

Du kannst den ... benutzen ViewController Sketch-Plugin zum Erstellen von UI-Flows direkt in Sketch. Verwandeln Sie Ihre Designs schnell in anklickbare Prototypen, ohne Code schreiben zu müssen.

Das ist großartig, um Ihre Arbeit Stakeholdern zu präsentieren, und ist wirklich sehr einfach zu machen. Anstatt eine Sketch-Datei mit einem Dutzend Zeichenflächen oder einem PDF-Dokument durchzugehen, können Sie einen interaktiven Prototyp präsentieren oder die URL Ihres gehosteten Framer-Projekts freigeben.

Je nachdem, was ich zu erreichen versuche, schreibe ich Code für Dinge wie Hover-Effekte, Animationen und Texteingaben, um einen zusätzlichen Touch von Realismus und Interaktivität zu erhalten. Erneut als Designer entscheiden Sie, was notwendig ist, um Ihre Idee umzusetzen und entsprechend umzusetzen.

Auschecken Andreas 'Erstellen Sie UI-Flows mit dem Artikel Sketch and Framer um mehr über das Plugin zu erfahren.

Mikrointeraktionen

Ich denke, es gibt ein paar Gründe dafür, dass das mobile Prototyping bei Framer sehr beliebt ist. Eine davon ist, dass Mikrointeraktionen auf Mobilgeräten viel häufiger vorkommen. Aber so muss es nicht sein! Ich denke, als Designer für das Internet kann es besser sein, unsere Arbeit mehr Bewegung zu haben und Framer ist wirklich gut darin.

Dies ist nur ein einfaches Beispiel für eine schnelle Interaktion, die ich mit einer Sketch-Datei gemacht habe, die ein Designer in meinem Team bereits erstellt hat. Solche Interaktionen brauchen nur wenige Minuten.

Klar, aber warum nicht einfach programmieren?

Als Front-End-Entwickler werden viele meiner Projekte schließlich mit einem codierten Prototyp enden. Ich benutze diesen Prototyp dann als Basis, um den Front-End-Code in das Produkt zu schreiben, und arbeite dabei nebenbei. Warum also nicht einfach von Anfang an programmieren?

Wie ich bereits erwähnt habe, Geschwindigkeit. Ich kann schnell Ideen ausarbeiten, die ich oder ein anderer Designer bereits gemacht habe, indem ich sie von Sketch in Framer importiere. Es ist großartig für den frühen Teil des Design-Prozesses, wo Sie Ideen erforschen und Feedback schnell implementieren. Ich kann mich ziemlich schnell im Code bewegen, aber Framer bringt es auf das nächste Level.

Ein weiterer Grund ist die Freiheit. Die Tatsache, dass mein gesamter in Framer geschriebener Code weggeworfen wird, ist wirklich großartig. Es erlaubt mir, Dinge zu versuchen, die ich sonst nicht tun würde, und mit meinem Code etwas lockerer zu sein. Ich kann 15 Minuten damit verbringen, eine Idee zu erkunden und sie dann ohne Gewissensbisse zu zerstören.

Einige Tipps und Tricks

Sie (oder der Designer, mit dem Sie arbeiten) müssen Sketch-Dateien wahrscheinlich etwas anders einrichten.

• Gruppiere deine Ebenen. Layer, die nicht zu einer Gruppe gehören, werden ignoriert
• Vermeiden Sie Leerzeichen in Ihren Gruppennamen
• Versteckte Ebenen in Sketch werden weiterhin importiert, aber ihre Sichtbarkeit wird auf "false" gesetzt.
• Erstellen Sie einfache, eindeutige Namen für Ihre Zeichenflächen
• Ein Minuszeichen (-) am Ende der Zeichenfläche verhindert, dass es in Framer importiert wird

Glätten Sie alle Ebenen in Sketch, die statisch bleiben. Dies wird die Ladezeit Ihres Projekts verbessern, was besonders bei der Erstellung eines stärkeren Prototyps von Vorteil ist. Sie können dies tun, indem Sie ein Sternchen (*) am Ende der Ebene in Sketch hinzufügen.

Es lohnt sich, einige Zeit mit den Designern in Ihrem Team zu verbringen, um zu besprechen, wie Sie Sketch-Dateien einrichten, die am besten zum Arbeitsablauf passen und am besten für das Team funktionieren.

Wenn Sie eine Sketch-Datei in Framer importieren, sehen Sie etwa Folgendes:

# Import file "design" sketch = Framer.Importer.load("imported/design@1x")

Ersetzen Sie die Skizze durch $, und Sie können jetzt $ verwenden, um auf Ihre Skizzenebenen zu verweisen und sich dabei zu sparen, die Wortskizze Hunderte von Malen zu schreiben:

$ = Framer.Importer.load("imported/design@1x")

Verwenden Sie das "Normal Cursor" -Snippet für einen normalen Mauszeiger:

document.body.style.cursor = "auto"

and then scale them down, so they're extra crisp. Ich importiere meine Designs bei @ 2x und skaliere sie dann, damit sie besonders knackig sind. Beachten Sie, dass dies nicht mit dem oben genannten ViewController-Modul übereinstimmt.

Framer.Device.contentScale = .5

Sketch und Framer verwenden verschiedene standardmäßige Zeichenflächen / Geräte für das Web. Sketch verwendet 1440 × 1024 während Framer 1440 × 900 verwendet. Ich entscheide mich für 1440 × 900. Glauben Sie nicht, dass Sie auf 900 Pixel Höhe beschränkt sind, Sie können scrollbare Seiten in Framer leicht erstellen.

[- Dieser Artikel war ursprünglich Auf Medium gepostet , mit der Erlaubnis des Autors neu veröffentlicht -]

• ← Wie großartig Onboarding zu Great UX führt
• Ich bin kein UX-Designer, und Sie auch nicht →