Опыт работы над сайтом и блогом Nimax через гайдлайн, как подготовить такой документ и в каких случаях стоит его применять. Презентация руководителя отдела веб-разработки Юлии Мархадаевой, подготовленная для конференции User eXperience 2014, 23.10.14 г.

1. Дизайн гайды
h
Юлия Мархадаева
Интерактивное
агентство

2. Опыт агентства
Эксперименты. Клиенты
Гайд по гайду
Структура документа. Чеклисты
Выводы
Плюсы. Минусы. Ситуации
О чём?

3. Агентство Поддержка проектов после запуска
Поддержка собственого сайта
Дизайнеры разного уровня
Выгодные схемы работ для клиента
Клиент Поддержка и развитие сайта
Собственная команда дизайнеров
Бюджет и сроки разработки сайта
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

4. Никто
не приходит
за гайдами!
Реальные кейсы
Измеримая выгода
Клиенты «в теме»
3 проекта, чтобы провести
эксперименты и попробовать
новую схему работ.
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

5. Nimax.ru

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

7. Nimax.ru

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

9. Клиент №1

10. Клиент №2

12. Гайд по гайду
Интерактивное
агентство

13. «Guideline – a general rule,
principle, or piece of advice».
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

14. «Guideline – a general rule,
principle, or piece of advice».
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

15. UI Kit? Guide?

16. Структура 01 Сетка
Модульная сетка
Интерлиньяжная сетка
02 Шрифтовая схема
Базовые правила
Принципы верстки текста
03 Цветовая схема
Кодирование
Зонирование
04 Элементы интерфейса
Управляющие элементы
Поля ввода
Алерты
и т.д.
05 Графика
Иконки
Иллюстрации
06 Фотографии
Ракурсы, обработка.
Размеры
07 Компоновка
Зонирование. Шаблоны
Адаптивность. Мобильные версии
Навигация
Header / Footer
Готовые блоки
Отдельные страницы
08 Анимация
Примеры анимации
Отдельные интерактивные блоки

17. 01 Сетка
Модульная сетка
Интерлиньяжная сетка
Основное правило
Только адекватные клиенты,
которые «в теме»

18. 02 Шрифтовая схема
Базовые правила
Основное правило
Только адекватные клиенты,
которые «в теме»
Используемые шрифты и их цветовое
кодирование.

19. 02 Шрифтовая схема
Принципы верстки текста
Основное правило
Только адекватные клиенты,
которые «в теме»
Все возможные варианты оформления
текста: уровни заголовков, основной текст,
списки (нумерованные, маркированные с
разными маркерами, сноски, выделения в
тексте и т.д).
По возможности указывается оформление
текста колонами (в зависимости от
модульной сетки).

20. 03 Цветовая схема
Кодирование
Основное правило
Только адекватные клиенты,
которые «в теме»
Базовые цвета
Дополнительные цвета
Акцентные цвета
Варианты использования с примерами
Зонирование
Распределение цвета в зависимости от
степени важности «зон» на странице сайта.
Дополнительные правила по цветовым
акцентам.

21. 04 Элементы
интерфейса
Основное правило
Только адекватные клиенты,
которые «в теме»
Управляющие элементы
Поля ввода
Алерты
и т.д.
Собирается максимальное количество
интерфейсных элементов, которые используются
на сайте.
Показываются и описываются их состояния,
поведение.
Если элементы делятся на категории (например,
типы кнопок), то описываются случаи их
использования.

22. 05 Графика
Иконки
Основное правило
Только адекватные клиенты,
которые «в теме»
Типы иконок (для оформления текстов,
интерфейсные).
Принципы разработки иконок (если есть
особая техника и специфика).
Описание вариатов работы с сюжетом в
иконках (если есть особые требования или
определенный принцип).
Иллюстрации
Виды иллюстраций.
Принцип разработки (требования к
сюжетам, технике, стилистике и т.д.).
Правила использования.

23. 06 Фотографии
Ракурсы
Обработка
Размеры Основное правило
Только адекватные клиенты,
которые «в теме»
Правила использования фотографий на
сайте.
Варианты размеров фотографий.
Места и условия использования на
страницах сайта.

24. 07 Компоновка
Основное правило
Только адекватные клиенты,
которые «в теме»
Зонирование. Шаблоны
Варианты шаблонов на сайте и
распределение контентых зон по каждой
странице.
Адаптивность
Мобильные версии
Варианты шаблонов на сайте и
Header / Footer
Расположение элементов.
Возможные изменения на разных
страницах/разделах и т.д.

25. 07 Компоновка
Основное правило
Только адекватные клиенты,
которые «в теме»
Навигация
Все состояния меню всех уровней (первого,
второго, третьего).
Варианты расширения пунктов меню.
Дополнительные навигационные блоки
(хлебные крошки, рубрикаторы, вкладки и т.д.)

26. 07 Компоновка
Основное правило
Только адекватные клиенты,
которые «в теме»
Готовые контентные блоки
Все блоки именуются.
Описываюся правила и условия
использования.
Описываются технические параметры,
требования к конетнту (фото, иллюстрации,
иконки, текст).
Описываются возможные изменения и
поведение на разных страницах/разделах и
т.д.

27. 07 Компоновка
Основное правило
Только адекватные клиенты,
которые «в теме»
Отдельные страницы
Структура и правила работы с отдельными
страницами. Например:
— Страницы кейса/проекта.
— Страница поста в блоге.
— Страница описания услуги.
— Страница вакансии.
— и т.д.

28. 08 Анимация
Основное правило
Только адекватные клиенты,
которые «в теме»
Анимация элементов
В качестве примеров могут быть ссылки на
примеры анимации или на сверстанную
библиотеку уже анимированных элементов
сайта (базовое документирование верстки)

29. Базовые условия
Итерационность, поддержка проекта
Постоянная команда разработки
Больше одного дизайнера
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

30. Типы проектов
Промо-сайты, Копоративные сайты, маленькие E-commerce
Веб-сервисы, СМИ, Зонтичные проекты, большие
Корпоративные сайты, большой E-commerce
Дизайн гайды для веба Юлия Мархадаева User eXperience 2014

31. Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
Плюсы
Порядок в проекте
Единый стиль элементов
Апдейты быстрее и легче
Распределение работ между дизайнерами
Чеклист

32. Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
Минусы
Нет креатива
Время на сборку документа
Время на поддержание актуальности документа

33. Thnx!
h