1. Александр
Лисовский
UX,
UI,
графический
дизайнер

2. Курс
поддерживают:

3. Перспективы:

4. Глупых
вопросов
не
бывает.

5. Разновидности
дизайна

6. Порода:
дизайнер
Отряд:
компьютерные
Семейство:
креативные

7. Дизайн:
Промышленный
Ланшафтный
Архитектурный
Интерьерный
Графический
…

8. Графический
дизайн:
Идентификация
(логотипы,
фирм
стили)
Иконки
Иллюстрации
Полиграфия
Видео
3D
Интерактивный
…

9. Интерактивный:
Дизайн
десктопных
приложений
Мобильных
приложений
Веб
дизайн
…

10. 10
мифов
про
дизайн

11. 10.
Графический
дизайн
это
легко

12. 9.
Графический
дизайн
может
сделать
вас
богатым.
Быстро.

13. Веб-­‐дизайн:
1
—
5
лет:
$52,000
—
$76,500
5
+:
$74,750
—
$103,750
Креативные
директора:
5
—
8
лет:
$89,500
—
$124,500
8+:
$97,250
—
$169,500
О
зарплатах:
h^p://ain.ua/2013/01/08/107663

14. 8.
Графический
дизайнер
должен
разбираться
во
всем

15. 7.
Заказчик
всегда
прав

16. 6.
Обучение
заканчивается
после
окончания
ВУЗа

17. 5.
Дизайн
–
самое
важное

18. 4.
Исправить
дизайн
можно
очень
быстро

19. 3.
Дизайнерами
рождаются

20. 2.
Дизайн
–
это
работа
за
компьютером
все
время

21. 1.
Каждый
может
быть
дизайнером

22. Разумное
творение
h^p://youtu.be/kkGeOWYOFoA

23. Что
такое
дизайн?

24. Дизайн
–
это
война

25. В
чем
заключается
работа
дизайнера?

26. «Наша
работа
заключается
в
том,
чтобы
найти
наиболее
удобный,
простой
и
красивый
способ
решения
поставленной
задачи,
не
потеряв
по
дороге
смысл.»
h^p://www.artlebedev.ru/studio/

27. За
что
платят
дизайнерам?

28. Сервис
+
Креатив
+
Знания
=
Успешный
дизайнер

29. Сервис
h^p://www.artlebedev.ru/studio/

30. Есть
огромное
количество
клиентов
и
работ,
для
которых
не
нужны
какие-­‐то
особые
знания
или
умения,
не
нужен
яркий
креатив.
h^p://cossa.ru/ar|cles/234/31167/

31. Надо
просто
уметь
делать
одно
и
то
же
изо
дня
в
день
и
не
задавать
лишних
вопросов.
За
это
могут
платить,
может,
и
не
большие,
но
постоянные
деньги,
а
процесс
масштабируем
и
понятен.
h^p://cossa.ru/ar|cles/234/31167/

32. Креатив
h^p://www.artlebedev.ru/studio/

33. Клиенты
покупают
не
умные
мысли,
а
готовые
идеи,
которые,
как
раз,
делает
креатив.
Также
оценить
какие-­‐то
стратегические
выкладки
в
отрыве
от
конкретной
креативной
идеи
бывает
почти
невозможно.
h^p://cossa.ru/ar|cles/234/31167/

34. Но
самое
важное,
что
есть
довольно
большая
группа
людей,
которая
гонится
за
яркими
и
прорывными
идеями.
h^p://cossa.ru/ar|cles/234/31167/

35. Самый
глубокий
сайт
h^p://thedeepestsite.com

36. Самый
глубокий
сайт
Кампания
«Самый
глубокий
сайт»
была
разработана
для
продвижения
минеральной
воды
«Боржоми».
Ресурс
позволяет
совершить
воображаемое
путешествие
на
глубину,
где
зарождается
вода
«Боржоми».
Результат:
число
уникальных
посетителей
сайта
превысило
400
000.
Агентство:
Ogilvy
&
Mather
Ukraine

37. OldSpice
44.665.053
просмотра
h^p://www.youtube.com/watch?v=owGykVbfgUE

