Три уровня дизайна. Практическое применение
Несколько лет назад я натолкнулся на перевод статьи Марка Хендриксона “Три типа дизайна” и она мне очень здорово помогла систематизировать знания, а так же построить более гибкий и понятный рабочий процесс. Кроме того, это здорово помогло мне при проведении тренингов по дизайну.
- Дизайн продукта — на этом уровне содержится основная информация о продукте: какие проблемы решает и каким образом, кто пользователи, какие используются технологии. Это ядро продукта, его уникальность, то, что определяет его ценность.
- Дизайн взаимодействия — на этом уровне основная информация превращается в элементы интерфейса, паттерны и экраны, навигацию, подачу информации. Этот уровень определяет удобство работы с продуктом.
- Дизайн графического интерфейса — это уровень визуального и эмоционального восприятия продукта, его графическая оболочка. Это уровень, который видят пользователи и с которым они взаимодействуют.
Ниже я описал как применять это на практике на примере двух своих проектов и одного клиентского.
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.
Сайт проекта должен содержать всю основную информацию о проекте а так же информацию об учебных проектах. Это основной инструмент донесения информации, приема заявок и оплаты.
Дизайн графического интерфейса. Визуальная коммуникация
Название UX Clan подразумевает некое сообщество прокачанных специалистов, в которое можно вступить пройдя обучение. Эта идея и легла в оформление визуальной составляющей проекта. Сначала я разработал логотип и простой фирменный стиль.
Потом я попросил художника нарисовать в стиле комикса несколько персонажей, которые будут отображать идею проекта.
Результат
Было проведено много разных тренингов, кроме того я запустил онлайн-тренинг Digital Product Design и первый запуск прошел весьма успешно (результаты и описания работы над проектами).
Хочешь изучить UX/UI Design и научиться проектировать сайты и приложения?
Приходи на онлайн-курс, который помогает изучить методику и прямо во время обучения сделать проект для портфолио. Зписывайся на курс по ссылке 👉 https://hyperschool-digital-product-design.webflow.io/
