Designstilar & identitet

Vad gör ett varumärke igenkännbart?

Innan du öppnar färgväljaren behöver du fatta ett designbeslut. Det beslutet styr allt: typsnitt, färger, kantradier och hela känslan av sidan. Utan det väljer du hex-koder på känsla, och resultatet spretar.

Vi börjar med ett riktigt varumärke som du redan känner igen. Frågan vi ställer är:

Om varumärket var en person, hur skulle det kännas att träffa det?

Steg 1: tre adjektiv

Ta en post-it eller ett papper. Välj ett varumärke du känner igen. Skriv ned tre adjektiv som beskriver hur det känns.

Varumärke/karaktär	Adjektiv
Spotify	Modern · Dynamisk · Inkluderande
IKEA	Enkel · Folklig · Praktisk
Lego	Lekfull · Kreativ · Färgglad
Batman	Diskret · Mörk · Effektiv
Hermione	Precis · Driven · Seriös
Tony Stark	Karismatisk · Modern · Arrogant
Deadpool	Kaotisk · Kaxig · Ironisk
Spock	Analytisk · Kylig · Rationell

De tre adjektiven är din designkompass. Om du frågar dig “ska jag ha runda hörn eller skarpa?”, gå tillbaka till adjektiven.

Steg 2: stilpersonlighet

Webbdesignern Erik Kennedy identifierar fyra stilpersonligheter som täcker de flesta varumärken:

Erik Kennedy om designstilar

Stil	Känsla	CSS-signaler
Fancy/Luxury	Exklusiv, tidlös, klassisk	Serif-typsnitt, creme/guld/svart, låg kontrast, mycket luft
Quirky/Offbeat	Personlig, konstnärlig, annorlunda	Ovanliga färger, display-typsnitt, ojämna marginaler
Friendly/Casual	Varm, välkomnande, tillgänglig	Runda hörn (`border-radius`), varma färger, sans-serif
Techie/Scientific	Precis, funktionell, kall	Geometrisk sans-serif, blå/kall ton, skarpa hörn, tät grid

Ta dina tre adjektiv och avgör vilken stil de pekar mot. Välj en. Kennedy ritar upp stilarna som ett kors: Fancy mittemot Quirky, Techie mittemot Friendly. Motsatta stilar är svåra att kombinera, det är därför du väljer en. Och i mitten, där axlarna möts, ligger det neutrala läget Clean/Simple, dit många moderna sajter landar när inget adjektiv drar åt något håll. En sajt som försöker vara “Fancy och Quirky och Techie” på samma gång misslyckas förmodligen i sin kommunikation.

Steg 3: typsnitt och färger

Nu kan du öppna Google Fonts.

Typsnitt, välj ett rubrik-typsnitt och ett brödtext-typsnitt:

Fancy/Luxury -> Serif (ex: Playfair Display + Source Serif 4)
Friendly/Casual -> Rundad sans-serif (ex: Nunito + Open Sans)
Techie/Scientific -> Geometrisk sans-serif (ex: Space Grotesk + Inter)
Quirky/Offbeat -> Display-typsnitt (ex: Abril Fatface + Lato)

Färger, välj primär, sekundär och accent:

Fancy/Luxury -> Creme #f5f0e8, mörkgrön #1a3d2b, guld #c9a84c

Friendly/Casual -> Varm vit #fdf6ec, terrakotta #d4694b, beige #e8d5c0

Techie/Scientific -> Nattblå #0d1b2a, klarblå #3a7bd5, ljusgrå #e8ecf0

Quirky/Offbeat -> Du väljer, det är poängen

Spara dina val som en kommentar i style.css. Lägg in den här blocket i toppen av filen:

/* BRAND: Batman, Diskret, Mörk, Effektiv */
/* Stil: Techie/Scientific */
/* Typsnitt: Space Grotesk (rubriker) + Inter (brödtext) */
/* Primär: #0d1b2a | Sekundär: #e8ecf0 | Accent: #3a7bd5 */

Det här är ditt designbeslut. Hänvisa till det varje gång du är osäker på ett val. Om ett val inte kan motiveras med ett av dina tre adjektiv, välj om.

Uppgift: Analys: ett riktigt varumärke

Välj ett varumärke du redan känner igen, t.ex. Spotify, IKEA, Apple, eller ett lokalt företag.

Skriv ned varumärkets namn och tre adjektiv som beskriver hur det känns.
Identifiera vilken stilpersonlighet (Fancy / Quirky / Friendly / Techie) adjektiven pekar mot, motivera med ett adjektiv.
Sök upp varumärkets webbplats. Identifiera typsnitt och primärfärger (DevTools hjälper). Stämmer de med adjektiven?
Lägg in din analys som en kommentarsektion i style.css i ditt nuvarande projekt.

Kriteriet: Varje val ska kunna motiveras med ett av dina tre adjektiv. “Det ser snyggt ut” godkänns inte.

Vad händer om…

Blanda stilpersonligheter, till exempel “Fancy/Luxury”-typsnitt (serif) kombinerat med “Techie/Scientific”-färger (kall ton, skarpa hörn). Gör ett snabbt experiment i din style.css och bedöm resultatet mot adjektiven. Förstärker kombinationen känslan, eller motarbetar delarna varandra?

Motivera & reflektera

I ditt repos README, skriv dina tre adjektiv, stilpersonligheten de pekar mot, och koppla ett konkret val (en färg eller ett typsnitt) till ett av adjektiven. Det här blir grunden du återvänder till varje gång du är osäker på ett designbeslut.