Destination Sønderjylland arbejder med at reklamere for aktiviteter og oplevelser i Sønderjylland. De ville have os til at hjælpe dem.
De bad os om at gøre deres hjemmeside mere moderne og mere interaktiv. Derudover skulle kunderne blive inpireret mens de befandt sig i by i sønderjylland f.eks. Sønderborg. Endeligt ønsker de styrke kontakten med de besøgende så de kommer tilbage. Men der skulle være noget nyt så børnefamilier ville være i fokus
Vi havde fokus på 2 personer, et barn mig og min gruppe valgte som vores Primære: Jonas, 6 år. Ud fra ham lavede vi User Stories, Value Proposition Canvas og Empathy maps for at forstå hans pains og needs i forhold til ferie og ferie ønsker.
Så som: Han vil være med i beslutninger, han vil gerne se billeder af aktiviterne og en mere overskuelig ferie. Derudfra lavede vi første version af børneskyen og derefter efterarbejdede jeg på den og lavede den færdige version.
Her lavede vi også User Stories, Value Proposition Canvas og Empathy maps. Vi derudfra fandt ud af at hendes mål for ferien var at have en god ferie på et budget, at hun kunne finde aktiviter og priser, simpelt og nemt. Det var vigtigt for hende at Jonas havde mulighed for at være med hele turen og aktiviterne var inde for hans aldersgruppe.
Derudfra kiggede vi mest fra hendes synsvinkel i forhold til forsiden og mere til Jonas for Børneskyen som vi brugte som vores primære projekt
Der var mange problemer der gik rundt, og et godt projekt starter altid med god inspiration, så der blev fundet lidt af hvert, der var inspiration med fokus på natur og med fokus på moderne. Vi delte det forskellige inspiration ind i flere katagorier så det var lettere at finde ud af hvilke elementer vi kunne lide og hvilke der var overflødige
Vi besluttede efter at afprøve forskellige temaer at simpel og moderne var den bedste vej at gå.
SCRUM hjalp os med at holde styr på tiden og prioriteringen af opgaverne i projektet. Det gjorde det nemt at se, hvilke opgaver der skulle laves først, og hvilke der var vigtigst. Samtidig gav det os klare rammer for, hvem der skulle lave hvad, og hvor lang tid det ville tage.
Det smarte ved SCRUM var også, at man kunne tage opgaver tilbage i sprintloggen, så hvis nogen stødte på problemer, kunne en anden hurtigt overtage opgaven.
Vi brugte Crazy 8 metoden til idegenerering og udvikling af nye idéer. Processen blev gentaget flere gange, og selvom det var ret intensivt, gav det os meget tilbage i form af nye perspektiver og løsninger. Vi fik også virkelig god feedback undervejs, hvilket hjalp os med at raffinere idéerne yderligere.
Det viste sig at være en effektiv måde at bryde fri af gamle tankemønstre og finde på noget nyt. Metoden gjorde uden tvivl designprocessen skarpere og mere kreativ.
På gif'en ved siden af vises fem forskellige designversioner, udvalgt fordi de er de mest unikke, selvom vi lavede mange flere.
1. Første version fulgte designtrends som bentobox metoden, men vi var ikke tilfredse med børnebanneret og skulle afgøre, hvilke elementer der var vigtigst.
2. Vi justerede fokus mod børnebanneret og Stjernebilletten.
3. Ny header med fokus på at inspirere kunderne. Børnebanneret blev opdateret, og bentobox blev flyttet længere ned som en guide.
4. Vi besluttede, hvilke elementer der skulle beholdes eller fjernes, samt opdaterede farver og tilføjede et nyt tema for sociale medier.
5. Final version gik tilbage til den første header med fokus på ferieinspiration. Børnebanneret blev mere interaktivt, farverne blidere, og der var større fokus på Stjernebilletten og sociale medier, men guiden og bentobox blev fjernet.
Color tokens i Figma er utroligt nyttige, fordi de sikrer, at farver bliver brugt ensartet gennem hele designprocessen. De fungerer som foruddefinerede farvekoder, der gør det nemt at opretholde en visuel konsistens på tværs af forskellige elementer og sider i et projekt. Når du bruger color tokens, kan du hurtigt anvende de samme farver uden at skulle vælge dem manuelt hver gang, hvilket sparer tid og mindsker risikoen for fejl.
En af de store fordele er også, at hvis du ændrer en farve i dit system, vil den automatisk blive opdateret overalt i designet, hvor den er brugt, hvilket gør det meget lettere at foretage globale designændringer. Dette gør color tokens til et uundværligt værktøj i enhver designproces, hvor både effektivitet og konsistens er vigtigt.
Text tokens i Figma fungerer som en fast opsætning af tekststilarter, der sikrer konsistens og præcision i typografien på tværs af både desktop og mobile enheder. De definerer parametre som skriftfamilie, farve, skriftstørrelse, vægt og tekstdekoration, hvilket gør det nemt at bruge den samme typografi overalt i et design.
Fordelen ved text tokens er, at de gør det let at ændre eller opdatere typografi globalt – hvis du justerer en tekststil, opdateres den automatisk overalt, hvor den er brugt. Dette sparer tid og sikrer, at designet altid er visuelt sammenhængende. Uanset om det er overskrifter, brødtekst eller links, sørger text tokens for, at der er en klar struktur og hierarki i typografien, både på desktop og mobil. Dette er især vigtigt, når man skifter mellem forskellige skærmstørrelser, som vist på billedet, hvor fontstørrelsen og -vægten tilpasses til både store og små skærme for at optimere læsbarheden og brugeroplevelsen.
Komponent tokens i Figma sikrer konsistens og effektivitet ved at definere genanvendelige UI-elementer som knapper, kort og overskrifter. De gør det nemt at opdatere hele projektet—ændrer du én komponent, opdateres alle andre, hvilket sparer tid og bevarer ensartethed.
Tokens standardiserer udseendet og opførslen af vigtige elementer på tværs af desktop og mobil, hvilket sikrer en sammenhængende og forudsigelig brugeroplevelse.
BEM er virkelig smart, fordi det gør koden nemmere at holde styr på og mere struktureret. For eksempel har vi galleryText__title, der viser præcis, hvilket element der hører til hvilken sektion. Det betyder, at jeg ikke skal bekymre mig om, at stilarter blander sig eller skaber konflikter.
det også nemt at genbruge elementer, som galleryImages__image, uden at skulle ændre noget andet i layoutet. Plus, det er super nemt at skalere og tilpasse, så jeg kan tilføje nye funktioner uden at skulle rode med hele strukturen.
Her har vi lavet en CSS animation, hvor skyernes positioner bevæger sig langsomt hen over baggrunden for at skabe en dynamisk, levende effekt i banneren. Det her er lavet med en grid-layout, som gør det nemt at placere indholdet, og animationen sker over 15 sekunder i en uendelig loop, så skyerne altid er i bevægelse.
Skyernes baggrundspositioner starter ved bestemte steder (f.eks. 5%, 20%) og flytter sig hen til nye positioner over tid ved hjælp af @keyframes, så det ser ud som om, de glider hen over skærmen. Det giver en følelse af bevægelse og liv i designet, samtidig med at det forbliver subtilt og ikke distraherende. Ved at bruge linear infinite sikrer jeg, at animationen er jævn og kører uden stop, hvilket gør det perfekt til et børnevenligt banner, der skal være både sjovt og engagerende.
Vi har gjort børnebanneret responsivt ved at tilpasse layoutet afhængigt af skærmstørrelsen. Før ændringerne bruger banneret et simpelt grid-layout med én kolonne, der fungerer godt på mindre skærme. For større skærme, som telefoner over 700px, opdaterer vi layoutet til to kolonner, så indholdet præsenteres mere overskueligt.
Skyernes størrelse bliver også mindre, så de passer bedre på større skærme, og der tilføjes ekstra padding for at give indholdet plads til at ånde. Teksten i banneret tilpasses med en større skrifttype og ekstra spacing, hvilket gør det lettere at læse og mere visuelt tiltalende. Alt i alt sikrer disse ændringer, at banneret ser godt ud på både små og store skærme, og at brugeren får en optimeret oplevelse uanset enhed.
I dette projekt har vi arbejdet med forskellige designteknikker og metoder for at sikre en moderne og brugervenlig løsning til Destination Sønderjylland. Ved at fokusere på personaer som Jonas og Sophie, SCRUM projektstyring og idegenerering gennem Crazy 8, har vi opnået en solid designproces. Figma tokens og komponenter har hjulpet med at holde både farver og typografi ensartet, mens BEM og CSS-animation sikrede struktureret kode og en levende, interaktiv brugeroplevelse. Den responsive tilgang sikrede, at designet fungerer optimalt på tværs af enheder. Hvis du gerne vil se mere, her er vores Figma-fil.