Website design for WALK & TALK LYNGBY STAVGANGSKLUB Gruppemedlemmer fra Mul A Auguste Ottesen Ida Bach Mark Harboe Patrick Eilert https://augusteottesen.wordpress.com https://idabachhansen.wordpress.com https://markharboe.wordpress.com http://www.lykkeeilert.dk/projekter-2/ Link til online visning af websitet http://augusteottesen.dk/webdesign/webdesign.html 1
INTRODUCTION Opgave Målgruppe Krav i brief Design et informerende website for WALK & TALK Lyngby 65-70 årige - Lyse farver - Naturbillede på forsiden - Stor tekst - Logo - Simpel side - Forskellige undersider - Webshop BRAINSTORM Stave Webshop Outdoor beklædning Website Applikation Booking Forside kontakt Centret Medlemslogin Booking Ruter Endomondo Fodtøj Holdbooking Prøvetime, stave og underlag Tracke ture Dele med andre stavgængere WALK & TALK Lyngby Badefaciliteter Klubhus/Centret Reception Butik Cafe Konkurrencer mod andre klubber Udflugter Events/happenings Indsamling til velgørenhed Specialist besøg Fælles spisning Bus/stoppesteder reklamer TV-spot Promovering Annonce i dagblade/magasiner Foredrag Avis 2
PRODUKT BREAKDOWN STRUCTURE 3
WORK BREAKDOWN STRUCTURE 4
GANTT MODEL STAKE HOLDERS 5
BRIEF FRA KUNDEN 6
INFORMATION ARCHITECTURE Vi har valgt at benytte hierakisk informations arkitektur til vores website, da sitets indhold mest er information i form af billeder og tekst. Desuden er der ikke så meget indhold på sitet, men få essentielle sider. Da kunden bad om en webshop på sitet, har vi brugt database informations arkitektur på denne enkelte side. Vi har valgt at gruppere indholdet, så vi har en side med generel info om stavgang, alt med centrets fysiske rammer samt info om de forskellige hold er placeret sammen. Det mere personlige indhold som vision og medarbejdere har vi sat sammen og kontakt og webshop har fået en side hver for sig. GRAPHICS 7
VISUAL IDENTITY LOGO FARVER BRUGT PÅ WEBSITET R 179 G 191 B 187 R 179 G 191 B 187 R 179 G 191 B 187 R 179 G 191 B 187 # afc1bd # 547171 # 000000 # ffffff FONTE BRUGT PÅ WEBSITET Helvetica Regular HELVETICA BOLD CAPS HELVETICA CAPS a b c d e f g h i j k l m n o p q r s t u v x y z æ ø å 1 2 3 4 5 6 7 8 9 0 -?! % & A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ Ø Å 1 2 3 4 5 6 7 8 9 0 -?! % & A B C D E F G H I J K L M N O P Q R S T U V X Y Z Æ Ø Å 1 2 3 4 5 6 7 8 9 0 -?! % & 8
WEBSITE DESIGN MAK-gruppen ønskede en farvepallette over i grønlige og naturagtige farver, og vi har derfor valgt to afdæmpede grønne farver til vores primære farver. Desuden har vi også benyttet sort og hvid på websitet, primært til tekst. Vi har layoutet websitet ud fra genkendelighedsprincippet om at logo er i øverste venstre hjørne, menulinje øverst og content centreret på siden under menuen. Til de forskellige slags knapper på websitet har vi taget udgangspunkt princippet om ensartethed, så menuen har ensartede knapper og opfører sig ens når man hover på. Websitet er opbygget efter et grid, så content på hver underside har samme bredde. Gridopbygningen ses også tydeligt på medarbejder-siden. Her ses det også at vi benytter os meget af lodrette linjer og vandrette linjer. 9
WEBSITE DESIGN MOCKUPS AF DET FÆRDIGE DESIGN (EFTER FEEDBACK) 10
WEBSITE DESIGN 11
WEBSITE DESIGN 12
WEBSITE DESIGN 13
WEBSITE DESIGN 14
WEBSITE DESIGN 15
FEEDBACK ON PITCH Efter vores præsentation af første udkast af Walk&Talk websitet modtog vi overvejende god feedback med nogle få rettelser fra kunden. Kunden var tilfreds med farvevalget og logo-design samt det generelle layout af siden som gjorde navigationsmenuen, bookingkalenderen og oprettelse af medlemskab, nemt at finde rundt i. Desuden var kunden glad for personale-oversigten og webshoppens indretning med flere produkter end de bad om i briefet. Den konstruktive kritik gik bl.a. på at skriftstørrelsen på hele sitet gerne måtte være endu større. Målgruppen taget i betragtning var dette essentielt at få rettet, så både menuer og tekstindhold blev så letlæseligt som muligt. Kunden ønskede desuden at der under Centret -fanen blev tilføjet information omkring de forskellige underlag som stavene kan testes på. De største ændringer kunden ønskede var at få tilføjet en beskrivende side i hovedmenuen om stavgang og dets fordele, samt en underside for hvilke forskellige holdniveauer Walk&Talk tilbyder. Hold-siden kan i menuen findes under Centret. Alt i alt følte kunden at vi havde taget højde for deres ønsker såvel som målgruppens behov og de kunne se hvor vi ville hen med websitet. VORES GAMLE DESIGN FØR ÆNDRINGER OG FEEDBACK FRA MAK-GRUPPEN 16