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
VOORDELEN FLASH NADELEN FLASH Vector Audio Animatie Plugin Vindbaarheid (Google) Onderhoud Creatieve vrijheid
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 CONTENT Layout Huisstijl Typografie Kleur Contrast, balans... Mode / Trends 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 LOGO TITEL en/of SFEERBEELD DISCLAIMERS ETC. MAINMENU KNOP 1 KNOP 2 KNOP 3 KNOP 4 SUBMENU Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore FOTO 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 DISCLAIMERS ETC. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore FOTO 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 BREADCRUMS MAINMENU 1 - MENU 2 - MENU 3 - MENU 4 - MENU 5 SUBMENU 1 SUBMENU 2 SUBMENU 3 SUBMENU 4 SUBMENU 5 SUBMENU 6 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 en/of SFEERBEELD MAINMENU 1 - MENU 2 - MENU 3 - MENU 4 - MENU 5 SUBMENU BREADCRUMS FOTO 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 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 Lees verder > FOTO FOTO 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 LOGO MAINMENU KNOP 1 KNOP 2 KNOP 3 KNOP 4 DISCLAIMERS ETC. Lees verder > 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 Content (Flickr, YouTube) Blogs Prive, Thematisch, Zakelijk Social Networking Linked-in, Hyves, CU2, Sugababes, MySpace, Chat, Dating Gaming Edutainment, Habbo, Secondlife, Virals Reviews / vergelijk P2P, C2C Wiki Collectieve Kennis, Organisaties (CMD) RSS 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 Aan de ene kant: je kan niet inplannen wat je nog niet weet... Aan de andere kant: elk project begint met een 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