Opgavebeskrivelse
Inden du kommer til workshoppen er det vigtigt du har gennemført nedenstående.
Vælg en af følgende brancher du vil arbejde med i workshoppen og undersøg UI tendenser indenfor den branche du har valgt.
- Servicevirksomheder (f.eks. Kaffebar, koncert, restauranter)
- Hobby butik/e-handel (det kan være indenfor din hobby)
- Håndværker forretning (f.eks. murer forretning, tømmer forretning)
- Offentlig institution (f.eks. Uddannelser, Kommuner, Sundhedssektoren)
Analyser følgende hjemmesider, herunder deres brug af tekst, farver og opsætning.
- Tre valgfri hjemmesider fra awwwards.com
- To (mindre gode) websites i selv finder
Jeg valgte at arbejde videre med 2. Hobby butik/e-handel med fokus på gaming da det er en af mine hobbyer
Det var fint nok at skulle side og samle inspiration til workshoppen og se tendenserne som går igen på hjemmesiderne.
Jeg var desværre ikke med på selve dagen så jeg laver det så godt jeg kunne hjemmefra.
Første del af opgaven har jeg undersøgt andre sider omkring gaming for at se hvordan de er opbygget.
Fælles UI træk for disse sider:
Store produktbilleder i fokus — ofte med mørk baggrund, så produkterne træder frem.
Hero-sektioner med highlights af nye produkter, kampagner eller populære kategorier.
Bruger rigtige billeder eller mockups, ofte med gamingmiljø eller RGB-lys for stemning.
Farvevalg:
Fælles brug af mørke baggrunde (#0A0A0A, #121212) som skaber en moderne gaming-æstetik.
Accenter i neonfarver som grøn, blå, lilla eller rød:
- Spawnpoint: neon-grøn og sort
- MaxGaming: blå/grøn highlights
- Game The Shop: orange og mørkeblå
Kontrasten bruges til at styre brugerens blik mod CTA-knapper og tilbud.
Typografi og tone
Bruger sans-serif fonte som Poppins, Inter eller Montserrat – moderne og teknisk udtryk.
Overskrifter er store og fremhævende (fx 48–72px), og CTA-knapper har klar, aktiv tekst: “Shop now”, “Køb”, “Explore”.
Tone of voice er kortfattet, direkte og energisk, ofte med gaming-slang eller udtryk:
“Find Your Edge”.
“Dominate the Game”,
“Gear Up”
Find 3 valgfrie hjemmesider på awwwards.com
Jeg valgte at finde 3 hjemmesider med lidt den samme stil.
Find 2 mindre gode sider
Jeg har bare fundet to. Den første fordi jeg har brugt den flere gange og jeg syntes den er forældet. Farverne harmonere ikke ordenligt, der mangler CTA og evt. en webshop. For mit vedkommende så gør hjemmesiden ikke det den burde.
Hjemmeside nr 2 er meget forvirrende og der er ingen af siderne som er responsive
Design en hjemmeside
Ud fra den valgte branche (se liste med brancher i ‘Forberedelse’), skal du designe en hjemmeside. Der er følgende krav til hjemmesiden:
- Du skal anvende et grid (i Figma), når du designer.
- Hjemmesiden skal være designet til både desktop og mobilversion.
- Brug den viden, du har opnået gennem undervisningen – hav særligt fokus på adfærdsdesign, visuel identitet og principper for brugervenlighed.
- Sørg for, at din hjemmeside i videst muligt omfang lever op til punkterne “Appearance”, “Color contrast”, “Mobile and touch” og “Animation” i A11Y Projects tjekliste (baseret på WCAG): a11yproject.com/checklist/
Jeg havde svært ved at komme videre da jeg sad hjemme alene og ikke havde nogen at sparre med.
Jeg kunne især godt lide Inkgames.com og sidens effekter med parallax og det ville jeg gerne gengive, men det drillede mig helt vildt, så jeg gik videre med en anden løsning.
Præsentation
Lav en præsentation af dit hjemmesidedesign.
Der er følgende krav til præsentationsformatet:
1) Dit design skal vises i device mockups (desktop og mobil).
2) Præsentationen skal være fængende og visuelt appellerende – tænk på den som en pitch af dit design!
3) Inkludér en kort beskrivelse af dine designvalg og begrund dem ud fra de principper, du har arbejdet med.
Din præsentation skal afleveres på ItsLearning.