Prototyping voor het web met Framer

Framer is een echt krachtige tool die alles kan prototypen wat je maar kunt bedenken, maar als je Framer's Gallery bekijkt, merk je snel iets:

Van de 54 voorbeelden zijn er 48 apps, 4 voor Apple Watch, 1 voor iPad en 1 voor Apple TV. Is Framer zelfs bedoeld voor 'traditioneel' web- / desktopontwerp?

Absoluut.

Bij IBM Design zijn de meeste van mijn ontwerpen gemaakt voor zakelijke desktop-webapplicaties. De meeste ontwerpers met wie ik werk gebruiken Schetsen (inclusief mezelf). Deze Sketch-bestanden worden vervolgens prototypen met behulp van een tool zoals InVision of opnieuw gemaakt en prototyped in code. Als front-end developer bij een ontwerpteam heb ik een unieke positie waar ik zowel prototypen ontwerp en codeer.

Nadat ik de basis van Framer had geleerd, besloot ik om het aan mijn workflow toe te voegen en het heeft mijn ontwerpproces echt verbeterd. Het meest krachtige onderdeel is dat je een statisch schetsbestand in Framer kunt importeren en het in een relatief korte tijd in een realistisch, interactief prototype kunt veranderen.

Hiermee hoef ik geen kostbare tijd te spenderen aan het begin van het proces om ontwerpen in code opnieuw te creëren. Ik kan veel sneller ideeën krijgen voor belanghebbenden en gebruikers. Ik kan codering opslaan voor later wanneer het project steviger is.

Na het gebruik van Framer voor een paar maanden, zijn hier enkele dingen die ik heb geleerd:

Plan en bereik uw prototypes

Voordat ik een project start, beslis ik een paar dingen:

Wat probeer ik te bereiken?

Of het prototype nu voor gebruikerstests is of een idee geconceptualiseerd, wat is de minimale hoeveelheid werk die nodig is om mijn idee over te brengen of om inzicht te krijgen in testen? Ik ben niet alleen lui;), dit helpt bij het bepalen van de nodige interacties, animaties en schermen die nodig zijn.

Laten we het bovenstaande prototype gebruiken als een voorbeeld.

Ik was aan een nieuw project aan het werken en ik wilde onderzoeken hoe een op kaarten gebaseerde lay-out met 'schuifelende' animaties tussen staten eruit zou zien. Ik schetste het basisidee dat ik wilde maken en gebruikte dat als uitgangspunt.

als jij kijk eens bij het voltooide prototype is bij elke stap alleen de eerste kaart aanklikbaar. Er is geen manier om terug te gaan, geen zweeftoestanden, de inhoud in het laatste scherm is niet compleet en het is niet zo goed als pixel perfect. Geen van die dingen was nodig om mijn idee over te brengen, dus ik besteedde geen tijd aan hen. Framer kan zo ongeveer alles doen, maar dat betekent niet dat u alles in uw prototype moet proberen.

Maak UI-flows met de ontzagwekkende ViewController-module van Andreas

U kunt de ViewController Schetsinvoegtoepassing om UI-flows rechtstreeks in Sketch te maken. Verander uw ontwerpen snel in klikbare prototypen zonder code te hoeven schrijven.

Dit is geweldig voor het presenteren van uw werk aan belanghebbenden en is echt vrij eenvoudig om te doen. In plaats van door een Sketch-bestand met een tiental tekengebieden of een pdf te lopen, kunt u een interactief prototype presenteren of uw gehoste Framer-project-URL delen.

Afhankelijk van wat ik probeer te bereiken, kan ik uiteindelijk code schrijven voor zaken als zweefeffecten, animaties en tekstinvoer voor een extra vleugje realisme en interactiviteit. Nogmaals, als ontwerper, beslis wat nodig is om uw idee over te brengen en op de juiste manier te implementeren.

Uitchecken Andreas'Maak UI-flows met Sketch and Framer-artikel voor meer informatie over de plug-in.

Microinteractions

