В чем секрет продающего веб-дизайна? UX/UI дизайн

В чем секрет продающего веб-дизайна? UX/UI дизайн – две  основопологающие качественного веб-дизайна

Всем привет! Меня зовут Мария Гавриленко. Я UX/UI дизайнер веб-студии Профессионал. Работаю в веб-дизайне с 2012 года. Исходя из своего опыта и постоянного мониторинга в этой области, могу с уверенностью сказать, что сфера веб-дизайна постоянно меняется, улучается и не стоит на месте. Появляются новые тренды, возвращаются стары приемы на смену новым и так постоянно.

Дизайн, как и мода, цикличны – всё новое хорошо забытое старое. Но есть определенные правила и рекомендации, к которым стоит прислушиваться и соблюдать их. Если в UI дизайне можно дать волю воображению, то в UX – необходимо чётко понимать сущность задачи и сделать всё необходимое для удобства пользователя. Давайте я вам немного объясню, что же такое UX/UI дизайн и с чем его едят. А также, проведу анализ юзабилити реального сайта.


ЧТО ТАКОЕ UX-ДИЗАЙН?

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

 

Что мы делаем на этапе UX-дизайна?

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

 

Что такое ux-дизайн Что такое ux-дизайн


ЧТО ТАКОЕ UI-ДИЗАЙН?

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

 

Что такое ui-дизайн Что такое ui-дизайн

 

Что мы делаем на этапе UI-дизайна?

  • Разрабатываем дизайн и элементы управления каждой страницы. Дизайнер продумывает даже такие на первый взгляд мелочи, как расположение личного кабинета - слева или справа на верху страницы, цвет кнопки призыва к действию и количество слов, написанных на ней, количество шагов, который должен сделать пользователь, чтобы сделать заказ в интернет-магазине или зарегистрироваться.
  • Подбираем подходящие инструменты и программы. В основном это графические редакторы: Photoshop, Illustrator, Sketch, Adobe XD, Figma и другие.
  • Следит за тем, чтобы каждая страница и каждый элемент органично смотрелись и вызывали положительные эмоции на всех носителях: стационарном компьютере, планшете или ноутбуке, смартфоне. То есть иметь адаптивную верстку.
  • Учитываем основные тренды веб-дизайна: наличие свободного пространства, смелые сочетания шрифтов, четкие крупные шрифты, минимализм и лаконичность. Польза - это здорово, но красоту и приятный взгляду интерфейс тоже никто не отменял. Впрочем, почти всегда UI-дизайн и современные решения идут рука об руку;
  • Так же согласовываем проект с заказчиком, при необходимости вносим правки, тестируем и принимаем окончательное решение.


САЙТ КЛИНИКИ «EVA CLINIC», КАК ПРИМЕР СОВОКУПНОСТИ УДОБСТВА ПОЛЬЗОВАНИЯ И УНИКАЛЬНОГО ДИЗАЙНА.

Итак, вы ознакомились с основами UX/UI дизайна и этапами работы веб-дизайнера. Теперь, я хочу привести пример качественного веб-дизайна, на примере нашего проекта – разработки веб-сайта для клиники «Eva-Clinic».

Eva Clinic - клиника превентивной медицины, инъекционной и аппаратной косметологии. Задача стояла сделать многостраничный сайт услуг. Создаваемый сайт должен был быть ярким, запоминающимся и уникальным с учетом специфики компании-заказчика, и при этом быть функциональным.


Работа над дизайном

Первый этап. Изучение ТЗ

  • Анализ деятельности клиники;
  • Анализ целевой аудитории;
  • Изучение существующих сайтов конкурентов, проанализировав сильные и слабые стороны и т.д.;

Второй этап. Прототипирование (UI)

Прототип разрабатывался в программе Axure.

Структура сайта:

  • Главная страница
  • О центре
  • Услуги
  • Стоимость
  • Акции
  • Отзывы
  • Обучение
  • Медицинский центр
  • Контакты

После разработки, утверждался заказчиком.

Третий этап. Дизайн (UX)

Изучив сайты конкурентов, я пришла к выводу, что в данной области актуальны нежные, постельные оттенки с плавными переходами и линиями. Изысканное сочетание плавных линий, мягких теней, пастельных тонов. «Легкий» веб-дизайн привлекает воздушностью, дает взгляду отдохнуть, не вызывает у пользователей раздражения. Были выбраны бежевые, серые и белые оттенки. Т.к. логотип клиники выполнен в коричневом цвете, то эта палитра отлично сочетается с ним.

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

Анализ юзабилити сайта

А теперь, хочу сказать немного про юзабилити. Юзабилити – это качественный показатель простоты и удобства использования сайта. Главная задача для веб-дизайнера — это грамотная подача информации и удобство. Если сайт сложно использовать – посетитель его закроет. Если главная страница не демонстрирует сферу деятельности сайта или то, что юзер может получить, то юзер закроет сайт. Если в течение первых 5 секунд посетитель не сориентируется, где он находится, – он закроет сайт. Если информацию на сайте сложно воспринять и прочесть, или она не отвечает на ключевые вопросы юзера – юзер закроет сайт.

Анализ удобства пользования сайтом «Eva Clinic»:

  • простота навигации сайта - Да
  • легкий для восприятия интерфейс - Да
  • все нужное по тематике можно найти на веб-ресурсе - Да
  • отсутствие технических ошибок - Да

Вывод. Сайт клиники «Eva Clinic» - пример совокупности удобства пользования и уникального дизайна =)

Мы подходим к процессу создания сайта со всей душой. Каждый проект – уникальный!

Адрес сайта: eva-klinik.ru

Макет косметологии ЕваКлиник