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
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å.
1. 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. 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.
2. 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.
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.
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
Uppstart
Eftersom jag ville hålla den befintliga webbplatsen live och inte påverka innehållet, valde jag att skapa den nya sidan lokalt på min dator. Jag började med att kolla på massa tutorials på youtube om hur man skulle gå tillväga och kom fram till att programmet Local WP kunde hjälpa mig att göra detta. Jag följde en tutorial om hur jag skulle påbörja projektet och vipps så satt jag där med en blank sida, förankrat lokalt till min dator.
Jag började med att kolla igenom den befintliga webbplatsen för att se vilket innehåll jag skulle behålla och hur många sidor jag behövde skapa. För att minimera antalet onödiga klick och därmed sidor valde jag att strukturera om innehållet och sätta ihop vissa sidors innehåll till en, ex. de olika åren med julmarknaden PYNT.
Skisser
Jag skapade skisser i Illustrator där jag designade ett ungefärligt utseende och uttryck. Jag tog mycket inspiration från den dåvarande webben med innehållet och layouten, så den kan jag inte stå för helt själv. Men jag tittade även runt på andra kommunikationsbyråers hemsidor för att se hur de uttryckte sig och på vilka sätt vi kunde likna men också sticka ut.
Användning av skisser
När jag började att skapa webbplatsen använde jag mig av skisserna för att hjälpa mig översätta det jag ser, till något som jag kunde bygga. Utan skisser märkte jag direkt att jag fastnade och visste inte riktigt hur jag skulle ta mig vidare.
Uppbyggnad
Jag började med att skapa övergripande containrar för att sedan kunna justera riktningen av innehållet såsom centrerat, vänsterställt och högerställt. Men också för avståndet mellan innehållet genom ex. space between, space evenly eller start. Därefter tog jag fram en hero section inom den övergripande wrappern, som blev separat från main-innehållet. Sedan jobbade jag mig “inåt” i strukturen för att få en ungefärlig layout och design. Jag ser det ungefär som en HTML-kod som bara går längre och längre in efter varje nytt element inom en container. Sedan avslutade jag med de “minsta” och mest specifika detaljerna. Dvs, jag började exempelvis med att skapa korten där jag presenterar var och en av oss på OM OSS-sidan och lägger ut dessa i ett grid. Men själva kortens innehåll såsom bild och text skapar jag sist när jag känner att den övergripande designen fungerar och går att justera på det sätt jag vill.
Grid och flexbox
Grids implementerade jag när jag visste att innehållet behövde justera layout beroende på enhet. Där sätter ju flexbox en begränsning då det endast går att justera riktning men inte exakt vart i “rutan” jag vill placera ett visst innehåll – Där blev ett gridsystem mycket bättre!
För att kunna leverera den nya designen och få upp den live på Kindergardens hemsida, behövde jag migrera över den från min dator på Local WP, till Kindergarden live. Detta gjorde jag genom att återigen titta på tutorials och därefter laddade jag ned ett plugin som jag kunde utföra migreringen genom. Och boom – Den nya sidan var live! Efter några slutjusteringar så var den nya wepplatsen kvar.
Skisser
Jag lärde mig vikten av att skissa struktur och design innan man påbörjar att utveckla då det i långa loppet gör arbetet så mycket mer effektivt. Jag kände hur jag fastnade när jag inte hade en skiss att titta på och kände mig ibland helt fast.
Layout – Responsiv design
Vikten av att tänka igenom hur innehållet ska layoutas när man byter enhet, innan man bygger upp sidan. Jag var så ivrig och tänkte inte igenom allt och sen när det kom till att mobilanpassa sidan hade jag strukturerat mitt grid på ett jätte-ineffektivt sätt där mitt innehåll (rubriker, bilder etc) låg löst i ett grid. Dvs, bild, rubrik och text som hörde ihop (som ett kort) låg inte ihop i en container, utan låg löst i ett större grid. Lärdomen blev att jag fick lägga ner mer tid på att bygga om så att jag hade kort och kunde placera dessa i gridet. Detta möjliggjorde en mycket enklare anpassnig av layouten när jag ändrade för tablet och mobil.
