Опишите ваш проект
Наши специалисты свяжутся с вами в ближайшее время
Отправив запрос вы получаете:
  • Письмо или звонок от нашего менеджера
  • Оценку своего проекта
  • Личную встречу, при необходимости
  • Конфиденциальность гарантирована!
maxim_kaschjev
Ваш менеджер
Максим Кащеев
С удовольствием ответим на все ваши вопросы
Задать вопрос
UX/UI

Design Evening: выжимка полезной информации

На что обращает внимание пользователь в первые секунды знакомства с сайтом? В какой момент он принимает решение совершить покупку? Какую роль в увеличении конверсии играет эмоциональный web-дизайн? Без каких микровзаимодействий нельзя делать mobile и web продукты в 2018?

Обо всем этом и многом другом можно было узнать на Design Evening 28.03.2018 в Fabrika Space. Для участников мероприятия мы приготовили конспект с выжимкой полезной информации и рекомендациями спикеров. Ну, а тем ребятам, кто по каким-либо причинам не смог к нам попасть, будет вдвойне интереснее — сегодня делимся самым ценным, что можно было там узнать.

1 Эмоциональный веб-дизайн: история одного чуткого лендинга

Анна Джулий, Art Director at Vintage WEB production

Ошибочно думать, что в понятие «упаковка бизнеса» входит лишь название компании, фирменный стиль, маркетинг-кит и рекламная продукция. В наше время 75% покупок совершаются онлайн. Следовательно, первое знакомство клиента с компанией чаще всего происходит через web-сайт.

Improve your skills:Упаковка бизнеса — комплекс маркетинговых мероприятий, направленный на привлечение внимания целевых покупателей. Хорошая упаковка — не только яркий функциональный сайт. Это взаимосвязанная система между айдентикой бренда и web-сайтом.

Ученые Стэнфордского университета провели опрос, который показал, что порядка 46% респондентов составляют мнение о сайте на основании его интерфейса и внешнего вида. Если ресурс вызывает wow-эмоции с первых секунд, тогда выше вероятность, что он запомнится пользователю. Людям нравятся функциональные, надежные, удобные и доставляющие удовольствие интерфейсы.

Многие уверены, что при создании лендинга, достаточно сделать его привлекательным и функциональным, а также — немного лучше, чем у конкурентов. Но, чтобы быть дальновидными, необходимо рассуждать системно, учитывая сразу весь комплекс факторов, входящих в «упаковку» бренда. Именно так и поступила Анна, разрабатывая Landing Page для проекта Fromin.

(Чтобы увидеть посты в полном размере, кликните на изображение)

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

Таким образом, при разработке сайта стояла задача подчеркнуть все выдающиеся качества этой воды посредством визуальной коммуникации с пользователями. Главная цель эмоционального дизайна — донести людям индивидуальность рекламируемого продукта и вызвать у них необходимые чувства. Главная задача брендинга — создать неповторимый образ, который не позволит перепутать ваш продукт с продуктом конкурента.

Передать особенность минеральной воды Fromin удалось при помощи грамотно подобранной цветовой гаммы, правильно расположенным объектам и привлекательному контенту.

Больше информации о докладе спикера в презентации:

Простые просветительские истины, которые обязательно нужно учитывать при разработке Landing page:

Точный прицел

Не ленитесь определять целевую аудиторию на старте проекта. Главная ваша задача на этом этапе — изучить потребности клиента, а затем с помощью лендинга убедить его в качестве рекламируемого продукта/услуги.

Отображение всех характеристик продукта

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

Проработка первого экрана

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

Баннерная слепота

Оформляйте виджеты в той же цветовой гамме, которой оформлен и дизайн сайта. Тогда они не будут выпадать из общего стиля лендинга. Не стоит выбирать для форм слишком яркие и насыщенные тона, так как они могут вызвать у пользователей «баннерную слепоту».

Размещение формы на видном месте

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

2 Дизайн-система для мобильных и веб-проектов

Алексей Стикс, Art Director at MEAT Agency

Дизайнеры ценят хорошие UI-киты. Именно поэтому в последнее время огромное внимание уделяется не просто набору определенных инструментов, а созданию систем, позволяющих связывать продукты воедино. В сфере IT дизайн-система — это комплекс правил, который определяет этапы создания продукта.

Алексей поделился с нами тремя базовыми составляющими дизайн-системы:

  • Визуальный набор элементов;
  • Программный набор компонентов;
  • Документация.

Среди второстепенных отметил:

  • Правила анимации;
  • Правила коммуникации;
  • Правила формирования контента.

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

Алексеем был собран набор:

  • Шрифтов;
  • Иконок;
  • Цветов;
  • Кнопок;
  • Полей.

Важный совет!Не стоит хранить в библиотеке комбинированные символы по всем разделам.

Чтобы реализовать любой компонент в системе, достаточно использовать 4-е разновидности теней: легкую, более выраженную, густую и удаленную. Для выстраивание необходимой визуальной иерархии, необходимо заранее определяться с размером шрифтов.

Больше информации об адаптивах и брейкпоинтах можно найти в презентации:

3 Без каких микровзаимодействий нельзя делать mobile и web продукты в 2018?

Алексей Чурилов, Senior UX designer & Co-founder at Valium Digital

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

Главные задачи, которые удается решать посредством микровзаимодействия:

  • Улучшение навигации;
  • Упрощение взаимодействия с пользователями;
  • Привлечение внимания к сайту.

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

Если затронуть тему комбинации специалистов, то наиболее качественные проекты получаются в тандеме UX + JS. Приобретение дизайнером маркетинговых навыков — хорошая идея. Такой специалист сможет не только создавать дизайны, но и помогать «продвигать» продукты/услуги по множеству каналов, а также строить воронку продаж.

Больше информации о докладе спикера в презентации:

P.S. Любите свою работу, не прекращайте совершенствовать профессиональные навыки и создавайте wow-дизайны! Просмотреть фотоотчет о мероприятии можно на нашей официальной странице в FB.

Поделись своей эмоцией после прочтения статьи
Давайте обсудим Ваш проект
Мы с радостью сделаем бесплатную оценку вашего проекта
Или просто загрузите файл с презентацией или описанием
Моисеев Артем
Business Development Manager
Моисеев Артем