Teil 2/2: Die nützlichsten Framer-Funktionen in 5 Minuten

So bauen Sie mit Framer eine Website, die sich gut bedienen lässt und gut aussieht

Willkommen zurück in unserer Framer-Blogreihe. Im vorigen Teil haben wir gezeigt, wie Sie in Framer Websites und Prototypen entwerfen, teilen und veröffentlichen, ohne eine Zeile Code zu schreiben. Framer ist für ein breites Publikum gebaut: UI/UX-Designer, Product Manager und Entwickler arbeiten in derselben Datei. Wir sind Schritt für Schritt durch das Aufsetzen eines Projekts gegangen und haben gezeigt, wo Sie weiterlernen. Neugierig geworden? Lesen Sie ihn hier, und kommen Sie danach gleich zurück, denn hier geht es weiter.

Einleitung

Framer verändert die Art, wie Designer an Websites und mobilen Apps arbeiten. Es ist kein Zeichenprogramm, das ein Bild ausgibt, sondern der Ort, an dem eine Idee entsteht, ausprobiert und so lange nachgeschärft wird, bis sie sitzt. Ältere Entwurfssoftware denkt in stillstehenden Screens, Framer denkt in dem, was später im Browser passiert. Eine verschachtelte Oberfläche (UI) zeichnen oder eine Animation testen: Beides passiert in derselben Datei.

Der Unterschied liegt aber nicht im Zeichnen, er liegt in der Zusammenarbeit. Allein auf einer Insel zu entwerfen ist nicht mehr nötig: Ideen gehen herum, werden getestet und verbessert, während Sie zusehen. Wo Ihre Kollegin sitzt, spielt keine Rolle; ein Team in drei Städten arbeitet in derselben Datei. Feedback kommt schneller zurück, die nächste Fassung steht früher. Entwurf, Prototyp und Zusammenarbeit liegen in einer Umgebung, und das spart nicht nur Zeit, es macht auch das Ergebnis besser.

Framer kennenlernen

Wir beginnen mit den drei Funktionen, die Sie am häufigsten brauchen. Sie machen das Entwerfen schneller, die Website wächst leichter mit und das Nutzungserlebnis (UX) wird besser. Kommt Ihnen ein Begriff nicht bekannt vor? Im ersten Teil dieser Reihe erklären wir ihn.

Stacks

Mit Stacks setzen Sie Elemente unter- oder nebeneinander und legen den Abstand dazwischen fest. Framer richtet sie danach selbst aus und hält diese Abstände, auch wenn der Bildschirm schmaler wird. Sie müssen nicht bei jeder Breite alles neu verschieben. Vor allem bei kleinen Bausteinen, die überall auf der Website wiederkehren, spart das Stunden.

Responsive Websites: 

Besucher kommen mit dem Telefon, mit dem Tablet und mit einem 27-Zoll-Monitor, und genau darauf ist Framer gebaut. Ihr Entwurf passt sich der Breite an. Ändern Sie etwas, entscheiden Sie selbst, ob die Änderung auf allen Breakpoints landet oder nur auf dieser einen Auflösung. So stimmt die Website auf jedem Gerät, und das brauchen Sie, wenn der größte Teil des Verkehrs vom Handy kommt. Weiter unten in diesem Artikel gehen wir genauer darauf ein

Templates

Mit einem Template fangen Sie nicht bei einer leeren Fläche an. Framer hat eine Bibliothek mit Templates vom eigenen Team und aus der Community. Darin steckt alles, von einer einfachen Landing Page bis zum Aufbau einer kompletten Anwendung. Sie sind damit schneller fertig, und oft sehen Sie darin etwas, worauf Sie selbst nicht gekommen wären.

Responsive Design in Framer:

Wie versprochen gehen wir jetzt etwas tiefer auf Responsive Design ein. Es bestimmt zu einem großen Teil, wie Ihre Website erlebt wird, denn es entscheidet, was jemand auf dem Bildschirm sieht, den er gerade zur Hand hat.

Was Responsive Design bedeutet:

Bausteine oder Gruppen von Bausteinen, die Sie im ganzen Projekt wiederverwenden. An eine solche Komponente hängen Sie Eigenschaften und Interaktionen, und die gelten überall dort, wo Sie sie einsetzen.

Es beginnt bei Constraints. Das sind Regeln, die festlegen, wie ein Element mit dem Frame mitwächst oder mitwandert, in dem es sitzt, also mit dem Frame, der die anderen Frames enthält. Dazu kommen Breakpoints: Ab einer bestimmten Bildschirmbreite gelten andere Maße oder eine andere Aufteilung. Zusammen halten sie Ihren Entwurf auf jedem Gerät lesbar und schlüssig.

So gehen Sie vor

