Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.

КОМПОНЕНТНЫЙ
ДИЗАЙН
Specia Conf / 2015

ВЕБ-ПРОЕКТЫ
АЙДЕНТИКА
ИЛЛЮСТРАЦИИ
ИКОНКИ
РАСКРУТКА ГРУПП ВКОНТАКТЕ
«ШАПКИ» ДЛЯ САЙТОВ
НАРИСОВАТЬ ВИЗИТКУ
РАСПЕЧАТАТЬ ФЛАЕР
ОБРАБОТАТЬ ФОТОГРАФИЮ
САЙТ-ВИЗИТКА ЗА ОДИН ДЕНЬ
ПОЧИНИТЬ КОМПЬЮТЕР
ПЕРЕУСТАНОВИТЬ СИСТЕМУ
ПЕРЕПРОШИТЬ ТЕЛЕФОН

КОМАНДЫКОМАНДЫКОМАНДЫ
КОМПОНЕННАЯ
АРХИТЕКТУРА

Компонентная
архитектура упрощает
апгрейд устройства

— Простая декомпозиция

— Взаимосвязь

— Взаимосвязь
— Заменяемость

КОМАНДЫКОМАНДЫКОМАНДЫОСНОВЫ ПОДХОДА

ИССЛЕДОВАНИЯ И АНАЛИЗ
КОНЦЕПЦИЯ
ПРОИЗВОДСТВО
ПРОДВИЖЕНИЕ
ПРОЕКТИРОВАНИЕ И ДИЗАЙН
ЗАПУСК

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

Система сайтов проекта
КАРТА ПРИМЕНЕНИЯ

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

Система
Рассылка
Вебинары
Партнёрские
программы
Контент проекты
Контекст
и таргетированная
реклама
Социальные сети
и сервисы
страница
проекта
Дочерние
проекты

Система
Рассылка
Вебинары
программы
ОффлайнИнструменты
Контекст
реклама
и сервисы
страница
проекта
Дочерние
проекты
К

К Система
Рассылка
Вебинары
программы
ОффлайнИнструменты
Контекст
реклама
и сервисы
страница
проекта
Дочерние
проекты

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

ВИЗУАЛЬНАЯ КОММУНИКАЦИЯ
К
КАК ДОЛЖЕН
ВОСПРИНИМАТЬ КЛИЕНТ

ВИЗУАЛЬНАЯ КОММУНИКАЦИЯ
К К
КАК ДОЛЖЕН
ВОСПРИНИМАТЬ КЛИЕНТ
КАК ПРОИСХОДИТ
НА САМОМ ДЕЛЕ

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

КОМАНДЫКОМАНДЫКОМАНДЫЧТО ДЕЛАТЬ?

ДИЗАЙН-СИСТЕМА
— Компонентная архитектура
— Свой визуальный язык
— Обновляемая экосистема
— Принципы и ��граничения
— Правила применения

— Веб-компонент
— Графический компонент
— Анимация
— Смысловой/эмоциональный
— Паттерны взаимодействия
— Стиль подачи информации
...
ПРИМЕР КОМПОНЕНТОВ

ПРИМЕР КОМПОНЕНТОВ
— Веб-компонент
— Графический компонент
— Анимация
— Смысловой/эмоциональный
— Паттерны взаимодействия
— Стиль подачи информации
...

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

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

3. СМЫСЛОВОЙ/ЭМОЦИОНАЛЬНЫЙ

Чего я хочу добиться?
С чего начать бизнес?
Можно ли компенсировать
уплату процентов по кредиту?
Где найти средства
на открытие своего дела?

МАРКЕТИНГ
РЕГИСТРАЦИЯ
БУХГАЛТЕРИЯ
НАЛОГООБЛОЖЕНИЕ
БИЗНЕСПЛАНИРОВАНИЕ
ПРОДАЖИ

ПОВЫШЕНИЕ
ЛИЧНОЙ
ЭФФЕКТИВНОСТИ
ПОЛУЧЕНИЕ ЗНАНИЙ
О ВОПРОСАХ ВЕДЕНИЯ
БИЗНЕСА
ПРИВЛЕЧЕНИЕ
ИНВЕСТИЦИЙ

Официальность
Канцеляризмы
4. СТИЛЬ ПОДАЧИ ИНФОРМАЦИИ
Инфантильность
Котики
«Мудрые» цитаты

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

5. Паттерны взаимодействия
6. Анимация

КОМАНДЫКОМАНДЫКОМАНДЫ
КОГДА НУЖНА
ДИЗАЙН-СИСТЕМА?

1. Вы преодолели этап
«нашей компании нужен просто сайт»

2. Дизайнер рисует для вас картинки,
а не компоненты

3. Предполагается активный рост
и изменение проекта

4. Частый запуск дочерних проектов,
обновления каскадны

5. Единообразие визуальных
коммуникаций каналов продвижения
при запуске нового проекта

6. Над проектированием и дизайном проекта
в дальнейшем будет работать несколько
специалистов/команд/компаний

7. Не хватает возможностей готового шаблона,
конструктора сайта и библиотек компонентов

КОМАНДЫКОМАНДЫКОМАНДЫНЕДОСТАТКИ

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

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

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

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

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

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

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

КОМАНДЫКОМАНДЫКОМАНДЫВНЕДРЕНИЕ

— Определиться с масштабом
— Насколько универсальной она должна быть
— Определить основные методы продвижения
— Составить карту применения компонентов
1. МАСШТАБ ДИЗАЙН-СИСТЕМЫ

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

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

КОМАНДЫКОМАНДЫКОМАНДЫПРИМЕР

1. Составление структуры (карта применения)
Система
Рассылка
Вебинары
программы
Контекст
реклама
и сервисы
страница
проекта
Дочерние
проекты

2. Грубое проектирование (wireframes)

3. Составление основного набора компонентов

4. Точное проектирование всех страниц
на основе набора компонентов

5. Проверка основного набора компонентов
— Лишнее и недостающее

6. Чистовой дизайн компонентов
и сборка ключевых страниц

8. Сборка страниц и Подключение CMS
9. Контент
7. Разработка компонентов (вёрстка,
работа с данными, скрипты)

— На всех этапах можно добавить, настроить
или изъять компонент
— На всех этапах проходит тестирование

ДЕНИС ШУМОВМИХАИЛ КУЧИН
HTTP://FACEBOOK.COM/M18RU
HTTP://VK.COM/KUCHINMD HTTP://FB.COM/SHOOMOV
HTTP://M18.RU

Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.

More Related Content

Компонентный дизайн. Денис Шумов, Михаил Кучин, основатели студии М18.