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

Алексей Симоненковеб-евангелист HTML Academy

2014

Предметная областьна примере других специализаций

Ландшафтный дизайнер

• Биология

• Химия

• Геология

• Физика

• Геометрия

Ландшафтный дизайнер

• Слишком маленькие приствольные кругикруги должны соответствовать диаметру кроны

• Вода не должна застаиватьсядолжен быть обеспечен отток ливневых вод

• Следы строительной техникидолжны быть рекомендации по защите стволов

Дизайнер интерьера

• Материалы и технологии отделки

• Основы проектирования света

• Коммуникации (электричество, водопровод)

• Эргономика

• Геометрия

Дизайнер интерьера

• Направленный свет без дополнительного освещения по сторонам

Иллюстратор

• Технологии печати

• Материалы для печати

• Цветопередача

Это лого подходит для печати?

Это лого подходит для печати?

• Смотрится только на тёмном фоне

• Сложная форма

• Много цветов

• Не подходит для трафаретной печати

Эволюция веб-дизайнера

Эволюция веб-дизайнера

• Веб-мастер

– Дональд Норман

“Инновационные прорывы происходят в первую очередь благодаря технологиям.

И уже потом дизайн помогает адаптировать их для комфортного

использования.”

Эволюция веб-дизайнера

• Веб-мастер

• Веб-дизайнер

Предметная область

• Опыт взаимодействия (UX)

• Вёрстка

Почему UX?

Почему UX?в первую очередь дизайн должен быть направлен на

решение задач сайта

Задачи, которые решает UX

• Увеличить конверсию продаж

• Улучшить взаимодействие с интерфейсом

• Расставить правильные акценты в контенте

– Армен Кандилянhabrahabr.ru/post/189662

“Изучайте реальный мир до начала разработки. Думайте над сценариями взаимодействия людей с вашим

продуктом и среду, в которой он будет жить. Без этого невозможно создать хороший интерфейс.

!Для более точного представления сути работы

проектировщика почитайте, например, пост о том, как ребята из Thalient одним утром опробовали прокат

велосипедов в Москве, а к вечеру переделали интерфейс его сайта.”

Почему вёрстка?

Почему вёрстка?

• Создание осуществимого дизайна

• Упрощение коммуникаций

• Экономия времени на разработку

Большинство дизайнерских задач — шире визуала

и интерфейса

Как нарисовать?

• Взаимодействие с интерфейсом

• Адаптивный дизайн

• Ретинизация

• Анимация

– Илья Бирманartgorbunov.ru/bb/soviet/20120814

“На мой взгляд, умение тем полезнее, чем больше оно позволяет усвоить закономерностей, принципов устройства вещей, способов решения задач.

!Уметь верстать, хотя бы на некотором уровне — очень

полезно для веб-дизайнера, ведь это напрямую касается устройства того, что он делает — сайтов.”

Эволюция веб-дизайнера

• Веб-мастер

• Веб-дизайнер

• Проектировщик интерфейсов

Эволюция веб-дизайнера

• Веб-мастер

• Веб-дизайнер

• Проектировщик интерфейсов

• Продуктовый дизайнер

Продуктовый дизайнер

• Решать проблемы бизнеса

• Ответственность за продукт

• Системное мышление

• Активное участие во всех процессах

Как изучать UX?

Курсы

• Британская высшая школа дизайнаhttp://britishdesign.ru/programs/p/uxdesign/

• Школа UX-проектировщикаhttp://digdes.ru/ux/ux-school

Куда ходить

• ПрофсоUXhttp://2014.profsoux.ru

• User eXperiencehttp://userexperience.ru

• Dribbble Meetuphttp://dribbblemeetup.ru

Что читать

Как изучать вёрстку?

Опрос SitePointДолжен ли веб-дизайнер уметь верстать?

Опрос SitePoint

5 %

25 %

70 %

Должен иметь навыки вёрсткиДостаточно базовых знаний вёрсткиЗнания не нужны

— Джеффри Зельдман twitter.com/zeldman/status/4818978868

Онлайн-курсы

• Dashhttp://dash.generalassemb.ly

• Codecademyhttp://www.codecademy.com/tracks/web

• HTML Academyhttp://htmlacademy.ru/courses

Интерактивные задания

Интерактивные задания

Интерактивные задания

Интерактивные задания

Интерактивные задания

Преимущества онлайн-курсов

• Изучать можно когда угодно

• Изучать можно где угодно

• Быстрая обратная связь

• Сильно дешевле

Интенсивы

• Epic Skillshttp://epixx.ru/html-new/

• HTML Academyhttp://htmlacademy.ru/intensive

Что читать

Что использовать

• Balsamiq Mockupshttp://balsamiq.com

• Adobe Edge Animatehttp://html.adobe.com/edge/animate/

• Typecasthttp://typecast.com

simonenko simonenko simonenko.su

Спасибо.