www.mdalgaard.dk/abc/

www.mdalgaard.dk/abc/ udarbejdet af Peter Schindler Michael Dalgaard Stefan Skjerning Erhvervsakademiet København Nord, Multimediedesigner, 3. semester, tr08mul01

Indholdsfortegnelse Indledning... side 2 Designanalyse...side 3-4 Designbrief...side 5-6 Designdokumentation... side 7-8 Læring og refleksion... side 9 Bilag Tidligere versioner af webdesignet Navigationsdiagram ER-diagram over aftalekalender 1

Indledning Dette projekt omhandler et redesign af cykelklubben ABC Cyklings website. Cykelklubben er Danmarks næstældste, og en af de mest besøgte. Deres website er kendt for dets rige indhold og forums for cykelinteresserede. ABC klubbens ledelse har nu henvendt sig til os multimediedesignere i håb om at finde et mere moderne og visuelt inspirerende layout, design. Derudover har der været et krav om at bevare noget af websitets oprindelige funktionalitet primært vedr. interaktive muligheder, men også at optimere denne funktionalitet. Da det funktionelle område i projektarbejdet har drejet sig om database, og vi ikke har arbejdet meget med dette område, er projektet blevet reduceret til primært en designopgave. Her har vi sat ekstra fokus på forarbejdet på ABC Cyklings nye design qua designanalyse, designbrief og designdokumentation, hvilket også har kastet forskellige designforslag af sig. 2

