Lumina
landing
page
En moderne landingpage og visuel identitet udviklet til Lumina Audio – et fiktivt brand for trådløse højttalere.
Musik som en del af hverdagen.
Ideen var at skabe et moderne og visuelt sammenhængende univers for Lumina Audio – en fiktiv virksomhed, der sælger trådløse højttalere.
Landingsiden skulle gøre produktet let at forstå, men samtidig skabe en stemning omkring brandet og vise højttaleren som en del af brugerens hverdag.
Derfor arbejdede jeg både med selve produktpræsentationen og med et lifestyle- orienteret visuelt udtryk.
Fra visuelt koncept til færdig kode.
Jeg startede med at udvikle retningen for Luminas visuelle identitet og arbejdede derefter med struktur, brugerrejse og layout.
Løsningen blev først designet i Figma. Derefter omsatte jeg designet til HTML, CSS og JavaScript og tilpassede siden til forskellige skærmstørrelser.
Blødt, moderne og socialt.
Det visuelle udtryk kombinerer varme, støvede farver med et enkelt layout og tydelige produktbilleder.
Jeg ønskede, at Lumina skulle føles mere som et lifestyle-brand end som en traditionel elektronikbutik.
Derfor er produktet sat ind i sociale situationer, mens farver og typografi binder hele oplevelsen sammen.
Tydeligt produktfokus
Højttaleren og de vigtigste budskaber placeres centralt i brugerens første møde med siden.
Lifestyle
Produktbilleder kombineres med mennesker og stemning, så brandet får mere personlighed.
Visuelt hierarki
Store overskrifter, kontrast og luft hjælper brugeren gennem landingssiden.
Fra første idé til færdig løsning.
Lumina var et individuelt projekt, hvilket betød, at jeg selv stod for hele processen fra den første visuelle idé til den implementerede landingpage.
Visuel identitet
Udvikling af farver, stil og det samlede visuelle univers omkring Lumina Audio.
UX/UI-design
Strukturering af brugerrejsen samt design af sektioner, navigation og call-to-actions.
Figma
Udvikling af det visuelle design og prototype før kodningen begyndte.
Frontend
Implementering af designet med HTML, CSS og JavaScript.
Responsivt design
Tilpasning af layoutet, så oplevelsen fungerer på forskellige skærmstørrelser.
Detaljer & finish
Arbejde med spacing, typografi, billeder og visuelle detaljer i den færdige løsning.
Det jeg tog med videre.
Projektet gav mig erfaring med hele processen fra design til implementering. Det gjorde det tydeligt, hvor vigtigt det er at tænke design og udvikling sammen allerede fra begyndelsen.
Jeg blev især mere bevidst om responsivt design og om, hvordan et layout, der fungerer godt i Figma, ikke nødvendigvis fungerer på samme måde, når det bliver omsat til kode.