Веб-дизайнер не художник
-
Upload
alexey-simonenko -
Category
Technology
-
view
477 -
download
5
description
Transcript of Веб-дизайнер не художник
Веб-дизайнер не художник
Алексей Симоненковеб-евангелист 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
Спасибо.