Презентация с лекционной части интенсива руководителя службы дизайна веб-интерфейсов компании «Яндекс» Константина Горского «Дизайн интерфейсов», который прошел 17 ноября 2012 года в рамках 2Niversity: http://2niversity.ru/?tiny=15

1. Дизайн интерфейсов
Константин Горский
руководитель службы
дизайна веб-интерфейсов

2. Чуть-чуть расскажу и будем практиковаться
Как придумать что-то потрясающее
Когда заканчивается дизайн
Как мы делали браузер
Практика
2

3. Как придумать
что-то потрясающее

4. 4

5. 5

6. 1 2 3 4 5
Исследование Интерпретация Идея Эксперимент Эволюция
6

7. 1 Исследование
Photo by evie22 @ flickr.com
Изучение истории
Изучение рынка
Наблюдения
Этнографические иссл.
Интервью экспертов
Статистика
Вдохновение
7
)

8. 2 Интерпретация
Пересказ историй
Упорядочивание
Анализ
Заключения и выводы
Постановка задачи
Обозначение рамок
Photo from ideo.com
8

9. Нарисуйте домик
9

10. 10

11. 11

12. 12

13. Нарисуйте домик сайтик
13

14. Тут надо бы разобраться
что мы делаем, для кого и зачем
Cамое главное — определить желаемый
эффект, который хочется произвести
1. Какого эффекта мы хотим добиться?
2. Как будем мерять достижение наших целей?
3. Какие (минимальные) изменения для этого
мы хотим сделать?
14

15. Вопросы, на которые надо уметь отвечать
Для чего нам вообще этот проект?
Как мы поймем, что цель достигнута?
Что предстоит сделать? Зачем?
Вы уверены, что до вас никто этого не делал?
Что сейчас не так? Может быть проблему можно
решить проще?
Как люди узнают о нововведении?
15

16. 16

17. 17

18. 18

19. 19

20. 3 Формирование идей
Мозговые штурмы
Креативные техники
Совершенствование
Photo from ideo.com
20

21. 21

22. 22

23. 23

24. 24

25. 25

26. 26

27. `
4 Эксперименты
Макетирование
Прототипирование
Оценка
Юзабилити-тесты
Photo from ideo.com
27

28. 28

29. 5 Эволюция
Разработка
Запуск
Изучение
Совершенствование
Photo from ideo.com
29

30. Когда заканчивается дизайн

31. 31

32. 32

33. 33

34. 34

35. 35

36. 36

37. 37

38. 38

39. 39

40. 40

41. 41

42. 42

43. 43

44. 44
Фото пользователя moriza с сайта flickr.com

46. 46

47. 47

48. Как мы делали браузер

59. пог|

63. 1 2 3 4 5
Исследование Интерпретация Идея Эксперимент Эволюция

64. Исследования
Photo by evie22 @ flickr.com
Изучение истории
Изучение рынка
Этнографическое иссл.
Статистика
Интервью экспертов
Юзабилити-тестирование
)

65. 1993
Mosaic

66. 1994
Multitorg Opera

67. 1995
Netscape Navigator 2
JavaScript

68. 1998
Internet Explorer 3
CSS

69. 1999
Internet Explorer 5
XMLHttpRequest → AJAX

70. 2000
Opera 5

71. 2007
Opera 9.2

72. 2008
Chrome

76. Этнографическое
исследование

77. Исследования
Photo by evie22 @ flickr.com
Изучение истории
Изучение рынка
Этнографическое иссл.
Статистика
Интервью экспертов
Юзабилити-тестирование
)

78. Проектирование
и дизайн
Философия
Структура интерфейса
Взаимодействие
Визуальное оформление
Иконки

79. Пользовательский интерфейс
Photo © yandex

80. Пользовательский интерфейс
Photo © yandex

81. Пользовательский интерфейс
Photo © yandex

90. yandex.ru › москва

91. vkontakte.ru

92. youtube.com

105. Проектирование
и дизайн
Структура интерфейса
Взаимодействие
Визуальное оформление
Иконки

122. Спасибо!
Константин Горский
kostya@gorskiy.ru
@k00