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

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
Спасибо.