КОМПОНЕНТНЫЙДИЗАЙН

Specia Conf / 2015

ВЕБ-ПРОЕКТЫ

АЙДЕНТИКА

ИЛЛЮСТРАЦИИ

ИКОНКИ

РАСКРУТКА ГРУПП ВКОНТАКТЕ

«ШАПКИ» ДЛЯ САЙТОВ

НАРИСОВАТЬ ВИЗИТКУ

РАСПЕЧАТАТЬ ФЛАЕР

ОБРАБОТАТЬ ФОТОГРАФИЮ

САЙТ-ВИЗИТКА ЗА ОДИН ДЕНЬ

ПОЧИНИТЬ КОМПЬЮТЕР

ПЕРЕУСТАНОВИТЬ СИСТЕМУ

ПЕРЕПРОШИТЬ ТЕЛЕФОН

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

PROJECT ARA

REVO BUILD

REVO BUILD

REVO BUILD

REVO BUILD

REVO BUILD

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

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

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

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

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

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

— Заменяемость

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

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

— Заменяемость

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

ИССЛЕДОВАНИЯ И АНАЛИЗ

КОНЦЕПЦИЯ

ПРОИЗВОДСТВО

ПРОДВИЖЕНИЕ

ПРОЕКТИРОВАНИЕ И ДИЗАЙН

ЗАПУСК

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

Система сайтов проекта

КАРТА ПРИМЕНЕНИЯ

Системасайтов проекта

Инструментыповышения конверсии

Посадочнаястраницапроекта

Микросайты

Приложение

Дочерниепроекты

КАРТА ПРИМЕНЕНИЯ

Системасайтов проекта

Рассылка

Вебинары

Партнёрскиепрограммы

Инструментыповышения конверсии

Контент проекты

Контексти таргетированнаяреклама

Социальные сетии сервисы

Посадочнаястраницапроекта

Микросайты

Приложение

Дочерниепроекты

КАРТА ПРИМЕНЕНИЯ

Системасайтов проекта

Рассылка

Вебинары

Партнёрскиепрограммы

ОффлайнИнструментыповышения конверсии

Контент проекты

Контексти таргетированнаяреклама

Социальные сетии сервисы

Посадочнаястраницапроекта

Микросайты

Приложение

Дочерниепроекты

КАРТА ПРИМЕНЕНИЯ

К

К Системасайтов проекта

Рассылка

Вебинары

Партнёрскиепрограммы

ОффлайнИнструментыповышения конверсии

Контент проекты

Контексти таргетированнаяреклама

Социальные сетии сервисы

Посадочнаястраницапроекта

Микросайты

Приложение

Дочерниепроекты

КАРТА ПРИМЕНЕНИЯ

К Системасайтов проекта

Рассылка

Вебинары

Партнёрскиепрограммы

ОффлайнИнструментыповышения конверсии

Контент проекты

Контексти таргетированнаяреклама

Социальные сетии сервисы

Посадочнаястраницапроекта

Микросайты

Приложение

Дочерниепроекты

КАРТА ПРИМЕНЕНИЯ

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

ВИЗУАЛЬНАЯ КОММУНИКАЦИЯ

К

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

ВИЗУАЛЬНАЯ КОММУНИКАЦИЯ

К К

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

КАК ПРОИСХОДИТНА САМОМ ДЕЛЕ

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

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