Kreuzbär

Opsummering

Dette gruppeprojekt gik ud på at redesigne websitet for caféen Kreuzbär i Aarhus. Deres eksisterende site fremstod rodet og dårligt optimeret til mobil, så målet var at skabe en mere intuitiv oplevelse. 

Vi havde fokus på responsivt webdesign og på at skabe en tydelig visuel identitet, der understøtter caféens unikke, retroinspirerede univers og oplevelsen af Kreuzbär som mere end blot en kaffebar.

 

Min rolle

Jeg var involveret gennem alle faser af processen, men havde særligt fokus på UX og programmering og arbejdede især med:

Brugerindsigt og UX: Desk research, semistrukturerede interviews, brugerportrætter, persona, sitemap, tænke-højt-test.

DesignSkitser, udvikling af moodboard og udkast til farvepalette med inspiration fra 70’er-berlineræstetik, udvikling af favicon.

Programmering: Kodning af header og desktop-navigation samt forside og “Historien bag”-side. Implementering af responsivt layout med fokus på breakpoints. Udvikling af designelementer, der tilpasser sig skærmstørrelse (fx cirkler og linjeelementer).

 

Klik for at forstørre billederne.

Historien bag – screenshot fra vores site
Udsnit fra siden "Historien bag" med layout, jeg har programmeret med HTML og CSS.
Screenshot fra det nuværende site kreuzbär.dk
Screenshot af det gamle site – kreuzbär.dk
Kreuzbär persona – Anne
Personaen Anne, der søger en café med sjæl og nem adgang til info om caféen, herunder menu, åbningstider og events.
Screenshot fra vores løsning
Screenshot af vores løsning med sammenhængende visuel identitet, forståeligt layout og responsiv opbygning.

Værktøjer

  • Figma til wireframes, mockups og prototype
  • Illustrator til favicon
  • HTML og CSS til kodning af hjemmesiden
  • GitHub til fælles kodearbejde

 

Detaljer

  •  Projekt: Responsive Web Design, 1. semester, forår 2025
  • Varighed: 3 uger
  • Projekttype: Gruppeprojekt (4 personer)
  • Fokusområder: Responsivt design, visuel identitet og storytelling
  • Produkt: Live website, Figma-prototype, rapport samt præsentations- og stemningsvideo