4 infographics and colours v_moroz
TRANSCRIPT
![Page 1: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/1.jpg)
Світ мультимедіа для журналістів
Віталій МорозІнтерньюз-Україна
![Page 2: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/2.jpg)
Якими були онлайн-видання 10 років тому?
![Page 3: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/3.jpg)
?
![Page 4: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/4.jpg)
1) ProUA.com 2) Gazeta.ru 3) Wyborcza.pl
Дивимося через: http://archive.org/
Як виглядали ресурси в 2000-2001 рр?
![Page 5: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/5.jpg)
Kp.ru - 2001 год
![Page 6: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/6.jpg)
травень 2010 року
![Page 7: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/7.jpg)
Якими можуть бути сайти?
Персональний сайт флеш-дизайнера (Японія)
http://yugop.com/
Сайт студії флеш-дизайну (Франція)http://www.soleilnoir.net/
![Page 8: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/8.jpg)
Дизайн сайту. Модель David Brewer
дизайн сайту утримання аудиторії а) ефект відскоку
![Page 9: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/9.jpg)
Дизайн сайту. Модель David Brewer
б) ефект швидкого відвідування
![Page 10: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/10.jpg)
Дизайн сайту. Модель David Brewer
в) ефект утримання
![Page 11: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/11.jpg)
Дизайн сайту. Модель David Brewer
г) ефект “зависання”
![Page 12: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/12.jpg)
Story 1
Story 2 Story 3 Story 4
Question of the day
Call to actionInteractivityVote or Poll
Video of day
David Brewer: Less is more!
![Page 13: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/13.jpg)
Сайт телекомпанії №2 в Британії- www.itv.com/
A minimalist website
![Page 14: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/14.jpg)
Сайти с мінімальним інтерфейсомhttp://obkom.net.ua/
![Page 15: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/15.jpg)
Сайти с гіпервізуальним навантаженням
http://kontrakty.ua.ua
![Page 16: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/16.jpg)
Інфографіка
![Page 17: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/17.jpg)
![Page 18: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/18.jpg)
Інфографіка
![Page 19: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/19.jpg)
Інфографіка
• З погляду редакції – організація простору вашого видання / cайту
• З погляду читача – можливість довільно обирати порядок отримання інформації (A Z чи навпаки)
![Page 20: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/20.jpg)
Особливості інфографіки:
- Графичні об’єкти- Простота- Корисна інформація- Яскравість- Зрозумілість поданої теми- Одна ідея в одній ілюстрації- Нерідко ручка графіка- Баланс кольорів і зображень
![Page 21: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/21.jpg)
Різновиди інфографіки:
За формою подачі:• Класична інфографіка• Треш-інфографіка• Анімована інфографіка (GE locomotives)• Інтерактивна інфографіка для онлайну
За кількістю інформації:• Ненасичена • Концентрована
![Page 22: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/22.jpg)
Класична інфографіка
Журнал GEO: Как делать валенки?
![Page 23: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/23.jpg)
Треш-інфографіка
Texty.org.ua - http://j.mp/trash_t
![Page 24: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/24.jpg)
Інтерактивна інфографіка для онлайну
http://mycityua.com/Kiev_crime.html
![Page 25: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/25.jpg)
Анімована інфографіка
YouTube: GE reports - http://j.mp/ge_report
![Page 26: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/26.jpg)
Як читач сприймає інформацію? Текст
У революционных волн есть свои загадки. В одних странах той группы, по которой идет волна, революции происходят. Другие страны они обходят стороной, о третьи разбиваются, как о скалы. Иногда это какой-нибудь крепкий орешек-правитель, иногда какие-нибудь особые обстоятельства. Ливия, Мавритания, Египет, Йемен, Иран, Ирак, ОАЄ, Тунис, Ливан, Палестина, кто следующий? ….
![Page 27: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/27.jpg)
Як читач сприймає інформацію? Візуалка
![Page 28: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/28.jpg)
Ресурси візуалізації:
• http://datavisualization.ch/ • http://vmestoslov.info/• http://infographer.ru/• http://kazinform.kz/rus/section/20813/1• http://www.rian.ru/infografika/
![Page 29: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/29.jpg)
Робота над макетом сайту:
![Page 30: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/30.jpg)
Робота над макетом сайту:
![Page 31: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/31.jpg)
Ресурс для створення макетів
http://balsamiq.com/
![Page 32: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/32.jpg)
Кольори Інтернету
![Page 33: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/33.jpg)
Кольори Інтернету
• Які кольори (теплі, холодні) обирають розробники?
• Які кольори (теплі, холодні) обирають читачі?
• Як кольори впливають на поведінку в онлайні?
• Як кольори вписуються в шаблон сайту?
![Page 34: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/34.jpg)
Як використовуються в Інтернеті RED&GREEN?
![Page 35: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/35.jpg)
http://j.mp/colour_eff
![Page 36: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/36.jpg)
Таблиця кольорів в Інтернеті
Must read!
http://en.wikipedia.org/wiki/Web_colors
![Page 37: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/37.jpg)
Як колір впливає на нашу поведінку?
blog.kissmetrics.com/color-psychology
![Page 38: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/38.jpg)
Як колір впливає на нашу поведінку?
blog.kissmetrics.com/color-psychology
![Page 39: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/39.jpg)
Кольори користувачів Twitter в США
http://j.mp/colour_twi
![Page 40: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/40.jpg)
Кольори найбільших брендів: http://j.mp/colour_web
![Page 41: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/41.jpg)
Кольори соцмереж і фотохостингів: http://j.mp/colour_web
![Page 42: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/42.jpg)
Кольори блогохостингів: http://j.mp/colour_web
![Page 43: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/43.jpg)
Кольори бізнесу. Червоні vs сині: http://j.mp/colour_web
![Page 44: 4 infographics and colours v_moroz](https://reader035.vdocument.in/reader035/viewer/2022062513/554be8e6b4c9055a368b4c41/html5/thumbnails/44.jpg)
Спасибі!
Віталій Мороз
Керівник програм нових медіа Інтерньюз-Україна 063 700 22 66 [email protected] medianext_ua.livejournal.com, @medianext_ua