38. Итоги
кампании
• В
течение
всего
периода
кампании
количество
фолловеров
в
Twieer
Old
Spice
увеличилось
на
2700%,
активность
пользователей
Facebook
–
на
800%,
посещение
сайта
www.oldspice.com
–
на
300%,
a
канал
OldSpice
на
YouTube
стал
самым
популярным
(323
739
подписчиков).
• Через
полгода
количество
impressions
(показ
–
одна
рекламная
единица,
доставленная
из
одного
источника)
достигло
1,4
миллиарда,
продажи
геля
для
душа
Old
Spice
были
на
27%
больше,
чем
в
прошлом
году,
в
последние
три
месяца
кампании
продажи
увеличились
на
55%,
а
за
последний
месяц
–
на
107%.

39. Знания
h^p://www.artlebedev.ru/studio/

40. Чтобы
знать
больше
всех
или
что-­‐то
особенное,
необходимо
быть
экспертом
в
конкретной
дисциплине,
т.е.
необходима
специализация.
А
жадность
говорит,
что
надо
заниматься
всем.
h^p://cossa.ru/ar|cles/234/31167/

42. Специализация
по
областям
знаний
или
категориям
бизнесов
открывает
почти
безграничные
возможности
для
дифференциации,
а
значит,
и
конкуренции.
h^p://cossa.ru/ar|cles/234/31167/

43. Сестры
Лопухины
h^p://www.adme.ua/vdohnovenie919705/dizajnery-­‐kalligrafy-­‐sestry-­‐lopuhiny-­‐103255/

44. Татьяна
Карташева
h^p://kartasheva.com

45. Андрей
Шевченко
h^p://www.adme.ua/shevchenkoandrej/dizajner-­‐znakov-­‐i-­‐bukv-­‐andrej-­‐shevchenko-­‐101805/

46. Будущее
digital
и
медиа

47. h^p://cossa.ru/ar|cles/152/30293/

