En interaktiv designprosess 14

Alle snakker om HTML5, og noen snakker til og med om CSS3. Men selv om HTML og CSS er viktige ingredienser i designprosessen min, er det bare et redskap – a means to an end. Samtidig tror jeg at grunnleggende kunnskap om webstandarder kan hjelpe designere å realisere idéer bedre.

For noen år siden lagde jeg følgende film for å illustrere poenget mitt:

(Er du med? Lær deg HTML og CSS, men det har ingen verdi i seg selv.)

Når jeg designer et nettsted jobber jeg etter en arbeidsflyt jeg har innarbeidet og finpusset på gjennom snart 15 år. Her er et lite innblikk i hverdagen min:

Idéen

Når jeg har analysert problemet og tenkt ut en idé tester jeg ut ulike løsninger i grove skisser (på papir, i Photoshop eller Illustrator). Denne prosessen gjentar jeg til jeg har et startpunkt på designet jeg vil jobbe videre med.

Designet

Deretter jobber jeg ut noen mer raffinerte skisser som gir et bilde av hvordan designet vil se ut på ulike deler av nettstedet. Jeg detaljerer disse nok til at jeg kan vise dem frem og få tilbakemeldinger, men ikke så mye at jeg låser muligheten for å jobbe videre med dem.

Når jeg er enig med kunden om en retning for designet jobber jeg videre med nettstedet i browseren. Jeg bygger det opp i HTML og CSS og modulariserer det med PHP (og av og til litt XML).

Jeg jobber meg gradvis gjennom de ulike delene av nettstedet, side for side, bit for bit.

Helheten og detaljene

Jeg ser på flyten mellom ulike sider og interaksjonen i enkeltelementer, typografi, farger og grafiske elementer. Sakte, men sikkert jobber jeg frem en prototype som viser helheten og alle de små detaljene i designet. (Jeg jobber fortsatt med skisser, men løsningen detaljerer jeg i prototypen.)

Underveis jobber jeg med scenarioer og reellt innhold for å teste interaksjonen og tøyeligheten i designet: Hvor kommer innholdet fra? Hva skjer hvis innholdet endrer seg? Hva skjer når jeg klikker på ditt og datt? Hva skjer når jeg er logget inn? (Og hva hvis alt går til helvete?)

Men hva faen er poenget?

Når jeg jobber med designet interaktivt får jeg en følelse av hvordan nettstedet blir, ikke bare hvordan det ser ut. Og fordi jeg tester alt underveis overlater jeg veldig få ting til tilfeldighetene.

Men først og fremst hjelper prototypen meg med å kommunisere med de ulike interessentene i prosjektet. Kunden forstår hva de får og utviklerne får en designdokumentasjon som er vanskelig å misforstå.

Hvordan jobber du?

