Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Дизайн гайды

16,400 views

Published on

Опыт работы над сайтом и блогом Nimax через гайдлайн, как подготовить такой документ и в каких случаях стоит его применять.

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

Published in: Design
  • Ребята, мне нравится КАЖДАЯ ваша презентация. Уровень толковости зашкаливает. Спасибо, что держите марку, а рынок подтянется!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Дизайн гайды

  1. 1. Дизайн гайды h Юлия Мархадаева Интерактивное агентство
  2. 2. Опыт агентства Эксперименты. Клиенты Гайд по гайду Структура документа. Чеклисты Выводы Плюсы. Минусы. Ситуации О чём?
  3. 3. Агентство Поддержка проектов после запуска Поддержка собственого сайта Дизайнеры разного уровня Выгодные схемы работ для клиента Клиент Поддержка и развитие сайта Собственная команда дизайнеров Бюджет и сроки разработки сайта Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  4. 4. Никто не приходит за гайдами! Реальные кейсы Измеримая выгода Клиенты «в теме» 3 проекта, чтобы провести эксперименты и попробовать новую схему работ. Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  5. 5. Nimax.ru
  6. 6. Guideline Nimax. Набор правил оформления веб-страниц
  7. 7. Nimax.ru
  8. 8. Blog.nimax.ru 1 день дизайнера 5 дней верстальщика
  9. 9. Клиент №1
  10. 10. Клиент №2
  11. 11. Гайд по гайду Интерактивное агентство
  12. 12. «Guideline – a general rule, principle, or piece of advice». Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  13. 13. «Guideline – a general rule, principle, or piece of advice». Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  14. 14. UI Kit? Guide?
  15. 15. Структура 01 Сетка Модульная сетка Интерлиньяжная сетка 02 Шрифтовая схема Базовые правила Принципы верстки текста 03 Цветовая схема Кодирование Зонирование 04 Элементы интерфейса Управляющие элементы Поля ввода Алерты и т.д. 05 Графика Иконки Иллюстрации 06 Фотографии Ракурсы, обработка. Размеры 07 Компоновка Зонирование. Шаблоны Адаптивность. Мобильные версии Навигация Header / Footer Готовые блоки Отдельные страницы 08 Анимация Примеры анимации Отдельные интерактивные блоки
  16. 16. 01 Сетка Модульная сетка Интерлиньяжная сетка Основное правило Только адекватные клиенты, которые «в теме»
  17. 17. 02 Шрифтовая схема Базовые правила Основное правило Только адекватные клиенты, которые «в теме» Используемые шрифты и их цветовое кодирование.
  18. 18. 02 Шрифтовая схема Принципы верстки текста Основное правило Только адекватные клиенты, которые «в теме» Все возможные варианты оформления текста: уровни заголовков, основной текст, списки (нумерованные, маркированные с разными маркерами, сноски, выделения в тексте и т.д). По возможности указывается оформление текста колонами (в зависимости от модульной сетки).
  19. 19. 03 Цветовая схема Кодирование Основное правило Только адекватные клиенты, которые «в теме» Базовые цвета Дополнительные цвета Акцентные цвета Варианты использования с примерами Зонирование Распределение цвета в зависимости от степени важности «зон» на странице сайта. Дополнительные правила по цветовым акцентам.
  20. 20. 04 Элементы интерфейса Основное правило Только адекватные клиенты, которые «в теме» Управляющие элементы Поля ввода Алерты и т.д. Собирается максимальное количество интерфейсных элементов, которые используются на сайте. Показываются и описываются их состояния, поведение. Если элементы делятся на категории (например, типы кнопок), то описываются случаи их использования.
  21. 21. 05 Графика Иконки Основное правило Только адекватные клиенты, которые «в теме» Типы иконок (для оформления текстов, интерфейсные). Принципы разработки иконок (если есть особая техника и специфика). Описание вариатов работы с сюжетом в иконках (если есть особые требования или определенный принцип). Иллюстрации Виды иллюстраций. Принцип разработки (требования к сюжетам, технике, стилистике и т.д.). Правила использования.
  22. 22. 06 Фотографии Ракурсы Обработка Размеры Основное правило Только адекватные клиенты, которые «в теме» Правила использования фотографий на сайте. Варианты размеров фотографий. Места и условия использования на страницах сайта.
  23. 23. 07 Компоновка Основное правило Только адекватные клиенты, которые «в теме» Зонирование. Шаблоны Варианты шаблонов на сайте и распределение контентых зон по каждой странице. Адаптивность Мобильные версии Варианты шаблонов на сайте и Header / Footer Расположение элементов. Возможные изменения на разных страницах/разделах и т.д.
  24. 24. 07 Компоновка Основное правило Только адекватные клиенты, которые «в теме» Навигация Все состояния меню всех уровней (первого, второго, третьего). Варианты расширения пунктов меню. Дополнительные навигационные блоки (хлебные крошки, рубрикаторы, вкладки и т.д.)
  25. 25. 07 Компоновка Основное правило Только адекватные клиенты, которые «в теме» Готовые контентные блоки Все блоки именуются. Описываюся правила и условия использования. Описываются технические параметры, требования к конетнту (фото, иллюстрации, иконки, текст). Описываются возможные изменения и поведение на разных страницах/разделах и т.д.
  26. 26. 07 Компоновка Основное правило Только адекватные клиенты, которые «в теме» Отдельные страницы Структура и правила работы с отдельными страницами. Например: — Страницы кейса/проекта. — Страница поста в блоге. — Страница описания услуги. — Страница вакансии. — и т.д.
  27. 27. 08 Анимация Основное правило Только адекватные клиенты, которые «в теме» Анимация элементов В качестве примеров могут быть ссылки на примеры анимации или на сверстанную библиотеку уже анимированных элементов сайта (базовое документирование верстки)
  28. 28. Базовые условия Итерационность, поддержка проекта Постоянная команда разработки Больше одного дизайнера Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  29. 29. Типы проектов Промо-сайты, Копоративные сайты, маленькие E-commerce Веб-сервисы, СМИ, Зонтичные проекты, большие Корпоративные сайты, большой E-commerce Дизайн гайды для веба Юлия Мархадаева User eXperience 2014
  30. 30. Дизайн гайды для веба Юлия Мархадаева User eXperience 2014 Плюсы Порядок в проекте Единый стиль элементов Апдейты быстрее и легче Распределение работ между дизайнерами Чеклист
  31. 31. Дизайн гайды для веба Юлия Мархадаева User eXperience 2014 Минусы Нет креатива Время на сборку документа Время на поддержание актуальности документа
  32. 32. Thnx! h

×