Редизайн интернет-магазина с минимальными усилиями

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

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

Увидев сайт в первый раз первым моим желанием было либо отказаться от заказа, либо предложить переделать всё. Это непрофессионально и грубо. Как впоследствии оказалось, не так страшен чёрт, как его малюют.

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

Что есть: дизайн, уже свёрстанный и даже частично натянутый на cms. Макеты упакованы в figma. Есть контакт с верстальщиком и программистом со стороны заказчика. Но пока сайт не на бою.

Задача: с минимальными изменениями придать сайту более продающий вид, сделать его внешне привлекательным. Исправить дизайн мобильной версии.

Вызов принят!

Есть много приятных интернет магазинов на просторе рунета - от маленьких до крупных маркетплейсов.

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

Прежде чем приступать к поиску референсов и говорить за красивости, мы обсудили с заказчиком именно проблемы функционала и зафиксировали те работы, которые нужно сделать:

Первое что бросилось в глаза - это большое количество цветовых полос на фоне. Почти пятьдесят оттенков серого, если брать в расчёт и баннер. Ну вы поняли)

Второе - это пункты меню. То, что нужно практически в последний момент выведено в центре (я про “о нас” “доставка “возврат” и т.д.). Это всё нужное, но как ни странно второстепенное.

Третье - скорее придирка. Кнопка каталога и поле меню сливаются и выглядят единым целом.

В нашем случае ключевыми функциями будет Каталог, поиск, корзина, профиль, а потом всё остальное. Вооружившись таким порядком мы немного причесали шапку. На десктопе шапка немного подобралась и сала компактной, а на телефоне вместо 35-40%, уже приятные 15-20%.

Здесь задача стояла облегчить карточку, а также добавить свойство товара. По высоте карточка стала значительно меньше, а за счёт скругления углов получилось добиться так называемого юзерфрендли.

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

Блок преимуществ пока выглядит стандартно. Обычно он играет роль скорее справочной информации о том, что доставка дешёвая, по всей стране, а теперь ещё и бесконтактная.

В данном случае скучные иконки с подписями мы заменили на красивые фотографии и попросили чуть лучше продумать текст.

Футер выглядел как что-то не очень вразумительное - большой и малофункциональный.

Мы добавили большой призыв к сотрудничеству, как хорошее троеточие, вместо жирной точки. В самом низу дублируем основные разделы сайта и каталога. Ну и контакты, конечно. Тут всё стандартно и не надо выдумывать велосипед и ехать на нём открывать Америку.

Зачастую хорошие шрифты решают всё. По крайней мере многое.

В нашем случае расстояние между буквами везде было разное и везде необоснованное. Лучше всего разницу видно в шапке: кнопка каталога, корзины и профиля

Здесь мы вдохновились всем известным сайтом синего маркетплейса. Вниз поместили основные функции. А на построение выбора товара нас вдохновил другой, уже розовый, всем известный магазин.

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

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

Я не умею писать выводы. Вы знаете :Р

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

Если же что-то меняется кардинально - обосновывать это. Доносить и убеждать - так удобнее пользователю. Так пользователь сможет быстрее найти нужный товар и так далее.

Итоги… Больно осознавать, что наткнулась на грабли, на который натыкалась уже не раз. Учли, утёрли нос и пошли дальше)

Всем бобра!