Веб-дизайнер не художник

Тезисы к презентации:
– Рассмотрим насколько знание предметной области важно в дизайне;
– Почему для веб-дизайна недостаточно быть просто художником;
– Как экономить время на коммуникации;
– Обзор ресурсов, способных помочь в обучении предметной области и полезных инструментов для веб-дизайнера.

Transcript

1. Веб-дизайнер не художник Алексей Симоненко веб-евангелист HTML Academy 2014
2. Предметная область на примере других специализаций
3. Ландшафтный дизайнер • Биология • Химия • Геология • Физика • Геометрия
5. Ландшафтный дизайнер • Слишком маленькие приствольные круги
 круги должны соответствовать диаметру кроны • Вода не должна застаиваться
 должен быть обеспечен отток ливневых вод • Следы строительной техники
 должны быть рекомендации по защите стволов
6. Дизайнер интерьера • Материалы и технологии отделки • Основы проектирования света • Коммуникации (электричество, водопровод) • Эргономика • Геометрия
8. Дизайнер интерьера • Направленный свет без дополнительного освещения по сторонам
11. Иллюстратор • Технологии печати • Материалы для печати • Цветопередача
12. Это лого подходит для печати?
13. Это лого подходит для печати? • Смотрится только на тёмном фоне • Сложная форма • Много цветов • Не подходит для трафаретной печати
18. Эволюция веб-дизайнера
19. Эволюция веб-дизайнера • Веб-мастер
20. – Дональд Норман “Инновационные прорывы происходят в первую очередь благодаря технологиям. И уже потом дизайн помогает адаптировать их для комфортного использования.”
21. Эволюция веб-дизайнера • Веб-мастер • Веб-дизайнер
22. Предметная область • Опыт взаимодействия (UX) • Вёрстка
23. Почему UX?
24. Почему UX? в первую очередь дизайн должен быть направлен на решение задач сайта
25. Задачи, которые решает UX • Увеличить конверсию продаж • Улучшить взаимодействие с интерфейсом • Расставить правильные акценты в контенте
31. – Армен Кандилян
 habrahabr.ru/post/189662 “Изучайте реальный мир до начала разработки. Думайте над сценариями взаимодействия людей с вашим продуктом и среду, в которой он будет жить. Без этого невозможно создать хороший интерфейс. ! Для более точного представления сути работы проектировщика почитайте, например, пост о том, как ребята из Thalient одним утром опробовали прокат велосипедов в Москве, а к вечеру переделали интерфейс его сайта.”
32. Почему вёрстка?
33. Почему вёрстка? • Создание осуществимого дизайна • Упрощение коммуникаций • Экономия времени на разработку
37. Большинство дизайнерских задач — шире визуала и интерфейса
38. Как нарисовать? • Взаимодействие с интерфейсом • Адаптивный дизайн • Ретинизация • Анимация
39. – Илья Бирман
 artgorbunov.ru/bb/soviet/20120814 “На мой взгляд, умение тем полезнее, чем больше оно позволяет усвоить закономерностей, принципов устройства вещей, способов решения задач. ! Уметь верстать, хотя бы на некотором уровне — очень полезно для веб-дизайнера, ведь это напрямую касается устройства того, что он делает — сайтов.”
40. Эволюция веб-дизайнера • Веб-мастер • Веб-дизайнер • Проектировщик интерфейсов
41. Эволюция веб-дизайнера • Веб-мастер • Веб-дизайнер • Проектировщик интерфейсов • Продуктовый дизайнер
42. Продуктовый дизайнер • Решать проблемы бизнеса • Ответственность за продукт • Системное мышление • Активное участие во всех процессах
43. Как изучать UX?
44. Курсы • Британская высшая школа дизайна
 http://britishdesign.ru/programs/p/uxdesign/ • Школа UX-проектировщика
 http://digdes.ru/ux/ux-school
45. Куда ходить • ПрофсоUX
 http://2014.profsoux.ru • User eXperience
 http://userexperience.ru • Dribbble Meetup
 http://dribbblemeetup.ru
46. Что читать
47. Как изучать вёрстку?
48. Опрос SitePoint Должен ли веб-дизайнер уметь верстать?
49. Опрос SitePoint 5 % 25 % 70 % Должен иметь навыки вёрстки Достаточно базовых знаний вёрстки Знания не нужны
50. — Джеффри Зельдман twitter.com/zeldman/status/4818978868
51. Онлайн-курсы • Dash
 http://dash.generalassemb.ly • Codecademy
 http://www.codecademy.com/tracks/web • HTML Academy
 http://htmlacademy.ru/courses
52. Интерактивные задания
53. Интерактивные задания
54. Интерактивные задания
55. Интерактивные задания
56. Интерактивные задания
57. Преимущества онлайн-курсов • Изучать можно когда угодно • Изучать можно где угодно • Быстрая обратная связь • Сильно дешевле
58. Интенсивы • Epic Skills
 http://epixx.ru/html-new/ • HTML Academy
 http://htmlacademy.ru/intensive
59. Что читать
60. Что использовать • Balsamiq Mockups
 http://balsamiq.com • Adobe Edge Animate
 http://html.adobe.com/edge/animate/ • Typecast
 http://typecast.com
61. simonenko simonenko simonenko.su Спасибо.