Inden vi skulle møde til dages workshop havde vi fået lektier for.
Lektier
Lektier til dagen
Vælg en af følgende brancher du vil arbejde med i workshoppen og undersøg UI tendenser indenfor den branche du har valgt.
- Servicevirksomheder (f.eks. Kaffebar, koncert, restauranter)
- Tendenser
- Store hero-billeder/video med stemning og atmosfære
- Kort tekst + tydelig CTA – book bord, se menu, køb billet
- Farver – Afhænger af stemning – varme farver for hygge, mørke og kontrast for eksklusivitet.
- Responsivt design
- Små animationer – Hover-effekter, transitions, men uden at overdrive
- Hobby butik/e-handel (det kan være indenfor din hobby)
- Tendenser
- Store hero-billeder
- Grid-layout med produkter i fokus
- Klar visuel hierarki – stort produktfoto, pris, “Læg i kurv”
- Farver – Neutrale baggrunde med accentfarver til knapper
- Typografi, Sans serif – moderne letlæselig
- Fritering og søgning – hurtig adgang til produkter
- Personlig – Viser passionen for hobby, håndarbejde, gaming, musik
- https://www.lego.com/da-dk
- Håndværker forretning (f.eks. murer forretning, tømmer forretning)
- Tendenser
- Troværdighed og professionalisme i designet.
- Store billeder af projekter og medarbejdere.
- Enkel opsætning: Header, projekter, kontaktformular.
- Farver: Jordfarver (grå, brun, blå) → signalerer stabilitet.
- Tekst: Korte budskaber som “Kvalitet du kan stole på” eller “Kontakt os for tilbud”.
- CTA: “Få et tilbud” eller “Ring nu” placeret tydeligt.
- Offentlig institution (f.eks. Uddannelser, Kommuner, Sundhedssektoren)
- Tendenser
- Brugervenlighed og tilgængelighed vigtigst.
- Klar informationsstruktur – menuer og søgefelt let at finde.
- Neutral farvepalette: Hvid, blå, grå, grøn (signal tillid).
- Stor typografi + høj kontrast for læsbarhed.
- Ikoner og infobokse i stedet for lange tekstblokke.
- Responsivt og WCAG-venligt design.
- https://www.kk.dk/
Analyser følgende hjemmesider, herunder deres brug af tekst, farver og opsætning.
- Tre valgfri hjemmesider fra awwwards.com
- Tekst
- Korte og slagkraftige udsagn, fx “we create feelings.”
- Emotionelt og sanseligt sprog, der fokuserer på følelser og oplevelse.
- Toneleje: moderne, selvsikkert og personligt – “we” og “you”.
- Brug af nøgleord som design, feelings, behavior, AI – signalerer innovation.
- Store overskrifter og korte linjer giver tydeligt hierarki og rytme.
- Minimal tekstmængde – hver sætning fungerer som et design-element.
- Farver
- Minimalistisk farvepalette: primært hvid og lysegrå baggrund.
- Accentfarve: neon-grøn (#3DFF17) – bruges til detaljer, logo og fremhævninger.
- Grøn farve skaber energi og teknologisk stemning.
- Samlet udtryk: rent, moderne og futuristisk.
- Høj kontrast mellem tekst og baggrund gør designet skarpt og letlæseligt.
- Opsætning/layout
- Stor hero-sektion med markant typografi og enkel tekst.
- Luftigt layout – god balance mellem tekst, billeder og tom plads.
- Scroll-baseret oplevelse med subtile animationer og bevægelse.
- Grid-struktur med bevidste brud på symmetri – skaber kreativitet og dynamik.
- Tydeligt hierarki i tekststørrelse og placering – øjet ledes naturligt.
- Navigationen er enkel, diskret og indlejret i designet.
- Helhedsindtryk: moderne, strømlinet og oplevelsesdrevet.
- Tekst
- Overskrifter er store, markante og med udsagn som fx “CREATING THE IMPOSSIBLE”.
- Teksten bruger et toneleje, der signalerer innovation og oplevelse: fx “holographic and immersive experiences”.
- Typografien har stor kontrast mellem overskrift og brødtekst – overskrift i stor, fed font, brødtekst mere subtil.
- Tekstindholdet er relativt sparsomt og fokuseret på budskab og brandidentitet frem for detaljeret information.
- Farver
- Farvepalette består af to primære farver: HEX #000000 (sort) og HEX #4B00FF (intens violet/blå‑lig accent).
- Sort baggrund dominerer – giver et mørkt, dramatisk indtryk og fremhæver andre visuelle elementer.
- Den violette/blå accentfarve bruges til at skabe visuel energi og til at fremhæve essentielle elementer.
- Farverne understreger brandets teknologiske og eksperimentelle profil – mørk base + stærk accent = futuristisk stemning.
- Opsætning / Layout
- Hero‑sektion fylder stor del af viewport og indeholder ofte visuelt rige baggrunde (animation, video eller interaktive elementer).
- Layoutet bruger store margener, god “luft” omkring tekst og visuelle blokke – hvilket giver overskuelighed trods visuel kompleksitet.
- Navigation og sektioner er minimalistiske – menuen er diskret, hvilket lægger vægt på visuel oplevelse frem for overbelastning.
- Der er brug af visuelle “breaks” og sektioner med stor visuel variation – fx store billeder/animationer, der skifter med scroll.
- Responsivitet og performance ser ud til at være tænkt ind – elementerne viser en moderne tilgang til layout og interaktion.
- Tekst
- Overskrifterne er markante og emotionelle: fx “Born to Create.” og “We are an award‑winning studio …”
- Teksterne understreger kombinationen af strategi, design og teknologi: fx “We craft brands & digital experiences that seamlessly blend functionality with aesthetics in innovative ways.”
- Tonelejet virker eksklusivt og målrettet kvalitets‑orienterede kunder: “design that works”, “your website becomes a cornerstone for your visitors”
- Teksten er opdelt i klare sektioner (“Vision”, “Services”, “Process”), hvilket giver struktur og overskuelighed.
- Farver
- Hjemmesiden anvender en relativt neutral og minimalistisk farvepalette: fx en lys baggrund (#f1f1f1) og mørke tekster (#242021) er nævnt.
- Accentfarver og visuelle elementer bruges sparsomme steder, hvilket fremhæver de centrale budskaber og giver plads til “rum” i designet.
- Det farvevalg skaber sammenhæng med brandets positionering som premium, moderne og minimalistisk – farverne signalerer kvalitet fremfor overflod.
- Kontrasten mellem tekst og baggrund er tydelig, hvilket styrker læsbarhed og giver et rent visuelt udtryk.
- Opsætning/Layout
- Websitet har en hero‑sektion øverst med stor overskrift og enkel introduktion – første kontaktpunkt for besøgende.
- Layoutet benytter sig af god hvide rum (white‑space), som giver visuel “åndehul” og gør det let at skimme indholdet.
- Sektioner er klart adskilte: fx “Services”, “Projects/Work”, “Studio/About us” – sådan at strukturen er intuitiv.
- Der anvendes moderne UI‑elementer: typografi med store overskrifter, billeder eller baggrunde i stor skala, samt et grid‑baseret system, som giver konsistens.
- Navigationen er enkel og professionel: kontaktoplysninger, “Request a project” CTA, og tydelig team‑/studioside – hvilket understøtter virksomhedens professionalisme.
To (mindre gode) websites i selv finder
Efter at have arbejdet med lektierne til workshoppen, fandt jeg frem til, at jeg gerne ville lave en hjemmeside inden for hobbybutik/e-handel. Det første, jeg tænkte på, var noget med kreativitet og legetøj, så jeg begyndte at researche lidt på det. Jeg fandt dog hurtigt ud af, at det ikke helt var den retning, jeg ville gå i. Derefter snakkede jeg med Rebecca, Maria og Caroline om, hvad en hobbybutik egentlig kan være. Her gik det op for mig, at fodbold også er en hobby – og det blev derfor mit fokusområde.
Jeg gik derefter ind på ChatGPT for at finde inspiration til et navn til hjemmesiden. Den kom med mange forslag, men jeg endte med at vælge Boldbixen. Efterfølgende bad jeg ChatGPT om at lave et logo med en silhuet af en fodboldspiller. Da jeg havde fået logoet, fjernede jeg baggrunden i Adobe Express, så jeg selv kunne arbejde videre med designet.
Nu hvor jeg havde både navn og logo, kunne jeg begynde at planlægge indholdet til hjemmesiden. Jeg startede med at undersøge navigationen og kiggede blandt andet på, hvordan Bahne og Unisport havde opbygget deres menuer. Jeg fandt også inspiration i Unisports kategorier inden for fodbold.
Da navigationen var på plads, gik jeg videre til selve indholdet. Ifølge lektien skulle vi undersøge UI-tendenser i vores branche, og jeg fandt ud af, at der ofte bliver brugt store hero-billeder. Jeg fandt fem billeder af personer i fodboldtøj på Zalando og bad Rebecca om at bruge sin ChatGPT+ til at sætte dem sammen i ét billede. Da billedet ikke passede i bredden, redigerede jeg det i Adobe Photoshop med hjælp fra min underviser. Vi løste det ved at generere fyld i de manglende områder.
Efter hero-billedet ville jeg vise produkter på siden. Her fandt jeg inspiration på Zalandos forside, hvor de viser et udvalg af produkter under hero-billedet samt sektionen “Udvalgte produkter – lavet specielt til dig”. Det fungerede rigtig godt, så jeg valgte at bruge samme idé.
Derudover skulle vi også lave en underside. Jeg valgte at designe en produktside med en langærmet FC Barcelona-trøje. Opsætningen tog jeg inspiration til fra Zalando, da deres layout både er brugervenligt og flot. Min underviser foreslog efterfølgende, at jeg gjorde det muligt at vælge flere farver – det blev derfor tilføjet.
Da desktop-versionen var færdig, gik jeg i gang med mobilversionen. Her stødte jeg på nogle udfordringer, fordi elementerne ikke passede helt, og jeg ikke længere kunne ændre i desktop-versionen. Vi havde egentlig fået at vide fra start, at vi burde begynde med mobilversionen og derefter gå videre til desktop, men jeg synes personligt, det er lettere omvendt. I dette tilfælde lærte jeg dog på den hårde måde, at det kan betale sig at starte med mobilen.
Til sidst i workshoppen skulle vi præsentere vores projekt for resten af klassen, som vi skulle forestille os var klienten. Jeg havde desværre kun sat 15 minutter af til præsentationen, hvilket var alt for lidt, og jeg blev ikke helt tilfreds med resultatet.
Refleksion
I workshoppen blev vi introduceret til grid columns, som viste sig at være et effektivt værktøj til at skabe et ensartet design. Jeg brugte dog kun grid denne gang, men vil helt sikkert benytte columns i fremtidige projekter.
Det har været sjovt at udfolde sin kreativitet og samtidig kombinere undervisningen med praksis. Vi havde arbejdet en del med brugervenlighed og tilgængelighed i undervisningen, så det var fedt at kunne omsætte det i praksis.
Processen har dog også været en smule presset, da jeg ofte følte, jeg var bagud tidsmæssigt. Jeg ville gerne have gjort mere ud af min præsentation til sidst og skal helt klart blive bedre til at prioritere min tid fremover – især når jeg sidder fast i en idé.
Et kæmpe plus ved workshoppen var, at vi hørte musik hele dagen – så et stort shoutout til underviser Freja!