Дизайн выходные 2016. — Основы подхода. — Внедрение в производство. — Разбор кейсов.

1. Компонентный
дизайн
Дизайн-выходные / 2016

2. WEB
Семантика
Адаптивность
Анимация
Эмоции
Компоненты

3. 30012 8
Более десяти лет успешно
реализуем проекты различного
уровня сложности для
российских и зарубежных
заказчиков.
2005
Одинаково эффективно
работаем как напрямую
с клиентом, так и с агентствами.
Масштабируем производство.
В студии четыре отдела:
дизайн и проектирование,
программирование,
управление, поддержка
и развитие.
Уделяем внимание
образованию и следим
за трендами. Выступаем
на конференциях городоского
и регионального масштаба.
В цифрах
год основания компании сотрудников выступлений малых и больших проектов

5. Компонентная
структура

6. Project Ara

8. Revo Build

9. Revo Build

10. Revo Build

11. Revo Build

12. Revo Build

13. — Простая декомпозиция
— Взаимосвязь
— Заменяемость
Компонентная
архитектура упрощает
апгрейд устройства

14. Основы подхода

15. Исследования и анализ
Концепция
Производство
Продвижение
Проектирование и дизайн
Запуск

16. При разработке проекта этап дизайна часто
сводится к «соблюдать фирстиль»
или «разберёмся по ходу»

17. Карта применения
Система сайтов
проекта

18. Система сайтов
проекта
Инструменты
повышения конверсии
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
Карта применения

19. Рассылка
Вебинары
Партнёрские
программы
Инструменты
повышения конверсии
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
Карта применения
Система сайтов
проекта

20. Рассылка
Вебинары
Партнёрские
программы
ОффлайнИнструменты
повышения конверсии
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
К
Карта применения
Система сайтов
проекта

21. К
Рассылка
Вебинары
Партнёрские
программы
ОффлайнИнструменты
повышения конверсии
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
Карта применения
Система сайтов
проекта

22. К
Рассылка
Вебинары
Партнёрские
программы
ОффлайнИнструменты
повышения конверсии
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
Карта применения
Система сайтов
проекта

23. Разрозненные коммуникации
Неузнаваемость и неточность сообщений
Разный подход к оформлению
Неуправляемость большой системы

24. Визуальная коммуникация
К
Как должен
воспринимать клиент

25. Визуальная коммуникация
К К
Как должен
воспринимать клиент
Как происходит
на самом деле

26. Условный статичный фирстиль
не сможет решить проблему
визуальных коммуникаций
PDF

27. ВСЁ ПЛОХО

28. ЧТО ДЕЛАТЬ?

29. Дизайн-система
— Компонентная архитектура
— Свой визуальный язык
— Обновляемая экосистема
— Принципы и ограничения
— Правила применения

30. 1. Веб-компонент
2. Графический компонент
3. Анимация
4. Стиль подачи информации
...
Пример компонентов

31. 1. ВЕБ-КОМПОНЕНТ

34. Удобство
добавления
и настройки

36. СКАЧАТЬ БУКЛЕТ
Широкая
вариативность

38. 2. ГРАФИЧЕСКИЙ КОМПОНЕНТ

43. 3. СТИЛЬ ПОДАЧИ ТЕКСТА

44. Официальность
Канцеляризмы
Инфантильность
Котики
«Мудрые» цитаты

45. Помощник,
сервис,
пошаговое руководство
Канцелярский
стиль

48. Когда нужна
дизайн-система?

49. 1. Когда клиент преодолели этап «нашей компании нужен
просто сайт»
2. Надоело рисовать картинки
3. Предполагается активный рост и изменение проекта
4. Частый запуск дочерних проектов, каскадные обновления
5. Над проектированием и дизайном проекта в дальнейшем будет
работать несколько специалистов/команд/компаний
6. Не хватает возможностей готового шаблона, конструктора
сайта и библиотек компонентов
Когда нужна дизайн-система?

50. Недостатки

51. Невозможность быстро
решить некоторые задачи
— Разместить картинку или виджет
в случайном месте
— Глобально поменять логику
построения компонентов

52. Разработать действительно
универсальный компонент сложно
— Добавить поле
— Добавить функционал

53. — Все фазы разработки
Накладывает больше ограничений,
чем обычный подход

54. — Может использоваться только один раз
— Набор решений ограничен, нужны
новые компоненты
Любая кастомная задача должна
решаться компонентами

55. — Можно сломать веб-компонент и не узнать
об этом
— Новые графические компоненты могут
не сочетаться
Модификация компонента затронет
все экземпляры

56. — Не всегда целесообразно
— Подходит для больших систем
— Нужна поддержка
Сложность, сроки разработки
и стоимость подхода

57. — Система сайтов
— Микросайты
— Контент проекты
Сложность архитектуры
в целом

58. Внедрение

59. — Определиться с масштабом
— Насколько универсальной она должна быть
— Определить основные методы продвижения
— Составить карту применения компонентов
1. Масштаб дизайн-системы

60. — Ресурсы, которые клиент готов выделить
— Кто будет курировать действия дизайнеров
— Как будет отслеживаться соблюдение правил
2. Поддержка

61. — Определиться со способом хранения стандартов
— Способ информирования новых команд
— Учесть специалистов не связанных
с дизайн-процессами и разработкой
3. Информация

62. Пример

63. 1. Составление структуры (карта
применения)
Система
сайтов проекта
Рассылка
Вебинары
Партнёрские
программы
Инструменты
повышения конверсии
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
Посадочная
страница
проекта
Микросайты
Приложение
Дочерние
проекты
Пример

64. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
Пример

65. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
Пример

66. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
Пример

67. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
5. Проверка основного набора
компонентов
Пример

68. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
5. Проверка основного набора
компонентов
6. Чистовой дизайн компонентов и
сборка ключевых страниц
Пример

69. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
5. Проверка основного набора
компонентов
6. Чистовой дизайн компонентов и
сборка ключевых страниц
7. Разработка компонентов (вёрстка,
работа с данными, скрипты)
Пример

70. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
5. Проверка основного набора
компонентов
6. Чистовой дизайн компонентов и
сборка ключевых страниц
7. Разработка компонентов (вёрстка,
работа с данными, скрипты)
8. Сборка страниц и подключение CMS
Пример

71. 1. Составление структуры (карта
применения)
2. Грубое проектирование (wireframes)
3. Составление основного набора
компонентов
4. Точное проектирование всех страниц
на основе набора компонентов
5. Проверка основного набора
компонентов
6. Чистовой дизайн компонентов и
сборка ключевых страниц
7. Разработка компонентов (вёрстка,
работа с данными, скрипты)
8. Сборка страниц и подключение CMS
9. Контент
Пример

72. Михаил Кучин
vk.com/kuchinmd
mail@m18.ru
/m18ru /m18m18.ru