WEB DESIGN van concept tot realisatie
description
Transcript of WEB DESIGN van concept tot realisatie
WEBDESIGNvan concept tot realisatie
In acht stappen naar een succesvolle website
Soorten Websites
• Bedrijfspresentaties
• Voorlichting
• Nieuws
• Portal
• Zoekmachines
• Community
• Educatief
• Webwinkels• Entertainment• Intranet• Extranet• Particuliere
websites
Grootste frustraties ;-( bij gebruikers
• Te lang moeten wachten• Pop-up en fullscreen windows• Dode links• Onvindbare informatie / weg verliezen• Te veel advertenties• Verplichtingen zoals resolutie en registratie• Anonimiteit van de site• Ongewenste intro’s en achtergrondgeluid
Grootste frustratie ;-( bij ontwerpers
Als ontwerper moet je leren omgaan met “de frustratie van de ontwerper” : het probleem van de verschillende platforms, verschillende browsers, verschillende versies van browsers en last but not least : EEN GEBRUIKER DIE NIET PRECIES WIL / DOET WAT JIJ WIL
Waarom een projectmatige aanpak?
• Website wordt gebruikt als digitale folder
• Bedrijfsstructuur wordt sitestructuur
• Eigen mensen zijn niet op de hoogte
• Foute inschatting van de kosten
• Onderschatting van de tijd voor onderhoud
• Niet ingeloste verwachtingen door slechte afspraken
Een projectplan, wat ?;-)
• Een document waarin alle relevante aspecten staan beschreven die voor het realiseren van een site belangrijk zijn
• Wordt vooraf geschreven• Bepaald de afbakening van het project• Iedereen weet waar hij/zij aan toe is en wat er
verwacht wordt• Onduidelijkheden worden vooraf reeds aangepakt• Hoe groter het project hoe belangrijker het plan
Een projectplan, waarom ?;-)
• De opdracht afbakenen
• Betere communicatie tussen teamleden
• Beter het proces te kunnen controleren
• Het proces meer structuur te geven
• Fouten tijdens realisatie voorkomen
• Voorkomen van dubbel werk
Een projectplan, wanneer ?;-)
Initiatief
Internet Project Plan
Realisatie Testen
Evaluatie
Onderhoud
Oplevering
Je plan uitvoeren met een webteam
• Opdrachtgever
• Projectmanager
• Informatiearchitect-Usability-expert
• Vormgever
• Ontwikkelaar
• Tekstschrijver
Je plan uitvoeren met een webteam
OPTIONEEL LUXE• Multimediaspecialist• Databasespecialist• Testteam• Anderen :
• Marketing specialisten• Juridische adviseurs• Beveiliginsspecialist• …
CMD-eralleen
CMD team
Acht stappen : het project plan
1. Analyse, beeldvorming en planning
2. Doel en doelgroep
3. Inhoud website
4. Functioneel ontwerp
5. Grafisch ontwerp
6. Technisch ontwerp
7. Onderhoudsplan
8. Promotie van een website
1 Analyse, beeldvorming en …
• Analyseer de huidige website indien die er is• Verzamel bedrijfsinformatie
– Jaarverslagen, brochures, huisstijl, gepubliceerde artikelen
• Concurrentieanalyse• Bevraag je klant adhv vragenlijst
Vorm je een beeld koppel het terug
1 … Planning
• Je hebt een duidelijk beeld van wat je moet maken, nu moet je het plannen = budgetteren (moeilijk!)
• Alle taken opsommen• Taken zijn vaak afhankelijk van elkaar• Planningen moeten bewaakt worden en mss wel
veranderd• Geef duidelijk milestones en aanleverdeadlines
aan
2 Doel en…
• Adhv de vragenlijst uit de analyse kan je bepaalde bedrijfsdoelen stilleren
• Rangschik ze en bepaal primaire en secundaire doelen
• Kennis Informatie vb www.php.org
• Houding Context vb www.dove.com
• Gedrag Interactie vb www.dell.com
2… doelgroep
• Wie is de doelgroep?• Algemeen bezoekersprofielprofiel: zo concreet
mogelijk, leeftijd, interesse, sociale positie, geslacht…
• Persoonlijk bezoekersprofiel: maak een fiche van een bestaande voorbeeldpersoon.
• Wat komt hij op de site doen?• Opstellen van een takenlijst: wat wil je dat hij kan
doen op je site en wat verwacht hij dat hij kan doen• Schrijven van een scenario
3 Inhoud website
• Het bepalen van de inhoud is de job van de informatiearchitect (mogelijk een CMD-er). Afhankelijk van het type v/d website zal de inhoud en de vorm hiervan verschillen.– Zijn uitgangspunt is de doelgroep en het doel
van de site– Hij structureerd, legt verbanden en maakt de
informatei inzichtelijk en vindbaar
3 Inhoud website
• Hoe te werk gaan?– Info verzamelen, uit brochures, boeken
databases…(uitgangspunt is de takenlijst: wat moet een bezoeker (kunnen) doen op de site)
– Info organiseren en structureren: informatie die samen hoort samen plaatsen, info organiseren in behapbare stukken en een goede hiërarchie
– Info adresseren/labelen: bepaal juiste volgordes voor je infoblokken en geef ze een goede naam
3 Inhoud website
• Webwriting, een vak appart:– Pas je teksten aan voor het web zie hiervoor
de lessen van communicatie.– Aan de hand van CSS kan je je teksten
makkelijk printbaar maken.– Denk aan goed leesbare lettertypes en
voldoende contrast– Kijk uit voor OVERLOAD!
4 Functioneel ontwerp
• Bedenk hoe de bezoeker het best zal navigeren en hoe hij vinden kan waarnaar hij op zoek is. Doe een voorstel naar– Menustructuren– Zoekmogelijkheden– Breadcrumbs– Sitemaps– Interne links
4 Functioneel ontwerp(hoe werkt de site voor de bezoeker)
• Doe een voorstel naar pagina-indeling:
Logo
Navigatie
Tagline
Breadcrums
Zoeken
Inhoud
4 Functioneel ontwerp(hoe werkt de site voor de bezoeker)
• Doe een voorstel over hoe de pagina er uit zal zien bij verschillende resoluties
• Toon hoe het logo op de pagina zal komen• Maak een schema of diagram over hoe de
inhoud gegenereerd zal worden aan de hand van keuzes die de bezoeker maakt
• Geef aan hoe je met formulieren zal werken
5 Grafisch ontwerp
• Om een goed grafisch ontwerp te kunnen maken moet je eerst en vooral creatief zijn en vervolgens volgende stappen afwerken:
• Een goede briefing van de klant krijgen• Brainstormen voor mogelijke oplossingen• Schetsen, filteren en ideeën uitwerken• Eén of meerdere voorstellen doen aan de klant• Gekozen voorstel uitwerken in een prototype• Dit presenteren en laten goedkeuren
6 Technisch ontwerp
• Geef aan hoe je site gebouwd wordt:– Statisch of dynamisch opzet– Welke talen er gebruikt gaan worden en
waarom (geef hun voordelen aan)– Doe een voorstel naar domeinnaam– Bepaal de resolutie van weergave– Bepaal de browserafhankelijkheden
7 Onderhoudsplan
• Geef aan wie het onderhoud van de site zal doen en wat hieronder wordt verstaan. Geef ook aan wat er allemaal onderhouden moet worden.– Men onderscheidt inhoudelijk, grafisch en
technisch onderhoud.– Mogelijke oplossingen zijn eigen onderhoud,
uitbesteed onderhoud, onderhoud via CMS…
8 Promotie van een website
• Geef aan op welke manieren je de website bekend wil maken– Via traditionele wegen: advertenties televisie
radio drukwerk…– Via Internet: goede URL, zoekmachines,
nieuwsbrieven, webvertising…– Goede META-informatie, trefwoorden,
beschrijvingen, titels…
Presentatie van je Project plan
• Enkel het plan schrijven kan voldoende zijn, maar een persoonlijke presentatie is beter.
– Introduceer het project kort, wat was de aanleiding– Bespreek uitvoerig het doel en de doelgroep!– Bespreek adhv schema’s navigatiemogelijkheden– Het grafisch ontwerp is statisch, geen HTML, liefst gepresenteerd
op een scherm of beamer– Geef de belangrijkste zaken van het technische ontwerp aan, maar
vermijd overkill– Leg uit hoe de website onderhouden kan worden– Bespreek de planning– En de promotiemogelijkheden
• Zoek een evenwicht tussen detail en algemeenheid