Klar, ferdig, design! 39

En designers hverdag:

Mål og brukerkrav for det nye nettstedet er klart definert. Innholdet er nesten på plass. Pulten din er full av papirskisser. Interaksjonsdesigneren har sittet på fanget ditt i noen dager allerede. Og nå er det endelig din tur: Du skal blåse liv i det nye nettstedet.

Men hvor i all verden begynner du?

  • Er ryggmargsrefleksen å åpne Photoshop og begynne på en detaljert design, kanskje av headeren eller en sentral modul?
  • Eller skal du åpne Coda og sette opp grid, plassere sentrale bilder og begynne å leke med typografi, alt i HTML og CSS?
  • Hva med å designe ALT ned til minste detalj i Photoshop, for så å implementere designen i en prototype?
  • Eller skal kanskje hele leveransen være Photoshop-filer?

Som du kanskje har skjønt, jobber jeg mye i prototyper og må derfor ofte legge hånden sist på sluttleveranser. Jeg stortrives i et vakkert sammensurium av design og kode – jeg liker kontrollen det gir meg. Det er innlysende at ikke alle er like komfortable med å jobbe med kode, men under følger et lite eksperiment som kan være interessant både for deg som utelukkende designer i Photoshop og for deg som gjør noe front-end.

Eksperiment: Supereffektiv designprosess

Dette eksperimentet skal avdekke hva som egentlig går raskest: Er det en designprosess utelukkende gjort i Photoshop, eller design direkte i browseren, i en HTML-prototype? Hva gir det raskeste sluttresultatet?

Forutsetninger for eksperimentet er vi som designere BÅDE er stødige i HTML/CSS og kjenner designverktøy som Photoshop og Illustrator godt.

Vi tar på oss hanskene og går inn i test-laben. Før vi setter i gang, må vi finne fram følgende designelementer:

Vi starter stoppeklokka og setter i gang med eksperiment nr 1:

Oppsett av en responsiv design

[CodePen height=660 show=preview href=qFKxj user=byaxel ]

Knepen seier til Photoshop. Banebrytende forskning viser at det går raskere å sette opp en komplett design i Photoshop enn å designe et nettsted rett i browseren. Ting som tar mye tid å sette opp i en HTML-prototype, som f. eks. grid, kan settes opp forholdsvis kjapt i Photoshop. Å sette opp overordnet typografi går omtrent like raskt i en HTML-prototype som i Photoshop. Men i Photoshop kan man enkelt eksperimentere med former og farger, og det er mye enklere å posisjonere og prøve ut ulike bilder og ikoner. Nok skryt til Photoshop – la oss presentere det vi har gjort for kunden.

Kunden står på tå hev og venter inne på møterommet, og kan nesten ikke vente med å se den nye designen. Blir det slakt, eller hopper kunden i taket av fornøyelse?

Vi presenterer den nye designen for kunden.
Vi presenterer den nye designen for kunden.

Kunden liker det han ser, men kunne tenke seg å gjøre noen endringer. I samråd med kunden blir vi derfor enige om å gjøre noen forandringer i designen. Forandringene innebærer at vi må gjøre små justeringer på ALLE designelementene, deriblant grid, typografi, former og farger, bilder og ikoner.

Vil Photoshop stikke av med seieren i denne runden også? Hva går raskest – endringer i Photoshop eller endringer gjort direkte i HTML-prototypen? Vi forlater møterommet og går inn i test-laben for å sette i gang med eksperiment nr 2:

Endringer i en responsiv design

[CodePen height=660 show=preview href=CBLEj user=byaxel ]

Ai, ai, ai… Overlegen seier til HTML-prototypen. Å endre store deler av en design i Photoshop er en tidkrevende og frustrerende prosess. Tilsvarende endringer i en prototype er gjort på null komma niks. Nesten, i hvert fall.

Raskere og bedre designprosess

Sitter man i Photoshop og forsøker å designe for ulike skjermstørrelser, gjerne 3-4 ulike formater, må man opprette nye elementer for hvert enkelt format og forsøke å tilpasse disse på best mulig måte. Før man vet ordet av det har man et utall dokumenter, enda flere layers og en fantasillion piksler å forholde seg til. Og da er det “just great” når kunden sier: “Kan du ikke bare endre litt på de fargene her, justere disse fontstørrelsene og gjøre denne kolonnen litt bredere?” Joda, tilbake om 2 timer.

Til sammenligning er det en drøm å gjøre tilsvarende endringer og justeringer i en HTML-prototype. Justeringene kan noen ganger gjøres så raskt at jeg i enkelte kundemøter har gjort justeringer LIVE – til kundens store overraskelse og fornøyelse.

I en responsiv HTML-prototype opererer man med de samme elementene, uavhengig av flate, og eksperimenterer enkelt med ulike skjermbredder og stilregler. Å jobbe responsivt i Photoshop er rett og slett tungvint, og designen er vanskelig å prøve ut på de ulike enhetene. Og jeg vil ikke engang snakke om hvor ufordragelig Photoshop kan være når det kommer til arbeid med tekstlig innhold…

Når det er tid for leveranse av dine Photoshop-skisser må du skrive side opp og side ned med dokumentasjon, og for sikkerhets skyld henge over skulderen til stakkaren som skal utvikle nettstedet – ting som tar mye tid. Og alt dette gjør du bare for å oppdage, sammen med kunden, at designen ikke ble akkurat som i Photoshop-skissene dine, men har “ubetydelige” avvik her og der. Leverer man en HTML-prototype er den i de fleste tilfeller så selvforklarende at man knapt behøver å skrive dokumentasjon, og koden kan implementeres direkte. WYSIWYG!

Konklusjon

Min påstand og konklusjon er derfor: Når man skal designe et responsivt nettsted går det raskere, sammenlagt sett, å gjøre mye av designen “rett i browseren” og levere designen som en HTML-prototype. Og ærlig talt: Hva liker kundene best? Flate Photoshop-skisser i alskens formater liggende utover bordet, eller en vaskekte prototype som de kan se, ta og føle på, kanskje på sin egen tablet eller mobil?

Hva mener du?