SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Downloaden Sie, um offline zu lesen
Веб-дизайнер не художник
Алексей Симоненко

веб-евангелист 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
Куда ходить
• ПрофсоUX

http://2014.profsoux.ru
• User eXperience

http://userexperience.ru
• Dribbble Meetup

http://dribbblemeetup.ru
Что читать
Как изучать вёрстку?
Опрос SitePoint
Должен ли веб-дизайнер уметь верстать?
Опрос SitePoint
5 %
25 %
70 %
Должен иметь навыки вёрстки
Достаточно базовых знаний вёрстки
Знания не нужны
— Джеффри Зельдман
twitter.com/zeldman/status/4818978868
Онлайн-курсы
• Dash

http://dash.generalassemb.ly
• Codecademy

http://www.codecademy.com/tracks/web
• HTML Academy

http://htmlacademy.ru/courses
Интерактивные задания
Интерактивные задания
Интерактивные задания
Интерактивные задания
Интерактивные задания
Преимущества онлайн-курсов
• Изучать можно когда угодно
• Изучать можно где угодно
• Быстрая обратная связь
• Сильно дешевле
Интенсивы
• Epic Skills

http://epixx.ru/html-new/
• HTML Academy

http://htmlacademy.ru/intensive
Что читать
Что использовать
• Balsamiq Mockups

http://balsamiq.com
• Adobe Edge Animate

http://html.adobe.com/edge/animate/
• Typecast

http://typecast.com
simonenko simonenko simonenko.su
Спасибо.

Weitere ähnliche Inhalte

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

Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
vaxden
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
ir_556
 
Как сделать ваш продукт красивым без дизайнера
Как сделать ваш продукт красивым без дизайнераКак сделать ваш продукт красивым без дизайнера
Как сделать ваш продукт красивым без дизайнера
Eugene Nevgen
 
Процес створення сайту і роль редактора в цьому
Процес створення сайту і роль редактора в цьомуПроцес створення сайту і роль редактора в цьому
Процес створення сайту і роль редактора в цьому
Dariya
 
В.Денисенков Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков   Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...В.Денисенков   Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
borovoystudio
 
Intorduction for Open Data Hackathon 2014: Hack for Piter
Intorduction for Open Data Hackathon 2014: Hack for PiterIntorduction for Open Data Hackathon 2014: Hack for Piter
Intorduction for Open Data Hackathon 2014: Hack for Piter
Vitaly Vlasov
 
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
borovoystudio
 

Ähnlich wie Веб-дизайнер не художник (20)

Особенности разработки дизайна мобильного приложения
Особенности разработки дизайна мобильного приложенияОсобенности разработки дизайна мобильного приложения
Особенности разработки дизайна мобильного приложения
 
Web дизайнер
Web дизайнерWeb дизайнер
Web дизайнер
 
Professiya web d
Professiya web dProfessiya web d
Professiya web d
 
веб дизайнер
веб дизайнервеб дизайнер
веб дизайнер
 
Как сделать ваш продукт красивым без дизайнера
Как сделать ваш продукт красивым без дизайнераКак сделать ваш продукт красивым без дизайнера
Как сделать ваш продукт красивым без дизайнера
 
Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц Прототипы vs Техническое задание — Владимир Зайонц
Прототипы vs Техническое задание — Владимир Зайонц
 
ОЗ.Профессия Менеджер интернет-проектов.27.05.Нетология
ОЗ.Профессия Менеджер интернет-проектов.27.05.НетологияОЗ.Профессия Менеджер интернет-проектов.27.05.Нетология
ОЗ.Профессия Менеджер интернет-проектов.27.05.Нетология
 
11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов11 ключевых ошибок в разработке интернет-проектов
11 ключевых ошибок в разработке интернет-проектов
 
Программистский подход в дизайне
Программистский подход в дизайнеПрограммистский подход в дизайне
Программистский подход в дизайне
 
UI kit. Конструктор для больших проектов
UI kit. Конструктор для больших проектовUI kit. Конструктор для больших проектов
UI kit. Конструктор для больших проектов
 
Site creation
Site creationSite creation
Site creation
 
Процес створення сайту і роль редактора в цьому
Процес створення сайту і роль редактора в цьомуПроцес створення сайту і роль редактора в цьому
Процес створення сайту і роль редактора в цьому
 
Проектирование сайта под SEO
Проектирование сайта под SEOПроектирование сайта под SEO
Проектирование сайта под SEO
 
Лекция о профессии Frontend developer / 30.1
Лекция о профессии Frontend developer / 30.1Лекция о профессии Frontend developer / 30.1
Лекция о профессии Frontend developer / 30.1
 
В.Денисенков Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков   Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...В.Денисенков   Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
 
Intorduction for Open Data Hackathon 2014: Hack for Piter
Intorduction for Open Data Hackathon 2014: Hack for PiterIntorduction for Open Data Hackathon 2014: Hack for Piter
Intorduction for Open Data Hackathon 2014: Hack for Piter
 
10 типичных причин неудачной разработки интернет-проектов
10 типичных причин неудачной разработки интернет-проектов10 типичных причин неудачной разработки интернет-проектов
10 типичных причин неудачной разработки интернет-проектов
 
10 типичных причин неудачной разработки интернет-проектов
10 типичных причин неудачной разработки интернет-проектов10 типичных причин неудачной разработки интернет-проектов
10 типичных причин неудачной разработки интернет-проектов
 
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
В.Денисенков - Семь раз отмерь. Все что надо знать о выборе подрядчиков, прог...
 
Точка кипения: проектирование крупных веб-систем
Точка кипения:  проектирование крупных веб-системТочка кипения:  проектирование крупных веб-систем
Точка кипения: проектирование крупных веб-систем
 

Mehr von Alexey Simonenko

Node.js для начинающих
Node.js для начинающихNode.js для начинающих
Node.js для начинающих
Alexey Simonenko
 

Mehr von Alexey Simonenko (9)

Автоматизация разработки курсов: путь от рутины к игре
Автоматизация разработки курсов: путь от рутины к игреАвтоматизация разработки курсов: путь от рутины к игре
Автоматизация разработки курсов: путь от рутины к игре
 
Ликбез по веб-технологиям
Ликбез по веб-технологиямЛикбез по веб-технологиям
Ликбез по веб-технологиям
 
10 игровых механик в HTML Academy
10 игровых механик в HTML Academy10 игровых механик в HTML Academy
10 игровых механик в HTML Academy
 
«TIME» — автоматизация агентства
«TIME» — автоматизация агентства«TIME» — автоматизация агентства
«TIME» — автоматизация агентства
 
ECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScriptECMAScript 6 — будущее JavaScript
ECMAScript 6 — будущее JavaScript
 
Адаптивный веб-дизайн
Адаптивный веб-дизайнАдаптивный веб-дизайн
Адаптивный веб-дизайн
 
PR с помощью большого мероприятия
PR с помощью большого мероприятияPR с помощью большого мероприятия
PR с помощью большого мероприятия
 
Facebook для бизнеса
Facebook для бизнесаFacebook для бизнеса
Facebook для бизнеса
 
Node.js для начинающих
Node.js для начинающихNode.js для начинающих
Node.js для начинающих
 

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