FAGOMRÅDER:
Interaksjonsdesign, frontend-utvikling, responsivt webdesign, HTML5, CSS3
VERDIORD:
Brukervennlighet, tilgjengelighet, struktur, enkelhet, responsivitet
MÅLGRUPPE:
Besøkende og potensielle kunder av Korres sine produkter, med fokus på brukere på både mobil og desktop som ønsker tydelig kampanjeinformasjon og enkel navigasjon.
PROBLEMSTILLING:
Hvordan kan man utvikle en responsiv kampanjenettside for Korres ved hjelp av HTML og CSS i VS Code, som gir en god brukeropplevelse på både mobil og desktop, samtidig som kampanjen og produktene presenteres på en tydelig og visuelt tiltalende måte?
VERKTØY:
HTML5, CSS3, VS Code, Figma
OPPGAVEBESKRIVELSE:
Oppgaven gikk ut på å planlegge, designe og kode en responsiv kampanjenettside for et emballasjedesign utviklet i tema 8. Nettsiden bygger videre på en prototype laget i Figma i faget Digitale prototyper, og skulle nå realiseres i kode ved bruk av HTML5 og CSS3. Målet var å overføre det visuelle uttrykket fra prototypen til en fungerende nettside som er tilpasset ulike skjermstørrelser og enheter.
I arbeidet med kampanjenettsiden tok jeg utgangspunkt i den eksisterende Figma-prototypen og strukturerte siden i tydelige seksjoner som header, hero, om kampanjen, produkter og footer. Før koding gikk jeg gjennom layouten for både mobil og desktop for å sikre at hierarki, spacing og navigasjon var logisk bygget opp.Jeg fokuserte på å holde HTML-strukturen semantisk og ryddig, samtidig som jeg brukte CSS Grid og Flexbox for å skape fleksible løsninger. Underveis testet jeg siden kontinuerlig i ulike skjermstørrelser for å justere plassering, tekststørrelser og interaksjonselementer.
Den ferdige kampanjenettsiden er bygget med HTML5 og CSS3, med fokus på responsivitet og brukervennlighet. Ved hjelp av media queries tilpasses layouten automatisk til både mobil og desktop, slik at innholdet alltid fremstår oversiktlig og lett tilgjengelig.CSS Grid brukes til produktvisning, mens navigasjon og knapper er optimalisert for både berøring og større skjermer. Bilder er tilpasset ulike skjermstørrelser for bedre lastetid og ytelse. Resultatet er en funksjonell og visuelt helhetlig kampanjeside som formidler Korres sin kampanje på en tydelig og profesjonell måte, og som gir en god brukeropplevelse på tvers av enheter.
