Klik hier om de PDF te downloaden.

Opdracht: Maak je eigen website
Deel 1/ Conceptontwikkeling
Je hebt het stappenplan en een aantal belangrijke begrippen leren kennen van
webdesign ( zie multimediaproces; ontwerpen van een site voor school). Deze zul je nu
goed kunnen gebruiken, want je gaat een website ontwerpen.
Open een nieuw Word document. Hierin zal je de eerste gegevens van je website gaan
zetten. Met andere woorden; je gaat een concept maken!
De synopsis
Een synopsis betekent eigenlijk: Een korte/ beknopte omschrijving van je idee. In de
film/TV en Multimedia wereld wordt dit begrip erg vaak gebruikt. Google maar eens een
film naam en synopsis, dan weet je precies wat er mee bedoeld wordt.
Bij het ontwikkelen van een synopsis komen de volgende onderdelen aan de orde:
1.
2.
3.
4.
5.
6.
7.
8.
9.
Tijdsplan Concept- Moodboard
Idee ontwikkelen/ Doelgroepverkenning (soort site)
Omschrijving van de website & naam van de website
Doelstelling van de website
Doelgroep van de website
Hoeveelheid paginaʼs en de titels ervan
Inhoud van de afzonderlijke paginaʼs (tekst, plaatjes, films)
Presentatie concept
Sfeer van de site; een moodboard
Tijdsplan
Voor je gaat beginnen aan de opdracht zul je eerst een planning moeten maken hoe
lang je bezig zal zijn. In het onderdeel conceptontwikkeling behandelen we 2
onderdelen; concept en moodboard. Je kunt gebruik maken van dashboard en de weken
(inclusief data) om voor jezelf een deadline te stellen wanneer je deze twee
onderwerpen van het eerste deel van de opdracht af moet hebben.
Idee ontwikkelen/ Doelgroepverkenning
Voordat je aan de productie van je website kan gaan denken moet je eerst een idee
ontwikkelen (concept).
Maak aan de hand van de gegeven presentatie over beeldschermvormgeving en de
soorten sites waar je uit kan kiezen een keuze.
•
•
•
•
•
•
•
•
Product sites
Merk sites
Micro sites
Experience sites
Webshops
Presentatie sites (visitekaartje)
Weblogs & communities
User generated content sites
Naam van de site
Wat is de naam van je site? Deze komt bovenaan te staan op je homepage, maar kan
bijvoorbeeld ook uitgewerkt worden in Illustrator/ Photoshop . Wil je je naam/ logo
animeren dan gebruik je Flash. Weet je nog even geen naam? Maakt niet uit, maar
straks bij de verdere uitwerkingen van je concept, zul je echt wel een naam moeten
hebben. Ga dus maar vast brainstormen!
Doelstelling van de website
Ook zul je moeten gaan nadenken over de doelstelling van je site. Kijk naar de gekozen
soort website (zie hierboven bij Idee ontwikkeling) en bedenk wat je met de website wilt
bereiken. Met een community website is de doelstelling bijvoorbeeld dat je zoveel
mogelijk mensen met elkaar in contact wilt brengen, bij een webshop is de doelstelling
dat er zoveel mogelijk verkocht wordt.
Doelgroep van de website
WIE wil je aanspreken met je website? Je doelgroep bepaalt de uitstraling van je
website. Een site waar je mensen in contact met elkaar wilt laten komen kan
uiteenlopende doelgroepen hebben. Een community website kan geschikt zijn voor
volwassenen, bij ouderen of bij jongeren. Het ligt aan het onderwerp en/of doelstelling
van de website.
Hoeveelheid paginaʼs en de titels ervan
Uit hoeveel paginaʼs bestaat je website? En hoe heten ze? Kijk op internet voor
inspiratie, hoe anderen het doen. Wees voorzichtig met de hoeveelheid paginaʼs, je
moet het namelijk allemaal zelf gaan ontwerpen en online gaan zetten. En je weet zelf
ook dat er veel linkjes er op een pagina kunnen staan.
Hou de naam van elke afzonderlijke pagina zo compact/kort mogelijk (1 woord!). Deze
moet namelijk ook verwerkt worden in de HTML code. Meestal is je titel van de pagina
ook de button.
Inhoud van de afzonderlijke paginaʼs
Vermeld in het kort wat er op elke pagina komt staan. Wat is het onderwerp van de
pagina? Komt er alleen tekst op te staan of ook fotoʼs, animaties, films,
muziekbestanden?
Presentatie concept
Als je een idee hebt uitgekozen, presenteer je het concept aan mij. Ik geef een Go/ No
Go voor de verdere uitwerking van je concept en het maken van je moodboard!!
Sfeer van de site; een moodboard
Als je een beschrijving hebt gegeven van de paginaʼs in je website, dan zul je het voor
de klant (ik in dit geval) in beeld moeten gaan brengen. Je moet een moodboard maken,
gebruik makend van tekst (keuze lettertype en kreten/ slogans), logo (tekens), plaatjes
van de sfeer (uit magazines) en eventuele screenshots van websites die als voorbeeld
diene
Deel 2/ Het ontwerp
Flow Chart
Nu ga je eerst een flow chart ontwikkelen.
Dus; hoe groot is je site.
Denk na over de hoeveelheid paginaʼs. De gebruiker van het internet moet in een
oogopslag kunnen zien waar hij/zij naar toe kan gaan. Je Homepage moet op alle
paginaʼs ook weer te bereiken zijn. Veelvuldig gebruik van de ʻBack Button” (zie
navigeren) moet dus zoveel mogelijk worden vermeden.
Functioneel Ontwerp
Je gaat een functioneel ontwerp maken.
Dit is een schriftelijke versie van je flow chart, alleen hierin vertel je precies hoe de
buttons heten en waar ze naar toe gaan en wat de functie van de pagina is waar deze
op terecht komt. ( zie voorbeeld van een Functioneel Ontwerp in de Webdesign map)
Look & Feel: Het Storyboard
Nu moet je gaan nadenken over de Look & Feel van je site.
Oftewel hoe het eruit ziet ( Look) en wat je er allemaal mee kan doen (Feel). Je begint
eerst met het maken van schetsen van je site, ook wel een storyboard genoemd.
Je begint met het maken van een aantal schetsen, een storyboard. Voorzichtig ga je een
indeling maken van de verschillende onderdelen die je erin wilt /moet hebben, namelijk
de tekst, plaatjes, menuʼs, eventuele audio, filmpjes, animaties. Je bent dus nu eigenlijk
een schets van een Interface Design aan het maken. Dit doe je met een sjabloon van
een storyboard vel, bij mij op te halen. Neem je gemaakte Flow Chart en Functioneel
Ontwerp erbij, deze heb je nodig om je ontwerp per pagina te bepalen.
Je kunt kleurpotloden gebruiken om alvast een beetje een sfeer te geven aan je
schetsen. Als je dit samen doet dan maken jullie allebei je eigen impressie van hoe de
site eruit moet komen te zien.
Als je klaar bent laat je me de schetsen zien. Ik geef weer een Go/ No Go voor het
uitwerken van het volgende onderdeel; de Look & Feel.
Deel 3/ Digitale voorbereiding
Look & Feel maken
Je kunt in Photoshop, Illustrator of Flash je site gaan voorbereiden. De afzonderlijke
onderdelen moet je natuurlijk in het daarvoor bestemde programma maken.
Document (site) instellingen
Je Document moet net zo groot zijn als een monitor, eigenlijk net iets kleiner, want je
moet rekening houden met menubalken in de internet browser. De meeste monitors zijn
17”, maar er moet ook rekening gehouden worden met monitors van 15”, zoals op de
laptops. Een standaard 15” beeldscherm resolutie is tegenwoordig 1024X768 (vroeger
800X600). Je document moet je dus iets kleiner maken namelijk 940X700.
Vormgeving afzonderlijke onderdelen: Interface Design
In je document ga je alle onderdelen apart vormgeven per pagina:
Dit noemen we: Het Interface Design.
Je werkt in verschillende lagen, zeker met de je buttons, omdat je deze misschien via
een rollover( als je erover heen gaat met je muis) een andere kleur wil geven.
De onderdelen van je ontwerp zijn:
•
•
•
•
•
•
Achtergrond & samenvoegen afzonderlijke elementen (Photoshop document)
Lijn figuren (Illustrator)
Plaatjes (Photoshop)
Buttons (Photoshop of Illustrator)
Menu (Illustrator of Photoshop)
Animaties (Flash)
Je kan ook direct in Dreamweaver vormgeven, en Photoshop gebruiken om je kleuren
en layout te bepalen. Dit wordt dan het platte ontwerp (storyboard). Volg daarna de
Dreamweaver handleiding en zet je website direct in tabellen neer.

Download Report