Webdesign
Webdesign COLLEGE ONDERWERPEN:
• Soorten websites • Geschiedenis • Usability vs. Expierence (Vorm & Functie) • Vormgeving (Bouwstenen, Stijlen) • Produktie (Proces, Tips, SEO)
Wat is “mooi” ?
Webdesign SOORTEN WEBSITES
Webdesign SOORTEN WEBSITES eCommerce Blogs Search engine Portfolio Marketing Corporate Archief Community Dating Gokken Games
Download/Warez Video Wiki’s Affiliate Portal Shock Personal Homepage Review Nieuws Humor etc ...
Webdesign Form follows Function!
Webdesign SOORTEN WEBSITES
•
Overheid (.gov)
•
Commercieel (.com)
•
Nonprofit (.org, .net)
•
Persoonlijk
•
Statisch / Dynamisch
•
HTML / Flash
NADELEN FLASH
VOORDELEN FLASH
• • • •
Vector Audio Animatie Creatieve vrijheid
• • •
Plugin Vindbaarheid (Google) Onderhoud
Geschiedenis
Geschiedenis INTERNET GESCHIEDENIS:
• 1969 - ARPA-net (defensie) • 1974 - TCP/IP • 1983 - Internet als splitsing van ARPA • 1991 - World Wide Web / Hypertekst • 1993 - Browsers voor Mac en Windows
Geschiedenis 5 STADIA:
• Pioniersfase • Presence • Organisatie • eCommerce • Web 2.0
Groei Internet
USABILITY
USABILITY Usability: Iets is gebruiksvriendelijk als de gemiddelde bezoeker de site effectief en efficiënt kan gebruiken
- logische bediening - consequent - standaard indeling - eenvoudige interface
USABILITY • Wat is het essentiële doel van de site? • Design the content, not the box • Denken, Doen, Herhalen ! • Ontwerp de site voor de bezoeker. • Elke pagina: waar ligt de focus? (conversie!) • Less is more TOP 5: leesbaarheid, navigatie, consistentie, snelheid, vindbaarheid
ACCENTEN TEKST: • Scanbare teksten, kort en bondig • Gebruik alinea’s en kolommen • Opvallen d.m.v. BOLD en BULLETS • Wissel tekst en beeld af BEELD: • Gebruik Pictogrammen (3D) • Gebruik kleur en contrast • Functioneel wit • Mensen/gezichten
Gestalt: Het totaalbeeld is méér dan de som der delen
VORMGEVING
VORMGEVING BOUWSTENEN, STIJLEN
• • • • • •
Layout Huisstijl Typografie Kleur Contrast, balans... Mode / Trends
CONTENT
• Titels, logo’s • Navigatie, subnavigatie • Tekst (alinea’s, bullets) • Foto’s, Grafieken
Tekst Layout Door de tekst op een pagina goed vorm te geven vergroot je de leesbaarheid en daarmee het effect. Lange teksten zijn uit den boze, zorg dus altijd voor korte, scanbare teksten. Er zijn een paar manieren om de leesbaarheid van teksten te vergroten: Alinea’s, interlinie, regellengte, bullets, inspringen. Daarnaast kan je belangrijke teksten bold maken, zodat ze extra opvallen. Zorg voor duidelijke koppen (fontsize, kleur, lettertype) en maak onderscheid tussen leesteksten, links en navigatie. Door tekst af te wisselen met beeld wordt het geheel nog uitnodigender...
Scanbare teksten Door de tekst op een pagina goed vorm te geven vergroot je de leesbaarheid en daarmee het effect. Lange teksten zijn uit den boze, zorg dus altijd voor korte, scanbare teksten.
Leesbaarheid Er zijn een paar manieren om de leesbaarheid van teksten te vergroten:
• • • • •
Alinea’s, interlinie, regellengte, bullets, inspringen.
Uitnodiging ? Zorg voor duidelijke koppen (fontsize, kleur, lettertype) en maak onderscheid tussen leesteksten, links en navigatie. Door tekst af te wisselen met beeld wordt het geheel nog uitnodigender...
Lay Out
TITEL en/of SFEERBEELD
LOGO MAINMENU KNOP 1 KNOP 2 KNOP 3 KNOP 4
DISCLAIMERS ETC.
SUBMENU
BREADCRUMS
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FOTO Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. FOTO Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
MAINMENU 1 - MENU 2 - MENU 3 - MENU 4 - MENU 5 SUBMENU 1 SUBMENU 2 SUBMENU 3 SUBMENU 4 SUBMENU 5 SUBMENU 6
DISCLAIMERS ETC.
LOGO
TITEL en/of SFEERBEELD
MAINMENU 1 - MENU 2 - MENU 3 - MENU 4 - MENU 5 SUBMENU
FOTO
BREADCRUMS Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
DISCLAIMERS ETC.
LOGO / SFEERBEELD Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
LOGO
TITEL KOMT HIER Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
FOTO
KNOP 1 KNOP 2
Lees verder > TITEL KOMT HIER
FOTO
MAINMENU
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
Lees verder >
KNOP 3 KNOP 4
DISCLAIMERS
Huisstijl
Huisstijl
VORMGEVING STIJLEN
• Soort vraagt om ‘eigen’ stijl • Voorbeeldstijlen: • Natuur, Ronde hoeken, Teken/schets,
Hout / organisch, Donker, Fris, Eenvoudig, Organisch, Web2.0
Teken/schets stijl
Hout / organische stijl
Retro / Vintage
Wit / transparant
Ronde hoeken (Web 2.0)
WEB 2.0
WEB 2.0 “De verandering van een verzameling websites naar een volledig platform voor interactieve webapplicaties” (wikipedia) Voorbeelden:
• • • • • • • •
User Generated Blogs Social Networking Gaming Reviews / vergelijk Wiki RSS
Content (Flickr, YouTube) Prive, Thematisch, Zakelijk Linked-in, Hyves, CU2, Sugababes, MySpace, Chat, Dating Edutainment, Habbo, Secondlife, Virals P2P, C2C Collectieve Kennis, Organisaties (CMD) Pull i.p.v. Push
WEB 2.0 • Eenvoud • Centrale Layout • Vaste gebieden • Weinig tekst • Functioneel wit • 3D effecten • Iconen en sterren
PRODUKTIEPROCES
PRODUKTIEPROCES • Analyse • Concepting • Planning • Ontwerp • Produktie
PRODUKTIEPROCES ANALYSE
• Produkt / dienst (essentie!) • Doelgroep • Opdrachtgever • Concurrentie
PRODUKTIEPROCES CONCEPTING
• Brainstorm • Mindmappen • Moodboards • Schetsen • Out of the box • Bepaal stijl en layout
PRODUKTIEPROCES PLANNING: PARADOX de ene kant: je kan niet inplannen wat je nog • Aan niet weet... de andere kant: elk project begint met een • Aan planning!
PRODUKTIEPROCES Why We Plan • Your website will be easier to use.
• • •
Your website will be easier to mainain. The air will smell sweeter. Your life will be better.
Why We Don't Plan • Two words: human nature.
PRODUKTIEPROCES PLANNING
• Content (essentie!) - Functionaliteit - Design • Strokenplanning • Flowchart, Functioneel / Technisch ontwerp • Realistische ambities • Niet het wiel uitvinden
PRODUKTIEPROCES PRODUKTIE
• Ga niet re-designen • Consistentie • HTML, CSS • Continu testen • Less is more • Back-Ups
S.E.O. SEARCH ENGINE OPTIMALISATION
S.E.O. SEARCH ENGINE OPTIMALISATION
S.E.O. GOOGLE TIPS • Crosslinking • Regelmatig nieuwe content • Sitemap • Goede Domeinnaam • Paginatitels • Tekststructuur (H1 h2 etc) • W3C, accessabillity ! • Goede trefwoorden • Alt tags voor images • Elke pagina meta tags en keywords • Google AdWords
LITERATUUR
LITERATUUR 1. Ben Hunt: Save the Pixel 2. Jakob Nielsen: Functioneel Webdesign 3. Peter Kentie: Webdesign in de Praktijk 4. P. Kassenaar: Website Usability
LITERATUUR 1. http://cat.xula.edu/tutorials/planning 2. http://www.webdesignfromscratch.com 3. http://tutorialblog.org/category/web-design-styles 4. http://www.cssleak.com/ 5. http://www.smashingmagazine.com
Samenvatting • Soorten websites, functie en stijl, geschiedenis • Usability vs. Expierence (Vorm & Functie) • Vormgeving (Bouwstenen, Stijlen) • Produktieproces • SEO