14 kommentarer

  1. Veldig godt innlegg, med en god beskrivelse av en prosess mange nok vil sammenligne sin egen med.

    Jeg jobber sel v på et prosjekt nå hvor jeg designer rett i html/css. I motsetning til å begynne skissering i Photoshop ol. Jeg er litt over halvveis, dvs at jeg tar til på et slags andreutkast nå.
    Men jeg må si at selv om jeg var overbegeistret da jeg leste om dette http://24ways.org/2009/make-your-mockup-in-markup, så er jeg nok mer skeptisk i dag. For det er helt klart ulemper ved denne fremgangsmåten.

    For jeg savnet en mer kreativ førstedel av prosessen, fordi man i photoshop har litt lettere for å få ting til å se ut sånn som man vil med en gang. Og det trenger jeg når jeg skal være kreativ. CSS er perfekt når man vil finpusse på typografi, lenker, whitespace osv. Dessuten har jeg en anelse av at selv om jeg trodde jeg skulle spare tid, så har ikke det vært tilfelle. Men det kan godt være fordi det er første gang jeg prøver det, og ikke hadde gode nok rammerverk, maler og teknikker, kort sagt en god, innøvd prosess.

    Har du/dere noen erfaringer med dette kontra denne prosessen du beskriver her?

  2. Veldig bra innlegg, Inge!
    Et interaktivt design er i tillegg et effektivt kommunikasjonsverktøy internt i kundens organisasjon. Prosjektledere og -eiere står til stadighet i situasjoner hvor de skal kommunisere konsept og innhente innspill fra ulike deler av organisasjonen. Da er det utfordrende å kun ha flate skisser å forholde seg til – og man ender ofte opp i diskusjoner rundt farge- og fontbruk…. når strategi, interaksjon, innhold etc burde være viktigste diskusjonstema. Ikke minst gir en prototype muligheter for å få innspill fra brukerne tidlig i designprosessen (ikke det at vi ønsker å teste ting ihjel på et altfor tidlig tidspunkt…). Heier på metodikken din!

  3. @Mia: Det kan være vanskelig å finne ut nøyaktig når du skal bruke HTML/CSS og når det er mer hensiktmessig å bruke et annet verktøy for å få til det du vil. Enkelte ting kan du prototype direkte, men som regel må du jobbe med det konseptuelt og skisse ut en løsning før du bygger den.

    Selv starter jeg aldri før jeg vet noenlunde hvor jeg vil, og underveis veksler jeg mellom mange ulike verktøy. Jeg modulariserer alt sammen og jobber detaljert med ulike deler om gangen. De ulike delene kan være på forskjellige stadier underveis i prosjektet (enkle skisser, detaljerte skisser, html/css). Men jeg samler alt i prototypen til slutt. Det er først da jeg ser om det henger sammen.

  4. Takk for at du deler prosessen din, Inge :)

    Det kan være interessant å se hvor mye/lite prosessen endrer seg når løsningene følger prinsippene for «responsive design».

  5. @Martin: Slik jeg ser det er responsive design, i likhet med f.eks. modningen av webtypografi, en av mange retninger innen faget som gjør det enda mer nødvendig å designe i browseren.

  6. Ja, nettopp! :)

    Mine første erfaringer med responsive design har vært at tidlig skissing (grå bokser) i HTML og CSS, gir et viktig innblikk inn i hvordan de ulike bitene oppfører seg når layouten ikke er den samme for alle skjermstørrelser eller teknologier. Rekkefølge og flyt kan være vanskelig å ha 100% kontroll på utenfor browseren. Multitouch og tekststørrelser er områder det er spesielt vanskelig å forutse oppførsel på.

    Elliot Jay Stocks skapte bølger på nettet for et år siden da han skrev om webdesignere som ikke kan kode. Jeg kan anbefale å lese bloggposten. HTML- og CSS-budskapet er ikke nytt, men det er fint og nyttig at det skrives om prosessene og verktøyene vi bør bruke :)

  7. Mia, du kan jo skisse på papir før du starter med HTML/CSS.

    Min egen prosess, som produktdesigner, består røffly av:

    1 – Komme på en idé eller få en idé fra en annen.
    2 – Snakke rundt idéen for å samle litt mer info.
    3 – Skisse grovt på et whiteboard.
    4 – Tenke og snakke litt mer om idéen.
    5 – Grovskisse i Photoshop
    6 – Detaljeskisse i Photoshop
    7 – Printe ut skissen, ta en nøye kikk og notere forbedringer.
    8 – Iterere steg 6 og 7
    9 – Kode herligheten opp med HTML og SASS.
    10 – Git push.

  8. @Martin: Synes Elliot oppsummerer debatten veldig bra. Og markupskills er bare en liten del av designprosessen. Men jeg tror at grunnleggende kunnskap om webstandarder gjør det enklere å samarbeide på tvers av fagdisipliner, både på UX og tech-siden.

    @Tor: Ser bra ut! Selv bruker jeg PHP for å modularisere og sette fargekoder og andre variabler i stilsettene, men har planer om å se nærmere på SASS. Hva bruker du det mest til?

  9. Beauty, det er så deilig uten krøllparanteser og duplikate id og klasser. En indent er alt som skal til. Bruker endel mixins for gradients, box-shadow, og litt diverse. Er ingen power-user enda.

  10. Er enig med Martin og Inge her (og Stocks, som jeg har fått pepper for tidligere på Twitter :P), HTML/CSS er mer viktig enn noen gang! Andy Rutledge syns jeg nesten har sagt det best; http://andyrutledge.com/web-design-is-product-design.php

    @Tor; Ja det glemte jeg vel å si, men jeg starter alltid med penn & papir! :)

  11. Jeg er (kanskje ikke helt uventet) veldig enig med deg, Inge! :)

    I noen av de siste prosjektene jeg vært involvert i har jeg prøvd å effektivisere arbeidsprosessen ytterligere gjennom å få alle prosjektdeltakere til å arbeide med samme prototype (liker begrepet “proof of concept” bedre).

    Med et enkelt CMS (WordPress i mitt fall) får jeg ikke bare testet ut og systematisert overordnet design, men også satt i gang andre birdagsytere til å jobbe inn i den samme leveransen. Innholdsfolket jobber med struktur, begrepsbruk og annet tekstlig stoff. Front-end optimaliserer interaksjon og logikk. Systemutviklene følger nøye med for å gi et mer eksakt estimat på implementeringfasen. I noen tilfeller er ting så oversiktlig at de allerede kan starte å utvikle. Sist men ikke minst; prosjektleder og kund vet eksakt hva de får og risken for missforståelser er minimal.

    Som jeg ser det handler alt om mest mulig effektiv arbeidsprosess med overlappende roller, som gir oss alle mer tid til å jobbe ut et godt realiserbart konsept.

  12. Takk for veldig bra artikkel!

    Det største som har skjedd prototyping-prosessen min er SASS og HAML, servet med Middleman. Gjør det langt mindre tidkrevende å lage interaktive prototyper, i tillegg til at variabler og mixins i SASS gjør CSS-koding langt mer fleksibelt.

  13. Pingback: → Tverrfaglighet og typografi — iAllenkelhet
  14. Pingback: → Designprosess – en tid for alt — iAllenkelhet

Skriv en kommentar

  • *

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