Джун. Что было дальше

Итак, на чем мы с вами остановились? Не помните… Эх, прийдется освежить вашу память.

В посте «Джун. Путь в ux/ui дизайн.» вы читали о моем увлекательном и невообразимом (но это не точно) пути в ux/ui дизайн (достаточно очевидно, но для успокоения своей души, решила прояснить этот момент. Зачем? Не понятно… ну ладно) .

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

И остановились на разборе первого кейса в портфолио. А именно, на дизайне главной страницы онлайн-магазина вязанных изделий.

Фух… Вспомнили, теперь можно двигаться дальше)

Джун. Что было дальше

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

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

Джун. Что было дальше

В итоге родилось вот это великолепие (стоит себя хвалить, да даже за такие работы, ведь кто если не ты)

Джун. Что было дальше

После этого взялась за разработку страницы товара.

Это было уже интересней. Ведь на одной странице тебе нужно разместить всю необходимую информацию о товаре. При этом чтобы она легко воспринималась (никто не хочет читать «простыню») .

В такой момент всегда выручают теги и списки с подходящими подзаголовками.

Джун. Что было дальше

Да и в целом в работе всегда важна структура и иерархия всех элементов.

Так как это магазин и его задача – продать как можно больше, не упускаем возможность предложить другие товары. В моем случае это раздел «Также вам может понравиться».

Джун. Что было дальше

Совет (не особо оригинальный, но все же): Не упускайте из виду цели и задачи клиента, ведь наша работа сделать так, чтобы его бизнес работал, а не просто красивую картинку создать.

Как только пользователь заходит в карточку товара, появляются три варианта развития событий:

  • Товар понравится и он его купит;
  • Товар понравится и он добавит его в избранное;
  • Товар не понравится и пользователь перейдет в другую карточку товара или по хлебным крошкам вернется в необходимую точку.

Из этого вытекает необходимость создать еще две страницы: «Избранное» и «Корзину» (и так понятно, что онлайн-магазин не может существовать без этого этапа. Но все же стоит рассматривать также и сценарии, чтобы точно ничего не пропустить)

Корзина

Настолько стандартна, что и рассказывать особо нечего просто смотрите)

Джун. Что было дальше

Избранное

По сути упрощенная версия страницы каталог.

Джун. Что было дальше

О нас

Переходим к самой интригующей и самой сложной в сборке странице (лично для меня) .

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

Для того чтобы сделать цепляющую страницу необходимо ответить на несколько вопросов:

  • Почему? Почему вы (клиент) делаете то, что делаете?
  • Как? Какие проблемы решает ваш продукт, товар, услуга, какие уникальные качества есть?
  • Что? Что конкретно вы предлагаете, характеристики услуг или товаров?

Не стоит забывать про то, что мы должны побуждать пользователя к действию (подписка на рассылку или заполнение формы обратной связи)

Джун. Что было дальше

На этом работа почти закончена, остается только проработать модальные окна входа и регистрации, а также корзины и все состояния импутов и кнопок (active, hover, disactive)

В следующем посте расскажу вам о моем опыте поиска работы и разберем интересное тестовое задание.

Джун. Что было дальше

Спасибо, что были со мной до конца)

3
Начать дискуссию