Arbejdsprocessen af vores WordPress website
Fase 1: Brainstorm & Moodboard
I denne fase snakkede vi om hvilken stemning vi ville have til vores website. Vi sad mellem idéen om at lave en lidt mørk men sofistikeret æstetik og en lys, hyggelig “mormors bageri” stemning.
Vi snakkede også hvad vi skulle have i vores hero; skulle det være med et billede eller en video?
Ved at smide flere idéer ud på skrift faldt vi på beslutningen af at vores website skulle have en mørk men sofistikeret stemning og for at fange vores brugers opmærksomhed ville vi have en video til vores forside.
Videoen er fra Pixabay og skulle have noget redigering fra os så den havde noget af vores eget præg. Redigeringen af videoen var lavet med CapCut og lavet af et gruppemedlem.
Alle billeder vi har brugt til vores moodboard er fra Pixabay og Unsplash. 2 websites som vi har brugt meget af.
På billedet kan man se de 2 forskellige retninger vi havde i tankerne: det mørke versus det hyggelige lyse “mormors bagværk” stemning som vi ville sætte præg på vores website.
Og som nævnt før, valgte vi at gå i den lidt mere mørke og sofistikeret retning, men vi ville også sørge for at man stadig fik et indtryk af hygge når man kommer ind på vores site.
Det gjorde vi ved at samle billeder ind af bagerier der passede ind i farvepaletten som vi havde valgt men som også stadig gav et varmt og hyggeligt stemning. På den måde kunne vi bruge dem som en slags guide til justering af farver og hvordan vi skulle bruge farverne, og eventuelt måske bruge billederne til et galleri i websitet.
Fase 2: Styling og Prototyping
Vi havde udarbejdet en stilren og varm style tile som fundament for vores bageris visuelle identitet. Farvepaletten består af brune og beige nuancer, hvor den mørkebrune baggrund (#392418) og den varme accentfarve (#C0A06C) skaber et indtryk af rustik luksus og hygge.
Til typografien har vi valgt to sans-serif skrifttyper: Roboto til overskrifter og Tenor Sans til brødteksten. Kombinationen giver et moderne og læsevenligt udtryk, der samtidig føles varmt og imødekommende. Knapperne følger den enkle, men elegante stil med tydelige kontraster og brugervenlighed i fokus. Værdier som luksuriøs, rustik, lækkert og hyggeligt har været styrende i vores designbeslutninger, og afspejler både brandets sjæl og brugeroplevelsen.
Efter vi alle blev enige om vores æstetik begyndte vi med opbyggelsen af vores site.
Temaet vi brugte var OceanWP og var bygget op med Elementor som er et plugin som vi skulle installere. Vi havde valgt at gøre det på den måde fordi at OceanWP og Elementor gav os mere fleksibilitet i forhold til layouts og var også nemmere for at lave noget responsive designs.
Selvom temaet og plugin’et var gode og gjorde opbyggelsen af vores site nemt, havde det stadig nogle begrænsninger.
Vi skulle for eksempel lave noget kodning for at override nogle ting i dem. Vi havde, blandt andet, fået lavet et “sticky” header så navigationen altid fulgte med gennem hele siden, og vi skulle også ændre nogle farver som var allerede indbygget i programmet ved hjælp af noget Custom CSS.
Da ingen af os i gruppen har haft erfaring med WordPress havde vi selv nogle begrænsninger. Heldigvis var formålet med denne projekt var at bekendtgøre os med det, men vi løb stadigvæk ind i nogle udfordringer som vi ikke var så kyndige til at håndtere.
For eksempel, på billedet kan man se nogle af vores billeder for Den Glade Baguette ser en smule udstrakt ud. Vi havde prøvet lidt at fikse det, men kunne ikke gøres bedre efter flere forsøg fra os alle. Her havde vi meget lidt erfaring med billeder med forskellige størrelser og formater der skulle uploades til et website, men vi har dog siden hen lært noget fra det.
Her har jeg bidraget med wireframing, layout og tekst indhold, samt specielle effekts og andre små detaljer. Jeg vil også gøre en bemærkning om at al tekst jeg har skrevet er IKKE med hjælp af AI.
Fase 3: Endelig Produkt
Med dette projekt har vi fået et indsigt og bedre forståelse for WordPress and dens utallige muligheder for web building og web design.
Med det sagt har vi mange andre idéer til hvordan vi kunne have forbedret den. For eksempel, ville vi, blandt andet, lave et billedgalleri der fremhæver bageriets stemning og billeder af ting der bærer logoet (som et gruppemedlem har skabt) som f.eks. papirkopper, papirposer, osv.
Det var desværre nogle af de ting som vi ikke kunne nå at lave.
Jeg vil også lave en bemærkning om at dette projekt var lille og var lavet med letsindig humor.
For at se vores website besøge Den Glade Baguette.
Hvis du ønsker et mere detaljeret gennemgang af denne projekt så kig gerne PDF-filen: Arbejdsprocessen af Den Glade Baguette.
