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

3. Photo © yandex

4. Photo © yandex

5. 5
Фронтенд
Фото пользователя moriza с сайта flickr.com

6. 6
Дизайнеры — люди творческие
Фото пользователя moriza с сайта flickr.com

7. Про что дизайнеры нередко забывают
как всё будет выглядеть в старых браузерах?
что произойдет, когда мы подставим реальные
данные?
особенно если эти данные не будут вмещаться
какими будут анимации, ховеры и переходы?
как должна вести себя страница при изменении
размеров окна браузера?
7

8. Хорошо дизайнит тот,
кто дизайнит последним.
— Артём Поликарпов
8

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

10. 1
»?
фото: Adobe

11. 2
англ. design — проектировать,
чертить, задумать, а также проект,
план, рисунок
художественное
конструирование предметного
мира; разработка образцов
рационального построения
предметной среды
11

12. People think that the
designers are told,
'Make it look good!'
That's not what we think
design is. It's not just what
it looks like and feels like.
Design is how it works.
12

13. Дизайн — это сознательные
и интуитивные усилия
по созданию значимого порядка.
13

14. Дизайн — это создание.
14

15. Бизнес
жизнеспособность
Люди
привлекательность
Технологии
осуществимость
15

16. Что такое хороший дизайн?
16

17. 10 принципов
хорошего дизайна
Дитера Рамса
17

18. фото SmartMarmot с сайта flickr.com
12
18

19. фото SmartMarmot с сайта flickr.com
13
19
18

20. фото donchris!™ с сайта flickr.com
14
20

21. Процесс дизайна

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

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

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

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

26. 26

27. 27

28. 28

29. 29

30. 30

31. 31

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

33. 33

34. 34

36. 36

37. Достаточно ли картинки?
37

38. Достаточно ли картинки?
Действие состоит из следующих этапов:
1. Формирование цели
2. Формировние намерения
3. Определение конкретных действий
4. Выполнение действий
5. Восприятие нового состояния системы
6. Интерпретация изменений
7. Оценка результата
38

39. Достаточно ли картинки?
Хороший дизайн:
1. Нагляден
2. Имеет ясную концептуальную модель
3. Указывает возможные действия
4. Позволяет легко выполнить действия
5. Говорит, находится ли система в необх. сост.
6. Имеет хорошее соотв. между сост. и его отобр.
7. Имеет внятную обратную связь
39

40. 40

41. 41

42. 42

43. Дизайн должен подсказывать,
какие действия возможны
в данный момент.
Дизайн должен быть наглядным.
43

44. Вопрос:
в каком разделе я нахожусь?
44

45. 45

46. 46

47. 47

48. 48

49. 49

50. 50

51. 51

52. 52

53. 53

54. Что такое юзабилити?
54

55. Определение из ISO 9241-11
Юзабилити — это степень эффективности,
трудоемкости и удовлетворенности,
с которыми продукт может быть
использован определенными пользователями
при определенном контексте использования
для достижения определенных целей.
Usability — the extent to which a product can be used
by specified users to achieve specified goals with efficiency,
effectiveness and satisfaction in a specified context of use.
55

56. Юзабилити-лаборатория
56

57. Юзабилити-лаборатория
57

58. Многие задачи невозможно
решить одними только
интеллектуальными усилиями,
нужны эксперименты.
58

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

63. 63

64. 64

65. 65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71

72. 72

73. 73

74. 74

75. 75

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

78. 78

79. 79

80. Что дальше?

86. alistapart.com smashingmagazine.com ilovetypography.com

87. Простота — необходимое условие прекрасного.
Л. Н. Толстой
87

88. Спасибо!
Константин Горский
gorskiy@yandex-team.ru
@k00