Deel 2/2: de handigste functies van Framer in 5 minuten

Zo bouw je met Framer een site die prettig werkt en er goed uitziet

Welkom terug bij onze blogreeks over Framer. In het vorige deel lieten we zien hoe je in Framer websites en prototypes ontwerpt, deelt en publiceert zonder een regel code te schrijven. Framer is gebouwd voor een breed gezelschap: UI/UX-designers, product managers en developers werken er in hetzelfde bestand. We liepen stap voor stap door het opzetten van een project en wezen je op plekken waar je verder leert. Benieuwd? Lees het hier, en kom daarna meteen terug, want hier gaat het verder.

Inleiding

Framer verandert de manier waarop designers aan websites en mobiele apps werken. Het is geen tekenprogramma dat een plaatje oplevert; het is de plek waar je een idee maakt, uitprobeert en bijschaaft tot het klopt. Oudere ontwerpsoftware denkt in stilstaande schermen, Framer denkt in wat er straks in de browser gebeurt. Een ingewikkelde interface (UI) uittekenen of een animatie uitproberen: het gebeurt allebei in hetzelfde bestand.

Het verschil zit alleen niet in het tekenwerk, het zit in het samenwerken. In je eentje op een eiland ontwerpen hoeft niet meer: ideeën gaan rond, worden getest en worden verbeterd terwijl je meekijkt. Waar je collega zit, maakt niet uit; een team in drie steden werkt in hetzelfde bestand. Feedback komt sneller binnen en een volgende versie staat er eerder. Ontwerp, prototype en samenwerking zitten in één omgeving, en dat scheelt niet alleen tijd, het levert ook een beter eindresultaat op.

Kennismaken met Framer

We beginnen met de drie functies die je het vaakst nodig hebt. Ze maken het ontwerpen sneller, je site groeit er makkelijker mee en de gebruikerservaring (UX) wordt er beter van. Komt een term je niet bekend voor? In het eerste deel van deze reeks leggen we hem uit.

Stacks

Met Stacks zet je elementen onder of naast elkaar en bepaal je de ruimte ertussen. Framer lijnt ze daarna zelf uit en houdt die afstanden vast, ook als het scherm smaller wordt. Je hoeft niet bij elke breedte alles opnieuw te verslepen. Vooral bij kleine onderdelen die overal op je site terugkomen, scheelt dat uren.

Responsive websites: 

Bezoekers komen binnen op een telefoon, op een tablet en op een scherm van 27 inch, en daar is Framer op gebouwd. Je ontwerp past zich aan de breedte aan. Pas je iets aan, dan kies je zelf of die wijziging op alle breakpoints landt of alleen op die ene resolutie. Zo blijft de site kloppen op elk apparaat, en dat is precies wat je nodig hebt nu het grootste deel van het verkeer van mobiel komt. Verderop in dit artikel gaan we er dieper op in

Templates

Met een template begin je niet bij een leeg canvas. Framer heeft een bibliotheek met templates van het team zelf en van de community. Er zit van alles tussen, van een eenvoudige landing page tot de opzet voor een complete applicatie. Je bent er sneller mee klaar, en vaak zie je er iets in waar je zelf niet op was gekomen.

Responsive design in Framer:

Zoals beloofd gaan we nu wat dieper op responsive design in. Het bepaalt voor een groot deel hoe je site wordt ervaren, want het beslist wat iemand te zien krijgt op het scherm dat hij toevallig bij zich heeft.

Wat responsive design inhoudt:

Onderdelen of groepen onderdelen die je door je hele project heen hergebruikt. Aan zo’n component hang je eigenschappen en interacties, en die gelden overal waar je hem plaatst.

Het begint bij constraints. Dat zijn regels die vastleggen hoe een element meegroeit of meeschuift met het frame waarin het zit, het frame dat de andere frames bevat. Daar komen breakpoints bij: vanaf een bepaalde schermbreedte gelden andere maten of een andere indeling. Samen houden ze je ontwerp op elk apparaat leesbaar en logisch.

Zo pak je het aan

