Компонентный дизайн

Компонентныйдизайн

Дизайн-выходные / 2016

WEB

Семантика

Адаптивность

Анимация

Эмоции

Компоненты

30012 8Более десяти лет успешно реализуем проекты различного уровня сложности для российских и зарубежных заказчиков.

2005Одинаково эффективно работаем как напрямую с клиентом, так и с агентствами. Масштабируем производство.

В студии четыре отдела: дизайн и проектирование, программирование, управление, поддержка и развитие.

Уделяем внимание образованию и следим за трендами. Выступаем на конференциях городоского и регионального масштаба.

В цифрах

год основания компании сотрудников выступлений малых и больших проектов

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

Project Ara

Revo Build

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

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

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

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

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

Исследования и анализ

Концепция

Производство

Продвижение

Проектирование и дизайн

Запуск

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

Карта применения

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


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

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

Микросайты

Приложение

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


Рассылка

Вебинары

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


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

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

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







Рассылка

Вебинары


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








К



К

Рассылка

Вебинары


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










Разрозненные коммуникации

Неузнаваемость и неточность сообщений

Разный подход к оформлению

Неуправляемость большой системы

Визуальная коммуникация

К

Как долженвоспринимать клиент

Визуальная коммуникация

К К

Как долженвоспринимать клиент

Как происходитна самом деле

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

PDF

ВСЁ ПЛОХО

ЧТО ДЕЛАТЬ?

Дизайн-система

— Компонентная архитектура

— Свой визуальный язык

— Обновляемая экосистема

— Принципы и ограничения

— Правила применения

1. Веб-компонент

2. Графический компонент

3. Анимация

4. Стиль подачи информации

...

Пример компонентов

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

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

СКАЧАТЬ БУКЛЕТ

Широкая вариативность

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

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

Официальность

Канцеляризмы

Инфантильность

Котики

«Мудрые» цитаты

Помощник,сервис,пошаговое руководство

Канцелярскийстиль

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

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

2. Надоело рисовать картинки

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

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

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

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

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

Недостатки

Невозможность быстро решить некоторые задачи

— Разместить картинку или виджет в случайном месте

— Глобально поменять логику построения компонентов

Разработать действительно универсальный компонент сложно

— Добавить поле

— Добавить функционал

— Все фазы разработки

Накладывает больше ограничений, чем обычный подход

— Может использоваться только один раз

— Набор решений ограничен, нужны новые компоненты

Любая кастомная задача должна решаться компонентами

— Можно сломать веб-компонент и не узнать об этом

— Новые графические компоненты могут не сочетаться

Модификация компонента затронет все экземпляры

— Не всегда целесообразно

— Подходит для больших систем

— Нужна поддержка

Сложность, сроки разработки и стоимость подхода

— Система сайтов

— Микросайты

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

Сложность архитектуры в целом

Внедрение

— Определиться с масштабом

— Насколько универсальной она должна быть

— Определить основные методы продвижения

— Составить карту применения компонентов

1. Масштаб дизайн-системы

— Ресурсы, которые клиент готов выделить

— Кто будет курировать действия дизайнеров

— Как будет отслеживаться соблюдение правил

2. Поддержка

— Определиться со способом хранения стандартов

— Способ информирования новых команд

— Учесть специалистов не связанных с дизайн-процессами и разработкой

3. Информация

Пример

1. Составление структуры (карта применения)

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

Рассылка

Вебинары










Пример


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

Пример



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

Пример




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

Пример





5. Проверка основного набора компонентов

Пример






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

Пример







7. Разработка компонентов (вёрстка, работа с данными, скрипты)

Пример








8. Сборка страниц и подключение CMS

Пример








8. Сборка страниц и подключение CMS

9. Контент

Пример

Михаил Кучинvk.com/[email protected]

/m18ru /m18m18.ru

Компонентный дизайн

Design

Transcript of Компонентный дизайн