Projekt / Portfolio Webbplats
För nyfikna som vill se idéer förvandlas till genomtänkta digitala lösningar
Design av en personlig och responsiv portfolio där visuellt uttryck, tydlig struktur och användarvänlighet samverkar.
Behov att presentera arbete och kompetens som digital designer på ett strategiskt och professionellt sätt. Genom att lyfta fram designprocess, metoder och lärdomar bidrar till transparens.
Målsättning
Målgrupp
Arbetsgivare, rekryterare och uppdragsgivare inom design eller organisationer/verksamheter för snabb överblick för beslutsfattande, samt andra designers för nyfikenhet och inspiration.
Genomförande
Projektet struktureras enligt WSB-struktur med 100% regeln med fyra arbetspaket bestående av planering, design, utveckling och leverans, samt med sex tillhörande milstolpar.
En priority guide togs fram för att skapa en innehållshierarki, planera HTML-strukturen och underlätta den responsiva designen, med användarens behov i fokus, innan wireframes kan tas fram.
Varje sida hade även en egen målsättning över vad åstadkomma. Detta underlättade prioriteringen.
Webbplatsen designas utifrån mobile-first principen, vilket innebär att även wireframes utgår från denna princip. Detta för att inte behöva kompromissa med strukturen och innehållshierarkin när skärmen är komprimerad.
Wireframen bestod av vardera sidornas layout, placering av rubriker, text, knappar och bilder innan den visuella identiteten kunde tas fram.
En visuell identitet skapades för att ha en genomgående design som underlättar vid kodning. Den visuella identiteten innehöll:
Vid utveckling av webbplatsen var den visuella hierarkin betydande då användare ofta skannar innehåll, snarare än att läsa allt i detalj. För att styra användarens uppmärksamhet tillämpades gestaltningsprinciperna storlekskontrast, färgkontrast och styrkekontrast för att skapa skillnad mellan olika informationsnivåer.
Gestaltningslagar som likhetslagen och slutenhetslagen användes på återkommande kort, sektioner och komponenter för att enklare definiera relaterbart innehåll och skapa en tydlig förståelse över webbplatsens struktur.
Kodningsprocessen innebar några avvikelser från ursprungliga wireframes eftersom vid tillägg av faktiskt innehåll krävdes ändringar för att bland annat skapa visuell balans, läsbarhet och god tillgänglighet.
Responsivitet
Webbplatsen utvecklades enligt mobile-first-principen med CSS media queries för att anpassa layouten till mobil, surfplatta och desktop. Flexbox och Grid användes för att skapa flexibla layouter som fungerar på olika skärmstorlekar.
Tillgänglighet
Semantisk HTML, sidrubriker, enkla navigeringsmöjligheter, beskrivande alt-texter, ARIA-attribut och :focus-visible användes för att förbättra tillgängligheten. Färgkontrasterna kontrollerades med WebAIM Contrast Checker och HTML- och CSS-koden validerades med W3C:s verktyg.
Test och justeringar
Under utvecklingen testades webbplatsen kontinuerligt på olika skärmstorlekar. Tester visade bland annat att texten på projektsidan behövde flyttas under bilden för att förbättra läsbarheten och resultatsektionen på en projektsida ändrades från horisontell till vertikal layout eftersom bilder och text annars blev för små på mindre skärmar.
Kodstruktur
Pseudo-klassen :root användes för att definiera CSS-variabler för att samla färger, typsnitt, avstånd och andra återkommande värden på ett ställe. Det underlättade ändringar och bidrog till en mer konsekvent design genom hela webbplatsen.
Användning av källor
Claude och ChatGPT användes som stöd för kodutveckling och felsökning, främst i JavaScript och CSS. AI användes inte för design, innehåll eller bilder. Den genererade koden behövde granskas, testas och anpassas eftersom vissa lösningar var komplexa eller inte fungerade.
Utöver AI användes Boxicons för ikoner, Google Fonts för typsnitten Montserrat och Manrope, samt W3Schools formatterare för HTML och CSS. Bilderna är egna fotografier och illustrationerna skapades i Procreate och Figma.
