Артефакты: референсные подборки и мудборды

Описание

Референсная подборка (design reference) создается в начале работы над визуальным дизайном и представляет собой компиляцию изображений, на которые затем дизайнер будет опираться при создании дизайн-макета. В нее могут входить примеры цветовых схем, шрифтов, оформления отдельных  блоков,  фотографий в интерфейсе, компоновки и отдельных графических элементов.

Подборка может быть структурированной (каждый блок подписан, назначение каждого примера однозначно понятно), либо хаотичной (нагромождение картинок, из которого можно считать общее настроение, но не конкретные решения), во втором случае фактически референс превращается в мудборд.

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

Понятия иногда используют взаимозаменяемо.

Примеры:

 

Зачем использовать

Создание референсной подборки помогает убить сразу несколько зайцев:

1) Согласовать общую стилистику дизайн-макета еще до его создания и подстраховаться от несоответствия дизайна ожиданиям (заказчика, команды). Как это ни печально, дизайн с трудом поддается словестному описанию. Характеристики “вызывающий доверие”, “стильный”, “профессиональный” (да, таким словами иногда описывают пожелания к дизайну) нельзя трактовать однозначно: у разных людей они вызывают разные представления о том, как это будет выглядеть в итоге.

2) Уточнить оценку трудозатрат. Дизайнер, создавая такую подборку, закладывает фундамент под дальнейшую работу и лучше понимает все тонкости задачи. А значит и его оценка будет точнее.

3) Собрать предварительную обратную связь от пользователей. Правда, тут важно не перегнуть и спрашивать только об общем впечатлении, не углубляясь в детали. В этом плане хороши тесты с быстрым предъявлением: к примеру, сайт fivesecondtest.com, как можно догадаться из названия, показывает пользователям изображение в течение 5 секунд, после чего они высказывают свое мнение.

4) Для вдохновения. Помогает собраться с мыслями без долгой медитации на чистый лист в Photoshop.

Подводные камни

Создание референса может быть частью коммерческого предложения, т.е. выполняться как будто бесплатно (до того, как вы фактически выиграли проект). Однако эта работа может занять достаточно много времени, так что не забудьте потом часы, потраченные на референс, включить в итоговую стоимость дизайна. Конечно, всегда возможен вариант, при котором референс-то создали, а проект не «выстрелил». В этом случае потраченного времени вам, конечно же, никто не вернет, но зато у вас останется а) готовый референс, который полностью или частично можно будет использовать на другом проекте; б) опыт создания референса.

Есть и еще один нюанс: референс – инструмент в некотором роде стратегический. Он описывает картину целиком, но ни в коем случае не является аналогом ТЗ. Важно, чтобы заказчик это понимал и потом не удивлялся, почему у вас в дизайне размер шрифта не такой, каким он был в референсе.

Полезные ссылки и инструменты

1) Colorlovers.com – отличный ресурс для выбора цветовых схем. Пример:

2) Mural.ly – Этот ресурс я будут рекомендовать и для других артефактов. Он позволяет организовать совместную работу, в том числе – по созданию референса, а из особых приятностей – в него встроен поиск картинок.

3) Pinterest.com – популярный инструмент для создания таких подборок в том числе. Прелесть в том, что есть достаточно большая вероятность набрать материал для референса среди подборок других пользователей. Найдется очень много интересных вещей.

4) Сайты с набором паттернов (в том числе – мобильных), откуда можно черпать идеи для референсов. Их существует великое множество, так что я порекомендую парочку тех, что мне нравятся в большей степени:

Веб: http://ui-patterns.com/ и http://patterntap.com/

Мобильные: http://www.mobile-patterns.com/ и http://www.mobilepatterns.com/

2 thoughts on “Артефакты: референсные подборки и мудборды

  1. Спасибо. Самая релевантная ссылка в гугле и самый точный ответ на мой запрос (:

Leave a Reply

Your email address will not be published. Required fields are marked *