CMS Interactieontwerp website Content management systemen
Yang Zhou | CMS opdracht | Ronald van Essen 27 MEI 2016
1589771
Voorwoord Voor de cursus Content management systemen (CMS) is er een opdracht ontvangen om een fictieve vereniging (Rohda 84) te ondersteunen met hun website. Het gaat hierbij specifiek om het creëren van een website dat over de vereniging zelf gaat en waar zij voor staan. Dit interactieontwerp dat voor u ligt is de afsluiting van content management systemen, gezien het adviesrapport al is verstuurd. Er was wat miscommunicatie bij het aangeven van de datum over het inleveren, gezien ik geen mail heb ontvangen over de precieze datum waarop het moet worden ingeleverd. Toch is er uiteindelijk juist gecommuniceerd met de leraar en is het resultaat de hier opgestelde interactieontwerp. Een ander struikelblok was dat naast de stress van het opeens eerder inleveren ook dat er verschillende deadlines waren in week 4 van Sys-1. In deze week waren er veel deadlines (interactieontwerp sys-1, individuele opdracht, contractvoorwaarden en klantmomenten met Softijs), waardoor er tijdnood ontstond voor de herkansing. Gelukkig is het uiteindelijk goed gekomen. Ik houd u niet langer bezig, ik wens u veel leesplezier, Yang Zhou.
1|Page
Inhoud Voorwoord .............................................................................................. 1 Inhoud ................................................................................................... 2 Inleiding ................................................................................................. 3 Het concept van de webshop ....................................................................... 4 Opdrachtbeschrijving ............................................................................... 4 Doel van de website ................................................................................. 4 Doelgroepen .......................................................................................... 5 Paginaindeling .......................................................................................... 7 Stijlgids .................................................................................................. 8 Moodboard, kleur & lettertype .................................................................... 8 Navigatiestructuur .................................................................................... 9 Grafische vormgeving ................................................................................ 11 Korte handleiding .................................................................................... 12 Wireframes .................................................................................. 14 t/m 27
2|Page
Inleiding Voor de cursus contentmanagement systemen heb ik een opdracht ontvangen een website te maken met behulp van WordPress. Het gaat hierbij specifiek om een website over een fictieve handbalvereniging genaamd Rohda 84(Recht Op Het Doel Af). De website moest modern, aantrekkelijk en interactief zijn. In dit document staat de interactieontwerp beschreven. Hieruit kan men het doel van de website vinden, de beschrijvingen van verschillende doelgroepen, een overzicht van pagina’s, navigatiestructuur, enkele wireframes, grafisch ontwerp en stijlgids. In dit interactieontwerp staan al mijn keuzes, bevindingen en resultaten beschreven.
3|Page
Het concept van de webshop Opdrachtbeschrijving: De fictieve handbalvereniging Rohda 84 ofwel Recht Op Het Doel Af heeft dringend een website nodig voor de club. De club uit Broningen verwacht dat de website modern, aantrekkelijk en interactief overkomt voor de gebruiker. De nieuwe website zal moeten voldoen aan de volgende eisen: •
Bezoekers kunnen informatie lezen over het laatste nieuws, waarbij de nieuwsitems zijn opgeleukt met foto’s of filmpjes
•
Bezoekers kunnen informatie lezen over geschiedenis van de vereniging
•
Bezoekers kunnen het wedstrijdprogramma en de standen bekijken
•
Bezoekers kunnen zich inschrijven voor een nieuwsbrief
•
Bezoekers kunnen zich aanmelden als vrijwilliger (bardienst, schoonmaken, chauffeur)
•
De vrijwilligers kunnen zien wanneer zij dienst hebben
•
Bezoekers kunnen antwoorden vinden op 'veel gestelde vragen'
•
Elk team heeft een eigen blog waarop alleen de teamleden kunnen posten. Hierbij kun je denken aan wedstrijdverslagen, oproep ter ondersteuning, etc
•
De site bevat een contactpagina met daarop de adresgegevens, een kaart en een contactformulier
•
De site heeft een afgesloten gedeelte voor de leden van de club waarop bijvoorbeeld de notulen van de vergaderingen staan
Doel van de website: Het doel van de website is het voornamelijk richten op het informeren over situaties en nieuws over de handbalvereniging. Gebruikers die de website komen bezoeken zijn veelal gebruikers die bekend zijn met de website, maar de website moet ook toegankelijk worden gemaakt voor gebruikers die helemaal niet bekend zijn met Rohda 84, ofwel nieuwe gebruikers. Bestaande gebruikers zoals teamleden kunnen zich inloggen en daarna gebruik maken van berichten die speciaal bestemd zijn voor bestaande leden. Dit is bijvoorbeeld voor iemand van de club belangrijk, zodat zij de laatste gebeurtenissen kunnen lezen en wanneer zijn moeten spelen. Verder kunnen vrijwilligers zich aanmelden voor werk en hun werkschema bezichtigen. Nieuwe bezoekers zijn vaak vrijwilligers, fans, concurrenten of gewoon mensen die geïntresseerd zijn in de club en/of handbal zelf.
4|Page
Doelgroepen Er zijn een aantal gebruikers die zich op de website het meest op de website zullen begeven. Dat zijn 5 groepen: De beheerders: Dit is een heel klein doelgroep die volledige controle over de website heeft. Beheerders mogen alles veranderen naar hun eigen smaak en kunnen de website aanpassen wanneer naar wens. Het is daarom van belang om de website en de functies ervan zo toegankelijk mogelijk te kunnen maken voor dit doelgroep. Ook moet de structuur en overzicht van de site makkelijk te bereiken zijn. Teamleden: Elk team heeft een eigen blog waarop alleen de teamleden toegang heeft. Dit is zeer handig voor een teamlid voor bijvoorbeeld het laatste nieuws, wedstrijdverslagen, oproepen ter ondersteuning enzovoort. Teamleden hebben zo meer toegang tot informatie, tijden en schema’s voor eventuele wedstrijden en andere evenementen. Daarnaast kan elk teamlid posten op hun eigen blog, daarop reageren en zo beter socialiseren met elkaar en communicatie actief houden Fans: Een derde gebruikersdoelgroep zijn fans. Dit doelgroep focust zich vooral op informatie. Fans kunnen worden ingedeeld in bestaande en nieuwe fans. Bestaande fans willen weten wanneer er een wedstrijd is, wat de uitslagen zijn, of er nieuws is over een teamlid met een blessure en ander nieuws dat zich richt op handbal binnenin de vereniging. Nieuwe fans richten zich vooral op informatie en waar het team voor staat en bijvoorbeeld welke spelers er zijn. Fans kunnen komen via actuele wedstrijden, sociale media (Facebook, twitter etc.), actuele media (Tv, radio etc.) en andere populaire evenementen.
5|Page
Vrijwilligers: Vrijwilligers zijn een belangrijke gebruikersdoelgroep. Deze kunnen namelijk de vereniging ondersteunen. Zij kunnen zich aanmelden voor vrijwilligerswerk. Tevens kunnen zij op de website zien wat bijvoorbeeld hun werkrooster is en meer. Vrijwilligers zijn vaak fans, familieleden en vrienden die graag iets willen bijdragen aan de vereniging.
Tegenstanders/concurrenten: Ten slotte is er dit deelgroep, een relatief klein groep dat vooral de site bekijkt voor de huisstijl, het team en algemene informatie. De tegenstanders kijken vooral naar informatie dat niet meteen beschikbaar is en willen bijvoorbeeld zien welke nieuwe spelers zijn bijgekomen bij Rohda 84. Uiteindelijk gaat het om het concurreren met de tegenstander, in dit geval Rohda 84.
6|Page
Pagina indeling Dit is een korte beschrijving met de pagina’s die zullen komen in de website: Homepage Dit is de homepagina waar alle snelle informatie wordt neergeplaatst. Denk hierbij aan een welkomstbericht, korte inleiding tot de website, de huidige standen etc. Nieuws Dit is simpelgezegd nieuws. Nieuws over handballvereniging zelf, maar ook wat er gaande is rondom de handballsport. Wedstrijden In dit pagina staan kort de volgende wedstrijden die zullen worden gespeeld. Bij de huidige stand staat aangegeven wat de huidige statistieken zijn en hoe goed Rohda 84 staat. In de wedstrijdschema staat aangegeven wanneer en waar de volgende aankomende wedstrijden zullen worden gespeeld. Lidmaatschap Hier kunnen nieuwe gebruikers of mensen die erg geïntresseerd zijn eventueel aanmelden en vragen of ze lid kunnen worden van de handballvereniging. Teams Dit zijn de teams, Heren 1, Heren 2, Dames 1 en daarbij hun blogs en fotoalbums. Deze zijn alleen te zien voor de leden. Vrijwilligers Vrijwilligers kunnen zich hier aanmelden en daarna mochten ze aangenomen zijn, hun werkrooster opzoekn via Schema. Rohda 84 Dit is een korte geschiedenis over Rohda 84, hoe het is ontstaan en welke ervaringen en overwinningen ze hebben behaald. Contact Mochten er vragen zijn dan kan er hier een formulier worden ingevuld en verstuurd worden. Sitemap Dit is de sitemap, zodat er een overzicht wordt gehouden op de structuur van de website en waar men zich moet begeven. 7|Page
Stijlgids Moodboard: Om een duidelijke stijl te creëren wordt er eerst gekeken naar de kleuren, vormen en afbeeldingen. Hierbij wordt er georiënteerd naar mogelijkheden en uiteindelijk daaruit een moodboard opgesteld. Vanuit de moodboard kunnen we de stijl, kleur en lettertype defineren.
Kleur In de moodboard is er een duidelijk voorkeur naar oranje/geel met zwart. Dit zijn ook de twee voornaamste kleuren die belangrijk zijn voor de club. Het tenue van de Rohda 84 is namelijk oranje/geel-achtig met zwart. De belangrijkste kleuren hierbij zijn oranje, zwart en wit. Wit brengt orde mee en daarbij is wit een goede keuze voor een professionele look en overzichtelijkheid. Font De font is erg simpel, hierbij maken we gebruik van Arial. Het belangrijkste bij de website is de tekst leesbaar, overzichtelijk en helder laten overkomen. Arial is daarbij een makkelijk, maar een helder lettertype wat zorgt voor duidelijk en leesbaar tekst. 8|Page
Navigatiestructuur Hieronder begeeft zich de navigatiestructuur. Dit is gericht op het menu bovenaan, zodat men sneller weet waar ze moeten zijn. Inloggen kan men op elk pagina.
Verdieping: Het diagram hierboven is simpel maar overzichtelijk en dat is ook de bedoeling. Op de Homepage heeft men toegang tot actuele nieuws, lidmaatschap en de huidige uitslagen. Voor gebruikers is dit vaak het meest van belang. Nieuws is belangrijk voor alle gebruikers, Lidmaatschap richt zich tot nieuwe gebruikers en potentiële nieuwe leden en uitslagen zijn van belang voor fans van de club. Naast de homepage hebben we Nieuws voor meer uitgebreid nieuws en andere actualiteiten en Wedstrijden voor helderheid van de actuele standen en aankomende wedstrijden. In het midden van het menu hebben we lidmaatschap en teams. Lidmaatschap heeft een kopstuk, dat is lid worden. Hier is er nader uitleg over hoe gebruikers lid kunnen worden van de vereniging, als teamlid of als medewerker. In Teams staan belangrijke informatie over elke speler, onderverdeeld in divisies, Heren 1 , Heren 2 en Dames 1. Verder in het menu staat Vrijwilligers, een belangrijk onderdeel gezien vrijwilligers altijd nodig zijn voor eventueel vervoer of werk in de horeca. Het kopstukje Rohda 84 vertelt ons meer over Rohda 84 zelf, denk hierbij aan geschiedenis, clubhuis, clubtenue etc.
9|Page
Tenslotte hebben we Contact, waarbij de locatie en plaats wordt weergegeven, F.A.Q (voor veel gestelde vragen een Sitemap voor extra overzichtelijkheid over wat er allemaal beschikbaar is op de website.
10 | P a g e
Grafisch ontwerp Dit is een grafisch ontwerp waar er een beeld gevormd kan worden op de website, met het oogpunt op de homepage.
11 | P a g e
Korte Handleiding Reactie op een nieuws bericht: Bij het goedkeuren van een reactie kan de beheerder simpel weg naar reacties gaan in de Wordpress dashboard. Daarginds klikken en de reactie die u wilt verwijderen, aanpassen of goedkeuren. Dit werkt ook op posts. Dit zorgt voor het gemakkelijk aanpassen van bijvoorbeeld negatieve reacties of het goedkeuren van positieve reacties op bijvoorbeeld de laatste uitslagen.
Nieuw lid toevoegen: Een beheerder kan een nieuw lid toevoegen door middel van op het paneel aan te geven welke nieuwe gebruikers er zijn, de gebruiker kan dan aangezet worden en aangepast op het nieuwe lid. In onderstaand afbeelding is er bijvoorbeeld een nieuwe vrijwilliger aangemaakt en deze heeft de rechten om zich in te loggen en om bijvoorbeeld het werkschema van een vrijwilliger te bekijken.
12 | P a g e
Agenda vrijwilligers aanpassen: De beheerder kan de agenda van de vrijwilligers aanpassen in de wordpress dashboard. Deze kan naar Kalender gaan en dan verschillende settings aanpassen, vervolgens kan er worden aangegeven wanneer de werktijden zijn door middel van deze plugin. Het makkelijker hiervan is dat de beheerder direct via het paneel events kan toepassen. Handig hierbij is het aanmaken van vershillende kalenders zodat er 1 specifiek gericht is op vrijwilligers die het vervoer regelen, als bardienst willen fungeren of gewoon willen schoonmaken. Hieruit kan de admin de Event-titel aanpassen en aangeven welke functie wordt bedoeld. Vanuit de eventomschrijving kan de admin wat meer informatie aangeven, bijvoorbeeld of er een evenement wordt gehouden en waar vrijwilligers zich op moeten voorbereiden. De event-categorie kan de beheerder indelen als bardienst, chauffeur of schoonmaker. Verder kan er duidelijk worden neergezet op welke dag en tijdstip het wordt gehouden.
13 | P a g e
Wireframes Homepage
14 | P a g e
Nieuws
15 | P a g e
Wedstrijden
16 | P a g e
Lidmaatschap
17 | P a g e
Teams
18 | P a g e
Teams 1, 2 en 3
19 | P a g e
Ledenpagina
20 | P a g e
Blogpagina
21 | P a g e
Vrijwilligers
22 | P a g e
Schemavrijwilligers
23 | P a g e
Geschiedenis
24 | P a g e
Contact
25 | P a g e
FAQ
26 | P a g e
Googlemaps
27 | P a g e
