RONDE VAN VLAANDEREN Concept website Ronde van Vlaanderen Opdracht MM-A Opleiding Web Designer Sandra Röling 98e editie
RONDE VAN VLAANDEREN 98e editie Inhoudsopgave 1. Voorwoord 5 2. Brainstorm 6 3. Brainstorm evaluatie 8 4. Categorisatie 9 5. Flowchart 11 6. Stijlboek 12 7. Storyboard 16 8. Tijdsplanning/kosten 19 9. Legal issues 20 Concept website Ronde van Vlaanderen
1. Voorwoord Dit is het concept voor een nieuwe website over de wielerklassieker Ronde van Vlaanderen. Deze legendarische wielerwedstrijd wordt iedere 14e zondag van het jaar gereden en trekt jaarlijks honderdduizenden supporters langs de weg. Daarnaast beleven miljoenen mensen het wielerspektakel voor de buis om maar geen minuut van dit sportieve evenement te missen. Voor wie? Doelgroep van de website is de wielerliefhebber. Dit kunnen dames, heren en kinderen van alle leeftijden zijn uit Nederland en Vlaanderen. Mensen die zelf actief wielrennen en mee willen doen met de tourversie of supporters die de Ronde van Vlaanderen van dichtbij willen beleven en de wielerprofs willen aanmoedigen tijdens hun race. Voor de die-hard wielerfans is er achtergrondinfo over de Ronde te vinden zoals de geschiedenis van de Ronde van Vlaanderen en informatie over het parcours en diverse statistieken. Waarom? De bestaande website kan een update gebruiken en een restyling. De huidige site is onderdeel van een website met meerdere Vlaamse klassiekers en de Ronde van Vlaanderen verdient een eigen website. Inspiratie is opgedaan bij de strakke en gestileerde wielrentijdschriften als de Muur, Bahamontes en Soigneur. Waarmee? De website wordt gemaakt met behulp van: Photoshop CC Dreamweaver CC HTML / CSS Concept website Ronde van Vlaanderen 5
2. Brainstorm Responsive Klimmetjes Hoogtemeters Geel Routekaart Vlaamse vlag met leeuw Ronde van Vlaanderen Sfeer Kasseien Winnaar Klassieker Fotoalbum Horeca/overnachten Supporters Flandrien Uitslagen Heren Eddy Merckx Racefiets Livestream Ronde arrangementen Vlaams bier Finish Routepijl Tandwiel Voorjaar Sponsors 6 Concept website Ronde van Vlaanderen
Wedstrijd Meertalige website Toertocht Videofilmpjes Inschrijven Traditie Gastenboek Dames Modder Deelnameformulier Bezoekersinfo Bezoekerscentrum Asfalt Parcours Social media Disclaimer 98e editie Podium Trainingstips Start Deelnemers Copyright Citaten wielrenners Stoempen Mooie sfeerfoto s dorp van de Ronde Profs Links/Extra s Ronde van Vlaanderen App Geschiedenis Concept website Ronde van Vlaanderen 7
3. Brainstorm evaluatie Op pagina 6-7 is de brainstorm sessie weergegeven. De vetgedrukte woorden zijn onderdelen die in de website verwerkt worden. De overigen vallen af. Do s De website is onderverdeeld in een gedeelte over de wedstrijd door de professionals (dames en heren) en een toergedeelte voor de wielertoeristen. Het onderdeel wedstrijd bevat informatie over de deelnemers, het laatste nieuws en de uitslagen. Het toergedeelte bevat het programma, informatie over de inschrijving en de verschillende afstanden en trainingstips. Het parcours krijgt een eigen menu met daarin de verschillende afstanden die gereden kunnen worden, de plattegronden en informatie over de vele kuitenbijters in de Ronde. De geschiedenis van de Ronde krijgt aandacht net als de helden die de Ronde meerdere malen hebben gewonnen. Verder bevat de website informatie over onder andere overnachtingstips en horeca in de buurt, hoogtemeters, de term Flandrien en het bezoekerscentrum in Oudenaarde. Don ts Er is besloten om de site in het Nederlands op te zetten aangezien de doelgroep mensen uit Nederland en Vlaanderen zijn. Dit kan evt in een later stadium aangepast worden naar een versie in het Engels en/of Frans. Een gastenboek wordt niet geplaatst in verband met de tijd die gestoken moet worden in het modereren van de inhoud. Mensen die een reactie willen plaatsen kunnen dit via Twitter of Facebook doen. Videofilmpjes worden niet geplaatst vanwege de grootte van de bestanden en de verminderde snelheid van de site. Er komt indien het technisch realiseerbaar is wel een link naar de livestream van de Ronde. Een fotoalbum wordt niet geplaatst op de site, in plaats daarvan komt er een link naar Flickr en/of Instagram. Een App wordt gemaakt zodra dit technisch realiseerbaar is. Reclame wordt zoveel mogelijk vermeden op de website. Indien wel toegepast wordt dit subtiel gedaan. 8 Concept website Ronde van Vlaanderen
4. Categorisatie De goedgekeurde ideeën worden gerangschikt naar volgorde van belangrijkheid en plaats op de website. Zo kan er uit de brainstormsessie een hoofdmenu afgeleid worden wat bestaat uit de volgende onderdelen: Wedstrijd - Toertocht - Historie - Parcours - Extra s. Onder dit hoofdmenu vallen submenu s zoals: Dames - Heren - Uitslagen - Inschrijven - Routes - Flandrien - Bezoekerscentrum - Trainingstips - Deelnameformulier - praktische info. Tijdens de brainstormsessie zijn een aantal aspecten genoemd die met de vormgeving van de website te maken hebben. Zo is de hoofdkleur van de website geel. Deze kleur wordt gebruikt in de Vlaamse vlag die geel is met daarop een zwarte leeuw. De volgende onderdelen worden meegenomen in de vormgeving: Asfalt - kasseien - modder - logo Ronde van Vlaanderen - tandwiel - routepijl - racefiets - mooie fotografie - sfeerbeelden - vlaams landschap. In het footermenu komen onderdelen zoals links naar: Social media - copyright - disclaimer. In de flowchart op pagina 11 wordt de opbouw van de website schematisch weergegeven. Deze is opgebouwd uit een hoofdmenu, submenu, subsubmenu en footermenu. Concept website Ronde van Vlaanderen 9
HOME hoofdmenu hoofdmenu WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA submenu NIEUWS submenu PROGRAMMA submenu AFSTANDEN submenu HOE HET BEGON submenu BEZOEKERSCENTRUM DAMES PRAKTISCH RONDEDORP ERELIJST OVERNACHTEN HEREN TRAININGSTIPS KLIMMETJES FLANDRIEN UITSLAGEN subsubmenu INSCHRIJFFORMULIER subsubmenu PLATTEGRONDEN ROUTES footermenu FACEBOOK TWITTER FLICKR COPYRIGHT = TERUG NAAR HOMEPAGE DISCLAIMER 11
RONDE VAN VLAANDEREN 6. Stijlboek Voor de website zijn de volgende websafe kleuren gekozen: 2 Hoofdkleuren 2 Steunkleuren Contrastkleur RGB 255-204-0 #ffcc00 CMYK 0-21-92-0 RGB 204-204-204 #cccccc CMYK 24-18-17-0 RGB 51-204-153 #33cc99 CMYK 67-0-52-0 RGB 0-0-0 #000000 CMYK 86-85-79-100 RGB 102-102-102 #666666 CMYK 62-52-49-20 Logo Er is een nieuw logo ontworpen voor de Ronde van Vlaanderen. De cirkel stelt een tandwiel van een racefiets voor met daarin de leeuw en de gele kleur uit de vlaamse vlag. 98e editie 12 Concept website Ronde van Vlaanderen
Fonts De website wordt opgemaakt in het webfont Arial en het font Damion uit de Google fonts collectie. In het algemeen geldt voor de font grootte; 12pt = 16px = 100% = 1em. Voor de bodytekst wordt Arial Regular gebruikt met een font grootte van 16 pixels (=100%). Koppen in de bodytekst worden weergegeven in Arial Bold op 20 pixels (=125%). Voor het menu is Arial Bold gekozen in kapitalen op 24 pixels (=150%). Arial Regular Arial Bold ARIAL BOLD KAPITALEN 12 pt = 16 px = 100% = 1em 15 pt = 20 px = 125% = 1,25em 18 pt = 24 px = 150% = 1,5em Voor onderdelen zoals de home button en de lees verder en top buttons is het font Damion gekozen in een font grootte van 16 pixels. Damion 12 pt = 16 px = 100%=1em Concept website Ronde van Vlaanderen 13
Key visuals Op deze pagina worden enkele key visuals weergegeven die regelmatig terugkomen in de website. Default state Active state Hover state Visited state Lees verder Lees verder Lees verder Lees verder Home Home Home Home Top Top Top Top 14 Concept website Ronde van Vlaanderen
Menu website Hieronder drie maal de weergave van het menu van de website met de verschillende staten van de links in het hoofdmenu en de submenu s. WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA Default state WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA Hover state WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA NIEUWS active state DAMES HEREN UITSLAGEN visited state Concept website Ronde van Vlaanderen 15
7. Storyboard Een ruwe schets van de website met daarop de onderverdeling aangegeven. Hoofdmenu Afbeelding of slideshow met verschillende afbeeldingen Logo Tekst verdeeld over 2 kolommen Footermenu Social Media Copyright Disclaimer Concept website Ronde van Vlaanderen 16
RONDE VAN VLAANDEREN RONDE VAN VLAANDEREN Uitwerking website in Photoshop De homepage en nieuwspagina zijn uitgewerkt om een beeld te geven hoe de site er uiteindelijk uit komt te zien. Uiteraard kunnen er in overleg met de klant tijdens het project nog aanpassingen doorgevoerd worden in de layout en werking van de website. WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA WEDSTRIJD TOERTOCHT PARCOURS HISTORIE EXTRA NIEUWS DAMES HEREN UITSLAGEN 98e editie 98e editie De 98e editie. Deelnemers. Laatste Lorem ipsum. nieuws. Videamus errat. Dolor sit amet, consectetur adipiscing elit. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Hoc ipsum elegantius poni meliusque potuit. Habent enim et bene longam et satis litigiosam disputationem. Ergo hoc quidem apparet, nos ad agendum esse natos. Et quidem, inquit, vehementer errat; Haec igitur Epicuri non probo, inquam. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. At iam decimum annum in spelunca iacet. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Egone quaeris, inquit, quid sentiam? Dolor sit amet, consectetur adipiscing elit. Tum Piso: Quoniam igitur aliquid omnes, quid Lucius noster? Hoc ipsum elegantius poni meliusque potuit. Habent enim et bene longam et satis litigiosam disputationem. Ergo hoc quidem apparet, nos ad agendum esse natos. Et quidem, inquit, vehementer errat; Haec igitur Epicuri non probo, inquam. Qua ex cognitione facilior facta est investigatio rerum occultissimarum. At iam decimum annum in spelunca iacet. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Egone quaeris, inquit, quid sentiam? Duo Reges: constructio interrete. Vestri haec verecundius, illi fortasse constantius. Life is like riding a bicycle. To keep your balance you must keep moving. Maximaem, qua fieri nulla maior potest. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quam tu ponis in verbis, ego positam in re putabam. Lees verder Duo Reges: constructio interrete. Vestri haec verecundius, illi fortasse constantius. Tuo vero id quidem, inquam, arbitratu. Illa argumenta propria videamus, cur omnia sint paria peccata. Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Ne amores quidem sanctos a sapiente alienos esse arbitrantur. Quam tu ponis in verbis, ego positam in re putabam. Videmusne ut pueri ne verberibus quidem a contemplandis rebus perquirendisque deterreantur? Home Disclaimer Copyright Disclaimer Copyright 17 Concept website Ronde van Vlaanderen
14 Concept website Ronde van Vlaanderen
8. Tijdsplanning en kosten Het project is onderverdeeld in de volgende fasen en kosten: Projectfasen Datum Uren Kosten Kennismakingsgesprek Vormgeving en ontwerp website Presentatie concept Uitwerking concept Bouwen website in HTML/CSS Testfase Eventuele aanpassingen Oplevering website Onderhoud website 5 november 2013-30 november 2013 - - 5 februari 2014-1 maart 2014 op afspraak 1 uur 18 uur 1 uur 8 uur 18 uur 4 uur 8 uur - - vrijblijvend 900 euro 50 euro 400 euro 900 euro 200 euro 400 euro - 50 euro p.u. Het totale kostenplaatje bedraagt 2850 euro. Indien gewenst wordt er een onderhouds abonnement aangeboden met daarin updates van de website en het beheer van de domeinnaam. Concept website Ronde van Vlaanderen 19
9. Legal issues Auteursrechten Ondanks het feit dat dit concept met de grootst mogelijke zorgvuldigheid is samengesteld, aanvaarden wij geen aansprakelijkheid voor eventuele onjuiste of onvolledige informatie. Evenmin aanvaarden wij aansprakelijkheid voor de gevolgen van het gebruik van de informatie uit dit concept. Alle inhoud (teksten, afbeeldingen, bestanden) uit dit concept en intellectueel ontwerp van dit concept is eigendom van de ontwerper van het concept. Het is niet toegestaan om (delen) van de inhoud te kopieeren of te (her)publiceren in welke vorm dan ook. De ter beschikking gestelde bestanden zijn enkel voor eigen gebruik en mogen niet aan derden ter beschikking worden gesteld. Het is ook uitdrukkelijk niet toegestaan de gepubliceerde bestanden op een andere plek (website, forum of database) op internet te herpubliceren. Dit concept is een opdracht binnen de opleiding Web Design aan de College of Multimedia te Amsterdam. 2013 Sandra Röling 20 Concept website Ronde van Vlaanderen