48. Мобильная
революция
&
cмерть
десктопов
По
итогам
2011
года
количество
проданных
персональных
компьютеров
оказалось
в
2,5
раза
меньше
числа
реализованных
смартфонов
и
в
3
раза
—
планшетов
(350
млн
против
820
и
920
млн
соответственно
h^p://cossa.ru/ar|cles/152/30293/

49. По
прогнозам
экспертов,
к
середине
2013
года
количество
загрузок
приложений
в
Apple
AppStore
превысит
60
млрд.
Уже
сегодня
пользователи
больше
времени
тратят
на
приложения,
а
не
на
просмотр
страниц
в
браузере.
h^p://cossa.ru/ar|cles/152/30293/

50. h^p://cossa.ru/ar|cles/152/30293/

51. Медиареволюция
Совсем
недавно
доминирующей
была
точка
зрения,
что
в
интернете
никто
и
никогда
не
станет
платить
за
контент.
h^p://cossa.ru/ar|cles/152/30293/

52. Предупрежден
-­‐
значит,
вооружен.
Выбор
профессии.

53. Аудитория
Сети
растет,
в
то
время
как
у
печатных
СМИ,
радио
и
общедоступного
телевидения
наблюдается
снижение
показателей
h^p://cossa.ru/ar|cles/152/30293/

54. Самой
неэффективной
становится
реклама
в
печатных
СМИ.
В
связи
с
этим
доходы
от
неё
в
2012
году
откатились
на
рекордно
низкий
уровень
—
как
в
1950-­‐х
годах.
Одни
лишь
Google
сейчас
зарабатывает
на
рекламе
больше,
чем
все
американские
газеты
и
журналы
вместе
взятые.
h^p://cossa.ru/ar|cles/152/30293/

55. С
появлением
Smart
TV
возникла
возможность
смотреть
только
то,
что
хочется,
в
любое
время.
По
сравнению
с
результатами
2009
года,
сегодня
платные
ТВ-­‐подписки
существенно
потеряли
(за
один
квартал
>
100
тысяч
человек),
а
YouTube,
Hulu
и
Nežlix
стабильно
увеличивают
аудиторию.
h^p://cossa.ru/ar|cles/152/30293/

56. Вдохновение

57. Pinterest.com
pinterest.com/alexlisovsky

59. Behance.net

60. Dribbble.com

61. Perns.com

62. h^p://www.awwwards.com

63. ui-­‐cloud.com

64. h^p://psd.tutsplus.com

65. h^p://uxarchive.com/tasks/onboarding

66. Технологии
Технология
не
равно
Идея.
Параллакс
контента
Drag-­‐and-­‐drop
Адаптивный
дизайн
и
т.д.
h^p://www.slideshare.net/Notamedia

67. Логика
vs.
Эмоция
Программный
Промо
интерфейс
сайт
h^p://www.slideshare.net/Notamedia

68. Логика
vs.
Эмоция
Обычная
Каннский
лев
работа
h^p://www.slideshare.net/Notamedia

69. Скоро
уже
начнем?

70. Теория
без
практики
мертва.
Практика
без
теории
слепа.

79. Почти
запомнил!..

80. Конечно,
давайте
продолжим
изучать
теорию

81. Линии
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

82. Линии
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

83. Линии
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

84. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

85. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

86. Объект
и
пространство
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

87. Объект
и
пространство
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

88. Объект
и
пространство
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

89. Объект
и
пространство
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

90. Контраст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

91. Контраст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

92. Контраст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

93. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

94. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

95. Текст
Основные
правила
дизайна

96. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

97. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

98. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

99. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

100. Текст
Основные
правила
дизайна
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

101. Символы
Основные
правила
дизайна
Добавить
Закрыть/отменить
h^p://www.slideshare.net/smoofles/interface-­‐design-­‐basics-­‐2182094

102. Цвета
Основные
правила
дизайна

103. Перерыв?

105. Те,
кто
читают
книги
всегда
будут
управлять
теми,
кто
смотрит
телевизор
Фелиция
Жанлис

106. h^p://www.artlebedev.ru/everything/izdal/kniga-­‐pro-­‐bukvy2/

107. h^p://mann-­‐ivanov-­‐ferber.ru/books/Luchiernoctar/Rework1/

108. h^p://mann-­‐ivanov-­‐ferber.ru/books/paperbook/DeliveringHappiness/

109. How
to:
Тени

110. Тени
-­‐
это
один
из
камней
преткновения
всех
дизайнеров.
По
теням
часто
судят
о
качестве
работ,
об
уровне
дизайнера.
Есть
некоторые
стереотипы,
некие
"правила
хорошего
тона",
по
которым
мы
судим
о
качестве
тени.
Вообще,
утверждение,
что
фотореалистичная
тень
-­‐
это
хорошо,
а
остальное
плохо
-­‐
в
корне
неверно.
Очень
часто
приходится
править
и
корректировать
фотореалистичную
тень,
чтобы
получить
чистый
качественный
элемент
дизайна
сайта.
Также
нередко
требуется
изобразить
схематическую
тень,
чтобы
просто
оттенить
важный
блок
или
меню.
Ниже
я
привожу
три
основных
правила
изображения
теней.
h^p://www.pirogov.ru

111. Как
нельзя
h^p://www.pirogov.ru

112. Первое
правило
1.
Тень
не
должна
быть
грязью
Приведённые
ниже
рисунки
демонстрируют,
как
не
надо
делать
тень.
На
рисунках
показаны
слишком
резкие
переходы
из
белого
цвета
в
чёрный.
В
природе,
при
дневном
освещении,
такие
переходы
очень
редки.
h^p://www.pirogov.ru

113. Правило
первое
Тут
тень
светлее
и
прозрачнее.
Она
не
оттягивает
на
себя
внимание.
Такое
использование
тени,
как
на
рис.2а
и
рис.2b
часто
применяется
в
корпоративных
сайтах.
И
порой
настораживает,
что
дизайнеры
воспринимают
это
как
признак
плохого
тона.
h^p://www.pirogov.ru

114. Исключения
из
правила
Если
на
рисунке
показана
ночь,
и
наш
обьект
освещается
лампой,
то
тени
очень
контрастные.
Всё
зависит
от
освещения.
В
данном
уроке
рассказывается
про
общий
случай,
когда
всё
освещено
дневным
светом.
h^p://www.pirogov.ru

115. Правило
второе
Тень
-­‐
это
не
наложение
чёрного
цвета
Очень
часто
рисуют
тень,
накладывая
чёрный
цвет
в
разных
пропорциях
и
с
разной
прозрачностью.
Это
неверно.
Тень
-­‐
это
область,
куда
не
попадает
прямой
свет
от
источника.
А
значит,
что
эта
область
окрашена
в
естественный
цвет
предмета.
Она
может
казаться
даже
насыщеннее
той
области,
куда
падает
свет,
если
предмет
имеет
достаточно
яркий
"родной"
цвет.
Также
при
выборе
цвета
тени
следует
учитывать
тот
момент,
что
сам
объект
может
частично
отражать
свет
на
плоскость.
Например,
если
объект
ярко-­‐красный,
то
он
будет
отбрасывать
часть
красного
цвета
на
плоскость,
на
которой
стоит.
h^p://www.pirogov.ru

116. Правило
второе
h^p://www.pirogov.ru

117. Правило
второе
Основной
фон
-­‐
белый,
цвет
тени
-­‐
серый.
Зеленая
панель
тоже
отбрасывает
зеленый
свет
на
поверхность.
Поэтому
дублируем
серый
слой
тени,
перекрашиваем
его
в
тёмно-­‐зеленый
цвет,
и
стираем
те
области,
которые
не
находятся
в
непосредственной
близости
к
красной
поверхности.
В
результате
получится,
что
около
нашей
панели
тень
имеет
чуть
зеленоватый
оттенок,
нежели
вдали
от
неё.
h^p://www.pirogov.ru

118. Правило
третье
Ближе
-­‐
темнее
и
чётче
По
умолчанию
мы
рассматриваем
не
точечный
источник
света,
а
распределённый.
Это
правило
следует
из
физических
особенностей
распространения
света
от
распределённого
источника.
Делается
подобная
тень
так:
Вначале
создается
обычный
теневой
слой.
Потом,
дальше
от
панели,
он
сильно
размывается
(можно
просто
инструментом
"blur").
И
в
конце
правый
и
левый
края
(дальние
от
предмета
-­‐
ближние
к
нам)
чуть
подтираются
ластиком,
для
того,
чтобы
не
было
таких
чётких
граней
тени.
h^p://www.pirogov.ru

119. Правило
третье
h^p://www.pirogov.ru

120. Тень
от
куба
h^p://www.pirogov.ru

121. Тень
от
куба
Вначале
сделаем
тень
в
непосредственной
близости
к
кубу.
По
третьему
правилу
это
наиболее
тёмная
область.
Подправим
сам
куб,
чтобы
он
был
немного
темнее
к
основанию,
и
нарисуем
ближнюю
область
тени.
h^p://www.pirogov.ru

122. Тень
от
куба
Получилась
неплохая
тень
для
куба,
стоящего
на
поверхности
и
освещаемого
дневным
светом.
Если
мы
захотим
сделать
тень
ещё
и
от
солнца
или
от
какого-­‐нибудь
фонаря,
то
используем
третье
правило.
А
также
следим,
чтобы
тень
была
не
чёрная
(так
как
объект
ярко-­‐зелёный)
и
не
слишком
тёмная.
h^p://www.pirogov.ru

123. Тень
от
куба
Тень
может
быть
от
нескольких
источников
света.
h^p://www.pirogov.ru

124. Машина

125. Машина

126. Машина

127. Машина

128. Машина

129. Машина

130. Машина

131. Для
вдохновения:
hep://www.behance.net/gallery/Citroen-­‐DS3-­‐Cab/5258951

132. Я
провожаю
поезда
истошным
криком
идиота,
мне
нравится
моя
работа,
гори
гори
моя
звезда!

133. Александр
Лисовский
Менеджер
продукта
в
ZZWolf
UX,
UI,
графический
дизайнер
(063)
304-­‐54-­‐85
alexander.lisovsky@gmail.com
facebook.com/alexlisovsky
pinterest.com/alexlisovsky