Prototyping for nettet med Framer

Framer er et veldig kraftig verktøy som kan prototype alt du kan tenke på, men hvis du tar en titt på Framer's Gallery, vil du raskt legge merke til noe:

Av de 54 eksemplene er 48 av dem apps, 4 for Apple Watch, 1 for iPad og 1 for Apple TV. Er Framer selv ment for "tradisjonell" web / desktop design?

Absolutt.

På IBM Design er de fleste av designene mine laget for enterprise desktop webapplikasjoner. De fleste designere jeg jobber med bruk Skisse (inkludert meg selv). Disse Sketch-filene prototypes deretter ved hjelp av et verktøy som InVision eller gjenskapes og prototypes i kode. Som frontend utvikler på et designteam har jeg en unik posisjon der jeg både designer og kodes prototyper.

Etter å ha lært grunnlaget for Framer bestemte jeg meg for å legge det til i arbeidsflyten min, og det har virkelig forbedret designprosessen min. Den eneste kraftigste delen er å kunne importere en statisk Sketch-fil til Framer og gjøre den til en realistisk, interaktiv prototype på relativt kort tid.

Med dette trenger jeg ikke å bruke verdifull tid i begynnelsen av prosessen som gjenskaper design i kode. Jeg kan få ideer foran interessenter og brukere mye raskere. Jeg kan lagre koding for senere når prosjektet er mer stivnet.

Etter å ha brukt Framer i noen måneder, er det noen ting jeg har lært:

Planlegge og omfang dine prototyper

Før jeg starter et prosjekt, bestemmer jeg noen ting:

Hva prøver jeg å oppnå?

Hvorvidt prototypen er for brukertesting eller å få en ide som er konseptualisert, hva er minimumsarbeidet som trengs for å få ideen min over, eller for å få innsikt fra testing? Jeg er ikke bare lat;), dette bidrar til å bestemme nødvendige interaksjoner, animasjoner og skjermbilder som trengs.

Jo mer tid du bruker på design, desto mer blir du vedlagt. Jo mer vedlagt, jo mindre sannsynlig er du å gjøre de nødvendige endringene.

La oss bruke prototypen ovenfor som et eksempel.

Jeg jobbet på et nytt prosjekt, og jeg ønsket å undersøke hva et kortbasert layout med "shuffling" animasjoner i mellom stater ville se ut. Jeg skisserte grunnleggende ideen jeg ønsket å lage og brukte det som utgangspunkt.

Hvis du ta en titt På den ferdige prototypen er kun det første kortet klikkbart i hvert trinn. Det er ingen måte å gå tilbake, ingen hover-tilstander, innholdet i den siste skjermen er ikke fullført, og det er ikke nesten pixel perfekt. Ingen av dem var nødvendig for å få ideen min over, så jeg brukte ikke tid på å inkludere dem. Framer kan gjøre omtrent alt, men det betyr ikke at du bør prøve å gjøre alt i prototypen din.

Opprett UI-strømmer ved hjelp av Andreas fantastiske ViewController-modul

Du kan bruke ViewController Sketch plugin for å lage UI flyter rett i Sketch. Skru designene dine raskt til klikkbare prototyper uten å skrive kode.

Dette er flott for å presentere arbeidet ditt til interessenter og er egentlig ganske enkelt å gjøre. I stedet for å gå gjennom en Sketch-fil med et dusin artboards eller en .pdf, kan du presentere en interaktiv prototype eller dele din hostede Framer-prosjektadresse.

Avhengig av hva jeg prøver å oppnå, kan jeg ende opp med å skrive noen kode for ting som hovereffekter, animasjoner og tekstinnganger for en ekstra berøring av realisme og interaktivitet. Igjen, som designer, bestemmer hva som er nødvendig for å få ideen din på tvers og gjennomføre på riktig måte.

Sjekk ut Andreas Opprett brukergrensesnitt ved hjelp av Sketch and Framer-artikkelen for å lære mer om plugin.

Microinteractions

Jeg tror det er noen grunner til at mobil prototyping er veldig populær hos Framer, en av dem som er mikrointeraksjoner synes å være mye mer vanlig på mobilen. Men det må ikke være slik! Jeg tror at designere på nettet kan være bedre til å gjøre arbeidet vårt mer bevegelig, og Framer er veldig bra på dette.

Dette er bare et enkelt eksempel på en rask samhandling jeg laget med en Sketch-fil som en designer på teamet mitt allerede hadde laget. Å utforske interaksjoner som dette tar noen minutter.

Sikker, men hvorfor ikke bare kode?

Som en front-end-utvikler vil mange av prosjektene mine ende opp med en kodet prototype. Jeg bruker så denne prototypen som grunnlag for å skrive frontendekoden inn i produktet, og arbeider sammen med sideteknikk. Så hvorfor ikke bare kode fra starten?

Som jeg nevnte tidligere, hastighet. Jeg kan raskt finne ut ideer som enten jeg eller en annen designer allerede har gjort ved å importere dem fra Sketch into Framer. Det er flott for den tidlige delen av designprosessen hvor du utforsker ideer og implementerer tilbakemelding raskt. Jeg kan bevege meg ganske fort i kode, men Framer tar det til neste nivå.

En annen grunn er frihet. Det enkle faktum at all min kode skrevet i Framer vil bli kastet bort, er faktisk ganske bra. Det tillater meg å prøve ting jeg ellers ikke ville, og å være litt mer løs med koden min. Jeg kan tilbringe 15 minutter å utforske en ide og deretter søppel det uten noen anger.

Noen tips og triks

Du (eller designeren du jobber med) vil sannsynligvis måtte sette opp Sketch-filer litt annerledes.

Grupper lagene dine. Lag som ikke er i en gruppe, ignoreres
Unngå å bruke mellomrom i gruppens navn
Skjulte lag i Sketch importeres fortsatt, men synligheten blir satt til feil.
Lag enkle, unike navn på dine kunstbrett
En minus (-) på slutten av tavlen din vil utelukke at den blir importert til Framer

Plasser eventuelle lag i Skisse som forblir statiske. Dette vil forbedre belastningstiden til prosjektet ditt, noe som er spesielt godt når du lager en heftigere prototype. Du kan gjøre dette ved å legge til en stjerne (*) til slutten av laget i Skisse.

Det er verdt å tilbringe litt tid med designerne på teamet ditt for å gå over hvordan du konfigurerer Sketch-filer slik at de passer best i arbeidsflyten, og hva som fungerer best for laget.

Når du importerer en Sketch-fil til Framer, ser du noe slikt:

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

Erstatt skisse med $, og du kan nå bruke $ for å referere Sketch lagene dine, og redd deg selv fra å skrive ordskissen hundrevis av ganger:

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

Bruk "Normal markør" -bit for en vanlig musepeker:

document.body.style.cursor = "auto"

and then scale them down, so they're extra crisp. Jeg importerer designene mine på @ 2x og deretter skaler dem ned, så de er ekstra skarpe. Legg merke til at dette ikke ser ut til å komme overens med ViewController-modulen nevnt ovenfor.

Framer.Device.contentScale = .5

Sketch and Framer bruker forskjellige standardtavler / enheter til nettet. Skissen bruker 1440 × 1024 mens Framer bruker 1440 × 900. Jeg velger 1440 × 900. Ikke tenk at du er begrenset til 900 piksler for høyde, men du kan enkelt lage rullbare sider i Framer.

[- Denne artikkelen var opprinnelig postet på Medium , publisert med forfatterens tillatelse -]

framer prototyping prototyping for nettet prototyping fra skisse bruker framer