WEB DESIGN van concept tot realisatie

1. WEBDESIGNvan concept tot realisatie In acht stappen naar een succesvolle website

2. Soorten Websites • Bedrijfspresentaties • Voorlichting • Nieuws • Portal • Zoekmachines • Community • Educatief • Webwinkels • Entertainment • Intranet • Extranet • Particuliere websites

3. 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

4. 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

5. 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

6. 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

7. 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

8. Een projectplan, wanneer ?;-) Initiatief Internet Project Plan Realisatie Testen Oplevering Evaluatie Onderhoud

9. Je plan uitvoeren met een webteam    • Opdrachtgever • Projectmanager • Informatiearchitect-Usability-expert • Vormgever • Ontwikkelaar • Tekstschrijver

10. Je plan uitvoeren met een webteam    OPTIONEEL LUXE • Multimediaspecialist • Databasespecialist • Testteam • Anderen : • Marketing specialisten • Juridische adviseurs • Beveiliginsspecialist • …  CMD team              CMD-er alleen

11. Acht stappen : het project plan • Analyse, beeldvorming en planning • Doel en doelgroep • Inhoud website • Functioneel ontwerp • Grafisch ontwerp • Technisch ontwerp • Onderhoudsplan • Promotie van een website

12. 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

13. 1 … Planning • Je hebt een duidelijkbeeld 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

14. 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

15. 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

16. 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

17. 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

18. 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!

19. 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

20. 4 Functioneel ontwerp(hoe werkt de site voor de bezoeker) • Doe een voorstel naar pagina-indeling: Tagline Zoeken Logo Breadcrums Navigatie Inhoud

21. 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

22. 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

23. 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

24. 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…

25. 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…

26. 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