Hej! Jeg bygger på siden. Mvh Nicholas
UX/UI-designer & frontend-udvikler
Hadsund Karate Skoles hjemmeside mangler information omkring klubben, Ashihara Karate og om klubbens træning. Designet er ikke professionelt og afspejler ikke klubbens niveau.
Design og udvikl en professionel og brugervenlig hjemmeside der indeholder den detaljeret information og professionalisme der mangler på den oprindelige hjemmeside.
Se processen
Træt af at scrolle?...
I processen for at blive klogere på målgruppen for Ashihara Karate brugte jeg brugersegmentering og interviews som værktøjer. Jeg opdelte målgruppen i relevante segmenter for at få et mere klart billede af deres behov og adfærd. Gennem interviews indsamlede jeg kvalitativ data som hjalp med at bekræfte vores hypotese om, hvem målgruppen er, og hvad der motiverer dem ift. Ashihara Karate.
Dernæst anvendte vi et affinity diagram med henblik på at kategorisere det eksisterende indhold samt indhold vi selv har skabt til den nye hjemmeside. Figuren viser hvordan vi har grupperet indholdet i forhold til hvad der deler samme tema. Til sidst kunne vi så navngive grupperne med passende titler, efter vi havde identificeret det fælles temaer.
For at afgøre hvordan den endelige struktur og rækkefølge skulle se ud på den nye hjemmesiden, anvendte vi et content sitemap i forhold til at dele vores indhold ud på de forskellige sider, som vist i figuren her. Vi uddelte indholdet i en kronologisk rækkefølge, så vi kunne gå hurtigere til værks i forhold til at udarbejde produktet, uden at vi skulle ind og foretage markante ændringer i forhold til hvordan indholdet skulle vises. Måden vi kunne dele indholdet ud på, var primært ved at uddele det på de sider der deler samme tema. (Stjernerne indikerer hvilke sider vi programmerede)
For at leve op til de produktkrav som var forventet på Hadsund Karate Skoles nye hjemmeside, tog vi fat på designegenskaberne der passer i forhold til deres identitet, og begyndte planlægge hvordan de skal afspejles på siden.
Nedenfor er der vist nogle eksempler på de skitser vi tegnede under projektet. For at sikre os at vores skitser havde alt det indhold samt komponenter vi havde tiltænkt den nye hjemmeside, anvendte vi metoden “rapid prototyping” i skitseringsprocessen. Det vil altså sige at vi kørte flere runder, hvor vi ville skitsere den samme side flere gange, derefter give hinanden feedback på siderne og så indsætte det indhold samt de komponenter vi blev enige om der manglede på siderne.
I vores udarbejdelse af vores wireframes var der stort fokus på at genbruge de komponenter som vi havde tegnet ind i vores skitser. Det gjorde at vi som team kunne spare tid og sikre os konsistens i vores design til den nye hjemmeside. Dermed blev det også muliggjort at implementere lighed fra gestalt principperne i vores design, eftersom vi ønskede det at være konsistent.
Vores team fik udleveret Hadsund Karate Skoles temafarver som vist i figuren her. Vi som team oplevede at temafarverne havde positiv effekt på vores design. Primært at vi havde mulighed for at styrke klubbens identitet med temafarverne, da det også er dem som de eksisterende medlemmer vil kunne genkende.
Før vi kunne gå igang med vores mock-ups til den nye hjemmesiden, begyndte vi at stille et “stylesheet” med alle de komponenter som vi ville have implementeret i vores design. I figuren kan man se vores “stylesheet” indholder både farver, fonte, ikoner og en række forskellige komponenter.
Mock-up-processen var en af de større og mere centrale dele i vores projekt som UI-designere. Første trin var at få implementeret alt vores indhold og designideer på vores mock-up-sider, og dernæst anvendte “iterativ prototyping” som også er en metode, hvor man som team giver hinanden feedback på de forskellige mock-up-sider og derefter justerer/implementerer de mangler eller eventuelle fejl der er i mock-uppen, før den endelige løsning af mock-uppen bliver godkendt af teamet.
Nedenfor er der vist et udsnit af vores data ud fra en "usability test" vi kørte på testpersoner ift. brugergrænsefladedesign til Hadsund Karate Skole. Figuren nedenfor viser kommentarer og anbefalinger fra en testperson ift. vores navigation, og hvad vi kunne gøre i vores brugergrænsefladedesign for at fjerne den forvirring der var blevet skabt for dermed at sikre en bedre brugeroplevelse efterfølgende.
Her opstillede vi variabler og komponenter i et “CSS-sheet”. Det gjorde at vi kunne indsætte “values” meget nemmere, da de kunne hentes fra vores “:root” som vist i den første figur nedenfor, Dernæst skabte vi vores komponenter i vores “CSS-sheet” ved at skabe “classes” og indsætte “properties” og “values” deri, som vist i den anden figur nedenfor. Derefter kunne vi indsætte mange af de “classes” vi havde skabt i forskellige elementer i vores “HTML-sheet” og dermed også genbruge dem.
Vi kodede den nye hjemmeside som “mobile-first”. Vi var som team enige om at det var den bedste samt nemmeste måde at gå til værks med, da det er nemmere at tilføje kode til desktop fremfor at fjerne kode, så det passer til mobilformat. Figuren nedenfor viser en “media query” i vores “CSS-sheet”, hvor vi indsætter alt den kode der skal fungere til desktop, når vi kommer op over de 1400px.
Figuren nedenfor viser resultaterne fra en “Lighthouse-test” på vores “Ashihara Karate-side”. Måden vi kunne vi kunne opnå den høje score i SEO, var ved at være meget fokuseret på at anvende semantiske tags, justere billederstørrelser og indsætte “alt-attributter” og “meta-tags”. (Accessibility er udfordret, da der er steder på siden, hvor vi ikke har defineret link- og knapnavne)