Fangen Sie bei den Constraints an. Sie halten jedes Element an seinem Platz und in seiner Größe im Verhältnis zum Rest, egal wie breit der Bildschirm ist. Nehmen Sie sich danach die Breakpoints vor, vom kleinsten Telefon bis zum größten Schreibtischmonitor. Entwerfen Sie für die Breiten, die wirklich zählen; dann stimmt Ihre Website auf Telefon, Tablet, Laptop und Desktop, ohne dass Sie sich für jedes Gerät etwas Eigenes ausdenken müssen.

Testen Sie danach auf echten Geräten, und zwar mehr als einmal. Die Vorschau in Framer zeigt, wie sich Ihr Entwurf bei verschiedenen Breiten verhält, aber ein Telefon in der Hand verrät Ihnen Dinge, die keine Simulation zeigt.

Die Grundlagen des Prototypings

Components: 

Components sind die Bausteine eines Designsystems: Sie bauen ein Element einmal und setzen es danach in jedem Projekt ein, ohne dass es irgendwo abweicht. Mit „Variants“ und „States“ geht es noch einen Schritt weiter.

Mit Variants bauen Sie mehrere Fassungen einer Komponente, jede für eine eigene Situation. Ändert sich etwas am Aussehen oder am Verhalten, regeln Sie das an einer Stelle statt in zehn einzelnen Kopien. Denken Sie an einen Button mit einer Variante für den normalen Zustand, einer für Hover und einer für gedrückt, jede mit eigenem Stil oder eigener Animation. 

States sind die Zustände, in denen eine Komponente sein kann, während jemand damit arbeitet. In Framer schalten Sie beim Entwerfen einfach zwischen ihnen um. Sie hängen an dem, was der Besucher tut: klicken, mit der Maus darüberfahren, ziehen. Genau das macht eine Oberfläche lebendig, statt sie als stilles Bild liegen zu lassen.

Animationen:

Animieren geht auch anderswo, aber dort müssen Sie sich meistens entscheiden: einfach zu bedienen oder viel selbst bestimmen. In Framer fällt diese Wahl weg. Sie bauen damit Übergänge zwischen States, die ruhig laufen und die Aufmerksamkeit halten. Mit der Timeline und Auto-Animate entsteht eine Animation bis ins Detail, und der Besucher merkt das: Die Website reagiert so, wie er es erwartet.

Zusammenarbeiten in Framer

Team Projects und Zusammenarbeit in Echtzeit

Mit Team Projects arbeiten mehrere Designer gleichzeitig in derselben Datei. Sie starten eines, indem Sie Leute in Ihren Workspace einladen: Klicken Sie oben rechts im Canvas auf „Invite“. Danach entwerfen alle mit, und Sie sehen jede Änderung, während sie entsteht.

Feedback einholen

Entwerfen läuft in Runden, und jede Runde beginnt mit einem Prototyp, der das Haus verlässt. In Framer teilen Sie Ihre Arbeit mit dem Team, mit dem Auftraggeber oder mit allen, die sonst mitlesen, und ihre Reaktion landet dort, wo Sie ohnehin arbeiten. Sie verarbeiten sie direkt, damit das Ergebnis weiter das tut, was das Projekt und der Nutzer brauchen.

Mit Kommentaren und Versionen arbeiten

Animieren geht auch anderswo, aber dort müssen Sie sich meistens entscheiden: einfach zu bedienen oder viel selbst bestimmen. In Framer fällt diese Wahl weg. Sie bauen damit Übergänge zwischen States, die ruhig laufen und die Aufmerksamkeit halten. Mit der Timeline und Auto-Animate entsteht eine Animation bis ins Detail, und der Besucher merkt das: Die Website reagiert so, wie er es erwartet.

Fazit

Kommentare und Versionsverwaltung halten diese Runden in Ordnung. Einen Kommentar hängen Sie an das Element, um das es geht, niemand muss also raten, welcher Button gemeint ist. Die Versionsverwaltung bewahrt Ihre Schritte auf: Sie springen zu einer früheren Fassung zurück, legen zwei Fassungen nebeneinander und nehmen eine Änderung zurück, wenn sie doch nicht funktioniert hat.

Zusammenarbeit verändert, wie ein Entwurfsprojekt abläuft. Die Arbeit liegt nicht mehr bei einer Person; sie geht von Hand zu Hand und wird unterwegs besser. Kommentare und Versionsverwaltung machen die Entscheidungen sichtbar, und sichtbare Entscheidungen erklären Sie den anderen leichter. Je tiefer Sie in Framer einsteigen, desto mehr wollen Sie selbst ausprobieren. Tun Sie das: Die Grenze dessen, was möglich ist, liegt weiter, als Sie denken, auf jedem Bildschirm und jedem Gerät.

Stößt Ihr Projekt an die Grenzen der Standardbausteine in Framer? Dann baut das Custom-Development-Team von Flatline das, was noch fehlt.

Schauen Sie auf die Website von Framer und fangen Sie mit der Website an, die Ihnen vorschwebt!