Ik denk dat er een paar redenen zijn waarom mobiele prototyping erg populair is bij Framer, een daarvan is dat microinteracties veel gebruikelijker lijken op mobiele apparaten. Maar zo hoeft het niet te zijn! Ik denk dat ontwerpers voor internet beter kunnen zijn in het maken van ons werk meer beweging en Framer is hier echt goed in.

Dit is slechts een eenvoudig voorbeeld van een snelle interactie die ik heb gemaakt met behulp van een schetsbestand dat een ontwerper in mijn team al had gemaakt. Het onderzoeken van dergelijke interacties duurt slechts enkele minuten.

Natuurlijk, maar waarom niet alleen code?

Als front-end developer zullen veel van mijn projecten uiteindelijk eindigen met een gecodeerd prototype. Vervolgens gebruik ik dit prototype als basis om de front-endcode in het product te schrijven, samen met side engineering. Dus waarom niet gewoon vanaf het begin coderen?

Zoals ik al eerder zei, snelheid. Ik kan snel ideeën uitwerken die ik of een andere ontwerper al heb gemaakt door ze vanuit Sketch in Framer te importeren. Het is geweldig voor het eerste deel van het ontwerpproces, waarin u ideeën verkent en feedback snel implementeert. Ik kan vrij snel in code bewegen, maar Framer tilt het naar het volgende niveau.

Een andere reden is vrijheid. Het simpele feit dat al mijn code geschreven in Framer zal worden weggegooid, is eigenlijk best wel goed. Hiermee kan ik dingen uitproberen die ik anders niet zou doen en wat losser zijn met mijn code. Ik kan 15 minuten besteden aan het verkennen van een idee en het vervolgens zonder enig spijt in de vuilnisbak gooien.

Enkele tips & tricks

Jij (of de ontwerper waarmee je werkt) zal waarschijnlijk Sketch-bestanden een beetje anders moeten instellen.

• Groepeer je lagen. Lagen die geen deel uitmaken van een groep worden genegeerd
• Gebruik geen spaties in uw groepsnamen
• Verborgen lagen in Sketch worden nog steeds geïmporteerd, maar hun zichtbaarheid is ingesteld op false.
• Maak eenvoudige, unieke namen voor uw tekengebieden
• Een min (-) aan het einde van uw tekengebied zorgt ervoor dat deze niet in Framer wordt geïmporteerd

Maak lagen in Sketch plat die statisch blijven. Dit zal de laadtijd van uw project verbeteren, wat vooral handig is bij het maken van een heftiger prototype. U kunt dit doen door een asterisk (*) toe te voegen aan het einde van de laag in Sketch.

Het is de moeite waard om wat tijd door te brengen met de ontwerpers in uw team om te bespreken hoe u Sketch-bestanden kunt instellen die het best passen bij de workflow en wat het beste werkt voor het team.

Wanneer u een schetsbestand in Framer importeert, ziet u zoiets als dit:

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

Vervang schets door $, en je kunt nu $ gebruiken om naar je schetslagen te verwijzen, waardoor je honderden keren geen woordenschets schrijft:

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

Gebruik het fragment 'Normal Cursor' voor een normale muisaanwijzer:

document.body.style.cursor = "auto"

and then scale them down, so they're extra crisp. Ik importeer mijn ontwerpen op @ 2x en verlaag ze vervolgens, zodat ze extra knapperig zijn. Merk op dat dit niet lijkt overeen te komen met de hierboven genoemde ViewController-module.

Framer.Device.contentScale = .5

Sketch en Framer gebruiken verschillende standaardartboards / apparaten voor het web. Schets gebruikt 1440 × 1024 terwijl Framer 1440 × 900 gebruikt. Ik kies voor 1440 × 900. Denk niet dat je bent beperkt tot 900 pixels voor hoogte, je kunt gemakkelijk scrollable pagina's maken in Framer.

[- Dit artikel was oorspronkelijk gepost op Medium , opnieuw gepubliceerd met toestemming van de auteur -]

• ← Hoe goed onboarding tot geweldige UX leidt
• Ik ben geen UX-ontwerper en jij ook niet →