Webprocessen

1. Webprocessen 1. Del - Karin

2. I harmodtaget en mail omundervisningsevalueringpåjeres kea-mail. Undervisningsevaluering!

3. I harinstalleretKomodo Edit • I harinstalleretFilezilla • I harinstalleretFirefox & Chrome • I harLavetdetførste html-site • I erbegyndt at tænkepåjeres “eget portfolio”… Hvorlangter vi nået?

4. Dagenspensum: http://semesterplan.keaweb.dk/ugeplaner/1sem/1_B_M2 • Kap 1 • Kap 2 (26-31) • Kap 3 Spørgsmåltillæsestoffet?

5. Planlæggeogdesigneeget portfolio site • Identificereindholdet • Udarbejde et Sitemap/navigationsdiagram • Lave Wireframes for alle sider • Lave Mock-up I Photoshop sitemap  wireframes  mock-up Hvadskal vi lave I dag?

6. 1 - Fra Brief til Sitemap

7. En referencerammefor projektet • Hvilketwebsite skal vi lave? • Redesign vs. nyt site? • Virksomhedsprofil(historier, værdier...) • Målgruppe? • Statisk vs. dynamisk site? • Flash, HTML/CSS, JS, CMS? • Elementer (logo, tagline, indhold... Brief Her erdetunderviserne der hargivetbriefet…

8. Hvad med portfolio sites? • Et portfolio site er lidt anderledes… Show, don’t tell

9. Småtellerstort site? • Hvem skal se det? • Skal jeg vælge ud eller vise det hele? • Processen eller kun færdige projekter? Formuler en “strategi”

10. Kategoriseringilogiskestrukturer(sider ogindholdselementer) • Arbejdihånden, ikkepå computer • Brugpapir, post-its mm.! informationsarkitektur

11. Kategoriseringafindhold

12. Kategoriseringafindhold

13. Kategoriseringafindhold

14. Kategoriseringafindhold

15. Sitemap

16. Definer hvilke sider der skalværepåditportfolio-site • Lavet sitemap • Begyndat overvejeindholdselementernepå de enkeltesider, - talgerne med din sidemandom dine ideer ca. 20minutter… (determåskeikkenok) opgave1

17. 2 - Fra Sitemap til wireframe

18. Nu har vi en idéomindholdselementernepåsitet • Vi vedhvor mange sider, der skalværepåsitet  Nu skalvi organisereindholdetpå de enkelte sider Organiseringafindhold

19. Navigationenfortælleromsitetsindholdoghvor vi ersamthjælperos med at findedet vi søger • Hvordanskal vi navigeremellemsiderne? • Hvilken type navigation egner sig tilvores site? • Hvordanskalnavigationen se ud? Navigationsdesign

20. Hvor mange navigationselementerbørder værei en menu? Navigationsdesign

21. Hvor mange navigationselementerbørder værei en menu? • Hick’s law (7 +-2) - “The time it takes to make a decision increases as the number of alternatives increases” Navigationsdesign

22. Hvor mange navigationselementerbørder værei en menu? • Hick’s law (7 +-2) - “The time it takes to make a decision increases as the number of alternatives increases” Steve Krug: • “Human beings like fewer options presented at one time”– “make simple interfaces by limiting choices” • Navigationenersitet! – den skalfjerne “spørgsmålstegn” • Links ogknapperskal se udsomdet de er! Navigationsdesign

23. Hierarkisk navigation • Cyklisk navigation • Sekventiel navigation Navigation

24. Hierarkisk navigation Navigation

25. Cyklisk navigation Navigation

26. Sekventiel navigation Navigation

27. Horisontal navigation • Vertikal navigation • Faneblade • Breadcrumbs • Drop-down, fly-out mm. Navigationsdesign

28. Horizontal navigation

29. Vertikal navigation

30. Navigation med faneblade

31. Breadcrumbs

32. Fly-out menu

33. Drop-down menu

34. Navigation skalværegennemtænkt! • Kontrolvs. frihed for brugeren- vigtigst? • Navigation ihvor mange niveauer? • Hvor mange gangeskal man klikke for at opnå “satisfaction” Navigationsdesign

35. Vi vedhvad der primærtskalværepåvoressider (forside, profil, referencer, kontakt...) • Hvormegetfylderelementerne? • Hvorskalelementerneplaceres? • Oghvadskal der yderligereværepåsitet? • Reklamer, søgefelter, tags, arkiver, polls, gallerier... Indholdselementer

36. HTML/CSS sites beståraf “kasser” • Header, venstre/højre, indhold, footer og navigation • Adskilles via fysiskeafgrænsninger: gruppering, proximity, lukkethed header nav indhold Html og “kasser” footer

37. Skal vi anvendekonventionerne? Generellewebkonventioner

38. Skal vi anvendekonventionerne? • Brugerelæserikke - vi scanner ogvælgerhurtigt • “The right-hand fold” • Venstreside: 69 % opmærksomhed • Højreside: 30 % opmærksomhed Generellewebkonventioner

39. F – formetlæsemodus Generellewebkonventioner

40. Hvadsigerkonventionerneellers? Generellewebkonventioner

41. Hvadsigerkonventionerneellers? • Placeringaflogo • Placeringafsøgefelt • Placeringafkontaktinfo • Links • “Home” - knappen Generellewebkonventioner

42. Wireframes erskitser der visersitetsindholdselementer, men ikkedetgrafiskeudtryk • Lavdemhelstihånden • Se godeeksempler her: http://inspirationfeed.com/inspiration/25-examples-of-wireframes-and-mockups- sketches/ wireframes

43. wireframes

44. wireframes

45. wireframes

46. Find udafhvordan du vilkonstrueredin navigationsmenu • Identificersamtligeindholdselementerpådit site • Lavwireframes for dine (forskellige) sider ca. 20minutter… (du bliverikkefærdig) wireframes

47. 3 – Fra wireframe til mockup

48. Skabvisuellehierarkier(designregler) • Brugkonventioner (logo, links...) • Del sider op iklartdefineredeområder – bruggestaltlovene • Gørklarthvad der erklikbart • Minimerstøj Usability & design

49. Overvejelservedr.: • Visuelstilogvirkemidler • Grafiskedesign regler: Hierarki, farver, typografi, kontraster, former... • Indholdsopdeling - bruggestaltlovene Visuelt design

50. Hvadvil vi understøtte? (Skærme, browsere, flash...) • Fleksibelt/ikkefleksibelt design? • Størrelse, bredde (anbefaling = 960 px) • Statistikfor skærmstørrelser: http://fdim.dk/statistik/teknik/skaermoploesning • Grids: http://960.gs Kompositionog grids