Webbdesignprocessen: från idé till färdiga skärmar
En bra designprocess är inte byråkrati: det är den ordning som förhindrar omarbete. Varje fas producerar ett beslut som nästa fas tar för avgjort.
Den här guiden går igenom faserna, vad varje levererar, hur lång tid de tar, och var designprojekt brukar fastna.
Faserna och vad var och en levererar#
Ordningen spelar roll. Att hoppa över en fas tar inte bort den — den skjuter beslutet framåt, till när det kostar mer att ändra.
| Fas | Leverans | Typisk tid |
|---|---|---|
| Upptäckt | Mål, målgrupp, begränsningar | 3 till 5 dagar |
| Struktur | Sidlista och navigation | 3 till 5 dagar |
| Wireframes | Layout utan visuell stil | 1 till 2 veckor |
| Visuell riktning | Typografi, färg, ton — på en sida | 3 till 5 dagar |
| Färdiga skärmar | Mallar tillämpade, desktop och mobil | 2 till 4 veckor |
| Prototyp | Klickbara flöden för test | 2 till 4 dagar |
| Överlämning | System, exporter, specifikationer | 3 till 5 dagar |
Visuell riktning på en enda sida är den fas som sparar mest tid. Att godkänna tonen innan den tillämpas på trettio skärmar förhindrar att trettio skärmar görs om.
Wireframes före stil#
Wireframes utan färg och typografi tvingar fram diskussionen om innehåll och hierarki, vilket är den diskussion som spelar roll.
- Rita mobilen först. Det får plats mindre, vilket tvingar fram prioriteringar.
- Använd riktigt innehåll, eller så nära som möjligt. Platshållartext döljer utrymmesproblem.
- Visa tomma tillstånd, feltillstånd och laddningstillstånd — de glöms ofta och improviseras sedan.
- Markera huvudhandlingen på varje skärm. Om det finns tre finns det ingen.
- Diskutera inte färg i den här fasen. Om det dyker upp är wireframes för detaljerade.
- Validera innehållsstrukturen med den som ska skriva den, innan ni går vidare.
Var processen brukar fastna#
Blockeringarna är nästan alltid desamma, och nästan alla är organisatoriska snarare än kreativa.
| Blockering | Orsak | Lösning |
|---|---|---|
| Motstridig återkoppling | Flera beslutsfattare utan hierarki | En enda ansvarig för beslut |
| Oändliga rundor | Rundor inte definierade i avtalet | Fast antal med godkännandekriterium |
| Saknat innehåll | Ingen utsedd | Namn och datum per sida |
| «Det är inte vad jag tänkte mig» | Visuell riktning överhoppad | Godkänn tonen på en sida först |
| Skärmar omöjliga att bygga | Design utan kontakt med utveckling | Tidig genomgång med utvecklaren |
| Mobil improviserad på slutet | Designat bara för desktop | Designa mobilen först |
«Oändliga rundor» är nästan alltid ett avtalsproblem, inte ett designproblem. Definiera vad en runda är och hur många som ingår.
Överlämna design som går att bygga#
Överlämningen avgör om bygget flyter eller blir en tolkningsövning.
- Lämna över ett litet system, inte bara skärmar: färger, typsnitt, avstånd, komponenter.
- Dokumentera varje komponents tillstånd: normal, fokus, aktiv, inaktiverad, fel.
- Specificera beteendet mellan brytpunkter, inte bara två fasta bredder.
- Inkludera tomma tillstånd och feltillstånd för varje skärm.
- Exportera bilder i moderna format och i de storlekar de kommer användas.
- Markera vad som är fast och vad som får anpassas — den som bygger kommer stöta på fall du inte förutsåg.
- Håll en överlämning live. En halvtimme sparar en vecka av frågor.
Vanliga frågor
Hur många revideringsrundor är normalt?
Två till tre per fas är brukligt och bör stå i avtalet, med definition av vad som räknas som en runda. Utan den gränsen tenderar designen att expandera obegränsat, eftersom varje ny person som ser skärmarna har en åsikt. En enda beslutsfattare är värd mer än vilken numerisk gräns som helst.
Behöver jag wireframes om jag redan har referenser?
Ja, för referenser visar stil medan wireframes löser struktur. Att gå direkt från referenser till färdiga skärmar slutar oftast i diskussioner om färg när det verkliga problemet är informationshierarki. Wireframes är snabba att göra och ännu snabbare att ändra.
Ska jag designa alla sidor?
Designa mallar, inte sidor. En webbplats med femtio sidor har oftast fem eller sex distinkta mallar. Designa varje mall med det svåraste innehållsfallet — den längsta rubriken, den längsta listan — så följer resten utan extra arbete.
Vem ska godkänna designen?
En person, med verkligt mandat. Du kan samla åsikter från flera, men beslutet måste tillhöra någon. Godkännande i kommitté producerar design ingen avskyr och ingen försvarar, och är den vanligaste orsaken till projekt som drar ut i månader i den visuella fasen.
webbdesignprocessdesignfaser webbplatswireframesdesignsystemrevideringsrundordesignöverlämning
