En nybegynners vei fra papirskisser til HTML5 13

Må designere kunne kode for å gjøre en skikkelig jobb? I dag skal vi ikke ta den debatten (for det har vi allerede gjort). Men om du lurer på om kanskje du skal prøve deg på koding som prototypingsverktøy, så gir vi deg her et nybegynnerperspektiv.

Hvorfor prototype i HTML5 og CSS3?

Hvorfor kode i HTML 4.01 eller XHTML når vi vet at HTML5 blir neste standard? HTML5 er både enklere og mer logisk oppbygd enn sine forfedre. HTML5 er ikke anbefalt standard fra W3C enda, men alle moderne nettlesere forstår HTML5. Det finnes flere triks for å få ting til å funke i gamle nettlesere og.

HTML5 krever at noen tenker over innholdet

Som interaksjonsdesigner er noe av det mest givende med å kode i HTML5 at du blir tvunget til å tenke over hvorfor du egentlig har valgt å legge et gitt element på siden.

Der man tidligere ville benyttet div i kombinasjon med en klasse eller id, så har HTML5 tags med semantisk betydning, eksempelvis article, aside og nav. I tillegg har en rekke tags blitt redefinert, for eksempel small.

Det er enklere enn du tror

Om du elsker å sortere krydderhyllen, og syntes at formlene i matteboka var mer oppklarende enn eksemplene, så tar det ikke så lang tid å sette seg inn i HTML5. En grei start er W3Schools gjennomgang av HTML5, eller boka HTML5 for Webdesigners om du kan bittelitt HTML fra før.

Fra papir til prototype

1. Begynn på papir

Særlig hvis du ikke er så veldig dreven i HTML, så bør du begynne å tenke ut konseptet på papir. Hvis ikke risikerer du at du lager et nettsted som er begrenset av hva du kan!

Todd Zaki Warfels workshop om prototyping med HTML5 på UXLondon fortalte han også at selv de beste front-end-utviklerne ble tvunget til å begynne med papirskisser, fordi det er mindre forpliktende. Både photoshop og koding krever en del arbeid, og det kan være vanskeligere å kaste alt du har gjort og begynne på nytt om du har lagt mye arbeid inn i noe.

2. Forventningsstyring

Om man blir enig om å levere en prototype i HTML, så må du få avklart om dette er fordi prototypen først og fremst skal brukes til å kommunisere med utviklerne som skal implementere løsningen, eller om det er tenkt at selve koden fra prototypen skal brukes på nettstedet.

3. Strukturen først

Zaki Warfel anbefaler at man begynner med strukturen først, og ikke gjør noe CSS i begynnelsen.

Elementer som article og section kan brukes om hverandre, og om man er flere som jobber på en prototype er det derfor helt avgjørende at teamet blir enige om hvilke elementer som skal brukes hvor i prototypen. Om du er usikker, så ta en titt på HTML5 Doctor som har gode svar på hvordan de fleste elementer bør brukes.

4. Bruk gråskala

Kanskje skal du vise frem prototypen for en prosjektleder eller et styre. En prototype i HTML og CSS kan se farlig ferdig ut. Zaki Warfel fortalte at de alltid lagde de første versjonene i gråskala, slik at det er enklere å formidle at dette ikke er et ferdig nettsted, selv om det ser ut som en “ekte” nettside.

Da slipper man å kaste bort tid på diskusjoner om hvorfor knappene ikke er mer sexy, eller hvorfor man har brukt den lilla-fargen. Det blir lettere å holde fokuset på funksjonaliteten og interaksjonen.

5. En prototype er til for å deles og testes

Blant de viktigste argumentene for å prototype i HTML og CSS er å bedre kommunikasjonen med utviklerne, sikre at det er gjennomførbart og ikke minst få prøvd ut detaljer i interaksjonen.

Da er det liten vits å sitte for seg selv i ukesvis bare for å oppdage at du må gjøre alt på nytt igjen! Sett opp en server hvor de andre i prosjektet kan få tilgang til koden, og dytt ut den nyeste versjonen ukentlig eller daglig, litt avhengig av hvor intenst man jobber.

Ikke minst kan du gjøre små brukertester på detaljer på nettstedet lenge før lansering.

Velg et verktøy som passer for deg!

Jeg visste allerede at jeg trives bedre foran en teksteditor enn Photoshop. Etter å ha deltatt på Todd Zaki Warfels workshop om prototyping med HTML5 på UXLondon, hoppet jeg på muligheten for å prototype i HTML5 og CSS3.

Det viktigste er uansett at man bruker et verktøy man er komfortabel med. Hva synes du er det kjipeste og det gjeveste ved å prototype i HTML og CSS?

Html5 ux london from Todd Zaki Warfel