Prototyping i Nettleseren

0
42

Prototyping animasjoner og samhandling er avgjørende for en rekke grunner: de kan lage din grensesnitt føler seg utrolig fort, de kan hjelpe fokus brukeren på en bestemt oppgave, og de kan gi en bedre forståelse av den nåværende tilstand av din søknad. Er dataene lastes inn? Er nå noe unclickable? Hvor lenge de må vente før de kan utføre en handling?

På Gusto, jeg har jobbet på en rekke små samhandling detaljer og prototyper i det siste for disse veldig grunner — dessverre er det ikke mye som jeg kan vise deg alt i detalj ennå. Men, jeg tror prosessen av hvordan jeg gjør dette er langt mer interessant enn hva jeg faktisk jobbe på, så det er hva jeg kommer til å dele her.

Problemet jeg har møtt med prototyping animasjoner kommer ned til verktøy fordi de til syvende og sist føler restriktive til meg. Når jeg har eksperimentert med dem i det siste, jeg føler meg som en hånd er alltid bundet bak ryggen min. Det kan meget vel være at jeg ikke bruke dem på riktig måte, men jeg føler at ingen av dem egentlig etterligne nettleser atferd ganske rett, og selv om jeg har vært fascinert av å se på verktøy som Framer, Marvel, Zeplin og Prinsippet få trekkraft, jeg tror ikke de er for meg. I det minste ikke ennå likevel.

I min mening, den beste måten å prototype en rekke vekselsvirkningene er fortsatt med vanlig ol’ HTML, CSS og (gisp!) et dryss av jQuery når jeg trenger det.

Hvordan jeg prototyping i dag

Med min siste prosjektet, bestemte jeg meg for å investere litt tid i CodePen for å hjelpe våre design team raskt prototype ting. Her er hva jeg bygget:

Se Penn Gusto Prototype: Topp av Robin Rendle (@robinrendle) på CodePen.

Ikke egentlig, det er det. Det er bare en enkel prototype som ser ut som vår app.

Det er en penn med alle HTML-koden for app-navigasjon — og det inneholder alle CSS, også. På denne måten vil en designer på Gusto kan gaffel at pennen og begynn å skrive HTML og CSS for å eksperimentere med en bestemt bit av UI, uten alle de ekstra press for å måtte skrive produksjon kode. Det er viktig å merke seg at denne prototypen er ikke for å finne ut UX, som verktøy som Figma og Skisse gjøre en mye bedre jobb med det. Prototyper som dette er mest nyttig når du å finne ut pirkete UI vekselsvirkningene som tabeller, regneark og dropdowns — komponenter som kan bli komplisert virkelig rask.

For å gjøre denne prototypen, jeg bare kopiert og limt inn alle HTML-og CSS fra vår web app i en ny penn. (I fremtiden, vi bør nok ha et system hvor vi er alltid prototyping med den nyeste up-to-date kode fra vår app, men for nå, jeg tror dette er et fint utgangspunkt.) Denne pennen inneholder alle meny og navigasjon elementer vi trenger for å gjøre det ser ut som den Gusto app. Vi har en egen penn for bunnteksten som stenger av alle divs at vi åpner opp i hodet. Til slutt, har vi en mer pen som importerer de to andre penner som så:

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

<!– HTML GÅR HER –>
<h1> – App Prototype</h1>
<p>Du kan gaffel denne pennen og skrive alle HTML-og CSS-du trenger å prototype vekselsvirkningene og utforske ideer her i nettleseren din.</p>

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

Se Penn Gusto Prototype: Full av Robin Rendle (@robinrendle) på CodePen.

Hva er det for en merkelig syntaks med alle [[[ ]]]? Det er HTML-Inkluderer syntaks for CodePen. Hvis vi setter URL av en penn i mellom disse brakettene, CodePen vil hente koden fra penn og plasser den rett inn i denne nye pennen. Det er det! Ganske søt, ikke sant?

For å bryte opp ting, jeg ønsket å gjøre et par notater om hva jeg har lært med dette nye oppsettet.

Leksjon 1: Prototyper bør være super enkelt å dele

Ideelt sett, prototyper er enkle å dele med andre designere og ingeniører, eksepsjonelt rask for å få oppsettet, og ikke krever forutgående opplæring eller kompetanse — og Codepen er perfekt for det. Jeg liker dette oppsettet for en haug av årsaker. For en, vi trenger ikke å lære designere CoffeeScript som vi har til å med Framer og vi trenger ikke å kjøre Reagere eller Vue workshops for å få dem opp og kjører med en kompleks prototyping app.

Ja, folk trenger å lære hvordan HTML og CSS fungerer for å lage prototyper som dette, men jeg tror lære helt grunnleggende for de to språk er viktig for en designer som jobber på nettet uansett.

Leksjon 2: Dårlig kode er a-ok

Her er en annen ting jeg har nylig lært mens du gjør prototyping: dårlig kode er greit på dette stadiet. Faktisk, vi bør være skriftlig forferdelig, utilgivelig koden når prototyping i nettleseren. Vi burde skrive den slags CSS og HTML som ville holde Harry Roberts opp om natten fordi rengjøre, vedlikeholde koden kommer i veien for designprosessen når fokuset skal være på iterating så raskt som mulig.

For å være helt ærlig, jeg bryr meg ikke om front-end beste praksis når jeg lager disse prototypene — jeg tror ikke om BEM, semantisk HTML eller ytelse. Oh, og jeg absolutt ikke bryr seg om de mest dyktige måte å gjengi en Reagerer thingamijig.

Så lenge vi droppe alle som prototype-koden og starte fra scratch senere, og så lenge det er trinn for å bryte design i komponenter og sikre at de lego brikkene er stabile, er godt dokumentert, og er svært effektivt i vårt produksjonsmiljø, så tror jeg at du skriver dårlig, bør ikke bare være tillatt, men aktivt oppmuntret.

Dette fører til mitt siste takeaway.

Leksjon 3: Designere og utviklere bør alltid oversette koden sin

Jeg regner med at første gang en designer og/eller front-end utvikler skriver koden, det skal aldri være i et produksjonsmiljø. Å ha frihet og frihet til å gå gale med koden i et trygt miljø fokuserer din oppmerksomhet på design og gjør det som er kompatible med et nettleseren begrensninger. Etter dette kan du tenke på om grooming koden fra en varm, dampende haug av søppel i nydelig, squeaky-clean, produksjon-klar poesi. Å oversette den statiske prototyper til en interaktiv prototype er det første trinnet, men det er viktig å ha et neste trinn for å håndheve koden standarder.

Gjør din app bruk BEM? Hvordan bør du abstrakte hver av disse komponentene i separate filer? Hva kaller du alle disse nye komponenter som du innføring i design system?

Jeg tror alle disse spørsmålene er lettere å svare når du har det interaktive prototyper. Og jeg vil sterkt anbefale at designere og front-end ingeniører likt eksperiment å gjøre lite verktøy som dette. Det kan føles litt merkelig i begynnelsen, men jeg lover at det vil gi mye bedre jobb i det lange løp.