Дизайн гайды

Дизайн гайдыhЮлия Мархадаева

Интерактивноеагентство

Опыт агентстваЭксперименты. Клиенты

Гайд по гайдуСтруктура документа. Чеклисты

ВыводыПлюсы. Минусы. Ситуации

О чём?

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Агентство Поддержка проектов после запускаПоддержка собственого сайтаДизайнеры разного уровняВыгодные схемы работ для клиента

Клиент Поддержка и развитие сайтаСобственная команда дизайнеровБюджет и сроки разработки сайта

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Никтоне приходитза гайдами!

Реальные кейсыИзмеримая выгодаКлиенты «в теме»

3 проекта, чтобы провести эксперименты и попробоватьновую схему работ.

Nimax.ru

GuidelineNimax. Набор правил оформления веб-страниц

Nimax.ru

Blog.nimax.ru 1 день дизайнера5 дней верстальщика

Клиент №1

Клиент №2

Гайд по гайду

Интерактивноеагентство

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

«Guideline – a general rule, principle, or piece of advice».

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

«Guideline – a general rule, principle, or piece of advice».

UI Kit? Guide?

Структура 01 СеткаМодульная сеткаИнтерлиньяжная сетка

02 Шрифтовая схемаБазовые правилаПринципы верстки текста

03 Цветовая схемаКодированиеЗонирование

04 Элементы интерфейсаУправляющие элементыПоля вводаАлертыи т.д.

06 ФотографииРакурсы, обработка.Размеры

05 ГрафикаИконкиИллюстрации

Примеры анимацииОтдельные интерактивные блоки

07 КомпоновкаЗонирование. ШаблоныАдаптивность. Мобильные версииНавигацияHeader / FooterГотовые блокиОтдельные страницы

08 Анимация

01 Сетка

Модульная сетка

Интерлиньяжная сетка

Основное правило

Только адекватные клиенты, которые «в теме»

02 Шрифтовая схема

Базовые правила

Основное правило

Только адекватные клиенты, которые «в теме»

Используемые шрифты и их цветовое кодирование.

02 Шрифтовая схема

Принципы верстки текста

Основное правило

Только адекватные клиенты, которые «в теме»

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

По возможности указывается оформление текста колонами (в зависимости от модульной сетки).

03 Цветовая схема

Кодирование

Основное правило

Только адекватные клиенты, которые «в теме»

Базовые цвета

Дополнительные цвета

Акцентные цвета

Варианты использования с примерами

Зонирование

Распределение цвета в зависимости от степени важности «зон» на странице сайта.

Дополнительные правила по цветовым акцентам.

04 Элементыинтерфейса

Основное правило

Только адекватные клиенты, которые «в теме»

Управляющие элементыПоля вводаАлертыи т.д.

Собирается максимальное количество интерфейсных элементов, которые используются на сайте.

Показываются и описываются их состояния, поведение.

Если элементы делятся на категории (например, типы кнопок), то описываются случаи их использования.

05 Графика

Иконки

Основное правило

Только адекватные клиенты, которые «в теме»

Иллюстрации

Типы иконок (для оформления текстов, интерфейсные).

Принципы разработки иконок (если есть особая техника и специфика).

Описание вариатов работы с сюжетом в иконках (если есть особые требования или определенный принцип).

Виды иллюстраций.

Принцип разработки (требования к сюжетам, технике, стилистике и т.д.).

Правила использования.

06 Фотографии

РакурсыОбработкаРазмеры Основное правило

Только адекватные клиенты, которые «в теме»

Правила использования фотографий на сайте.

Варианты размеров фотографий.

Места и условия использования на страницах сайта.

07 Компоновка

Основное правило

Только адекватные клиенты, которые «в теме»

Варианты шаблонов на сайте и распределение контентых зон по каждой странице.

Зонирование. Шаблоны

АдаптивностьМобильные версии

Варианты шаблонов на сайте и

Расположение элементов.Возможные изменения на разных страницах/разделах и т.д.

Header / Footer

07 Компоновка

Основное правило

Только адекватные клиенты, которые «в теме»

Навигация

Все состояния меню всех уровней (первого, второго, третьего).

Варианты расширения пунктов меню.

Дополнительные навигационные блоки (хлебные крошки, рубрикаторы, вкладки и т.д.)

07 Компоновка

Основное правило

Только адекватные клиенты, которые «в теме»

Все блоки именуются.

Описываюся правила и условия использования.

Описываются технические параметры, требования к конетнту (фото, иллюстрации, иконки, текст).

Описываются возможные изменения и поведение на разных страницах/разделах и т.д.

Готовые контентные блоки

07 Компоновка

Основное правило

Только адекватные клиенты, которые «в теме»

Структура и правила работы с отдельными страницами. Например:

— Страницы кейса/проекта.

— Страница поста в блоге.

— Страница описания услуги.

— Страница вакансии.

— и т.д.

Отдельные страницы

08 Анимация

Основное правило

Только адекватные клиенты, которые «в теме»

В качестве примеров могут быть ссылки на примеры анимации или на сверстанную библиотеку уже анимированных элементов сайта (базовое документирование верстки)

Анимация элементов

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Базовые условия

Итерационность, поддержка проектаПостоянная команда разработкиБольше одного дизайнера

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Типы проектов

Промо-сайты, Копоративные сайты, маленькие E-commerce

Веб-сервисы, СМИ, Зонтичные проекты, большие Корпоративные сайты, большой E-commerce

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Плюсы

Порядок в проекте

Единый стиль элементов

Апдейты быстрее и легче

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

Чеклист

Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

Минусы

Нет креатива

Время на сборку документа

Время на поддержание актуальности документа

Thnx!h