Fallstudie 01 · Eget projekt
Skissblocket
Hur kan en portfolio visa hur jag tänker, inte bara vad jag har gjort, och samtidigt kännas som min?
- Min roll
- UX/UI-design, designsystem och interaktiv prototyp
- Team
- Jag, med Claude som bollplank och kodhjälp samt Gemini för Deep Research
- Tid
- September 2026
- Verktyg
- Design-canvas, HTML, CSS och JavaScript
Vem, vad och varför
discovery: innan en enda pixel ritades
Vem sidan är till för
Rekryteraren eller UX-leaden
Går igenom många portfolior på kort tid, i dator eller mobil
- Mål
- Förstå snabbt hur jag tänker och om jag passar i teamet
- Frustration
- Portfolior som ser likadana ut och bara visar snygga slutbilder
Problemet
Hur visar jag process och hantverk, utan att portfolion blir ännu en mall bland alla andra?
- Mål
- Få kontakt med rekryterare och hitta praktik eller uppdrag
- Begränsningar
- Inga kundprojekt ännu, bara papper och grafit i gränssnittet, och allt ska fungera från 320 px
Trenden går mot portfolios som visar tankeprocessen, inte bara slutbilderna → varje projekt får en fallstudie om vem, varför och hur
Hantverket bygger förtroende: typografi, tokens, tillgänglighet → ett eget designsystem och ett Hantverk-blad
Anteckningar och en minnesvärd detalj skiljer från mallbyggda sidor → marginalanteckningar och kalkerpapperet
Så kom jag dit
sju versioner, var och en med en tydlig ändring
- 1
Upptäck
Granskade trender inom UX-portfolios och fick fram fem återkommande delar.
- 2
Definiera
Skrev briefen: ett monokromt skissblock av papper och grafit, där bara projektbilderna har färg.
- 3
Skissa
Byggde designsystemet SkissArt: tokens, tre vingliga hörnformer, hårda skuggor och åtta komponenter.
- 4
Prototypa
Interaktiv prototyp i tre storlekar, med bladvändning, kalkerpapper och post-it-meny.
- 5
Testa
Stresstest med 3–4 gånger längre text i nio bredder, kontrastmätning och egen granskning.
Designbeslut, och varför
varje nummer i bilden har ett skäl
123Blad som vänds, inte en lång skrollsida
- Eftersom
- En skissbok är en samling sidor. Varje avsnitt blir ett eget ark som får ta plats. Bladet vänds först när man har läst klart, en gång per gest.
- Bortvalt
- En vanlig skrollsida: snabbare att bygga, men den känns som alla andra.
Kalkerpapperet som signature move
- Eftersom
- Hantverket syns bäst när man ser hur sidan är byggd: typsnitt, mått och rutnät, direkt på designen. Knappen har sedan flyttat in på tillgänglighetslappen, med en anteckning som pekar dit och en genväg på Hantverk-bladet.
- Bortvalt
- Specetiketter som alltid syns. Jag testade det, och de stal fokus från innehållet.
”Kontakta mig” som primär knapp
- Eftersom
- Sidans mål är att någon hör av sig. Projekten nås ändå via knapp, flik och bladvändning.
- Bortvalt
- ”Se projekten” som primär, med ett vagt ”Säg hej” som andraval.
Hantverket i projektet
så att det håller när det växer
Designsystemet SkissArt
Tillgänglighet
- Brödtext 16.7:1 mot papperet, menytext på post-it-lappen 15.7:1
- Fokus utan färg: en tjock, streckad blyertslinje med avstånd
- Klickytor minst 44 px, menyvalen 50 px
- Reducerad rörelse: bladen byts utan animation
- Medveten kompromiss: svag grafit (2.8:1) bara för dekor och vilande knapptext, aldrig för brödtext
Mobil och kantfall
När flikarna inte fick plats blev menyn en post-it-lapp. Den gula tonen är den enda färgen utanför bilderna och står som ett uttalat undantag i designsystemet.
Säkra zoner för statusfält och hemindikator, dynamisk höjd och svep som lämnar telefonens egna gester i fred.
Resultat & lärdomar
mät det som betyder något
Det här lärde jag mig
Testa med för lång text tidigt. Stresstestet hittade fel som korta platshållare dolde: en lång mejladress gav sidledsskroll i mobilen, och bladknapparna hamnade utanför skärmen på smala telefoner.
Nästa steg
Testa med riktiga rekryterare. Allt hittills bygger på granskning och mina egna tester, inte på användartester.
”Denna bör tas bort då den stjäl fokus från allt annat.”