Het verder uitwerken van een sitestructuur
Structuren Uit:  http://www.webstyleguide.com/ , Patrick Lynch & Sarah Horton
Linear structure
Hub and spoke: an extension of linear structure
Web structure
Hierarchical structures
Polyhierarchical structure
Facets
Examples <ul><li>http://www.wefeelfine.org/ </li></ul><ul><li>http://www.visualcomplexity.com/vc/ </li></ul><ul><li>http:/...
Site maps/content inventory
Site maps/content inventory
Flow charts <ul><li>Dan Brown: Flow Charts </li></ul>
Navigatie <ul><li>Navigatie is:  </li></ul><ul><ul><li>Iedere actie die gebruikers bij een ander deel van de site- of info...
Navigatiepatronen
Labels: plaatjes of tekst <ul><li>Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als...
Labels: plaatjes of tekst Plaatjes Tekst Ambigu en snel onduidelijk  Eenduidig en helder Leercurve Geen leercurve voor het...
Soorten labels <ul><li>De belangrijkste soorten labels in webpagina’s zijn: </li></ul><ul><li>Labels voor contextuele link...
Labels voor contextuele links <ul><li>Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie </li></ul>
Labels voor contextuele links <ul><li>De vraag die je als ontwerper altijd moet stellen:  </li></ul><ul><li>“ Welke inform...
Labels voor koppen (‘headings’) <ul><li>Moet hetgeen beschrijven dat eronder volgt </li></ul><ul><li>De betekenis van het ...
Labels voor navigatie opties <ul><li>Ontwerp je als een geheel </li></ul><ul><li>Door consistentie versterk je bekendheid ...
Labels voor navigatie opties
Flow, navigatie en stucturen <ul><li>Flow, op site-niveau </li></ul>
Flow, navigatie en stucturen <ul><li>Flow, op pagina-niveau door het aanbrengen van visuele structuur </li></ul>
Het aanbrengen van visuele structuur <ul><li>Layout </li></ul>
Het aanbrengen van visuele structuur <ul><li>Layout </li></ul>
Het aanbrengen van visuele structuur <ul><li>Typografie </li></ul>
Het aanbrengen van visuele structuur <ul><li>Typografie </li></ul>http://www.csszengarden.com/
Het aanbrengen van visuele structuur <ul><li>Kleur </li></ul><ul><li>Trekt aandacht </li></ul><ul><li>Verbeterd navigatie ...
Het aanbrengen van visuele structuur <ul><li>Maar kleur wordt ook nog wel eens misbruikt: </li></ul><ul><li>Te veel kleure...
Het aanbrengen van visuele structuur <ul><li>Het visuele ontwerp stuurt het oog van gebruikers door een pagina </li></ul><...
Bedankt voor jullie aandacht <ul><li>Vragen? </li></ul><ul><ul><li>http ://vakgroep.cmd.hro.nl/iad </li></ul></ul><ul><ul>...
Upcoming SlideShare
Loading in …5
×

Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur

