Prototyping i Webbläsaren

0
32

Prototyping animationer och interaktion är avgörande för ett antal skäl: de kan göra ditt gränssnitt känner bedrägligt snabbt, de kan hjälpa till att fokusera användaren på en specifik uppgift, och de kan ge en bättre bild av det aktuella läget i din ansökan. Är data som laddas? Är nu något unclickable? Hur länge de måste vänta tills de kan utföra en åtgärd?

På Gusto, jag har jobbat på en hel del små interaktion detaljer och prototyper senare för just dessa skäl — tyvärr finns det inte så mycket som jag kan visa er alla i detalj ännu. Men, jag tror att processen för hur jag gör detta är långt mer intressant än vad jag faktiskt jobba på så det är vad jag kommer att dela här.

Det problemet har jag haft med prototyping animationer kommer ner till verktyg eftersom de i slutändan känna sig restriktiva till mig. När jag har experimenterat med dem i det förflutna, jag känner en hand är alltid bunden bakom ryggen. Det kan mycket väl vara så att jag inte använder dem på rätt sätt, men jag känner att ingen av dem som verkligen efterlikna webbläsare beteende helt rätt, och även om jag har varit fascinerad av att titta på verktyg som Framer, Marvel, Zeplin och i Princip få dragkraft, jag tror inte de är för mig. Åtminstone inte ännu i alla fall.

I min mening, det bästa sättet att prototypen en hel del interaktion är fortfarande med vanlig ol’ HTML, CSS och (gasp!) ett stänk av jQuery när jag behöver det.

Hur jag prototyping idag

Med mitt senaste projekt, jag bestämde mig för att investera lite tid i CodePen för att hjälpa vår design team snabbt prototyp saker. Här är vad jag har byggt:

Se Pennan Gusto Prototyp: Header av Robin Rendle (@robinrendle) på CodePen.

Inget egentligen, det är det. Det är bara en enkel prototyp som ser ut som vår app.

Det är en penna med alla HTML-koden för den app navigering — och det innehåller alla CSS också. På detta sätt, en designer på Gusto kan gaffel som penna och börja skriva HTML och CSS för att experimentera med en specifik bit av UI utan alla extra press av att behöva skriva produktion kod. Det är viktigt att notera att denna prototyp är inte till för att räkna ut UX, som verktyg som Figma och Skiss göra ett mycket bättre jobb med det. Prototyper som detta är främst användbart när räkna ut petiga UI interaktioner som tabeller, kalkylblad och menyerna — komponenter som kan bli komplicerat riktigt snabb.

För att göra den här prototypen, som jag helt enkelt kopieras och klistras in i alla HTML-och CSS från vår webb-app i en ny penna. (I framtiden, vi ska nog ha ett system där vi alltid prototyper med den senaste up-to-date-kod från vår app men, för nu tror jag det är en bra utgångspunkt.) Den här pennan innehåller alla menyer och navigering måste vi göra det ser ut som Gusto app. Vi har en separat penna för sidfoten som stänger av alla divs att vi öppnar upp i huvudet. Slutligen, vi har en penna som importerar de två andra pennor som så:

<!– RUBRIK –>
[[[http://codepen.io/robinrendle/pen/481a88853820067752e28cdb479c91f3]]]

<!– HTML-GÅR HÄR –>
<h1>App-Prototyp</h1>
<p>Du kan gaffel denna penna och skriva all HTML och CSS som du behöver för att prototypen interaktioner och utforska idéer just här i din webbläsare.</p>

<!– SIDFOT –>
[[[http://codepen.io/robinrendle/pen/0dcaa93954f06f4d03b7e23e8ea54cac]]]

Se Pennan Gusto Prototyp: Full av Robin Rendle (@robinrendle) på CodePen.

Vad är det för konstig syntax med i alla [[[ ]]]? Det är HTML-Inkluderar syntax för CodePen. Om vi sätter URL: en penna mellan de parentes, CodePen kommer att hämta koden från penna och placera den rakt in i denna nya penna. Det är det! Ganska söt, eller hur?

För att slå upp saker jag ville göra ett par anteckningar om vad jag har lärt mig med denna nya inställning.

Lektion 1: Prototyper bör vara super lätt att dela

Idealiskt, prototyper är lätt att dela med andra designers och ingenjörer, ovanligt snabbt för att få inställningar, och inte kräver tidigare utbildning eller kompetens — och Codepen är perfekt för det. Jag gillar den här inställningen för en massa skäl. För en, vi behöver inte lära designers CoffeeScript som vi har med Framer och vi behöver inte springa Reagera eller Vue workshops för att få dem igång med en komplex prototyping app.

Ja, folk behöver lära sig hur HTML-och CSS arbetar för att göra prototyper som detta men jag tror att lära sig det mest grundläggande av dessa två språk är avgörande för en designer som arbetar på nätet i alla fall.

Lektion 2: Dålig kod är a-okej

Här är en annan sak som jag nyligen lärt sig medan du gör prototyping: dålig kod är okej i detta skede. I själva verket borde vi kunna skriva så hemskt, oförlåtligt kod när prototyping i webbläsaren. Vi borde skriva den typ av CSS och HTML-kod som skulle hålla Harry Roberts upp på natten eftersom rengöra, underhålla koden blir i vägen för designprocessen när fokus bör ligga på att gå så snabbt som möjligt.

För att vara helt ärlig, jag bryr mig inte om front-end bästa praxis när jag gör dessa prototyper — jag tycker inte om att BEM, semantisk HTML eller ens prestanda. Åh, och jag verkligen inte bryr sig om de mest kompetenta sätt att göra en Reagera thingamijig.

Så länge vi dike alla som prototyp koden och börja om från scratch senare, och så länge som det steg för att bryta mönstret i komponenter och se till att de som lego bitar som är lätt att underhålla, är väl dokumenterade, och mycket hög prestanda i vår produktion, miljö, då tror jag att du skriver dåligt bör inte endast vara tillåtet, men uppmuntras aktivt.

Detta leder till mitt sista takeaway.

Lektion 3: Designers och utvecklare bör alltid översätta deras kod

Jag tror att första gången en designer och/eller front-end-utvecklare skriver kod, det ska aldrig vara i en produktionsmiljö. Att ha frihet och frihet att gå crazy med koden på en säker miljö fokuserar din uppmärksamhet på design och gör det förenligt med en webbläsare begränsningar. Efter detta kan du tänka på grooming-kod från ett hett, ångande hög av sopor i vackra, pipig-ren, produktionsfärdiga poesi. Att översätta den statiska prototyper till en interaktiv prototyp är det första steget, men det är viktigt att ha ett nästa steg för att använda din kod normer.

Har din app använder BEM? Hur ska du abstrakt var och en av dessa komponenter i separata filer? Vad vill du kalla alla dessa nya komponenter som du införa i design system?

Jag tror att alla dessa frågor är lättare att svara på när du har den interaktiva prototypen. Och jag skulle starkt rekommendera att designers och front-end ingenjörer både experimentera och göra lite verktyg som detta. Det kan kännas lite konstigt i början, men jag lovar att det kommer att producera mycket bättre arbete i det långa loppet.