Havblink

Fra idé til koncept (1)

Havblink Hvidvin er et dansk vinbrand med fokus på økologi, kvalitet og lokal produktion. Opgaven var at udvikle et responsivt website, der kunne formidle Havblinks identitet og samtidig gøre dansk hvidvin mere inspirerende og tilgængelig for målgruppen.

Jeg startede derfor med at undersøge målgruppen og deres forhold til vin gennem både kvantitativ og kvalitativ research. På baggrund af mine indsigter udviklede jeg blandt andet en persona, VPC og informationsstruktur, som blev brugt til at skabe retning for projektet. En central indsigt var, at målgruppen ikke kun var interesseret i selve vinen, men også i oplevelsen, historien og det visuelle omkring den. Derfor blev storytelling, æstetik og autenticitet centrale elementer i Havblinks digitale univers.

Den visuelle identitet (2)

Med udgangspunkt i min research begyndte jeg at udvikle Havblinks visuelle identitet. Jeg arbejdede ud fra nøgleordene idyllisk, kystnær og livsnydende, som skulle danne grundlag for den stemning, brugeren skulle møde på websitet.

Jeg brugte mindmap og moodboard til at undersøge forskellige visuelle retninger, før jeg samlede udtrykket i en styletile. Her arbejdede jeg blandt andet med naturinspirerede farver, teksturer og en kombination af elegant og funktionel typografi. Logoet blev udviklet som en del af samme proces, så identiteten kunne fungere på tværs af både website, produktbilleder og øvrigt indhold.

Fra idé til website (3)

Efter research og udviklingen af den visuelle identitet begyndte jeg at omsætte idéerne til et konkret digitalt design. Jeg startede med skitser og Crazy 8 for at afprøve forskellige idéer til layout, navigation og brugeroplevelse, før jeg udviklede dem videre i Figma. Herefter arbejdede jeg med high-fidelity mockups, hvor det visuelle udtryk blev kombineret med den funktionelle struktur. Jeg brugte blandt andet Photoshop til at udvikle og tilpasse det visuelle materiale, så billeder og grafiske elementer understøttede Havblinks samlede identitet.

Da designet var på plads, omsatte jeg det til et funktionelt website med HTML, CSS og JavaScript. Jeg havde særligt fokus på at bevare det visuelle udtryk fra Figma i den færdige løsning samt skabe et responsivt layout, der fungerer på tværs af desktop og mobil. Undervejs brugte jeg brugertest til at undersøge, om løsningen var forståelig og intuitiv. Testen viste blandt andet, at Havblinks mission, vision og værdier ikke stod tydeligt nok frem. Det gav mig mulighed for at justere designet og gøre brandets fortælling mere tydelig.

Semantisk HTML

Jeg brugte semantisk HTML5 til at skabe en tydelig struktur på websitet. Elementer som section, h2, h3 og p blev brugt til at organisere indholdet og skabe en meningsfuld struktur for både brugeren og browseren.

Responsive design

Jeg udviklede websitet responsivt, så indholdet kunne tilpasse sig forskellige skærmstørrelser. Jeg arbejdede blandt andet med CSS Grid, Flexbox og breakpoints.

På mobil blev navigationen blandt andet ændret til en burger-menu, mens forskellige sektioner blev tilpasset til et mere enkelt layout.

Navigation & interaktion

Navigationen blev designet med fokus på at gøre Havblinks mange informationsområder nemme at finde rundt i. Jeg udviklede en mega-menu til desktop og en burger-menu til mindre skærme.

Jeg arbejdede også med hover-effekter på knapper for at give brugeren tydelig visuel feedback.

REFLEKSION

Havblink var et projekt, hvor jeg fik mulighed for at samle UX, design og frontend i én samlet løsning. Jeg lærte især, hvor vigtigt det er at have et solidt fundament i research, før man begynder at træffe visuelle designvalg.

Brugertestene lærte mig også, at en løsning kan føles færdig for mig som designer, men stadig have områder, der ikke er tydelige for brugeren. Feedbacken gav mig derfor mulighed for at forbedre Havblinks storytelling og gøre brandets værdier mere synlige.

Havblink har især lært mig, at et godt digitalt produkt handler om mere end et flot visuelt udtryk. Det er samspillet mellem research, design, indhold og funktion, der skaber den samlede oplevelse.

Næste projekt →

HAVBLINK