Ronde van Vlaanderen
EREN ND
Opdracht MM-A Opleiding Web Designer Sandra Röling
N VLAA VA
RONDE
Concept website
98e editie
RONDE
EREN ND
N VLAA VA
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
Klimmetjes Hoogtemeters Vlaamse vlag met leeuw Sfeer
Kasseien Winnaar
Fotoalbum
Supporters Heren
Ronde arrangementen
Klassieker Flandrien
Eddy Merckx
Responsive
Routekaart
Geel
Ronde van Vlaanderen Horeca/overnachten Uitslagen Racefiets Livestream
Vlaams bier Tandwiel
Finish Routepijl Voorjaar Sponsors
6
Concept website Ronde van Vlaanderen
Wedstrijd
Meertalige website Inschrijven
Toertocht
Videofilmpjes
Dames Asfalt
Deelnameformulier
Modder
Bezoekerscentrum 98e editie
Start
Traditie
Copyright
Stoempen Profs
Gastenboek
Parcours Podium
Bezoekersinfo
Social media Trainingstips
Disclaimer Deelnemers
Citaten wielrenners Mooie sfeerfoto’s dorp van de Ronde 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
HOE HET BEGON
DAMES
PRAKTISCH
RONDEDORP
ERELIJST
HEREN
TRAININGSTIPS
KLIMMETJES
FLANDRIEN
EXTRA submenu
AFSTANDEN
HISTORIE submenu
PROGRAMMA
submenu
NIEUWS
PARCOURS
TOERTOCHT submenu
submenu
WEDSTRIJD
BEZOEKERSCENTRUM OVERNACHTEN
UITSLAGEN
subsubmenu
INSCHRIJFFORMULIER
subsubmenu
PLATTEGRONDEN ROUTES
footermenu
FACEBOOK TWITTER FLICKR COPYRIGHT
= TERUG NAAR HOMEPAGE
DISCLAIMER 11
6. Stijlboek Voor de website zijn de volgende websafe kleuren gekozen: 2 Hoofdkleuren
RGB 255-204-0 #ffcc00 CMYK 0-21-92-0
RGB 0-0-0 #000000 CMYK 86-85-79-100
2 Steunkleuren
RGB 204-204-204 #cccccc CMYK 24-18-17-0
RGB 102-102-102 #666666 CMYK 62-52-49-20
Contrastkleur
RGB 51-204-153 #33cc99 CMYK 67-0-52-0
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.
RONDE
EREN ND
N VLAA VA
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
12 pt = 16 px = 100% = 1em
Arial Bold
15 pt = 20 px = 125% = 1,25em
ARIAL BOLD KAPITALEN
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
Lees verder
14
Active state
Hover state
Visited state
Lees verder
Lees verder
Lees verder
Home
Home
Home
Home
Top
Top
Top
Top
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
TOERTOCHT
PARCOURS
HISTORIE
EXTRA
HISTORIE
EXTRA
Default state
WEDSTRIJD
Hover state
WEDSTRIJD
TOERTOCHT
NIEUWS
active state
PARCOURS
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
Concept website Ronde van Vlaanderen
Copyright
Disclaimer
16
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
RONDE
RONDE
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 Dolor sit sit amet, amet, consectetur consectetur adipiscing adipiscing elit. elit. Tum Tum Piso: Piso: Quoniam Quoniam igitur igitur aliquid aliquid omnes, omnes, quid quid Lucius Lucius noster? noster? Hoc Hoc ipsum ipsum elegantius elegantius poni poni meliusque meliusque potuit. potuit. Habent Habent enim enim et et bene bene longam longam et et satis satis litigiosam litigiosam disputationem. disputationem. Ergo Ergo hoc hoc quidem quidem apparet, apparet, nos nos ad ad agendum agendum esse esse natos. natos.
Et Et quidem, quidem, inquit, inquit, vehementer vehementer errat; errat; Haec Haec igitur igitur Epicuri Epicuri non non probo, probo, inquam. inquam. Qua Qua ex ex cognitione cognitione facilior facilior facta facta est est investigatio investigatio rerum rerum occultissimarum. occultissimarum. At At iam iam decimum decimum annum annum in in spelunca spelunca iacet. iacet. Dempta Dempta enim enim aeternitate aeternitate nihilo nihilo beatior beatior Iuppiter Iuppiter quam quam Epicurus; Epicurus; Egone Egone quaeris, quaeris, inquit, inquit, quid quid sentiam? sentiam?
Lees verder
Duo Reges: constructio interrete. Vestri haec verecundius, illi fortasse constantius.
“Life is like riding a bicycle. To keep your balance you must keep moving.”
Duo Reges: constructio interrete. Vestri haec verecundius, illi fortasse constantius.
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.
Disclaimer | Copyright
17
EREN ND
N VLAA VA
EREN ND
N VLAA VA
Tuo Tuo vero vero id id quidem, quidem, inquam, inquam, arbitratu. arbitratu. Illa Illa argumenta argumenta propria propria videamus, videamus, cur cur omnia omnia sint sint paria paria peccata. peccata. Plane Plane idem, idem, inquit, inquit, et et maxima maxima quidem, quidem, qua qua fieri fieri nulla nulla maior maior potest. potest. Ne Ne amores amores quidem quidem sanctos sanctos aa sapiente sapiente alienos alienos esse esse arbitrantur. arbitrantur. Quam Quam tu tu ponis ponis in in verbis, verbis, ego ego positam positam in in re re putabam. putabam. Videmusne Videmusne ut ut pueri pueri ne ne verberibus verberibus quidem quidem aa contemplandis contemplandis rebus rebus perquirendisque perquirendisque deterreantur? deterreantur? Home
Disclaimer | Copyright
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
5 november 2013 1 uur � Kennismakingsgesprek 18 uur � Vormgeving en ontwerp website 30 november 2013 1 uur � Presentatie concept 8 uur � Uitwerking concept 18 uur � Bouwen website in HTML/CSS 5 februari 2014 4 uur � Testfase 8 uur � Eventuele aanpassingen 1 maart 2014 � Oplevering website op afspraak � Onderhoud website
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
