Nyhetsbrev #08: Stilguide och atomic design

“We’re not designing pages, we’re designing systems of components.”
— Stephen Hay

Inledande jidder

Det finns många tecken på att webbdesign börjar mogna som industri. Det senaste är allt prat om stilguider för att dokumentera och standardisera hur ens identitet på webben ska vara. Nej, det är inte utskrifter med snygga upplägg från Photoshop med fejkat innehåll det handlar om. En stilguide är en webbplats i miniatyr som visar exakt hur allt ska bete sig på organisationens alla webbsidor. Man kan provköra stilguiden i sin dator, platta, klocka eller vad tusan som helst med en webbläsare för att se att det fungerar som det är tänkt.

En förutsättning för att detta ska vara meningsfullt är att man brutit ner sitt innehåll till återanvändbara komponenter, därav kopplas det ofta till webbdesign-principen Atomic design. På detta sätt försöker man lösa sina behov en gång för alla per typ av innehåll, kvalitetstestar det ordentligt och sedan finns kod som garanterar både utseende samt funktion. Det är ett sätt att överbrygga gapet mellan IT och kommunikation i stora organisationer, de tittar på samma dokumentation men IT garanterar koden och kommunikation vårdar den grafiska identiteten.

Denna månads rabatt är 30 % på boken Intranät som skapar värde. Du hittar koden sist i brevet.
/Marcus

Argument för stilguider

  • Inga tveksamheter om hur det ska se ut, fungera eller vilken gränssnittskod som ska användas för att följa stilguiden.
  • Stuva runt med komponenterna för att bygga nya designmallar utan att riskera att ställa till det.
  • Bra för kravställning när man har med konsulter vid utvecklingen, de får helt enkelt lov att följa stilguiden eller argumentera till varför avsteg behövs.
  • Översikt för vilka designkomponenter som finns att välja på, saknas något ska det finnas en godkännandeprocess för nyutveckling och införande i stilguiden.
  • Inte helt olika stilmallar eller responsivt beteende mellan olika webbsystem från samma organisation. En stor poäng är att införa samma kod på all nyutveckling så kan man centralstyra grafiska förändringar senare.
  • Inte lappa och laga samma problem i isolerade miljöer, exempelvis bör man kunna spara pengar på att avlasta systemutvecklare från ansvaret över stilmallar.

Startpaket och verktyg för din stilguide och exempel på färdiga stilguider

Vill du bygga din stilguide i WordPress finns Pears. Det är öppen källkod och har mycket färdigt för dig att bara redigera. Pears är ett tema till WordPress, du kan ladda ner det på Github. På styleguides.io finns en lång lista med verktyg som gör arbetet med stilguide enklare.

Ian Feather har en del kloka tankar om hur man får till ett arbete med kontinuerliga förbättringar genom sin stilguide. En stilguide gör sig bäst om man aktivt förvaltar den, testar nya komponenter i sin stilguide istället för att överge den.

Ta gärna en titt på Pattern lab för att hitta designmönster och logisk uppdelning av komponenter som utgör en webbsida.

Exempel på stilguider

För dig som är bekant med Bootstrap så är ju deras publika dokumentation att betrakta som en stilguide. Både fördelen och nackdelen med Bootstrap är ju att den har så mycket mer än de flesta behöver, men i detta sammanhang kan man ju få hjälp att prioritera vilka komponenter man ska börja med i sin egen stilguide.

Kaffekedjan Starbucks har en publik stilguide du kan kolla på. MailChimps innehåller till och med kommunikativa saker som tonalitet, mikrocopy etc.

Code for America inleder sin stilguide med att ta upp sina värderingar. Även Microsoft har en stilguide, fast kallar den för Web Framework.

Podcast-avsnitt att lyssna på

The Style Guide Podcast

Drivs av Anna Debenham och Brad Frost som båda är välkända i sammanhanget webbdesign. Podden påbörjades i januari men det finns redan ett antal avsnitt att lyssna in sig på.

Prenumerera / Itunes-version

The Dirt intervjuar Brad Frost om Atomic design

the Dirt har mycket av ett UX-perspektiv och pratar visuell systematisering med Brad Frost.

Ladda ner avsnitt.

Kompetensträffar

Kolla gärna in meetup.com, de listar mängder med träffar om diverse lärorika ting – de flesta är dessutom gratis.

10 juni i Göteborg samt 3 juni i Malmö om Atomic Design

Netrelations kör två träffar kring Brad Frosts idé om att se på sitt innehåll som brottstycken som i olika kombinationer utgör en sida.

Inbjudan finns här.

26:e maj i Köpenhamn körs meetup för frontend-kodare

Meetup-gruppen Copenhagen Frontenders är mer en grupp för de som själva kodar för webben. Dock pratar de design och gränssnittskodsfrågor i största allmänhet.

3:e juni designdk i Århus

Gruppens andra träff där allt som har med design tas upp. Har också en kanal på Slack.

Andra intressanta grupper

Rabattkod för boken Intranät som skapar värde

För att få aktuella rabattkoder behöver du vara med på mejllistan för nyhetsbrevet - anmäl dig till nyhetsbrevet

Webbstrategi för alla tar upp det du behöver veta för att jobba mer strategiskt med en webbplats. Köp boken och få e-boken på köpet! Boken finns att köpa hos Intranätverk

E-boken är nedladdningsbar i formaten PDF, Epub & Mobi

Webbanalys - förstå och förbättra användarnas upplevelse hjälper till med verksamhetsmål och föreslår en process för att göra verklighet av de uppsatta målen. Webbanalys-boken finns att köpa dels hos förlaget Intranätverk, hos Adlibris men också på Bokus

Har du kommentarer på nyhetsbrevet, förslag eller tips är du varmt välkommen att höra av dig via kontaktsidan.