03 / Digitalt design & UI

8 medier · træk eller brug pilene

MinByMedias nye side Vores medier med stor typografi og mørkeblåt udtryk — Den nye side ‘Vores medier’ samler byerne i et tydeligt redaktionelt univers.

Flowet gennem det nye website og overblikket over de lokale medier.

Det nye visuelle udgangspunkt for MinByMedia.dk.

Kortet formidler både geografi og rækkevidde.

Byoversigten samler rækkevidde, redaktioner og genveje til de enkelte medier.

Filtrering af cases efter søgning, by og kampagnetype.

Den nye casefiltrering i brug på tværs af byer og kampagnetyper.

Priser kan filtreres efter by og kategori.

01 / 08

← Alle projekter

Digitalt design & UI

MinByMedia.dk

Et stort webprojekt med nyt design, medieoverblik, filtrering, prissider og et interaktivt Danmarkskort.

Kunde: MinByMedia
Min rolle: Webdesign · UX/UI · WordPress · Frontend
Værktøjer: Figma · WordPress · Codex
Forløb: Praktik · Redesign & udvikling
Fokus: Redesign · UX/UI · Informationsarkitektur · Filtrering · Interaktivt Danmarkskort · Responsive layouts · Vedligeholdelse

Om projektet

Et stort webprojekt med nyt design, medieoverblik, filtrering, prissider og et interaktivt Danmarkskort.

Jeg har redesignet MinByMedias eksisterende website og udviklet et nyt visuelt og digitalt udtryk med fokus på et mere overskueligt medieunivers, tydeligere struktur og en bedre brugeroplevelse. Jeg arbejdede med hele processen fra idé og design i Figma til opbygning og implementering i WordPress. Undervejs har jeg også brugt Codex som udviklingsværktøj til blandt andet funktionalitet, styling og videreudvikling af løsningerne.

Fra redesign til nyt site

Jeg stod for redesignet af MinByMedias eksisterende website og var med til at bygge det nye site. Jeg udviklede det visuelle udtryk og designede blandt andet navigation, medieoverblik og løsninger til cases, priser og præsentationen af MinByMedias lokale rækkevidde.

Overblik i meget indhold

Cases og prisprodukter skulle kunne findes på tværs af byer og kategorier. Derfor designede jeg en tydelig filtrering med søgning, chips og dropdowns, så brugeren hurtigt kan indsnævre indholdet.

Det interaktive kort

Danmarkskortet samler MinByMedias byer, besøgstal og følgere i én visuel indgang. Kontrasten mellem kortets områder, markørerne og informationsboksen gør dataene lette at afkode uden at miste det redaktionelle udtryk.

Besøg MinByMedia.dk

Arbejdsproces

Fra wireframe til færdigt website.

Jeg begyndte med enkle wireframes for at afklare struktur, søgning, filtrering og indholdshierarki. Derefter arbejdede jeg løsningerne igennem visuelt i Figma, før de blev bygget og videreudviklet i WordPress.

Tidlig wireframe til MinByMedias caseside med søgning, filtre og casegrid — Casesiden blev først skitseret som et enkelt flow med søgning, filtre og et fleksibelt grid.

Tidlig wireframe til MinByMedias prisside med filtrering og prisliste — Wireframe til prisoversigten med fokus på filtrering og et enkelt, skalerbart indholdshierarki.

Tidlig wireframe til MinByMedias medieoversigt med filtre og kort — Medieoversigten blev planlagt som et modulært grid, der kunne rumme alle lokale medier.

Figma-mockup af MinByMedias caseside med filtre og udvalgt case — I Figma blev wireframen omsat til MinByMedias visuelle univers med typografi, farver og casepræsentation.

Figma-mockup af MinByMedias specifikationsside med bannerformater — Mockup til specifikationssiden, hvor mange annonceformater skulle organiseres tydeligt og ensartet.

03 · WordPress

Den færdige løsning i WordPress viser, hvordan wireframes og Figma-design blev omsat til et fungerende website.