Dokumentation
Personlig Porfolio
Æstetik
Styleguide
Hjemmesidens udseende, er der kørt med forholdsvis samme styleguide fra min prototype, når det kommer til farvevalg og typografi. Visuelle elementers egenskaber er derimod justeret en smule, som kanter og størrelser.
Farver
Det har været klart fra start, at temaet skulle være "darkmode", og mine værdiord skulle gerne være moderne og enkelte. I farvesammensætningen har jeg gjort brug af et farvesammenligningsværktøj fra coolor.co, der sikre at kontrasten passer bedst muligt ift. læsevenligheden. Jeg har valgt en bred vifte af farvevalg, der åbnede mine valgmulighederne op mht. kant- og skyggeindstillinger i min kodning.
Typografi
Typografien er indhentet fra Google Fonts og her har jeg brugt en af mine favoritter - nemlig Poppins, som er en meget populær typografi, der har en god alsidighed og moderne udseende.
Designelementer og styling
Mine knapper er lavet enkelte og ikke for frembrusende, så det giver den besøgende unødvendig forstyrrelser til at se og læse på siden. Men der er derimod valgt en hover-effekt for netop at vise interaktion, såsnart musen er over eller der trykkes. Mine indramning er der brugt en mindre skygge for at forenkle designet også udfra gestalt lovene om lukkethed ved at elementerne er inde i indramningen.
Metoder
I opstillingen af elementer er der benyttes Aida modellen til at påvirke den besøgende i en bestemt retning, idet først bruges der "attention" ved at lave en animation og billede i starten af hjemmesiden. Dertil søges "interessen" øget ved at bruge en venstre linje med sektionsopdeling, der skal føre den besøgende igennem min udstilling. For at skabe et ønske om at få mere at vide eller se mere af mit indhold, da bruges der videomateriale til at fremkalde den følelse. Til sidst søges en "action" ved at fremvise seneste projekter, og derved få den besøgende ind i min procesforløb, der kan sætte tankerne i gang.
Andre metoder som getaltlovene og prinsippet om gentagelse er også tænkt ind i opsætningen af layout. Loven om lukkethed bruges bl.a. på forsiden med sektionsopdeling, også bare herinde hvor emnerne indrammes.
Layout
Responsivt design
Hjemmesiden er ikke under princippet mobile-first, da det gerne skulle appellere til en bestemt målgruppe, der oftest sidder bag en computer fremfor en mobilskærm. Siden er dog skabt og tilpasset til at kunne benyttes på alle enheder - herunder mobilskærm, tabletskærm og desktopskærm.
Wireframes
Skitsearbejde har mest foregået i Figma, hvor mit koncept og layout kunne komme til udtryk. Derigennem dannes et god grundlag før kodningen.
Planlægning
Planlægning af projektet
Planlægningen af projektet er opdelt i flere faser fra uge 37 til uge 40, hvor hver fase følger en struktureret udviklingsproces. Samtidig blev en product backlog oprettet for at holde styr på nødvendige user stories og features.
Uge 37 - Planlægning
Fokus var på idéudvikling, målgruppeanalyse og research. Dette omfattede at besvare spørgsmål som:
- Hvem er min målgruppe?
- Hvad vil jeg gerne vise frem?
- Hvordan skal jeg strukturere indholdet?
Der blev udarbejdet LO-FI wireframes for at give et overblik over layout og navigation. Samtidig blev backloggen oprettet med prioriterede user stories, hvilket lagde fundamentet for udviklingsprocessen.
Uge 38 - Prototype/Sketching
Her blev Figma wireframes udviklet for at teste og raffinere designet. Den visuelle identitet blev fastlagt, herunder valg af farver og typografi. Indholdet begyndte også at tage form. I denne fase blev frontend-design og navigation grundigt testet, og backloggen blev opdateret baseret på de indsamlede indsigter.
Uge 39 - Produktion
Denne uge markerede starten på den egentlige udviklingsproces, hvor frontend blev udviklet ved hjælp af HTML, CSS og JavaScript. Der blev samtidig arbejdet med indholdsskabelse, og kodedokumentation blev udarbejdet for at beskrive systemets struktur og funktionalitet.
Uge 40 - Justeringer og aflevering
Hjemmesiden blev testet for funktionelle fejl og responsivt design. Feedback blev indsamlet fra testbrugere og implementeret i løbet af ugen. De sidste justeringer og optimeringer blev foretaget, inden den endelige aflevering. Backloggen blev brugt til at sikre, at alle user stories og nødvendige features var implementeret.
Denne strukturerede udviklingsproces, kombineret med en dynamisk backlog, sikrede en effektiv og målrettet gennemførelse af projektet.
Interaktion
Tekniske overvejelser
Under oprettelsen af min hjemmesides forside stod jeg over for en udfordring: hvordan kunne jeg bedst præsentere mig selv og fange besøgendes opmærksomhed øjeblikkeligt?
Mit svar var, at forsiden var afgørende for at opnå denne øjeblikkelige opmærksomhed, så derfor dedikerede jeg meget tid til at forfine topsektionen. Jeg eksperimenterede med forskellige animationer i Figma, så som forskellige bevægelseskurver med ease-in, der kom fra siderne eller ovenfra. Til navigation valgte jeg oprindeligt en stak-funktion, der gradvist foldede sig ud fra toppen, når siden blev loadet.
Løsning
For at forbedre brugeroplevelsen fjernede jeg navigationsanimationen og implementerede i stedet en opadgående og nedadgående ease-in-animation. Dette skabte en mere forsigtig og reduceret forsinkelsestiden fra animationens start.
Disse tilpasninger var afgørende for at sikre, at de besøgende kunne engageres straks ved ankomsten til forsiden af min hjemmeside.
Afslutning
Refleksion og konklusion
Mange overvejelser er inddraget i mine forberedelser, herunder hvilken struktur og hvilke dele, der skulle bruges og ikke bruges. Derfor var det oplagt at lave wireframes, der gjorde det nemt og tilgængelig, når jeg skulle i gang med at kode.
Refleksion
I refleksionen over denne oplevelse indså jeg, at selv i et personligt projekt kan skabelsen af moodboards og lignende virke afgørende. De kan bidrage til at skabe en mere personlig og autentisk præsentation på hjemmesiden.
Konklusion
Min konklusion var, at det er væsentligt at tænke på modtageren og afsenderen, især i forhold til at eksperimentere med alternative tilgange. Det er vigtigt ikke kun at acceptere det første man kommer på, men også at åbne op for nye indgangsvinkler og muligheder, at prøve forskellige løsninger af. Dette kan føre til en dybere forståelse eller en anderledes tilgang til de specifikke overvejelser.
Hvad fik jeg så ud af dette forløb?
- Forbedret mine evner i grafiskdesign
- Forstærket mine kompentencer indenfor kodning
- Mere klarhed omkring konceptudvikling
