Kogebog Hjemmeside
En fuldt responsiv landingpage kodet i HTML, CSS og JavaScript med BrandScript-metoden fra Donald Millers "Marketing Made Simple". Projektet inkluderer responsive webdesign, parallax effekter, JavaScript animationer, SEO-optimering og print-styling – langt ud over opgavens krav.
Om projektet
En landingpage til min deluxe kogebog udviklet med BrandScript-metoden fra Donald Millers "Marketing Made Simple". Projektet bestod af fire faser: BrandScript udvikling, SoMe-opslag, XD design og HTML/CSS kodning.
BrandScript Development
BrandScript'et fungerer som strategisk fundament og beskriver:
- Hvem din kunde er – Målgruppe og behov
- Hvilke problemer de har – Udfordringer kogebogen løser
- Hvordan kundens liv bliver bedre – Transformation
- Hvilken handling kunden skal tage – Call-to-action
SoMe-opslag med BrandScript-slogan
Næste trin var at omsætte BrandScript'et til et SoMe-opslag (billede eller kort video), der skulle vise målgruppens transformation – hvordan de går fra deres nuværende situation til noget bedre ved hjælp af kogebogen.
Elementer i SoMe-opslaget
SoMe-opslaget skulle vise målgruppens transformation med:
- Transformationsbudskab – Visuelt udtryk for forandringen
- Slogan – Kort og fængende
- Rød tråd – Konsistens med BrandScript
- Call-to-action – Opfordring til handling
Design af Landingpage i Adobe XD
Landingpagen skulle kommunikere:
- Hvad kogebogen handler om – Klar introduktion
- Hvordan den hjælper målgruppen – Værdi
- Slogan og budskab – Fra BrandScript
- Tydelig call-to-action – Handling
Kodning i HTML og CSS
XD-designet blev kodet fra bunden uden frameworks:
- HTML struktur – Semantisk kode
- CSS styling – Matcher XD-designet
- Desktop-fokus – Kun desktop-version påkrævet
- Ren kode – Ingen frameworks
Ekstra funktionalitet – ud over opgavekravene
Da jeg blev færdig tidligt, tilføjede jeg:
- Responsiv design – Mobil, tablet og desktop
- Parallax effekt – CSS parallax scrolling
- Fade-in/fade-out – JavaScript animationer
- SEO optimering – Meta tags og structured data
- Print styling – @media print CSS
Udfordringer & læring
BrandScript-metoden krævede marketingtænkning – hvem er kunden, og hvordan kommunikerer jeg effektivt? At omsætte XD-design til pixelperfekt kode krævede tålmodighed. Responsiv design, parallax og JavaScript uden frameworks lærte mig CSS media queries og performance-optimering.
Resultatet
En fuldt responsiv landingpage med animationer, SEO og print-styling – langt ud over opgavekravene. Projektet viste mine evner inden for strategi, design, kodning og teknisk optimering.
Tekniske detaljer
Grundkrav til opgaven:
- BrandScript: På engelsk, baseret på Donald Miller's framework
- SoMe-opslag: Billede (PNG/JPG) eller video (MP4)
- Design: Adobe XD landingpage med wireframe som udgangspunkt
- Kodning: HTML og CSS (ingen frameworks)
- Responsivitet: Kun desktop-version (ikke påkrævet)
- Leveringsformat: HTML/CSS-filer samt eventuelle billeder
Ekstra funktionalitet jeg tilføjede:
- Responsiv design: Media queries for mobil, tablet og desktop
- CSS Parallax: Parallax scrolling effekt med CSS
- JavaScript animationer: Fade-in og fade-out effekter
- SEO optimering: Meta tags, semantisk HTML, structured data
- Print styling: @media print CSS for optimal udskrift
- Performance: Optimeret billeder og kode