Designprosess – en tid for alt 2

Komponenter»
Nivåer i Atomic Design. Illustrasjon av kollega Pablo Scaglione.

Som designer går arbeidsoppgavene mine til hverdags ut på å lage designsystemer for nettsteder, og de fleste nettstedene Netlife lager nå om dagen har en responsiv design. Responsive miljøer har som kjent ingen grenser – de flyter. Vi kan ikke kontrollere hvilke flater nettstedene våre vises på – vi designer for det ukjente.

Da blir det feil å bygge designsystemer rundt perfekte sidelayouter. Vi må heller fokusere på å lage robuste designkomponenter som kan overleve i alle miljøer, komponenter som ikke må støtte seg på en spesifikk sidemal.

Jeremy keith snakker om akkurat dette i artikkelen han har skrevet om sitt Pattern Primer bibliotek: «That’s the way I’ve been starting most of my projects lately: beginning with the atomic units of content and styling them first before even thinking about layout. This ensures that those styles are extremely robust—because they don’t depend on any particular context, they can be safely dropped into any part of a page.»

Riktig perspektiv

Designprosess handler mye om å holde riktig fokus til enhver tid. Det gjelder å ikke gape over for mye, men å bryte problemstillinger ned i håndterbare biter. Det er en veksling mellom makro og mikroperspektiv. Zoome inn på detaljer, og deretter zoome ut for å vurdere om detaljene fungerer i den store helheten. Harmonerer komponentene? Har vi klart å bygge konsistens inn i systemet?

Ulike formater

Vi som designer i Netlife dokumenterer designsystemer i HTML-prototyper på et eller annet nivå. Vi bruker selvfølgelig andre formater også, men det er i HTML den endelige designleveransen vår presenteres.

Så jeg jobber i HTML, men vil ikke påstå at jeg er en racer. Det gjør derfor hverdagen min veldig behagelig når jeg får lov til å jobbe på prosjekter med designere som Axel. I motsetning til meg er han en trollmann med HTML, CSS og JavaScript, og dette er hans foretrukne designformat. Da er det han som “eier” prototypen, og jeg kan konsentrere meg om å utforme de ovennevnte byggeklossene – dette gjør jeg til dels i Illustrator og til dels i HTML og CSS.

Axel og jeg har etterhvert jobbet sammen på flere prosjekter, og har funnet en arbeidsprosess som fungerer for oss. Den foregår, veldig forenklet, på denne måten:

  1. Etablere grunnleggende byggeklosser.
  2. Bygge moduler av byggeklossene.
  3. Komponere sidemaler av modulene.
  4. Justere byggeklosser, moduler og sidemaler i en iterativ prosess til designet er ferdig.

Steg 1 er det som regel jeg som står for, og her jobber jeg i illustrator. Steg 2 foregår til dels i illustrator, og til dels i prototype. Steg 3 og 4 foregår for det meste i prototype, men vi gjør også kjappe visuelle utforskinger i illustrator, eller håndskisser ved behov. Jeg sier ikke at dette er den eneste måten å jobbe på, det vil variere etter preferansene til de du skal samarbeide med.

«Komponenter»
Noen grunnleggende byggeklosser

Formater for tidlig designutforsking

Tidlig i designprosessen foretrekker jeg, som sagt, å jobbe utenfor prototypen, fordi jeg synes det er vanskelig å utforske idéer i HTML på dette stadiet. Den første designleveransen som presenteres for kunden lager jeg derfor som regel i Illustrator.

Leveransen er en slags kombinasjon av collage-formatene style tiles og element collages. Denne metoden helper meg å fokusere på de grunnleggende komponentene til designsystemet, helt løsrevet fra en spesifikk sidelayout, og vurdere om de harmonerer visuelt.

Andre collageformater som egner seg for tidlig designutforsking er mood boards, og the style prototype som er et html collage-format hvor man kan legge på litt interaktivitet.

Jeg tester ut elementer som palett, typografi, kontraster, mellomrom, bildemanér, ikonstil, stil på knapper og navigasjonselementer, teksturer, og enkle skjemakomponenter.

Collage-formater er også effektive i tidlige diskusjoner med kunden, fordi det hjelper oss å snakke om design på riktig nivå. Vi gaper ikke over for mye. Vi diskuterer grunnprinsipper, og konsentrerer oss om å stake ut en kurs. Når vi presenterer designelementer på denne måten får kunden en visuell oppsummering av hvordan vi ønsker at nettstedet skal se ut, uten at vi investerer tid i å lage konkrete sidetyper, som f.eks en forside, eller artikkelmal.

På prototypestadiet har Axel og jeg etterhvert funnet det hendig å samle alle komponentene på en side i prototypen. Vi bygger denne samlingen etterhvert som vi jobber. Herfra er det enkelt å fortsette vurderingen av konsistensen i det visuelle uttrykket, og justere om nødvendig. Samlingen fungerer til slutt som et referanseverktøy for utviklerne når de skal implementere designet. Nathan Borrors Harmony Canvas er et eksempel på slike bibliotek.

Hvilke formater bruker du til tidlig designutforsking? Del gjerne i kommentarfeltet!

P.s. Brad Frost kan mye om dette og han kommer til Webdagene i oktober.

Stine Sjåstad

Flere artikler av Stine CV

2 kommentarer

  1. Pingback: → Uke 11 – Making Waves Blog
  2. Takk for informasjonen

Skriv en kommentar

  • *

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