Min portfolio
ROLL
UX-Designer
TEAM
Enskilt arbete
TIDSRAM
3 veckor (MVP)
6 veckor (lansering)
KOMPETENSER
UX/UI-design
Webbutveckling
Prestandaoptimering
IT-säkerhet & Hosting
Prototyparbete
VERKTYG
Figma
Strato
WordPress
Canva
Adobe Express
Photoshop
Adobe media encoder
AI
PROJEKT
Syftet med detta projekt var att designa en responsiv WordPress-hemsida för en mindre familjegård med inriktning på blomsterförsäljning. Huvudmålgruppen är florister som söker lokalodlade snittblommor och behöver snabb åtkomst till utbud och kontaktinformation. Målet var att skapa en enkel, digital närvaro som inger förtroende och underlättar försäljningen.
ANSVARSOMRÅDE
Jag ansvarade för hela designprocessen från första skiss till färdig prototyp. Detta inkluderade att ta fram struktur och wireframes för både desktop och mobil, välja ut en passande grafisk profil samt skapa visuellt material som ikoner och bildval. Fokus låg på att leverera en fullt klickbar responsiv lösning i Figma.
MIN PROCESS
STEG 1
Det första var att tänka ut var portfolion skulle vara. Idag finns det många snabba alternativ som Wix, Adobe Express eller Canva för att få upp sin portfolio samma dag. Av kostnadsskäl valde jag bort Canva och Adobe, för att slippa tvingas betala över 1000 kr om året. Wix valdes bort då man inte äger sin sajt, inte kan flytta sitt material och inte kan skräddarsy koden/utseendet. Därför blev det WordPress.
STEG 2
Steg 2 var att skapa min ux-design i Figma. Den behövde både se bra ut på startsidan och för varje fall, men också både på ens dator och på mobilen.
STEG 3
Steg 3 var att lösa säkerhetsfrågan. Jag skapade ett konto hos en lösenordshanterare som kunde skapa ett 16-tecken långt lösenord åt mig, både till WordPress-sidan och hosting-företaget.
STEG 4
Steg 4 var att välja ut vem som skulle sköta min hosting, köpa domän och få det till att fungera. Valet landade i Strato. Det var GDPR-säkert, prisvärt första året, koldioxidneutralt och Europeiskt.
STEG 5
Steg 5 var att sätta upp WordPress med högsta säkerhetsfokus. Av säkerhetsskäl undvek jag standardnamnet ”admin” och byggde gränssnittet från grunden med Gutenberg, HTML och CSS för att eliminera riskerna med färdiga teman. Hemsidans sårbarhet minskades ytterligare genom att strikt begränsa antalet tillägg till fem välbeprövade plugins med automatiska uppdateringar. Jag valde även bort plugins för enklare funktioner, som att förhindra besökare från att högerklicka och spara ner mina bilder och videos. Den funktionen byggdes istället med egen CSS- och JavaScript-kod, just för att minska antalet tillägg och därmed minimera vägarna in för en potentiell hacker.
STEG 6
Steg 6 var att skicka in anspråk till internet-filter så att min nya hemsida kunde kategoriseras som en portfolio (och som säker). Många organisationers brandvägg blockerar annars hemsidan, så att den inte kan besökas.
STEG 7
Steg 7 var att återskapa UX-designen från Figma i WordPress. Detta var extremt tidskrävande. Att både få designen perfekt på mobil och dator krävde html och CSS-kod.
Med CSS kunde jag t ex skapa scroll-funktioner för bilder på mobilen och kringgå WordPress inbyggda måttlåsningar så att bildernas proportioner inte förvrängdes.
STEG 8
Steg 8 Alla foton ändrades i Photoshop, både för att minska storleken på filerna till ca 30-120 kB och ändra typen till webp-format. Annars blir hemsidan långsam. En del av mina videos komprimerades i Adobes Media Encoder, andra var redan tillräckligt komprimerade när jag exporterade dem från Canva. Beroende på innehåll så har mina videos till specifikt denna hemsidan, skapats i antingen Canva eller Adobe Express. Vissa lades in direkt i WordPress för att slippa det fula gränssnittet som kommer med YoutTube, men vissa längre videos fick gå igenom YouTube för att inte göra hemsidan långsam.
STEG 9
Steg 9 var att få feedback för att förstå vad som inte var bra med hemsidans utseende. Genom användartester upptäckte jag bl a att typsnittet Baumans orsakade ett visuellt ’glitch’ (så kallat FOUT) för förstagångsbesökare innan browsern hinner ladda det.. Efter omfattande felsökning och kodjusteringar valde jag att istället implementera en preloader. På så sätt hinner hemsidan renderas klart i bakgrunden, vilket garanterar att användaren möts av en polerad, friktionsfri upplevelse från allra första sekunden.
LÄRDOMAR
Väldigt mycket i detta projektet gjorde jag för första gången. Att lösa hosting, kategorisera hemsidan så att den inte blockerades, minska storleken på bilder och videos med mera var lärorikt. Jag vill inte påstå att det kommer gå snabbare nästa gång, men jag bör nog snabbare kunna ta beslut kring vad jag ska göra. I detta projektet gick mycket tid åt att kolla upp vilka tillägg som var säkra, vilket hostingföretag som hade bra säkerhet och vilket företag som erbjuder säkra lösenordshanterare.
Jag arbetade under tidspress, vilket gjorde situationen stressig. Att genomföra ett så omfattande förstagångsprojekt på endast tre veckor, parallellt med övrigt examensarbete, var en intensiv men lärorik utmaning. Den viktigaste strategiska lärdomen jag tar med mig framåt är hur avgörande det är att realistiskt tidsestimera och avgränsa komplexa uppgifter redan i planeringsfasen. För att få det exakt så som jag ville ha det, så tog det närmare 6 veckor. Det blev också en del tidsfördröjning då det tog någon dag att få tillgång till hosting, domän och någon dag ytterligare att få hemsidan listad som säker så att brandväggen kunde släppa igenom mig.
Allt jag gjorde var med framtida e-handels- och kundprojekt i åtanke. För en portfolio är kanske inte säkerheten så viktig som jag gjorde det. Men för ett riktigt företag bör det ha hög prioritet, därför ville jag lära mig hur man gör allt rätt redan här.
MIN PORTFOLIO
Här berättar jag hur jag från grunden designade och byggde en professionell, egenhostad digital portfolio. Målet var att frångå låsta plattformar och mallar för att istället skapa en långsiktig lösning med fullt ägandeskap. Genom att bygga sajten från scratch kunde jag fritt skräddarsy användarupplevelsen, säkerställa blixtsnabba laddningstider och bygga in en hög säkerhetsstandard redan från start.
ROLL
Digital designer
VERKTYG
Figma
Strato
WordPress
Canva
Adobe Express
Photoshop
Adobe media encoder
AI
TEAM
Enskilt arbete
TIDSRAM
3 veckor (MVP)
6 veckor (lansering)
ANSVARSOMRÅDE
Detta var ett soloprojekt där jag hade totalansvar för hela processen, från strategiska val av hosting till färdigutvecklad webbplats. Jag tog fram UX- och UI-designen i Figma och byggde sedan upp den responsiva WordPress-sidan med HTML, CSS och Gutenberg, helt utan förbyggda teman. Jag ansvarade även för den tekniska driften som uppsättning av servrar, domän och säkerhetskonfigurering.
MIN PROCESS
STEG 1
Det första var att tänka ut var portfolion skulle vara. Idag finns det många snabba alternativ som Wix, Adobe Express eller Canva för att få upp sin portfolio samma dag. Av kostnadsskäl valde jag bort Canva och Adobe, för att slippa tvingas betala över 1000 kr om året. Wix valdes bort då man inte äger sin sajt, inte kan flytta sitt material och inte kan skräddarsy koden/utseendet. Därför blev det WordPress.
STEG 2
Steg 2 var att skapa min ux-design i Figma. Den behövde både se bra ut på startsidan och för varje fall, men också både på ens dator och på mobilen.
STEG 3
Steg 3 var att lösa säkerhetsfrågan. Jag skapade ett konto hos en lösenordshanterare som kunde skapa ett 16-tecken långt lösenord åt mig, både till WordPress-sidan och hosting-företaget.
STEG 4
Steg 4 var att välja ut vem som skulle sköta min hosting, köpa domän och få det till att fungera. Valet landade i Strato. Det var GDPR-säkert, prisvärt första året, koldioxidneutralt och Europeiskt.
STEG 5
Steg 5 var att sätta upp WordPress med högsta säkerhetsfokus. Av säkerhetsskäl undvek jag standardnamnet ”admin” och byggde gränssnittet från grunden med Gutenberg, HTML och CSS för att eliminera riskerna med färdiga teman. Hemsidans sårbarhet minskades ytterligare genom att strikt begränsa antalet tillägg till fem välbeprövade plugins med automatiska uppdateringar. Jag valde även bort plugins för enklare funktioner, som att förhindra besökare från att högerklicka och spara ner mina bilder och videos. Den funktionen byggdes istället med egen CSS- och JavaScript-kod, just för att minska antalet tillägg och därmed minimera vägarna in för en potentiell hacker.
STEG 6
Steg 6 var att skicka in anspråk till internet-filter så att min nya hemsida kunde kategoriseras som en portfolio (och som säker). Många organisationers brandvägg blockerar annars hemsidan, så att den inte kan besökas.
STEG 7
Steg 7 var att återskapa UX-designen från Figma i WordPress. Detta var extremt tidskrävande. Att både få designen perfekt på mobil och dator krävde html och CSS-kod.
Med CSS kunde jag t ex skapa scroll-funktioner för bilder på mobilen och kringgå WordPress inbyggda måttlåsningar så att bildernas proportioner inte förvrängdes.
STEG 8
Steg 8 Alla foton ändrades i Photoshop, både för att minska storleken på filerna till ca 30-120 kB och ändra typen till webp-format. Annars blir hemsidan långsam. En del av mina videos komprimerades i Adobes Media Encoder, andra var redan tillräckligt komprimerade när jag exporterade dem från Canva. Beroende på innehåll så har mina videos till specifikt denna hemsidan, skapats i antingen Canva eller Adobe Express. Vissa lades in direkt i WordPress för att slippa det fula gränssnittet som kommer med YoutTube, men vissa längre videos fick gå igenom YouTube för att inte göra hemsidan långsam.
STEG 9
Steg 9 var att få feedback för att förstå vad som inte var bra med hemsidans utseende. Genom användartester upptäckte jag bl a att typsnittet Baumans orsakade ett visuellt ’glitch’ (så kallat FOUT) för förstagångsbesökare innan browsern hinner ladda det.. Efter omfattande felsökning och kodjusteringar valde jag att istället implementera en preloader. På så sätt hinner hemsidan renderas klart i bakgrunden, vilket garanterar att användaren möts av en polerad, friktionsfri upplevelse från allra första sekunden.
LÄRDOMAR
Väldigt mycket i detta projektet gjorde jag för första gången. Att lösa hosting, kategorisera hemsidan så att den inte blockerades, minska storleken på bilder och videos med mera var lärorikt. Jag vill inte påstå att det kommer gå snabbare nästa gång, men jag bör nog snabbare kunna ta beslut kring vad jag ska göra. I detta projektet gick mycket tid åt att kolla upp vilka tillägg som var säkra, vilket hostingföretag som hade bra säkerhet och vilket företag som erbjuder säkra lösenordshanterare.
Jag arbetade under tidspress, vilket gjorde situationen stressig. Att genomföra ett så omfattande förstagångsprojekt på endast tre veckor, parallellt med övrigt examensarbete, var en intensiv men lärorik utmaning. Den viktigaste strategiska lärdomen jag tar med mig framåt är hur avgörande det är att realistiskt tidsestimera och avgränsa komplexa uppgifter redan i planeringsfasen. För att få det exakt så som jag ville ha det, så tog det närmare 6 veckor. Det blev också en del tidsfördröjning då det tog någon dag att få tillgång till hosting, domän och någon dag ytterligare att få hemsidan listad som säker så att brandväggen kunde släppa igenom mig.
Allt jag gjorde var med framtida e-handels- och kundprojekt i åtanke. För en portfolio är kanske inte säkerheten så viktig som jag gjorde det. Men för ett riktigt företag bör det ha hög prioritet, därför ville jag lära mig hur man gör allt rätt redan här.