Fra atomer til ferdig nettsted 2

Ikke begynn med forsiden når du skal redesigne nettstedet ditt. Begynn heller i andre enden – med de minste komponentene.

Brad Frost på Webdagene 2014. Foto: Eirik Helland Urke
Brad Frost på Webdagene 2014. Foto: Eirik Helland Urke

Brad Frost, som utvilsomt kan kalles en internasjonal webguru, snakket på Webdagene 2014 om kjemi og atomisk design. I korte trekk handler atomisk design om hvordan du bør bygge opp og sette sammen nettstedet ditt.

Men først, la oss ta et steg tilbake.

Det er ikke så lenge siden vi laget nettsider i bestemte bredder og størrelser. Vi var veldig opptatt av hvordan nettsidene vi laget så ut på forskjellige skjermer og i ulike oppløsninger. Vi har fortsatt ikke helt klart å legge dette fra oss. Vi snakker fortatt om hvordan nettsiden kommer til å se ut på en iPhone, og hvordan den skal se ut på en iPad. Noen snakker faktisk også om «the fold».

Brad Frost mener vi må frigjøre oss fra denne tvangstrøyen. Teknologien endrer seg for fort. Nye enheter kommer på markedet. Vi kan ikke forutse framtiden. Isteden må vi bare akseptere at nettstedene våre flyter utover alle grenser.

Ivareta brukeropplevelsen

Så hvordan ivareta den gode brukeropplevelsen? Svaret er, ifølge Brad Frost, atomisk design – som består av fem hoveddeler.

  1. Atomer
  2. Molekyler
  3. Organismer
  4. Sidemaler
  5. Nettsider

Du skal begynne med atomene. Dette er enkeltelementene på nettstedet ditt. Knappene, tekstfeltene, etikettene. Atomene settes sammen til molekyler. Et søkefelt er et eksempel på en molekyl, og består av atomene etikett, tekstfelt og knapp. Molekylene kombineres igjen for å danne organismer, som igjen danner sidemaler. Til slutt lager vi nettsider med reelt innhold og design.

Poenget er å skape et designsystem nedenfra og opp. Noe som kan fungere på alle typer enheter og flater, uavhengig av skjermstørrelse og oppløsning.

Ved å lage designsystemer blir opplevelsen av nettstedet ditt mer konsistent. Det er enklere å teste nye elementer, og det skaper en felles forståelse på tvers av organisasjonen hvilke elementer nettstedet egentlig består av og hvordan de ulike elementene brukes.

Mange har allerede tatt i bruk slike designsystemer, som forvaltes gjennom uklike typer styleguider: MailChimp Pattern Library, Starbucks Style Guide og Code for America Style Guide.

Hvor bør du starte?

Brad Frost og kollegaen Dave Olsen har laget et rammeverk de kaller Pattern Lab, som viser atomisk design i praksis. Dette er et verktøy som er åpent for alle. Ved å bruke Pattern Lab kan hvem som helst bygge opp et designsystem uten å måtte utvikle rammeverket selv.

Videre er Brad Frost imidlertid opptatt av at teknikk alene ikke løser utfordringene. Vi kan lage teknisk gode systemer og nettsider. Likevel kan vi feile med atomisk design og i utviklingsprosjektene våre. Brad Frost er opptatt av at strateger, analytikere, innholdsrådgivere, informasjonsarkitekter, interaksjonsdesignere, grafiske designere, utviklere og ikke minst kundene må jobbe sammen tverrfaglig og kontinuerlig. Fossefallsmetoden er ut.

Bjørn Bergslien

Flere artikler av Bjørn CV

2 kommentarer

  1. Med fare for hamna i kategorien flisespikking: Det heiter ‘atomistisk’ på norsk. Kan likevel vera greitt med ei påminning dersom dette skal innarbeidast som eit norsk begrep.

  2. Ja, du har så rett. Takk for innspill!

Skriv en kommentar

  • *

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