Dynamisk Webdesign. Stefan Grage

Transkript

1 Dynamisk Webdesign Stefan Grage

2 Brugen af web Hvilke sites besøger i oftest? Og hvorfor? Snak med sidemanden i 3 min.

3 Kategorisering Utility sites Sociale sites Webshops Indholdstunge sites

4 Utilities Google Danske bank (netbank) Kelkoo/pricerunner krak/googlemaps

5 Sociale sites Facebook Imdb.com Youtube Flickr

6 Webshops Fotolia Stockfresh Amazon Adlibris

7 Indholdstunge sites DR Cphx.dk Gomediazine.com FDIM.dk horror.dk (blog)

8 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...

9 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

10 CMS-baserede sites CMS-baserede for indholdets skyld HTML, CSS, Javascript, PHP/.NET Udfordring: Brugeren har frihed til at forpurre designerens arbejde

11 1 - komposition: CMSbaserede sites Header, venstre/ højre, indhold, Header footer og navigation Adskilles via fysiske afgrænsninger: gruppering, proximity, lukkethed Sidebar Indhold Footer

12 Dynamiske sites

13 2 - Størrelsen på sitet Tidligere: Variabel bredde Nu: Fast bredde px (fdim.dk) Dynamik: Svær at styre horisontalt - vertikalt grid nemmere: 960.gs (f.eks. drupal & 5by5 Studios)

14 Design over folden? Bør sitet ligge over folden?

15 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 px Resten ligegyldigt - brugerne er vant til at scrolle nedad

16 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?

17 Vertikal navigation Meget fleksibel Dilemma: Hicks lov

18 Horisontal navigation Mindre fleksibel end vertikal Æstetisk mindre tung?

19 Drop-down/out Fleksibel - forener vertikal og horisontal Kan være problematisk (% iphone)

20 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

21 Case: ST

22 Case: ST

23 Case: ST

24 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

25 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)

26 Flickr.com

27 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?

28 Eksempel Site Sektioner Side Muligheder Hvor? Søg?

29 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

30 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

31 Minimalisme/Baggrunde

32 Overlays/transparens

33 Fat Footers

34 Inspiration