Čitelnost ve webdesignu

11,243 views
11,135 views

Published on

Přednáška o návrhu webů pro brněnský barcamp. Říjen 2011.

Published in: Design

Čitelnost ve webdesignu

  1. 1. Bude vás obšťastňovat● Jan Řezáč● Freelance webdesigner● blog.filosof.biz● @janrezac
  2. 2. Čitelnost vewebdesignu
  3. 3. „Čitelnost je velmidůležitá. Bez čitelnostije text nečitelný. Protonabízíme čitelnostvšem, kteří potřebujíčitelnost.“
  4. 4. 1. Evangelizacehttp://www.flickr.com/photos/67742868@N00/118254443/
  5. 5. Čtou lidéna webu?
  6. 6. Pokud ne, proč tu sedíme?
  7. 7. Potřebuji ušetřitna webu,Smithersi
  8. 8. Nielsen, 1997They dont.
  9. 9. „Users don’t read Users only scan Users haven’t got No attention span“ — Dean Allen
  10. 10. Nielsen, 2008 20 %
  11. 11. Porn factorhttp://www.flickr.com/photos/angelo_nairod/3958440227/sizes/z/in/photostream/
  12. 12. 18 slov / 4.4 sec
  13. 13. Jones, 2009They do.
  14. 14. Já nechci do Nebrasky!http://www.wayfaring.info/category/activities/sailing/page/36/
  15. 15. Přesvědčivost x použitelnosthttp://www.flickr.com/photos/70067196@N00/3534287468/
  16. 16. Kdy lidé čtou?http://www.flickr.com/photos/49462908@N00/4109940538/
  17. 17. Redish, 2007Skenuj → Čti
  18. 18. Co na web raději nedávat?
  19. 19. Vítejte na našem webuhttp://www.flickr.com/photos/susans_pix/46577843/sizes/l/in/photostream/
  20. 20. Mladý a dynamický kolektivhttp://www.flickr.com/photos/37369621@N00/171862456/
  21. 21. Jak lidé uvidí váš web?
  22. 22. První dojem
  23. 23. LINDGAARD, 2006 50 mshttp://www.scribd.com/doc/52658868/You-have-50ms-to-make-a-good-impression
  24. 24. Detaily jsou neviditelné
  25. 25. Část druháDesignerovo ego
  26. 26. Jak návštěvníkům (ne)házet klacky pod nohy?
  27. 27. Velikost písma92 %
  28. 28. Černé na bílém 32 %Zdroj: http://www.usability.gov/pdfs/chapter11.pdf
  29. 29. Délka řádku50–7575–100
  30. 30. Délka řádkuLiquid?
  31. 31. Délka řádkuFluid?
  32. 32. Fluid!
  33. 33. Minusky a verzálky
  34. 34. Řádkový proklad1.3–1.6
  35. 35. Kontrasthttp://contrastrebellion.com/
  36. 36. Typografický kontrast
  37. 37. Typografický kontrast
  38. 38. Do bloku
  39. 39. Mezislovní mezery
  40. 40. Řeky
  41. 41. Taktéž1 left > 1 justify
  42. 42. Jenže2 justify > 1 left
  43. 43. Bílé místo Ve vzdušnýchdesignech se lépe orientuje.
  44. 44. Bílé místo okolo textuhttp://psychology.wichita.edu/surl/usabilitynews/62/whitespace.htm
  45. 45. Prostrkání minusek
  46. 46. Negativní prostrkání
  47. 47. Stock images85 %
  48. 48. Priority
  49. 49. Bannerová slepota
  50. 50. Co je banner?
  51. 51. Stíny u textu
  52. 52. Jak stínovatTmavé na tmavémSvětlé na světlém
  53. 53. Jak stínovatPozor na barvu!
  54. 54. Filovo 1. pravidlo čitelnostiNedělejte kraviny!
  55. 55. Filovo 2. pravidlo čitelnostiNečitelné webyskutečně nikdo nečte.
  56. 56. Literatura● Eyetracking Web Usability (Nielsen)● Letting Go of the Words (Redish)● The Elements of Typographic Style (Bringhurst)● Clout (Jones)● http://www.surl.org/usabilitynews/az.asp● http://www.usability.gov/● www.billhillsite.com/osprey.doc● http://pruzkum.dobryweb.cz/cs/
  57. 57. Odneste siLidé čtou... ale u vás nemusí.

×