641 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
641
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • Iad1 Q2 Hoorcollege 2 Labels En Visuele Structuur

    1. 1. Het verder uitwerken van een sitestructuur
    2. 2. Structuren Uit: http://www.webstyleguide.com/ , Patrick Lynch & Sarah Horton
    3. 3. Linear structure
    4. 4. Hub and spoke: an extension of linear structure
    5. 5. Web structure
    6. 6. Hierarchical structures
    7. 7. Polyhierarchical structure
    8. 8. Facets
    9. 9. Examples <ul><li>http://www.wefeelfine.org/ </li></ul><ul><li>http://www.visualcomplexity.com/vc/ </li></ul><ul><li>http://www.moma.org/exhibitions/2008/elasticmind/ </li></ul>
    10. 10. Site maps/content inventory
    11. 11. Site maps/content inventory
    12. 12. Flow charts <ul><li>Dan Brown: Flow Charts </li></ul>
    13. 13. Navigatie <ul><li>Navigatie is: </li></ul><ul><ul><li>Iedere actie die gebruikers bij een ander deel van de site- of informatiestructuur brengt. </li></ul></ul><ul><li>De twee belangrijkste doelen van elke navigatie is: </li></ul><ul><ul><li>Te informeren waar je bent </li></ul></ul><ul><ul><li>Duidelijk maken wat de volgende stap moet zijn om je doel te bereiken </li></ul></ul>
    14. 14. Navigatiepatronen
    15. 15. Labels: plaatjes of tekst <ul><li>Hoewel plaatjes (iconen of pictogrammen) in computerprogramma’s veel worden gebruikt als labels, voeren tekstlabels de boventoon op het web </li></ul>
    16. 16. Labels: plaatjes of tekst Plaatjes Tekst Ambigu en snel onduidelijk Eenduidig en helder Leercurve Geen leercurve voor het ‘herkennen’ Eenvoudig en snel te herkennen Kost meer tijd om te herkennen
    17. 17. Soorten labels <ul><li>De belangrijkste soorten labels in webpagina’s zijn: </li></ul><ul><li>Labels voor contextuele links </li></ul><ul><ul><li>Verwijzingen naar informatie elders, binnen de tekst </li></ul></ul><ul><li>Labels voor koppen (‘headings’) </li></ul><ul><ul><li>Een beschrijving van de informatie die volgt </li></ul></ul><ul><li>Labels voor navigatie opties </li></ul><ul><ul><li>De labels die de opties in de navigatie van de site vertegenwoordigen </li></ul></ul>
    18. 18. Labels voor contextuele links <ul><li>Ontstaan veelal ad hoc: hebben dan ook weinig systematiek of consistentie </li></ul>
    19. 19. Labels voor contextuele links <ul><li>De vraag die je als ontwerper altijd moet stellen: </li></ul><ul><li>“ Welke informatie verwacht de gebruiker te krijgen via deze link?” </li></ul>
    20. 20. Labels voor koppen (‘headings’) <ul><li>Moet hetgeen beschrijven dat eronder volgt </li></ul><ul><li>De betekenis van het label wordt geholpen door de structuur in de grafische vormgeving </li></ul><ul><li>Veelal in samenhang: moeten dus meer als geheel worden ontworpen </li></ul>
    21. 21. Labels voor navigatie opties <ul><li>Ontwerp je als een geheel </li></ul><ul><li>Door consistentie versterk je bekendheid </li></ul><ul><li>Sommige labels zijn bekend bij web gebruikers (‘home’, ‘start’, ‘search’, ‘news’, ‘help’, ‘FAQ’, ‘about us’ etc.) </li></ul>
    22. 22. Labels voor navigatie opties
    23. 23. Flow, navigatie en stucturen <ul><li>Flow, op site-niveau </li></ul>
    24. 24. Flow, navigatie en stucturen <ul><li>Flow, op pagina-niveau door het aanbrengen van visuele structuur </li></ul>
    25. 25. Het aanbrengen van visuele structuur <ul><li>Layout </li></ul>
    26. 26. Het aanbrengen van visuele structuur <ul><li>Layout </li></ul>
    27. 27. Het aanbrengen van visuele structuur <ul><li>Typografie </li></ul>
    28. 28. Het aanbrengen van visuele structuur <ul><li>Typografie </li></ul>http://www.csszengarden.com/
    29. 29. Het aanbrengen van visuele structuur <ul><li>Kleur </li></ul><ul><li>Trekt aandacht </li></ul><ul><li>Verbeterd navigatie en scansnelheid </li></ul><ul><li>Creëert relaties tussen elementen </li></ul>
    30. 30. Het aanbrengen van visuele structuur <ul><li>Maar kleur wordt ook nog wel eens misbruikt: </li></ul><ul><li>Te veel kleuren hindert visueel scannen </li></ul><ul><li>Gebruik van tegengestelde kleuren bemoeilijkt de leesbaarheid </li></ul><ul><li>Al te zeer verzadigde kleuren vragen te veel aandacht </li></ul><ul><li>Onvoldoende verschillen tussen kleuren geven slechte contrasten </li></ul><ul><li>Onvoldoende rekening houden met kleurenblindheid sluit ca. 10% van de mannelijke bevolking uit </li></ul>
    31. 31. Het aanbrengen van visuele structuur <ul><li>Het visuele ontwerp stuurt het oog van gebruikers door een pagina </li></ul><ul><li>Cruciaal voor een startpagina als deze </li></ul>
    32. 32. Bedankt voor jullie aandacht <ul><li>Vragen? </li></ul><ul><ul><li>http ://vakgroep.cmd.hro.nl/iad </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul>

    ×