Begin bij de constraints. Die houden elk element op zijn plek en op maat ten opzichte van de rest, hoe breed het scherm ook is. Pak daarna de breakpoints erbij, van de kleinste telefoon tot het grootste bureaublad. Ontwerp voor de breedtes die er echt toe doen; dan klopt je site op telefoon, tablet, laptop en desktop, en hoef je niet voor elk toestel apart iets te verzinnen.

Test daarna op echte toestellen, en doe dat vaker dan één keer. De preview in Framer laat zien hoe je ontwerp zich gedraagt bij verschillende breedtes, maar een telefoon in je hand vertelt je dingen die geen simulatie je laat merken.

De basis van prototypen

Components: 

Components zijn de bouwstenen van een designsysteem: je maakt een element één keer en gebruikt het daarna in elk project, zonder dat het ergens gaat afwijken. Met “variants” en “states” gaat het een stap verder.

Met variants maak je meerdere versies van één component, elk voor een eigen situatie. Verandert er iets aan het uiterlijk of het gedrag, dan regel je dat op één plek in plaats van in tien losse kopieën. Denk aan een knop met een variant voor de gewone stand, een voor hover en een voor ingedrukt, elk met een eigen stijl of animatie. 

States zijn de toestanden waarin een component kan verkeren terwijl iemand ermee bezig is. In Framer schakel je er tijdens het ontwerpen zo tussen. Ze hangen vast aan wat de bezoeker doet: klikken, er met de muis overheen gaan, slepen. Dat is wat een interface levend maakt in plaats van een plaatje dat stil blijft liggen.

Animaties:

Animeren kan op meer plekken, maar daar moet je meestal kiezen: makkelijk in gebruik óf veel zelf kunnen bepalen. In Framer hoeft die keuze niet. Je maakt er overgangen tussen states mee die soepel lopen en de aandacht vasthouden. Met de timeline en auto-animate bouw je een animatie tot in detail op, en dat merkt de bezoeker: de site reageert zoals hij verwacht.

Samenwerken in Framer

Team projects en samenwerken in real time

Met team projects werken meerdere designers tegelijk in hetzelfde bestand. Je start er een door mensen uit te nodigen voor je workspace: klik op “Invite”, rechtsboven in je canvas. Daarna ontwerpt iedereen mee en zie je elke aanpassing terwijl die wordt gemaakt.

Feedback ophalen

Ontwerpen gaat in rondes, en elke ronde begint met een prototype dat de deur uit gaat. In Framer deel je je werk met je team, met de opdrachtgever of met wie er verder meekijkt, en komt hun reactie terug op de plek waar je toch al zit te werken. Je verwerkt die meteen, zodat het eindresultaat blijft doen wat het project en de gebruiker nodig hebben.

Werken met comments en versies

Animeren kan op meer plekken, maar daar moet je meestal kiezen: makkelijk in gebruik óf veel zelf kunnen bepalen. In Framer hoeft die keuze niet. Je maakt er overgangen tussen states mee die soepel lopen en de aandacht vasthouden. Met de timeline en auto-animate bouw je een animatie tot in detail op, en dat merkt de bezoeker: de site reageert zoals hij verwacht.

Tot slot

Comments en versiebeheer houden die rondes op orde. Een comment plak je vast aan het element waar het over gaat, dus niemand hoeft te raden welke knop wordt bedoeld. Versiebeheer bewaart de stappen die je hebt gezet: je springt terug naar een eerdere versie, legt twee versies naast elkaar en draait een wijziging terug als die toch niet werkte.

Samenwerken verandert de manier waarop een ontwerpproject verloopt. Het werk ligt niet meer bij één persoon; het gaat van hand tot hand en wordt onderweg beter. Comments en versiebeheer maken de keuzes zichtbaar, en keuzes die zichtbaar zijn, leg je makkelijker uit aan de rest. Hoe verder je in Framer komt, hoe meer je zelf wilt uitproberen. Doe dat ook: de grens van wat kan ligt verder dan je denkt, op elk scherm en op elk apparaat.

Loopt je project tegen de grenzen van de standaardonderdelen in Framer aan? Dan bouwt het custom development-team van Flatline wat er nog mist.

Kijk op de website van Framer en begin aan de site die je voor je ziet!