Dynamisk Webdesign Stefan Grage
Brugen af web Hvilke sites besøger i oftest? Og hvorfor? Snak med sidemanden i 3 min.
Kategorisering Utility sites Sociale sites Webshops Indholdstunge sites
Utilities Google Danske bank (netbank) Kelkoo/pricerunner krak/googlemaps
Sociale sites Facebook Imdb.com Youtube Flickr
Webshops Fotolia Stockfresh Amazon Adlibris
Indholdstunge sites DR Cphx.dk Gomediazine.com FDIM.dk horror.dk (blog)
Hvad kan vi? Hvor blev de statiske sites af? Portfolio-sites en drøm at lave, men... Content is king Her på kurset kan man alt Når der skal betales er der grænser...
Dynamiske websites Dynamiske sites: Karakteriseret ved skiftende indhold Utility sites, Sociale sites, Webshops, Indholdsbaserede sites Brugerne skal vende tilbage: Indholdsgenerering vigtigere end udseende? (useit.com) Aesthetic-Usability effect
CMS-baserede sites CMS-baserede for indholdets skyld HTML, CSS, Javascript, PHP/.NET Udfordring: Brugeren har frihed til at forpurre designerens arbejde
1 - komposition: CMSbaserede sites Header, venstre/ højre, indhold, Header footer og navigation Adskilles via fysiske afgrænsninger: gruppering, proximity, lukkethed Sidebar Indhold Footer
Dynamiske sites
2 - Størrelsen på sitet Tidligere: Variabel bredde Nu: Fast bredde - 960 px (fdim.dk) Dynamik: Svær at styre horisontalt - vertikalt grid nemmere: 960.gs (f.eks. drupal & 5by5 Studios)
Design over folden? Bør sitet ligge over folden?
Over/under folden Logo, blurp line/tag line og navigation bør være over folden Regn med 1024 x 768 % browser bar - altså ligger folden på mindre maskiner v. 600-640 px Resten ligegyldigt - brugerne er vant til at scrolle nedad
3 - Navigation Navigationen er sitet! (Steve Krug) Navigationen fortæller om sitets indhold og hvor vi er samt hjælper os med at finde det vi søger Hvordan kan vi organisere navigationen?
Vertikal navigation Meget fleksibel Dilemma: Hicks lov
Horisontal navigation Mindre fleksibel end vertikal Æstetisk mindre tung?
Drop-down/out Fleksibel - forener vertikal og horisontal Kan være problematisk (% iphone)
Designeres dilemma Navigation skal være gennemtænkt! Kontrol vs. frihed for brugeren - vigtigst? Navigation i hvor mange niveauer? Ofte tænkes kun på 1. og 2. niveau
Case: ST
Case: ST
Case: ST
Krug om navigation Krug: Navigationen er det vigtigste - den skal fjerne spørgsmålstegn Links og knapper skal se ud som det de er! Brugere læser ikke - vi scanner og vælger hurtigt
4 - Forsiden Hvad, til hvem og hvorfor? Hvad er der på sitet (navigation) Og hvilke features byder det? (blurp) Søgefunktion Virke som teaser Vise noget aktuelt (dato)
Flickr.com
5 - Undersider: Trunktest Hvilket site er det? Hvilken side er du på? Hvilke sektioner er der på sitet (top-level navigation) Hvilke muligheder har du her? (subnavigation) Hvor er du i forhold til resten af sitet? Hvordan kan du søge?
Eksempel Site Sektioner Side Muligheder Hvor? Søg?
6 - Krugs tips Skab visuelt hierarki (designregler) Brug konventioner Del sider op i klart definerede områder Gør klart hvad der er klikbart Minimer støj
6 - fortsat: Andre tendenser Skærmstørrelser varierer - inddrag hele skærmen (minimalisme eller baggrunde) - pas på KB! Overlays og transparens virker efterhånden (også ie) Fat footers
Minimalisme/Baggrunde
Overlays/transparens
Fat Footers
Inspiration