Designanalyse I denne designanalyse analyserer vi websites, der bruges i sammenhænge med en indholdsmæssig relation til ABC Cyklings website. Formålet er at øge kendskabet til det design og tilhørende indhold, lignende cykelklubber har taget udgangspunkt i, og som vi kan tage ved lære af. De websites, vi har fokus på, er større danske cykelklubbers websites: Odder Cykel Klub (http://www.oddercykelklub.dk/) Cykling Odense (http://www.cyklingodense.dk/news.php) Vejle Cykel Klub (http://www.vck.dk/) Indhold Alle tre websites har stor fokus på nyheder og information om egne rytter og deres præstationer. Nyhederne har topprioritet, idet de er meget fremtrædende på forsiden, mens rytterinformationer fremgår som links i menuen. Der er ikke store mængder tekst på forsiden, hvilket gør det nemt at danne sig et overblik over indholdet. Mens Vejle Cykel Klub ikke har længere nyhedsartikler at referere til, har Odder Cykel Klub og Cykling Odense gjort mere ud af nyhederne og ved forsidens små nyhedsinformationer refereret til den længere artikel. Interaktionsmæssigt er Cykling Odense dog i førertrøjen, da der er kalender, kontaktformular, mulighed for kommentarer og ligesom Vejle Cykel Klub login for medlemmer. Struktur og navigation Strukturen i de tre websites er næsten lige så ens som prioriteringen af nyheder og informationer. I alle tilfælde tages der udgangspunkt i et traditionelt opstillet website med firkantede sektioner, hvor der under et sigende banner findes en venstrestillet menu, en dominerende indholdsramme midtfor og links i højre side. Ved klik på menuens links skifter indholdsdelen, hvormed diverse links i højre og venstre side bibeholdes. Det er alt sammen med til at bevare overblikket. Dog har Cykling Odense ikke taget højde for indholdsdelens tekstlængde, der ikke har en fast bredde og derfor ved en almindelig skærmbredde får en tekstlængde, der er over dobbelt så lang som det anbefalede. Klubbernes strukturelle og navigationsmæssige opsætning kan godt forsvares, idet antallet af undersider og links er overskueligt. Det skinner klart igennem, at muligheden for at danne sig et overblik er blevet prioriteret højt, men også at funktionalitet overgår nytænkning. Farver Cykelklubberne gør på deres respektiver websites brug af klubbens farver på hver deres måde. Odder Cykel Klub er ikke bange for at fremhæve deres gule og røde farve i banner og menu, ligesom deres tredje farve, blå, indgår i overskrifter og links. Cykling Odenses røde farve er meget dominerende, da denne optræder som 3

Designanalyse (fortsat) bjælker i banner og overskrifter. Den hvide farve bruges som typisk som kontrastfarve og opfattes ikke direkte som en klubfarve. Vejle Cykel Klubs website er knap så farverig og fremhæver kun via bannerets forskellige billeder klubbens blå og røde farve. Selv om den røde farve indgår i logo samt i tekstoverskrifter med en mørkere tonet farve, er det ikke farverne, der er fokus på i designet. Odder og Odenses brug af farver er dominerende og vil derfor mest henvende sig til dem, der på den ene eller anden måde har en relation til klubben og dens farver. Da farverne er enten skrappe eller fylder en del af websitet, kan det nemt fjerne fokus og muligvis skræmme nye besøgende væk. Nye besøgende vil også kunne opfatte siderne som utidssvarende, smagløs og manglende tanke bag de trufne beslutninger. Vejle har med sit farvemæssigt mere behersket website sat mere fokus på indhold og fremstår på den måde bedre i forhold til de andre. Til gengæld er farven grå meget dominerende, hvilket gør websitet lidt for tør - trods de tre forskellige nuancer. Grafik og illustrationer Odder og Vejle Cykel Klub fortæller også deres historier ved hjælp af billeder, der således illustrerer den pågældende begivenhed. Dog overskygges disse illustrationer hos Odder Cykel Klub af farverne - implementeret i grafik - som er temmelig varierende. Cykling Odenses nyheds- og informationsblokke er fyldt så godt ud på siden eller prioriteret så højt, at grafikken og illustrationerne nærmest er begrænset til banneret. Det er en god ide at have tydelige illustrationer og grafik, der spiller sammen med selve indholdet. Det grafiske skal ikke overdrives, men omvendt kan indholdet også komme til at blive for dominerende. Skrifttype Som det var tilfældet med det grafiske udtryk, gør Odder Cykel Klub også ved skrifttypevalget for meget ud af at få det bedste med fra hver stil. Skrifttypen i overskrift, logo, indhold og til dels links hænger ikke sammen. Det bidrager til den designmæssige forvirring, der er omkring websitet. Til gengæld er skriftstørrelsen valgt ud fra den vigtighed, teksten refererer til. Ved overskrifter er tekststørrelsen dog lille, men indgår i en grafisk sammenhæng, så det bliver fremhævet. Cykling Odense og Vejle Cykel Klub har ikke en stor variation i deres skrifttyper, men husker at markere overskrifter med en større skriftstørrelse, hvilket er fornuftige valg. Alle websites gør brug af skrifttyper uden fødder, hvilket fremmer læsbarheden. Ellers skal enkeltheden i valget af skrifttyper samt ændringen af skriftstørrelsen i vigtige sammenhænge fremhæves. 4

Designbrief I designbriefet vil vi gøre rede for de overordnede designregler, der skal gøres brug af ved udarbejdelsen og definitionen af ABC Cyklings endelige design. Som bilag har vi lagt tidligere versioner af vores designforslag for at vise, hvordan designudviklingen har været i forhold til de regler, vi har villet holde os inden for. Vores analyse af de danske cykelklubbers websites, som designanalysen omhandler, har givet kraftige fingerpeg om, hvilke fordele og ulemper brugen af design og struktur på danske cykelwebsites kan have. Ud fra disse fakta er der herunder skrevet om de designregler, der ønskes at tage udgangspunkt i mht. den senere designbestemmelse. Navigation og indhold Vi har som udgangspunkt intentioner om, at brugeren skal have lettere ved at danne sig et overblik, så snart de besøger ABC s webside. Deres nuværende side er meget tekstbaseret og opsat på en måde, så man mister overblikket. Der skal holdes fast i, at en stor del af brugernes interesse i websitet går på den informative del, hvorfor websitet stadig skal være informationsbaseret, men nu på en struktureret og designmæssigt indbydende måde. Skrifttyper Vi vil vælge to eller tre skrifttyper, der signalerer en sammenhæng med logoet og designet, men samtidig udstråler seriøsitet og gennemskuelighed. Det er vigtigt ikke at anvende for mange slags skrifttyper, da mange forskellige skrifttyper vil skabe et rodet udtryk samt mangel på designforståelse og harmoni. Det er ligeledes vigtigt, at specielt skrifttypen til banneret har relevans til logoet. Det vil skabe harmoni i helhedsindtrykket og referere til de ønskede værdier som respekt, samarbejde og traditioner. Der tages højde for, at det kan blive en smule svært at lave et meget moderne udtryk, da logoet, der ønskes bevaret, er gammeldags. Farver Vores farvevalg i dette projekt vil primært udmønte sig i de tre farver, rød, blå og hvid, ABC cykel klub benytter sig af, men ikke på en dominerende måde. Da de tre farver i forvejen har så kraftige nuancer, kan et mere behageligt udtryk tage sit udgangspunkt i en implementering af farverne i de forskellige grafiske sammenhænge. Disse tre farver skal helst have en logisk gengang på siden, da det skal skabe sammenhæng og på den måde få klubbens farver til at fremgå naturligt. 5

Designbrief (fortsat) Logo ABC Cyklings logo, som er et gammelt og velbevaret logo, skal ikke ændres eller skifte karakter på nogen måde. Derimod vil det være en fordel, hvis der i grafiske sammenhænge og især til skrifttypen er gennemgående ligheder. Grafik Vi har i sinde at holde grafikken forholdsvist simpel, logisk men sigende. Det grafiske udtryk vil komme til syne via billeder og grafik i banneret. Vores illustrationer kommer til at stemme overens med indholdet, da dette er meget vigtigt for den reelle forståelse af sidens informationer. Fotos Billederne, der vil blive anvendt på siden, er næsten alle sammen fra ABC s oprindelige side. Da det skaber relevans og virker identitets spejlende for brugeren. Desuden kommer billederne også til at virke som illustrationer, der kan relateres til artiklerne. Vi har også vægt på, at teksten på websitet ikke skal overstråle billederne, så overblikket forsvinder. 6

Designdokumentation Vi vil her redegøre og begrunde for de valg, vi har truffet med henblik på at skabe en optimal designmæssig kommunikation til brugere af ABC Cyklings website. Udtryk Vores redesignede website til ABC Cykling skal være lyst og let, så brugernes humør ubevidst bliver løftet eller i hvert fald bevaret ved brug af websitet. Det eksemplificeres i websitets hvide baggrund og de hvide tekstbokse. Samtidig formår designet med sit dynamiske banner, den stramme og præcise opstilling samt striber implementeret som en temabaseret grafisk fremtoning at udtrykke både ekspressiv begejstring samt professionalitet og troværdighed. Det nye design har også haft til formål at udtrykke ønskede værdier som fællesskab, udvikling, respekt, samarbejde, traditioner og engagement. Disse værdier kan til et design- og websprog oversættes til fortællende grafik, oprindeligt logo implementeret i nyt design, god navigation samt struktureret indhold. Farver Da rytterne tilknyttet ABC Cykling kører i dragter med røde, blå og hvide farver, er det også det udgangspunkt, vores endelige design baseres på. Den hvide baggrund står som den mest dominerende og er den, der qua sit signal om professionalitet og troværdighed gør websitet til et medie, der får websitet til primært at fremstå som et informationssite. Den røde og blå farve optræder i banneret og tekstboksene og tegner sig for den mere dynamiske og ekspressive udstråling. For at gøre de ellers skrappe farver, der næsten er primærfarver, mindre dominerende, er den røde og blå farvestribe i banneret gjort smalle, samtidig med at tekstboksenes farver er tildelt hvide striber. Tekstboksene er kategoriseret i bokse med generel info og begivenhedsbaseret info. I boksene til generel info er striberne i toppen røde, mens boksene til den begivenhedsbaserede info har blå striber i toppen. Billeder, grafik og illustrationer De valgte billeder og illustrationer er nøje udvalgt til de tilknyttede informationer, hvilket er med til at skabe troværdighed. Samtidig indgår de som en del af det grafiske udtryk og medvirker til, at websitet er varieret og indbydende. 7

Designdokumentation (fortsat) Skrifttype Vi har valgt to udvalgte skrifttyper, som begge er uden fødder. Det bidrager til en letlæselig tekst. Bannerets skrifttype hedder ITC Serif Gothic ITC SERIF GOTHIC, itc serif gothic Skrifttypen er valgt ud fra dens ligheder med ABC Cyklings logo. Således har bogstaverne meget runde former ligesom logoets form, mens kanterne ved bogstaver som f.eks. R og B qua det runde udgangspunkt bliver ekstra spidse ligesom den indre form i logoet. Valget er skrifttype er også baseret på det letlæselige udtryk, skrifttypen udstråler. Udtrykket er også stilrent ligesom resten af websitet. Skrifttypen til menuen og selve indholdet hedder Helvetica LT HELVETICA LT, helvetica lt Denne skrifttype er en web-skrifttype og kan derfor ses på alle computere. Den er valgt på grund af dens runde former, der passer godt sammen med logoet og bannerets skrifttype. Samtidig er skrifttypen stilren og letlæselig. Navigation Til forskel fra ABC Cyklings oprindelige website er navigationen opbygget enkelt med en global hovedmenu. Hvert af disse menupunkter har nogle tilhørende undermenuer, der refererer til en bestemt indholdsside. Da menuen altid er synlig, er websitet nem for de besøgende at finde rundt på. Det skal medvirke, at de ikke bliver forvirrede og søger væk fra vores website. Weboptimering Sammen med vores redesign af ABC Cykling har der ikke blot været tilknyttet en designmæssig optimering, men også webbaseret optimering. Det gamle website gør brug af både frames, tables og en primitiv menu. I stedet for frames benytter vi et CSS-baseret website, der med sin CSS-formatering og strukturering er mere velegnet til søgemaskiner. Ligeledes er tables erstattet med div-tags, der både er bedre at styre, og som formindsker kompatibilitetsproblemerne mellem de forskellige browsere betydeligt. Endelig er der kommet mere styr på navigeringen via menuen, hvilket også gør det mere overskueligt hvad angår indskrivningen af koder. 8

Læring og refleksion Da det i forhold til vores kunnen ikke er realistisk at udarbejde en database til vores projekt, har vores læring mere drejet sig om det designmæssige arbejde og den endelige designbestemmelse. I bestemmelsen af websitet har vi også skullet blive enige om struktur og navigering på websitet. Dog har meget af læringen omkring et websites koder, design, navigering og indholdsmæssig tilpasning i henhold til den valgte målgruppe været noget, vi også har arbejdet med og lært fra i tidligere projekter. For at holde styr på alle projektets opgaver og udfordringer, har vi lavet en projektplan (findes som bilag). Der har været en udfordring i at arbejde i gruppe, idet især forskellige designelementer er blevet vægtet forskelligt hos gruppemedlemmerne. Alt i alt har vi dog arbejdet godt sammen og etableret os yderligere indenfor det grafiske område med henblik på at udvikle et optimalt medie på Internettet. 9

Bilag - Navigationsdiagram www.mdalgaard.dk/abc/ Forside Nyheder Ryttere Træning Om ABC Links Galleri Forum Aktivitet Bliv medlem Resultater Rytter-profiler Dagbog Rytter kontakt Forum Senior Seje sild Bane Cykling Kontakt Om ABC cykling De 13 bud Sponsere

Bilag - ER-diagram over aftalekalender ER-diagrammet skal bruges til en aftalekalender. Diagrammet symboliserer et system, hvor man kan tilmelde sig arrangementer, se vagtplaner og opgaver. Nøglerne (som er illustreret i diagrammet) skaber forbindelse mellem de forskellige tables.

Bilag - Tidligere versioner af webdesignet