UI/UX дизайн на примере мастерской «Белый ясень»

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

Знакомство и прототипирование

Чтобы результат устраивал всех: и заказчика и исполнителя, нужно уметь договариваться и слушать друг друга с самого начала. Иногда очень сложно понять, что хочет заказчик, так как он зачастую не профессионал в e-commerce и не может четко сформулировать свои пожелания. Зато что точно может сформулировать почти каждый владелец бизнеса – это чем он занимается, в чем заключаются его услуги и как он их продает. Этого вполне достаточно.

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

Затем мы приступаем к первому этапу UI дизайна, то есть к проектированию интерфейса. Мы рисуем схематично все необходимые страницы и формы, показываем клиенту где что будет находиться и обсуждаем поведение пользователя (грубо говоря, нужен ли здесь этот блок и где расположить кнопку «Купить»).

ui/ux прототипирование "Белый ясень"

На первом этапе проектирования интерфейса уже видно, где что будет располагаться

 

Стиль, цвет, фактура

После согласования прототипов мы начинаем этап разработки визуальной части интерфейса. Сначала узнаем пожелания клиента:

  • Логотип должен быть в виде кожаного лейбла
  • В стиле должна быть кожаная фактура и коричневые/бежевые оттенки

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

c-7

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

Мы учли все пожелания заказчика, внесли свои коррективы с эстетической точки зрения, добавили новых идей.

разрабокта логотипа "Белый ясень"

Этот лейбл сочетает в себе и кожаную фактуру, и близкое заказчику цветовое решение и в целом органично вписался в стилистику всего интернет-магазина

Мы решили, что здесь также будут уместны и элементы этники. Так у нас получилось много интересных деталей в интерфейсе: это, например, дерево в подвале (отсылка к ясеню), этнические лейблы на товарах (а казалось бы это стандартные лейблы «Рекомендуем», «Хит продаж»), достаточно интересный значок «Корзина».

c-9 copy

Детали, незаметные на первый взгляд очень важны.

Иногда дизайн может сразу рассказать пользователю где он находится. Ему не нужно вчитываться и всматриваться в блоки, он сразу понимает «Ага, я попал в интернет-магазин мастерской, которая работает с кожей». И вообще это, после удобства и простоты – одна из первостепенных задач дизайна, рассказать пользователю быстро где он и чего от него тут ожидают.

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

c-9 copy2

В общей сложности получилось около 15 различных макетов.

Верстка – это тоже часть web дизайна

Очень многие забывают, что версткой можно как испортить, так и улучшить визуальный дизайн сайта. Так что мы скажем тут пару слов о верстке :) Мы наряду со многими нашими иностранными коллегами считаем, что web дизайн включает в себя и этап верстки тоже. Верстальщик должен четко представлять себе важность каждой детали, важность оптимального сочетания быстрой загрузки контента и качества графического оформления.

Качество верстки особенно важно в таких сложных дизайнах со множеством графических элементов и мелких (но не менее важных) деталей.  В верстке интернет-магазина «Белый ясень» мы постарались использовать максимум доступных современных web технологий для ускорения загрузки контента, для лучшего отображения на retina мониторах и при этом постарались сделать работу с интернет-магазином в старых браузерах также доступной и вполне удобной (насколько это вообще возможно).

В заключение

Вы можете оценить получившийся дизайн:

Благодарим за внимание и надеемся вам понравился наш обзор, а возможно даже на что-то вдохновил. Всем удачи! :)

Комментарии:

  • http://bono-idea.com Sergey Lonshakov

    Настя, спасибо, что уделила время описанию данной работы. Мне очень понравилось как мы справились с этим проектом.