Три уровня дизайна. Практическое применение

Несколько лет назад я натолкнулся на перевод статьи Марка Хендриксона “Три типа дизайна” и она мне очень здорово помогла систематизировать знания, а так же построить более гибкий и понятный рабочий процесс. Кроме того, это здорово помогло мне при проведении тренингов по дизайну. Подробно с теорией можно ознакомиться если прейти по вышеуказанной ссылке (или в руководстве THE WEAPON FOR DIGITAL PRODUCT JEDI), а здесь коротко повторю ключевое описание типов, которые я называю уровнями.

  1. Дизайн продукта — на этом уровне содержится основная информация о продукте: какие проблемы решает и каким образом, кто пользователи, какие используются технологии. Это ядро продукта, его уникальность, то, что определяет его ценность.
  2. Дизайн взаимодействия — на этом уровне основная информация превращается в элементы интерфейса, паттерны и экраны, навигацию, подачу информации. Этот уровень определяет удобство работы с продуктом.
  3. Дизайн графического интерфейса — это уровень визуального и эмоционального восприятия продукта, его графическая оболочка. Это уровень, который видят пользователи и с которым они взаимодействуют.

Ниже я описал как применять это на практике на примере двух своих проектов и одного клиентского.


Null Gravity

Примерно в 2011м году я активно увлекался диджеингом, помимо основной работы дизайнером, и у меня возникла идея создать некую организацию связанную с музыкой, вечеринками и фестивалями. Название Null Gravity родилось как-то само, но при этом оно отлично отражало основной стиль музыки, на которой предполагалось делать упор (Tech House, Deep House, Techno).

Дизайн продукта. Концепция

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

Целевая аудитория в своей естественной среде обитания

Дизайн взаимодействия. Стратегия

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

Постеры как средство коммуникации

Дизайн графического интерфейса. Визуальная коммуникация

Исходя из названия Null Gravity фирменный стиль должен отражать идею некоего растворения в музыке и ощущения невесомости, отрыва от земных забот и перемещение в другое пространство.

Винил — музыка, жидкость — растворение

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

Цветовые вариации логотипа

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

Визитки
Флаер
Постер

Результат

В результате я устроил пару вечеринок, сделал сайт с помощью которого мы с подругой съездили на фестиваль Сигет несколько раз. А потом начались другие заботы и дело заглохло, но стиль стал победителем в номинации Фирменный стиль конкурса Ukrainian Design The Very Best Of. Кстати, мои миксы остались и продолжают радовать меломанов но адресу https://www.mixcloud.com/alexvoloshyn/


Gramofon.ua

Это клиентский проект который успешно был запущен и продолжает свое развитие. Подробно этапы работы описаны в статье Дизайн без мучений. Проектирование сайта Gramofon.ua, здесь же опишу основные идеи.

Дизайн продукта. Концепция

Клиент сразу описал свою концепцию и целевую аудиторию. Нужно было спроектировать сервис позволяющий активным пользователям Инстаграмма создавать макет фотокниги, используя фотографии из своего профиля, и оформлять заказ. Все просто.

Готовая фотокнига

Дизайн взаимодействия. Интерфейс

После уточнения всех деталей и сбора информации я проработал основные этапы взаимодействия пользователя с сервисом через сайт.

Основной сценарий взаимодействия пользователя с сайтом

После проработки основных сценариев я проработал все дополнительные сценарии и отобразил их в виде карты навигации.

Карта навигации

Дизайн графического интерфейса. Визуальная коммуникация

Оформление должно быть достаточно простым и теплым. Хотелось показать фотокниги во всей красе и вызвать желание поскорей получить свою уникальную историю в твердом переплете.

Стартовая страница
Конструктор

Результат

После успешной реализации и запуска проект активно развивается, растет и изменяется. Смотри результат по адресу http://gramofon.ua/ru/


UX Clan

Одно время я курировал направление интерактивного дизайна в School of Visual Communication после чего у меня возникла создать свой учебный проект посвященный этой теме.

Дизайн продукта. Концепция

Концепция родилась довольно быстро. Мне хотелось попробовать создать некое виртуальное комьюнити в котором можно было бы делиться знаниями и проводить всякие учебные мероприятия, в основном тренинги, на тему проектирования цифровых продуктов. Так родилось название UX Clan. Проект нацелен на начинающих дизайнеров, которые хотят систематизировать свои знания и развиваться в этом направлении.

Тренинг по дизайн-мышлению в Харькове

Дизайн взаимодействия. Стратегия

Основными инструментами коммуникации с целевой аудиторией являются сайт и блог со статьями. Для того чтобы делиться своими знаниями и завлекать на учебные мероприятия людей был создан блог на платформе Medium.com.

https://medium.com/ux-clan-flow

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

Страница тренинга

Дизайн графического интерфейса. Визуальная коммуникация

Название UX Clan подразумевает некое сообщество прокачанных специалистов, в которое можно вступить пройдя обучение. Эта идея и легла в оформление визуальной составляющей проекта. Сначала я разработал логотип и простой фирменный стиль.

Логотип

Потом я попросил художника нарисовать в стиле комикса несколько персонажей, которые будут отображать идею проекта.

http://ux-clan.org/weapon/
Постер и герой

Результат

Было проведено много разных тренингов, кроме того я запустил онлайн-тренинг Digital Product Design и первый запуск прошел весьма успешно (результаты и описания работы над проектами).

Профиль автора на LinkedIn
Сайт проекта ux-clan.org


6-ти недельный онлайн-курс по дизайну сайтов, веб-сервисов, мобильных приложений от постановки задачи до прототипа для веб-дизайнеров. Подробнее: www.ux-clan.org/training


THE WEAPON
FOR DIGITAL PRODUCT JEDI

Полное руководство по проектированию сайтов, веб-сервисов и мобильных приложений для дизайнеров всех уровней и менеджеров

http://ux-clan.org/weapon/