WEBDESIGN

UX/UI DESIGN

WIREFRAMES

WEBDESIGN

PROJEKTET

Vad handlar det om?

I detta projekt tog jag mig an att skapa en ny hemsida till den studentdrivna kommunikationsbyrån Kindergarden, där jag är webbansvarig år 25/26. Detta gjorde jag i WordPress, från grunden med hjälp av Elementor och andra plugins som sidbyggare. Eftersom jag ville hålla den befintliga hemsidan live medan jag hade detta som ett projekt utanför mina studier, skapade jag hemsidan lokalt via verktyget Local. Sedan migrerade jag den nya hemsidan över på live-hemsidan.

Kindergarden hade då redan en hemsida sedan tidigare men designen var ganska enkel och utdaterad. Därför tog jag mig an utmaningen att istället för att förbättra den som fanns, skapade jag då en helt ny, vilket blev min första hemsida i WordPress. Och jag lärde mig så mycket!

Område

Webbdesign

UX/UI design

Tillgänglighetsanpassning

Program

LÖSNINGEN

UX-designen

Från ett UX-perspektiv var det viktigt att designa hemsidan för både desktop, tablet och mobil. Att kunna ge användaren en enkel, lättsam och strukturerat gränssnitt som är enkel att navigera och förstå. 

Läs mer...

1. Navigation

Jag valde att göra en typisk och vanlig nav som jag placerade i det översta högra hörnet, lätt för användaren att hitta då en sådan nav används regelbunet på hemsidor – enligt UX Jakob’s Law. Här inkluderade jag huvuddelarna av min portfolio för att underlätta navigationen av innehållet för användaren.

2. Call to action (knappar m.m)

Jag placerade call-to-action knappar i slutet av nästan alla sektioner som hade mer information, för att guida användaren att lätt hitta vidare. Dessa gjorde jag i en och samma kontrastfyllda färg och form, för att användaren ska förstå att det är en knapp och leda hen till att klicka på den. Detta designat enligt Law of Similarity. Annars inkorporerade jag även hover-effekter på olika element för att påvisa att de går att klicka på för att finna mer information, inte bara knappar.

3. Layout och whitespace

Jag använde mig av olika row och column space för att skapa en tydlig struktur i vilket innehåll som hörde ihop och inte, så det blir enklare för användaren att skanna igenom innehållet – enligt The law of Proximity.

4. Responsiv design

Jag skapade en responsiv design som är anpassad för desktop, tablet och mobil. Jag har använt mig av responsiva mått som VW, VH och EM som måttenhet på bl.a textstorlek och radavstånd. Men även justerat dessa för varje enhet för att få en god läsbarhet oavsett device. 

Tillgänglighetsanpassning

1. Färg

Jag tog färgval i beaktning så att det blev god kontrast med synnedsatta i åtanke, så som färgblindhet m.m. Därför valde jag aldrig att lägga rött på grönt, eller kontrastlösa nyanser på information som är viktig för användaren. Det var extra viktigt att brödtexten var kontrastfylld med en hög läsbarhet – ofta svart text mot vit bakgrund. 

2. Rubriker och hierarki

Tydliga rubriker för att kunna avläsa när nya stycken börjar. Hierarki med textstorlek för att lätt kunna skanna vad man ska läsa först. 

3. Typografi

Typsnittet var ett bestämt typsnitt i den grafiska profilen men jag såg till att justera den på bästa sätt ur ett tillgänglighets-perspektiv. Detta betyder att jag justerade radavståndet så att texten inte blev för tät eller för luftig. Samt att alla brödtexter är vänsterställda, och inte centrerade, för läsbarhetens skull.

UI-designen

Från ett UI-perspektiv ville jag att Kindergardens grafiska profil skulle genomsyra hela hemsidan – Från knapparnas lekfulla utseende och hover-effekt, till färg och form av bakgrund och element.

Läs mer...

Den grafiska profilen

Jag utgick från Kindergardens befintliga grafiska profil när jag tog fram den nya bearbetade designen för hemsidan. Värdeord som Lekfull men fortfarande Professionell kom till tanken många gånger. Därför blev det maffiga rubriker i varje hero section, relativt färgstarka sidor och grafiska element som jag skapade, i form av blommor och doodles. Men för att inte tappa känslan av “allvaret” i det vi gör, använde jag dessa på mer diskreta sätt, så som i bakgrunden eller som uppdelare av information. 

Färger

Kindergardens grafiska profil består bl.a av den rosa, mörkblåa och gula färgen som syns på min nya design. Det finns fler nyanser men för att inte skapa en så spretig palett på webben, valde jag att hålla mig till dessa tre färger endast. Den rosa nyansen blev huvudtonen och används som bakgrund i hero sectionen på alla sidor, för att skapa en enhetlig känsla i hela gränssnittet.

Form

För att skapa ett mjukare uttryck rundade jag till alla containrar, samt implementerade en glasseffekt på olika kort. Detta gav ett mer intressant, levande och modernt utseende till designen, där bakgrundsillustrationerna lätt kunde dimma igenom. Glaseffekten har kommit att bli en tydlig designtrend för UI-design 2026, så som Iphones nya IOS mjukvaruuppdatering med massvis av glaseffekter på knappar m.m.

MIN DESIGNPROCESS (in constr.)

Planering

Writing in progress…

Kreativ fas

Writing in progress…

Produktion

Writing in progress…

Leverans

Writing in progress…

Scroll to Top