Полезное чтение
Дизайн-концепция: с чего начать и как сберечь нервы
Вконтакте
Instagram
YouTube
Behance
Medium
Telegram
Контакты
Статьи и вебинары

Если дизайнер делает классный продукт, который никому не нужен, значит нет общей идеи для проекта.

Петя придумал дизайн приложения магазина палаток в Хабаровске. Пользователь скачивает его, выбирает товар, но есть проблема — купить палатки в этом магазине можно только оффлайн. Приложение бесполезно. Заказчик негодует, что нет продаж, а дизайнер переживает, что работа прошла впустую.

Чтобы избежать гнева клиентов и личного разочарования, мы расскажем, как составить дизайн-концепцию и создавать продукт, полезный пользователю.
1 — выяснить задачу проекта и потребности целевой аудитории
Для этого проведи интервью с заказчиком по методу 6 вопросов:

1. Кто? Что?

Любители активного отдыха. Интернет-магазин палаток.


2. Сколько?

1 магазин.


3. Где?

Склад в Хабаровске.


4. Когда?

Заказать палатку можно всегда. Упакуют с 10:00 до 19:00 по хабаровскому времени. Доставка от 3 дней
в зависимости от расстояния.


5. Как?

Палатки изготавливают из полиэстера, который защитит тебя от дождя и ветра.


6. Зачем?

Чтобы во время путешествия не привязываться к постоянному месту жилья и при желании менять маршрут.


Спроси заказчика, что он хочет: увеличить средний чек или повысить охват аудитории.

Если заказчик не раскрыл представление о ЦА, спроси самих пользователей о потребностях. Узнай, почему они покупают этот товар или услугу, почему идут к этим производителям, а не другим, что им нравится, а что нет.
Вывод: знаешь задачи и потребности ЦА — готов к следующему этапу.
2 — определить тип интерфейса
Когда поймешь потребности ЦА, определи тип интерфейса, которым удобно пользоваться:

  1. Монопольные — для продуктов, которыми люди пользуются больше 5 минут. Занимают весь экран, нет ярких цветов, имеют логичную структуру. Примеры: карточки товаров в интернет-магазинах, графические редакторы, email.




↧ Карточка товара. Работа выпускника 25 потока Интенсива Темирлана Раканова
Интерфейс Photoshop CS6
Интерфейс Gmail
2. Временные — используют для одного целевого действия, например, «найти» или «выбрать». Цель пользователя — обработать информацию в короткий срок. Фокус внимания на приоритетных функциях, информация упрощена.

Пример временного интерфейса — лаунчеры. Пользователь 5-10 секунд выбирает, какое приложение откроет на смартфоне.




↧ Launcher iOS
3. Фоновые — выдают результаты действий (пуш-уведомления о сообщениях, отчет об ошибках интернет-соединения). Пользователь видит информацию, которая появляется поверх основного интерфейса. Занимает только часть экрана. Например, отчет антивируса.




↧ Отчет антивируса
Петя резюмирует интервью с заказчиком и покупателями:

— У палатки от 20 характеристик, которые пользователи хотят видеть в одном месте;
— В карточке товара обязательны видеообзор и фотографии (7 штук);
— Покупатель выбирает палатку 5-10 минут и больше.

Результат: Петя выбрал монопольный интерфейс.
Вывод: потребности ЦА определяют тип интерфейса: монопольный (для длительной работы), временный (для выполнения одного действия), фоновый (для отчета о результате).
3 — определить подход в визуальной стилистике

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

1. Информационный. Цель — показать смысл, донести контент. Красивые картинки и психология цвета второстепенны. Главное — заставить пользователя выполнить действие. Используется в компьютерных приложениях, интерфейсах, на лендингах:




↧ Интерфейс 1C
Лендинг. Работа выпускника 24 потока Интенсива Антона Гвозда
2. Эмоциональный. Цель — вызвать определенные чувства у пользователя. Логика может быть нарушена, акцент на цвет и форму, главное — получить эмоциональный контакт у пользователя.

Где применять: портфолио, наружная реклама, обложки для видеороликов.




Работа из портфолио выпускника 25 потока Интенсива Павла Наумова
Превью ролика на YouTube
Петя понимает, что яркие цвета и элементы раздражают пользователя во время выбора товара. Чтобы купить палатку, человек сосредоточен на контенте, поэтому дизайнер для визуала выбирает информационный подход.
Вывод: если пользователь должен выполнить действие, выбирай информационный подход, если нужно вызвать чувства — эмоциональный.
4 — собрать мудборд
Выполнил 3 шага — вперед на behance или dribble за референсами.

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

А пока посмотри, какие мудборды собирают студенты на курсе Интенсив:




↧ Мудборд выпускника 22 потока Интенсива Леонида Крупы
↧ Макет лендинга по мудборду
Вывод: правильно соберешь мудборд — быстро создашь дизайн-макет с минимум правок.
Инструкция
1. Выясни, для чего нужен продукт и кто будет им пользоваться
2. Определи тип интерфейса (монопольный или временный)
3. Выбери визуальный подход (информационный или эмоциональный)
4. Собери мудборд
5. Работай над макетом: дизайн-концепция готова

Чтобы создавать востребованный продукт, посмотри вебинар, как проводить и анализировать исследования пользователей.