Prototyper för webben med Framer
Framer är ett riktigt kraftfullt verktyg som kan prototypa allt du kan tänka på men om du tittar på Framer's Gallery så märker du snabbt något:
Av deras 54 exempel är 48 av dem apps, 4 för Apple Watch, 1 för iPad och 1 för Apple TV. Är Framer även avsedd för "traditionell" webbdesign?
Absolut.
Vid IBM Design är de flesta av mina mönster gjorda för företagets stationära webbapplikationer. De flesta designers jag jobbar med Skiss (inklusive mig). Dessa Sketch-filer prototyperas sedan med hjälp av ett verktyg InVision eller återskapas och prototyper i kod. Som frontenutvecklare på ett designteam har jag en unik position där jag både designar och kodar prototyper.
Efter att ha läst Grunderna i Framer bestämde jag mig för att lägga till det i mitt arbetsflöde och det har verkligen förbättrat min designprocess. Den enda kraftfullaste delen är att kunna importera en statisk Sketch-fil till Framer och göra den till en realistisk, interaktiv prototyp på relativt kort tid.
Med detta behöver jag inte spendera värdefull tid i början av processen som återskapar mönster i kod. Jag kan få idéer framför intressenter och användare mycket snabbare. Jag kan spara kodning för senare när projektet stärks mer.
Efter att ha använt Framer i några månader är det några saker jag har lärt mig:
Planera och tillämpa dina prototyper
Innan jag börjar ett projekt bestämmer jag några saker:
Vad försöker jag åstadkomma?
Huruvida prototypen är för användartestning eller att få en idé som konceptualiseras, vad är minsta mängd arbete som behövs för att få min idé över eller för att få insikt från testning? Jag är inte bara lat;), detta hjälper till att bestämma nödvändiga interaktioner, animationer och skärmar som behövs.
Ju mer tid du spenderar på din design desto mer blir du knuten till. Ju mer fäst, ju mindre sannolikt är du att göra nödvändiga förändringar.
Låt oss använda prototypen ovan som ett exempel.
Jag arbetade på ett nytt projekt och jag ville undersöka vilken kortbaserad layout med "shuffling" animationer mellan staterna skulle se ut. Jag skisserade den grundläggande idén jag ville göra och använde det som min utgångspunkt.
Om du ta en titt Vid den färdiga prototypen är endast det första kortet klickbart i varje steg. Det finns inget sätt att gå tillbaka, ingen svävarstater, innehållet på den sista skärmen är inte komplett, och det är inte så gott som pixel perfekt. Ingen av dem var nödvändiga för att få min idé över så jag spenderade inte tid inklusive dem. Framer kan göra nästan vad som helst, men det betyder inte att du borde försöka göra allt i din prototyp.
Skapa UI-flöden med Andreas fantastiska ViewController-modul
Du kan använda ViewController Sketch plugin för att skapa UI-flöden direkt i Sketch. Snabbt ändra dina mönster till klickbara prototyper utan att behöva skriva kod.
Detta är bra för att presentera ditt arbete för intressenter och är verkligen ganska enkelt att göra. Istället för att gå igenom en Sketch-fil med ett dussin tavlor eller en .pdf, kan du presentera en interaktiv prototyp eller dela din hostade Framer-projektadress.
Beroende på vad jag försöker åstadkomma kan jag äntligen skriva lite kod för saker som svävareffekter, animationer och textinmatningar för en extra touch av realism och interaktivitet. Återigen, som designer, bestämma vad som är nödvändigt för att få din idé över och genomföra på lämpligt sätt.
Checka ut AndreasSkapa UI-flöden med Sketch and Framer-artikeln för att lära sig mer om plugin.
Microinteractions
Jag tror att det finns några orsaker till att mobil prototyper är väldigt populära hos Framer, en av dem som är mikrointeraktioner verkar vara mycket vanligare på mobilen. Men det behöver inte vara så! Jag tycker att designers för webben kan vara bättre för att göra vårt arbete mer rörligt och Framer är riktigt bra på detta.
Det här är bara ett enkelt exempel på en snabb interaktion som jag gjort med en skissfil som en designer på mitt team redan hade gjort. Att undersöka interaktioner på detta sätt tar några minuter.
Visst, men varför inte bara kod?
Som frontend utvecklare kommer många av mina projekt till slut att sluta med en kodad prototyp. Jag använder sedan den här prototypen som underlag för att skriva frontändkoden i produkten, som arbetar med sidteknik. Så varför inte bara kod från början?
Som jag nämnde tidigare, hastighet. Jag kan snabbt krossa idéer som jag eller någon annan designer redan har gjort genom att importera dem från Sketch to Framer. Det är bra för den tidiga delen av designprocessen där du utforskar idéer och implementerar feedback snabbt. Jag kan flytta ganska snabbt i kod, men Framer tar det till nästa nivå.
En annan anledning är frihet. Det enkla faktumet att hela min kod skriven i Framer kommer att kastas bort är faktiskt bra. Det låter mig försöka saker jag inte annars skulle och att vara lite mer lös med min kod. Jag kan spendera 15 minuter utforska en idé och sedan skräp det utan ånger.
Några tips och tricks
Du (eller den designer du jobbar med) kommer troligen att behöva konfigurera Sketch-filer lite annorlunda.
- Gruppera dina lager. Lager som inte är i en grupp ignoreras
- Undvik att använda mellanslag i dina gruppnamn
- Dolda lager i Sketch importeras fortfarande, men deras synlighet kommer att vara inställd på falsk.
- Skapa enkla, unika namn för dina tecken
- En minus (-) i slutet av din tavla kommer att utesluta att den importeras till Framer
Plattra några lager i Sketch som kommer att förbli statiska. Detta kommer att förbättra belastningstiden för ditt projekt, vilket är särskilt bra när du skapar en kraftigare prototyp. Du kan göra detta genom att lägga till en asterisk (*) till slutet av skiktet i Sketch.
Det är värt att spendera lite tid med konstruktörerna på ditt team för att gå över hur du konfigurerar Sketch-filer så att de passar bäst i arbetsflödet och vad som fungerar bäst för laget.
När du importerar en Sketch-fil till Framer ser du något så här:
# Import file "design" sketch = Framer.Importer.load("imported/design@1x")Ersätt skiss med $, och du kan nu använda $ för att referera till dina Sketch-skikt, spara dig från att skriva ordskissen hundratals gånger:
$ = Framer.Importer.load("imported/design@1x")Använd "Normal markör" -bit för en vanlig muspekare:
document.body.style.cursor = "auto"and then scale them down, so they're extra crisp. Jag importerar mina mönster på @ 2x och sedan skala ner dem, så de är extra skarpa. Observera att detta inte verkar följa med ViewController-modulen som nämns ovan.
Framer.Device.contentScale = .5Sketch och Framer använder olika standardartiklar / enheter för webben. Skissen använder 1440 × 1024 medan Framer använder 1440 × 900. Jag väljer 1440 × 900. Tänk inte att du är begränsad till 900 pixlar för höjd men du kan enkelt skapa rullbara sidor i Framer.
[- Denna artikel var ursprungligen postat på Medium , publiceras med författarens tillåtelse -]