Tilbage til projekter

Newsletter sign-up form

Mine roller:

Frontend-udvikler

Løsning:

Med et udleveret skræddersyet design af en denne sign-up form, havde jeg nu til opgave at gøre den interaktiv ved at udvikle et funktionelt produkt. I min frontend-løsning kombinerede jeg HTML, CSS og JavaScript for at bringe designet til live. Ved hjælp af klar strukturering i HTML, moderne styling med CSS, og dynamisk funktionalitet gennem JavaScript, skabte jeg en brugervenlig brugeroplevelse, der gør tilmeldingsprocessen både nem og engagerende.

Se processen

Træt af at scrolle?...

FRONTEND-UDVIKLING

Forstå designet

Som frontend-udvikler analyserede jeg designet for at forstå de visuelle elementer og funktionaliteter. Jeg startede med at identificere og opdele designet i komponenter som knapper, formularfelter samt tekststyling derudover. Her er processen der gav mig et klart overblik over, hvilken kode jeg skulle bruge i HTML, CSS og JavaScript for at realisere designet effektivt.

HTML: Jeg opsatte den nødvendige HTML-struktur som passede til dette produkt, som bl.a. bestod af to overordnede "containers". En der skulle vise tilmeldingsformularen, og efter den var udfyldt, så vil den første container forsvinde og vise den anden container hvori en "Succes"-pop-up vil vises.
CSS: Jeg implementerede responsiv styling ved hjælp af "media queries", hvilket gjorde det muligt at tilpasse designet til forskellige skærmstørrelser. Derudover stylede jeg også med forskellige farver og typografi.
JavaScript: Jeg tilføjede interaktivitet ved at implementere funktioner som klikbare knapper gennem "eventListeners" samt "preventDefault" til at vise og skjule indhold brugergrænsefladen.

Billede af aktiviteten i tilmeldingsformularen

Billede af succesmeddelelse i tilmeldingsformularen

Variabler & farver

Med udleverede farvekoder, font og ønsker om fontstørrelser, startede jeg ud med at opsætte farvekoderne i ":root", så jeg nemmere kunne tilføje farverne til de forskellige elementer og classes. Derudover opsatte jeg generel styling for nogle få elementer som vist i den nedenstående figur.

Billede af variabler og farver under root i CSS til tilmeldingsformularen

Responsivitet

Et andet fokuspunkt var også at gøre produktet responsivt, så tilmeldingsformularen både vil fungere for folk der bruger forskellige enheder som mobil, tablets og laptops/computere. Figuren nedenfor viser en “media query” i mit “CSS-sheet”, hvor jeg indsætter alt den kode der skal fungere til mobil, når vi kommer under de 768px.

Funktionalitet

Funktionaliteten spillede en afgørende rolle i dette produkt, da brugeren skulle kunne navigere gennem grænsefladen på en måde, der føltes intuitiv og problemfri. Ved hjælp af JavaScript var det muligt at skabe en interaktiv oplevelse, der dynamisk reagererede på brugerens handlinger. Her var det primært knapperne der skulle skabe den store funktionalitet og føre brugeren videre.

I den nedenstående figur vises der et "JavaScript-sheet" der benytter "eventListeners" og "preventDefault" til at udføre handlinger ud fra interaktioner med knapperne samt gemme indhold, når man kommer videre til næste trin i tilmeldingsformularen.

Billede af funktionaliteten i JavaScript til tilmeldingsformularen