Ontwerpverslag
Datum: 19 december 2008 Klas: IC1F Door: Jeffrey Kleering van Beerenbergh, Johan Bult en Michiel Rheiter.
Inhoudsopgave Inleiding
3
Mindmap
4
Moodboard
4
Concept beschrijving
6
Navigation interaction design
6
Kleurschema
7
Typografie
8
Layout grid
9
Eerste concept
9
Definitief concept
11
2
Inleiding In het ontwerpverslag vindt u een volledige uitwerking van het ontwerp voor Topsite e-zine van Top magazine. In dit document worden de fasen behandeld tot de ontwikkeling van het definitieve concept als in de ontwerp eisen voor de uiteindelijke website.
3
Mindmap Voorafgaand is er een gezamenlijke mindmap gemaakt. Deze mindmap bevat zowel technische als sfeer eigenschappen van het project. Omdat de mindmap te groot van volume is om toe te voegen aan een print document hebben wij deze op internet geplaatst. De mindmap is te vinden op de volgende locatie: http://www.kleering.nl/ill/remediate/remediate.jpg
Moodboard Om een goed beeld te krijgen van wat het project visueel gaat uitstralen zijn er 3 afzonderlijke moodboards gemaakt. Ieder moodboard door één van de teamleden.
Bovenstaand het moodboard van Johan. Wij hebben mede voor dit moodboard gekozen vanwegen de speelde opbouw. De wereldbol zal letterlijk overgenomen worden in de conceptfase.
4
Bovenstaand het moodboard van Michiel. Dit moodboard laat goed zien dat er een leerzame en vooral actief uitvoerend aspect aan de e-zine zit.
Bovenstaand het moodboard van Jeffrey. Dit moodboard laat goed de speelse kleurstelling en vrolijke school-klas sfeer zien.
5
Conceptbeschrijving Basisidee: Een gezellige en leerzame plek waar interactie centraal staat voor kinderen in de leeftijdsgroep 10-14 jaar. Inhoud: Actueel nieuws, thema educatie, spelletjes, interactie en opdrachten Doel: Kinderen op een leuke manier laten leren, door zelf te ontdekken Structuur: Alles toegankelijk doormiddel van een login of publiek gebruik maken zonder login. Dit alles via een gestructureerde simpele navigatie. Verschijningsvorm: Een E-zine website met een maandelijks wisselend actueel thema.
Navigation interaction design De website bestaat uit twee typen pagina’s. De standaard en de splash (binnenkomst). De splash heeft één navgatie, de standaard pagina heeft 3 verschillende navigaties. De horizontale hoofdnavigatie, de linker subnavigatie en onderaan een navigatie in de footer. Onderstaand een overzicht van links in ieder van de bovengenoemde navigatie blokken. Splash -
home
-
artikelen
-
media
-
games
-
proefjes
-
forum
Home en vervolgpagina -
-
Hoofdnavigatie (horizontaal) o
Home
o
Artikelen
o
Media
o
Games
o
Proefjes
o
Forum
Subnavigatie (linkerbalk)
6
-
o
Home
o
Thema (feestdagen)
o
Artikelen
o
Proefjes
o
Games
o
Highscore
o
Media
o
Magazine
o
Zoeken
Footer o
Home
o
Zoeken
o
Ouders
o
Sitemap
o
Contact
Kleurschema In het kleurschema voor de website maken wij onderscheid tussen hoofdkleuren die altijd hetzelfde blijven en themakleuren die wijzigen met het thema. In dit geval is het thema december en zijn de kleuren volgens de feestdagen en winter getint.
7
Typografie De typografie is gebaseerd op het magazine en heeft een speelse en vrolijke uitstraling. We maken gebruik van verschillende fonts. Dit is afhankelijk van de plaats, onderwerp en nadruk. Het magazine maakt vergelijkbaar gebruik van fonts.
Kopteksten en Nadrukken
Tekton pro bold Normale tekst
Verdana regular 10pt Verdana bold 10pt Verdana italic 10pt
8
Layout grid In de onderstaande afbeelding het grid voor de concept website. Hierin is gebruik gemaakt van een maximale afmeting van 900 pixels voor de effectieve content met een maximale afmeting van 1000 pixels voor de gehele visuele presentatie exclusief de achtergrond (deze is schaalbaar). Het grid kent een maximum van 4 horizontale kaders. Hierbij valt het 4de kader buiten het content vlak. Deze is gereserveerd voor gebruikers inloggen, instellingen en opties. Het 1e kader wordt gebruikt voor de linkernavigatie balk en voor ads. De 2de en 3de worden gebruikt voor pagina content en kunnen waar nodig samengevoegd worden. Het grid is dynamische in verticale opzicht. Dit betekend dat wanneer de content uitgebreider wordt de pagina verticaal mee schaalt.
Eerste concept Het eerste concept dat is gepresenteerd maakt nog niet gebruik van het thema december en is in zijn geheel een basisindeling van de website met alle navigatie blokken en kaders uitgewerkt. Voor het concept zie volgende pagina.
9
10
Definitief concept Het definitief concept bestaat uit twee voorbeeld pagina’s. De eerste pagina is de splash en de tweede de standaard pagina. Beide zijn bijgewerkt met het thema december, feestdagen. In het communicatieplan is te vinden hoe wij de boodschap slogan ‘De wereld op zijn TOP’ hebben bedacht. Deze slogan zit tevens verwerkt in het concept.
Splash
De wereld van de wereld op zijn TOP maakt gebruik van dezelfde blauwe kleuren als in het standaard pagina ontwerp. De herkenbare pictogrammen zijn dezelfde navigatie opties en zijn overigens niet gebonden aan het kleurenschema. Boven de aarde is een uitdrukking te zien van het huidige thema, in dit geval in de vorm van een elf van de Kerstman. Dit is tevens de navigatieklik naar de thema pagina.
11
Standaardpagina
Op de standaard pagina zijn in een horizontale banner die over de eerste drie kaders strekt een uitdrukking te zien van het thema. De nieuwsitems zijn geordend maar speels in vrolijk gekleurde kaders geplaatst. De aarde op de achtergrond is wat verder uitgezoomd dan in de vorige versie van het concept, dit komt overeen met de splash pagina en zorgt voor een extra stukje herkenning naast de terugkomende herkenbare pictogrammen.
12
