Skvot

Mag

Skvot Mag
Курсы по теме:

Характер в интерфейсах

Конспект лекции дизайнера интерфейсов Артема Иванова про UI-харизму.
card-photo
card-photo
Юля
Романенко

Авторка в SKVOT

10 августа, 2021 / Дизайн / Статья

Упарываться над красотой интерфейсов не обязательно. Но если все-таки заморочиться, это поможет продукту выделиться на фоне конкурентов, отвлечет от UX-факапов и принесет компании пару бонусных очков репутации — просто потому, что мы любим все красивое.

Как формировать характер диджитал-продукта с помощью дизайна, рассказал на своей лекции Артем Иванов — основатель и дизайн-директор студии Other Land. Среди их проектов — сайт Чернобыля (совместно с Banda), брендинг сервиса доставки еды Wokupp и UI/UX для edu-платформы Method Education. Мы законспектировали главные мысли Артема.

 

Как угодить всем

Главный челлендж в работе дизайнера — сделать так, чтобы проект понравился и заказчику, и пользователям, и дизайн-сообществу. Мы в Other Land выработали для себя метод, как найти золотую середину.

Представь шкалу от нуля до бесконечности, где точка А — максимально базовый, стандартный дизайн (Material Design), а точка Б — полная экспериментальщина (как проекты студии Jugoceania, например). Мы изучаем особенности рынка, целевую аудиторию, конкурентов — и определяем на шкале черту, за которой дизайн перестает быть понятным с точки зрения визуальной составляющей.

Расположение этой границы зависит от типа продукта. Для банковского сервиса она будет ближе к точке А, потому что там главное — чтобы интерфейс был простым и понятным. Для VR-выставки — ближе к точке Б, там можно не бояться экспериментов.

Лучшие решения находятся на краю «понятности», но не заходят за него. Через этот фильтр мы пропускаем идеи на всех этапах работы над проектом: выбираем самые смелые из тех, которые точно сработают.

Лайфхаки в коммуникации с клиентом

Мы в Other Land отказались от брифов: как правило, клиенты заполняют их шаблонно, для галочки. Поэтому брифуемся только вживую.

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

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

Разведка рисерчем и ловля референсов

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

Во-первых, это помогает не повторяться. Во-вторых — определить, где в этой сфере та самая «черта понятности»: какой дизайн приемлем, а какой аудитория посчитает странным.

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

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

Как выработать UI-характер

Стиль интерфейса формируют пять элементов:

#1. Типографика. Мы любим странненькие шрифты — они цепляют глаз и добавляют характера. Особенно классно, если их странность заметна не сразу, а только когда начинаешь присматриваться. Что касается количества шрифтов и начертаний, тут чем меньше, тем лучше. Мы используем не больше двух.

Проект Other Land — сайт Lucid Reality Labs

#2. Цвет. Как и в случае со шрифтами, цвета мы выбираем необычные: не совсем уж дикие, но непривычные. Вместо черного любим использовать темные оттенки других цветов, а в длинных заголовках часть слов делать черными, часть — цветными. 

#3. Композиция. Обычно все элементы в блоке выравнивают либо по центру, либо по верхнему краю, а заголовок выносят вверх. Но можно поступить и по-другому:

Проект Other Land — сайт nauka.ua

#4. Сетка. В отличие от промосайтов, в интерфейсах с модульной сеткой особо не поэкспериментируешь, но всегда можно поиграться с шириной колонок.

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

Проект Other Land — сайт Experteexy. Источник: otherland.studio

Главный совет, чтобы сделать сильно

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

Поделиться материалом