12-01-2009W.H. Kaper, AMSTEL-instituut1/16 Website ontwerp met voorbeelden.

Presentatie over: "12-01-2009W.H. Kaper, AMSTEL-instituut1/16 Website ontwerp met voorbeelden."— Transcript van de presentatie:

1 12-01-2009W.H. Kaper, AMSTEL-instituut1/16 Website ontwerp met voorbeelden

2 12-01-2009W.H. Kaper, AMSTEL-instituut2/16 Website ontwerp in dit project Webtoepassing moet geintegreerd zijn in het totaal van een site  Site van een bedrijf of organisatie Ontwerp ook de site als geheel  dus ook een aantal statische bladzijden Inhoud mag je kopieren van ergens

3 12-01-2009W.H. Kaper, AMSTEL-instituut3/16 Website ontwerp, overzicht Site structuur Site navigatie Homepagina Pagina-indeling, lettertypen, kleuren Pagina-snelheid Aanpassing aan scherm en gebruiker Hyperlinks

4 12-01-2009W.H. Kaper, AMSTEL-instituut4/16 Site structuur, soorten: Boomstructuur Matrix-structuur  vb. Olympische spelen: per dag, per sport en per stad Lineair  vb. een wizard Gemengd …

5 12-01-2009W.H. Kaper, AMSTEL-instituut5/16 Boomstructuur, navigatie Hoe uniform is de site? Subsites? Hoe zelfstandig zijn deze? “ Zien waar je bent ” Hoeveel keuzen (niveaus) tegelijk in beeld? Aantal kliks om doel te bereiken

6 12-01-2009W.H. Kaper, AMSTEL-instituut6/16 Voorbeeld: Amazon.com www.amazon.com mini-menu en zoekbalk bovenlangs groot (uitklap) menu links categorie gekozen:  grote menu weg  submenu bovenlangs  2 gemaakte keuzen tegelijk in beeld soms derde niveau  inconsequent vormgegeven (Grocery > Gourmet > Browse, vgl. Electronics > GPS > Browse)

7 12-01-2009W.H. Kaper, AMSTEL-instituut7/16 Voorbeeld: Sun www.sun.com Homepagina: aandachttrekkers + navigatie Twee menubalken permanent Veel sfeer scheppen  bovenste helft van het schermbeeld … Waar ben ik?  Trace geeft afgelegde weg aan  Menubalk onderstreping ? (alleen “ products ” )  Menuitem = paginatitel ? (Vaak wel, maar zie: Training > Course catalog)

8 12-01-2009W.H. Kaper, AMSTEL-instituut8/16 Voorbeeld: Microsoft www.microsoft.com Veel, veel subsites met elk eigen logo, vormgeving en menu 3 navigatie ingangen  systematische navigatie  3 niveaus tegelijk in beeld!  de produkten  highlights en doelgroepen Terugkeer / integratie is een probleem  diverse “ integratie ” pagina´s in verschillende stijl

9 12-01-2009W.H. Kaper, AMSTEL-instituut9/16 “ Zien waar je bent ” Paginatitel = Menuitem Subsites met eigen logo of kleur Trace Menuitem accentueren, tabeffect

10 12-01-2009W.H. Kaper, AMSTEL-instituut10/16 Navigatie Menu blijft wel / niet in beeld Menu-niveaus permanent in beeld?  twee: dat kan twee  pull-down of pull-right submenus pull-down pull-right  uitklap / inklap – menus uitklap / inklap Terug naar startpunt

11 12-01-2009W.H. Kaper, AMSTEL-instituut11/16 Homepagina is anders Sun en Microsoft  Klikbare plaatjes als aandachttrekkers  Andere helft pagina is menu  Geen substantiele informatie Amazon:Amazon  Meteen beginnen met de verkoop

12 12-01-2009W.H. Kaper, AMSTEL-instituut12/16 Pagina-indeling Wat is mooi? Wat is handig? Wat is overzichtelijk?

13 12-01-2009W.H. Kaper, AMSTEL-instituut13/16 Pagina - overzichtelijkheid Soorten informatie onderscheiden door opmaak en layout  voorbeeld: 2 soorten informatie2 soorten informatie Niet teveel soorten informatie  Yahoo Yahoo Rangschik deze overzichtelijk en / of logischoverzichtelijk Kleuren / lettertypen om soorten info te onderscheiden – rustige of felle kleuren ? rustige of felle kleuren Mooi? mijn best gedaan, niet mijn best gedaan mijn best gedaan niet mijn best gedaan

14 12-01-2009W.H. Kaper, AMSTEL-instituut14/16 Pagina - snelheid Belang van snelheid Pagina zichtbaar tijdens laden  width en height bij plaatjes  width bij tabel kolommen AJAX: pagina deels vernieuwenpaginadeels vernieuwen

15 12-01-2009W.H. Kaper, AMSTEL-instituut15/16 Aanpassing aan gebruiker Aanpassing aan scherm van gebruiker  schaalbare kolommen of niet? schaalbare kolommen  opvullen van het scherm Auditieve browsers  Tabellen niet voor vormgeving  “ alt ” tekst bij plaatjes

16 12-01-2009W.H. Kaper, AMSTEL-instituut16/16 Hyperlinks Herkenbaarheid van links  Kleur, onderstreping, mouseover effects Externe hyperlinks – hoe?  Open in nieuw venster?  Waarschuwen: u verlaat onze site  Onderscheiden door apart symbooltjeapart symbooltje  Apart zetten onder kopje “ externe links ” Descriptieve linktekst  Bij plaatsgebrek: tooltips (<a title= “…” )tooltips