Prototyping in de Browser

0
35

Prototyping animaties en interacties is van vitaal belang voor een aantal redenen: ze kunnen uw interface voelen bedrieglijk snel, ze kunnen helpen de focus van de gebruiker op een specifieke taak, en ze geven een beter gevoel van de huidige toestand van uw aanvraag. Gegevens worden geladen? Is nu iets unclickable? Hoe lang ze moeten wachten tot ze een actie uit kunnen voeren?

Bij Gusto, ik heb gewerkt aan een heleboel kleine interactie details en prototypes laatste tijd voor deze zeer redenen helaas is er niet veel dat ik kan aantonen dat u alles in detail nog. Maar, ik denk dat het proces van hoe ik doe, dit is veel interessanter dan wat ik eigenlijk aan het werk, dus dat is wat ik ben van plan om hier te delen.

Het probleem heb ik geconfronteerd met prototyping animaties gaat om de tools, omdat ze uiteindelijk het gevoel beperkend is voor mij. Wanneer heb ik geëxperimenteerd met hen in het verleden, voel ik me net een hand op mijn rug samengebonden. Het kan heel goed zijn dat ik die niet gebruik ze goed, maar ik heb het gevoel dat niemand van hen echt na te bootsen gedrag browser helemaal goed en, hoewel ik ben gefascineerd te kijken naar tools zoals Framer, Marvel, Zeplin en Principe krijgen tractie, ik denk niet dat ze er voor me. Tenminste, nog niet in ieder geval.

In mijn mening is de beste manier om een prototype van een veel interacties is nog steeds met volle ol’ HTML, CSS en (snik!) een strooi van jQuery wanneer ik het nodig heb.

Hoe ben ik prototyping vandaag

Met mijn laatste project heb ik besloten om te investeren een beetje tijd in CodePen te helpen ons design team snel prototype dingen. Hier is wat ik gebouwd:

Zie de Pen Gusto Prototype: Kop door Robin Rendle (@robinrendle) op CodePen.

Nee echt, dat is het. Het is gewoon een simpel prototype dat eruit ziet als onze app.

Het is een pen met alle de HTML-code voor de app navigatie — en bevat alle CSS, ook. Op deze manier, een designer bij Gusto kunt vork met pen en begin met het schrijven van HTML en CSS om te experimenteren met een specifiek stukje UI zonder de extra druk van het moeten schrijven van de productie code. Het is belangrijk op te merken dat dit prototype niet voor het uitzoeken UX, als instrumenten als Figma en Schetsen te doen een veel betere baan. Prototypes zoals deze zijn voornamelijk handig bij het uitzoeken kieskeurig UI interacties, zoals tabellen, spreadsheets en dropdowns — onderdelen die kan gecompliceerd echt snel.

Om dit prototype heb ik gewoon gekopieerd en geplakt alle van de HTML en CSS van onze web-app in een nieuwe pen. (In de toekomst, we moeten waarschijnlijk nog een systeem waar we altijd prototyping met de nieuwste up-to-date code van onze app, maar voor nu, ik denk dat dit een goed uitgangspunt.) Deze pen bevat al het menu en de navigatie-items die we nodig hebben om het eruit ziet als het Gusto-app. We hebben een apart hok voor de voettekst die sluit alle divs dat we in de header. Tot slot hebben we nog een pen die invoer van die twee andere pennen:

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

<!– HTML GAAT HIER –>
<h1>App Prototype</h1>
<p>U kunt deze vork pen en schrijven van de HTML-en CSS-u moet een prototype van interacties en ideeën hier in uw browser.</p>

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

Zie de Pen Gusto Prototype: Volledige door Robin Rendle (@robinrendle) op CodePen.

Wat is dat voor een rare syntaxis met alle [[[ ]]]? Dat is de HTML-Zijn-syntaxis voor CodePen. Als we de URL van een pen tussen die haakjes, CodePen haalt de code uit die pen en plaats het direct in deze nieuwe pen. Dat is het! Vrij zoet, toch?

Om af te ronden, ik wilde een paar opmerkingen over wat ik heb geleerd met deze nieuwe opzet.

Les 1: Prototypes moeten zijn super makkelijk te delen

Ideaal, prototypes zijn gemakkelijk te delen met andere ontwerpers en ingenieurs, uitzonderlijk snel om setup, en vereisen geen voorafgaande training of expertise — en Codepen is perfect voor dat. Ik vind dit een setup voor een heleboel redenen. Voor een, we hoeven niet te leren ontwerpers CoffeeScript erop dat we met Framer en we niet hoeven te lopen Reageren of Vue workshops om ze te krijgen up and running met een complexe prototyping app.

Ja, mensen moeten leren hoe HTML en CSS werkt prototypes als deze, maar ik denk dat het leren van de grondbeginselen van deze twee talen is van vitaal belang voor een ontwerper die werkt op het web toch.

Les 2: Slechte code is a-okay

Hier is nog een ding dat ik onlangs geleerd heb tijdens prototyping: slechte code is goed in deze fase. In feite, we moeten schrijven verschrikkelijk, onvergeeflijke code bij prototyping in de browser. We zouden moeten schrijven het sorteren van CSS en HTML-dat zou houden van Harry Roberts in de nacht omdat het schone, onderhoudbare code staat in de weg van het design proces, wanneer de focus moet gericht zijn op het itereren zo snel mogelijk.

Om heel eerlijk te zijn, heb ik niet de zorg over front-end best practices toen ik ben het maken van deze prototypes — ik denk niet dat over BEM, semantische HTML of zelfs de prestaties. Oh, en ik heb zeker niet de zorg over de meest deskundige manier om te bewijzen Reageren thingamijig.

Zolang we in de sloot al die prototype van de code en van nul te beginnen later, en zolang er stap te breken het ontwerp in onderdelen en ervoor zorgen dat die lego-stukken worden onderhouden, goed gedocumenteerd en zeer performante in onze productie-omgeving, dan denk ik dat het schrijven van slechte niet alleen moet worden toegestaan, maar wordt actief aangemoedigd.

Dit leidt tot mijn laatste afhaalmaaltijden.

Les 3: Ontwerpers en ontwikkelaars moeten altijd bij het vertalen van hun code

Ik denk dat de eerste keer dat een ontwerper en/of front-end ontwikkelaar schrijft code, het mag nooit in een productie-omgeving. Het hebben van de ruimte en de vrijheid om te gaan gek met de code in een veilige omgeving zich richt je aandacht op het ontwerp en waardoor hij compatibel is met een browser beperkingen. Na dit, je kunt denken aan het verzorgen van de code van een hete, dampende hoop afval in de mooie, kraakhelder, de productie-klaar poëzie. Het vertalen van de statische modellen in een interactieve prototype is de eerste stap, maar het is van vitaal belang om een volgende stap te dwingen uw code normen.

Heeft uw app gebruiken BEM? Hoe moet je abstract elk van deze onderdelen in aparte bestanden? Hoe noem je al deze nieuwe onderdelen die je introduceert in de ontwerp-systeem?

Ik denk dat al deze vragen zijn makkelijker te beantwoorden wanneer je dat eenmaal interactief prototype. En ik zou sterk aanbevelen dat ontwerpers en front-end ingenieurs zowel experiment is het maken van kleine hulpmiddelen zoals deze. Het is misschien het gevoel een beetje vreemd op het eerste, maar ik beloof dat ik het zal produceren veel beter werken op de lange termijn.