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

Ida Aalen

Flere artikler av Ida CV

13 kommentarer

  1. En veldig god artikkel Ida.

    Jeg har prøvd ulike wireframe-verktøy, men ser at papir og html er blant det raskeste.
    Smart poeng at HTML5 tvinger deg til å tenke semantisk.

    - christian

  2. Fin oppsummering, Ida.

  3. Denne boka er også bra!
    “Introducing HTML5″ (Voices That Matter) by Bruce Lawson (Author), Remy Sharp (Author)
    http://www.amazon.com/Introducing-HTML5-Voices-That-Matter/dp/0321687299/ref=tmm_pap_title_0?ie=UTF8&qid=1313582302&sr=1-10
    Finnes også i Kindle-utgave.

  4. Takk for innspillene!

    HAr sett på Introducing HTML5, og har vurdert å kjøpe den – men ser at den skal komme i en oppdatert versjon.. bør man vente til da?

    Har dere forresten noen innspill på hva som er dumt med å bruke HTML til prototyping?

  5. Lager du de grafiske elementene samtidig med HTML-koden? Jeg stusser litt over at prototypen ser ut som et ferdig nettsted.

  6. Men mange nettsider har jo ikke så mye grafikk.. Tidligere og senere versjoner av f eks http://quora.com så ganske likt ut:
    http://www.artypapers.com/ap.log/thread.php?346

    Med CSS3 og så kan man jo lage mange grafiske elementer, for eksempel knapper, men også enda fancy ting:
    http://www.letsgeek.com/design/6-awesome-pure-css3-graphics/

  7. I min Utopia bruker jeg gjerne store deler av designprosessen med penn og papir og deretter html/css. MEN, for en frilans-designer som meg, som setter vekk implementering/CMS arbeid blir dette som regel dårlig mottatt. Veldig mange utviklere vil gjerne gjøre hele jobben selv, og kun få oversendt skisser, mens jeg for min del vil gjerne designe mer i css.

    Hvordan jeg skal løse den floka har jeg ikke helt funnet ut enda, men jeg er sikker på at jeg kunne spart mye tid ved å kutte arbeidstid i Photoshop…

    Tips tas gjerne imot :)

  8. Hvorfor putte versjonsnummer bak HTML(5) og CSS(3) hele tiden? Er det litt for de er fine buzzwords om dagen :-)

    Min egen ferske erfaring (etter å ha forsøkt og gå rett på HTML5 bøker/docs) er at man må lære seg “vanlig” HTML/CSS først, for å kunne utrette noe som helst. Med unntak av det som er beskrevet i punkt 3 ift. strutkur, skulle jeg tro at det var lite fra de kommende standardene man skulle trenge til denne type arbeid.

    For øvrig anbefaler jeg alle å gå igjennom prosessen med å lære HTML, det er jo (nesten) alltid gøy å lære noe nytt.

    Ellers har jeg et tips med å bruke Lorempixum.com med grå bilder når man trenger noen dummy-bilder til et uferdig design. Url’en spesifiserer både pixelformat og om du vil ha farger, f.eks. http://lorempixum.com/g/160/99/ for 160×99 pixler i gråskala (g)
    http://lorempixum.com

  9. Pål:
    Tusen takk for tips om lorempixum!!

    CSS3 er jo morsomt som prototypingsverktøy fordi det er mye man kan gjøre uten å måte lage grafikk. F eks knapper og overganger. HTML5 gir jo også en del nye muligheter i input-felter (f eks tastatur på smarttelefon som tilpasser seg om input er telefonnummer, webdadresse eller lignede).
    Buzzords kanskje, men med god grunn! :)

    Helt enig i at det er gøy å lære HTML generelt også.. Hadde 7,5 studiepoeng i “IT Grunnkurs” fra NTNU som utgangspunkt når jeg begynte å bruke som prototypingsverktøy. Er ikke så mye som skal til :)

    Mia:
    Neimen ikke sikker.. men er jo veldig fint om man har en man pleier å jobbe sammen med, så man finner noe som funker for samarbeidet..

  10. Ida:

    Har du noen tanker om prototyping v.h.a. programmer som Axure? Jeg tenker at hvis man skal prototype i HTML5, så bør kildekoden være gjenbrukbar for en utvikler som lager det endelige resultatet. Men det igjen dytter oss webdesignere lenger over på frontend-utviklingssiden.

    Prototyping i programmer som Axure går helt klart raskere, hvis poenget er å lage interaktive prototyper som skal brukes til testing.

    Kanskje er det best å overlate utviklingsdelen til «de som kan håndverket»?

    Jeg bare reiser spørsmålet. Men er absolutt åpen for at prototyping i HTML5 er tingen ;)

  11. Hei Håkon!

    Mja, det må ikke nødvendigvis implementeres for å være nyttig. Det er også god dokumentasjon – for eksempel om man lager et skjema.

    Hvor stort behovet er for å lage noe interaktivt raskt er også veldig varierende – har hatt veldig god erfaring med å lage masse papirskisser og bare forklare sammenhengene muntlig. Går jo også an å teste på papirprototyper. Folk flest har en meget velutviklet forestillingsevne!

  12. Pingback: → Topp 10 på Iallenkelhet i 2011 — iAllenkelhet
  13. Her er min analyse av saken, med en rekke argumenter for og imot:

    http://magnemg.tumblr.com/post/71417102316/should-you-go-straight-from-paper-prototypes-to-html

    Innspill verdsettes.

Skriv en kommentar

  • *

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>