WEBDESIGN
UX-DESIGN
UI-DESIGN
WEBDESIGN
PROJEKTET
Område
Webbdesign
UX & UI-design
Vad handlar det om?
I detta projekt har jag skissat, skapat och utvecklat min egen hemsida som fungerar som min portfolio. Detta har jag gjort genom WordPress som CSM och sedan byggt från grunden i Elementor.
Program
LÖSNINGEN
UX-designen
Från ett UX-perspektiv var det såklart viktigt att bl.a designa hemsidan responsivt, alltså anpassat både för desktop, tablet och mobil.
1. Navigation
Jag valde att göra en 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 – 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
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. 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. Läs mer-rutor
Jag implementerade “läs mer”-rutor för att ge användaren ett val att läsa mer eller inte. Detta underlättar för användaren att ta sig igenom hemsidan utan att tappa intressent eller bli för överväldigad av informationen, istället för att ha all text “ute”.
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.
UI-designen
Från ett UI-perspektiv ville jag att en och samma tonalitet och uttryck skulle vara genomgående på alla sidor för att enklare förstår sig på designen.
Min visuella tonalitet
Jag skapade en visuell mall både för startsidan, samt för projektsidorna och använde dessa på alla sidor för att få ett genomgående helhetsuttryck. Samma struktur, likadana rubriker, samma animationseffekter, uppdelning av information etc. På detta sätt blir det enklare för användaren att skanna sidan, känna igen det och förstå sig på innehållet – En enhetlig design!
Form
För att skapa ett mjukare uttryck mot den mörka bakgrunden valde jag att justera border radius på text-elementen och andra containrar. Jag gillar att leka med det hårda och mjuka uttrycket och trivs som bäst när jag finner en fin balans där emellan.
För att få en modern och teknisk känsla i mitt uttryck skapade jag en ljuslila gradient som jag placerade bakom element där den lätt lyser igenom. Specifikt bakom kort där jag har använt mig av glas-effekten, vilket även de ger ett mer modernt utseende i och med dess designtrend för 2026.
Läs mer-rutor
Jag implementerade “läs mer”-rutor för att ge användaren ett val att läsa mer eller inte. Detta underlättar för användaren att ta sig igenom hemsidan utan att tappa intressent eller bli för överväldigad av informationen, istället för att ha all text “ute”.
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 en enkel palett där det mestadels använder den lila och oranga färgen som bakgrunder för rubriker eller som knappar. Det var extra viktigt att brödtexten var kontrastfylld med en hög läsbarhet – därför vit text mot svart 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
Jag valde Poppins som typsnitt för brödtexten då jag ville ha en lättläst sanseriff. Jag såg till att justera den på bästa sätt och det 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.
Modular design
Jag byggde upp hemsidans innehåll enligt det jag lärt mig om modular design i min kurs Webbproduktion med dynamisk layout. Detta för att effektivisera produktionen av alla sidor och att enkelt kunna uppdatera med liknande innehåll. Istället för att ödsla tid på att bygga upp allting separat med innehåll liggandes löst i ett stort grid (bild, rubrik, text etc), bygger jag olika kort med information som hör ihop. På så sätt kan jag enkelt återanvända dessa moduler, samt effektivisera arbetet med att förändra layouten när jag gör hemsidan responsiv. Det är något jag fick lära mig den hårda vägen av att inte ha applicerat på tidigare projekt!
Logga (temporär)
Under construction…
xx
Färgpalett
Jag tog fram två olika färger som jag tycker representerar mig – Orange och lila.
En varm och kreativ orange, mot en kall logisk lila. Jag tycker det summerar min känsla för design väldigt bra! Dessa nyanser används genomgående i designen för att återigen, skapa ett starkt helhetsuttryck. Till detta skapade jag även en gradient som jag använde som bakgrund och till symboler.
SKISSER / PROTOTYPER
Wire frames / Low-fi prototypen
Först påbörjade jag med wireframes för att få en grundlig förståelse över hur jag ville bygga upp hemsidans inre struktur. Detta fungerade som min low-fi prototyp.
Första visuella skissen
Jag gick vidare till mer detaljerade skisser så jag fick en bättre bild över hur det skulle se ut rent visuellt. Detta hjälper mig verkligen att effektivisera arbetet i Elementor, genom att inte designa samtidigt som jag utvecklar. Utan istället ha en tydlig plan att följa och bygga enligt.
Hi-fi prototypen
Eftersom hemsidan endast är för mig kände jag inte behovet av att skapa en hi-fi prototyp i Figma med funktioner så som hover, skroll, animationer etc – Därför fungerade en detaljerad statisk skiss i Illustrator istället. Genom brainstorming av olika uttryck och effekter kom jag fram till den slutgiltiga designen.
MIN DESIGNPROCESS (in constr.)
Writing in progress…
Min planering bestod av mina wireframes och min första skiss. Dessa gjorde jag i Illustrator. Här tänkte jag ut på ett ungefär hur jag ville att innehållet skulle ligga och byggas upp. Vad är snyggt, användarvänligt och spännande för ögat? Därför ser ni bl.a variationer av kolumbredden på elementen. Wireframes skapade jag i alla tre enheter för att se skillnaderna i layouten av elementen när skärmen blir mindre. Detta blev min första grund för vidare bearbetning.
Sedan var det dags att påbörja utvecklingen av hemsidan. Jag började med alla ladda ner grundläggande plugins som Elementor lite, Custom Adobe fonts, samt några kompletterande till Elementor för att klämma ut några extra funktioner. Under utvecklingen såg jag till att bygga i moduler (modular design) som jag sedan kunde återanvända lätt, såsom kort och olika sektioner. När jag var klar men en projektsida sparade jag denna som en template och använde den som en mall för resterande projektsidor, för att effektivisera arbetet och inte jobba dubbelt.
Det var även viktigt för mig att jobba med måttenheter som VW, VH och EM för att hålla innehållet så responsivt som möjligt. Jag hade under ett tidigare projekt gjort misstaget att använda ett pixelmått för texter och det fungerar inte så bra mellan olika skärmstorlekar – VW anpassar sig bättre för skärmbredden.
Writing in progress…