Ниже расскажу о том, как можно с минимальными изменениями (не всегда) подредактировать дизайн уже практически готового сайта и с какими проблемами мы столкнулись, когда всё было готово.
Прежде чем начать, поясню - здесь не будет открытий века или какой-то очень сложной задачи. Всё дальнейшее рассчитано на юных дизайнеров и просто людей неравнодушных. Однако опытным дизам будет скучно, неинтересно, ибо подобные проекты были у них в работе сотни раз. Поэтому поймите и... За сим, начнём.
Задача
Увидев сайт в первый раз первым моим желанием было либо отказаться от заказа, либо предложить переделать всё. Это непрофессионально и грубо. Как впоследствии оказалось, не так страшен чёрт, как его малюют.
Всё тот же заказчик, что в предыдущей статье - tealab. Стоит заметить, что с этим брендом мы работаем стабильно, постоянно и отношения у нас достаточно доверительные, чтобы исключить в разговоре всевозможные политесы и этапы “продажи” себя любимых. Однако это не повод говорить, что ваш дизай “ужасен” и впаривать новый. Давайте послушаем, что сказал tealab.
Что есть: дизайн, уже свёрстанный и даже частично натянутый на cms. Макеты упакованы в figma. Есть контакт с верстальщиком и программистом со стороны заказчика. Но пока сайт не на бою.
Задача: с минимальными изменениями придать сайту более продающий вид, сделать его внешне привлекательным. Исправить дизайн мобильной версии.
Вызов принят!
Анализ
Есть много приятных интернет магазинов на просторе рунета - от маленьких до крупных маркетплейсов.
Перед нами небольшой сайт чая, кофе и посуды для розницы. Исходя из практики, он должен быть в меру креативным, но не слишком, поскольку когда мы говорим про интернет магазин, в котором товарных позиций больше сотни, но не больше тысячи имеем в виду интерфейс.
В интернет-магазине именно функциональность стоит во главе угла, а потом уже красота и креатив.
Прежде чем приступать к поиску референсов и говорить за красивости, мы обсудили с заказчиком именно проблемы функционала и зафиксировали те работы, которые нужно сделать:
Шапка сайта. Она большая, как на десктопе, так и в адаптиве. Если перейти в каталог, то она занимает больше 35% на экране телефона, а на небольших девайсах и вовсе это значение угрожающе подступает к 50%.
Карточки товара. Они чересчур длинные, с мелким интерфейсом.
Сквозной блок Преимущества. Стандартная плашки с иконками, несмотря на наличие фирменного элемента, выглядит тяжело и уже приелось пользователям.
Сквозной блок с рассылкой и о нас. Тоже стандартно
Футер. Такие футеры пришли прямиком из начала десятилетия. Не очень функционально и занимает очень много места.
- Шрифты. В некоторых местах очень большое межстрочное расстояние.
Шапка сайта
Первое что бросилось в глаза - это большое количество цветовых полос на фоне. Почти пятьдесят оттенков серого, если брать в расчёт и баннер. Ну вы поняли)
Второе - это пункты меню. То, что нужно практически в последний момент выведено в центре (я про “о нас” “доставка “возврат” и т.д.). Это всё нужное, но как ни странно второстепенное.
Третье - скорее придирка. Кнопка каталога и поле меню сливаются и выглядят единым целом.
Пользовательский сценарий - облегчает дальнейшую работу с интерфейсом. Перед тем как приступить к работе, продумайте как взгляд пользователя будет двигаться по экрану. Что нужно поставить в-первую очередь, а что во-вторую?
В нашем случае ключевыми функциями будет Каталог, поиск, корзина, профиль, а потом всё остальное. Вооружившись таким порядком мы немного причесали шапку. На десктопе шапка немного подобралась и сала компактной, а на телефоне вместо 35-40%, уже приятные 15-20%.
Карточка товара
Здесь задача стояла облегчить карточку, а также добавить свойство товара. По высоте карточка стала значительно меньше, а за счёт скругления углов получилось добиться так называемого юзерфрендли.
На мобильном к сожалению такого чуда не произошло и по высоте карточка примерно такая же, но стала аккуратнее.
Юзер френдли дизайн всегда приятен и хорошо воспринимается пользователями. Однако если переборщить со скруглениями, да и вообще заиграться с такой геометрией можем получить детский сад и непонимание пользователя куда он попал.
Преимущества
Блок преимуществ пока выглядит стандартно. Обычно он играет роль скорее справочной информации о том, что доставка дешёвая, по всей стране, а теперь ещё и бесконтактная.
На самом деле стандартные фразы типа “Компания №1 в самой лучшей стране мира”, “Высококвалифицированные сотрудники”, “Индивидуальный подход” и так далее ушли в закат, помахав ручкой. Но иногда возвращаются и просят, чтобы они были. Несмотря на то, что клиенты компаний уже не верят в такие призывы, а хотят реальные преимущества.
В данном случае скучные иконки с подписями мы заменили на красивые фотографии и попросили чуть лучше продумать текст.
Футер
Футер выглядел как что-то не очень вразумительное - большой и малофункциональный.
Мы добавили большой призыв к сотрудничеству, как хорошее троеточие, вместо жирной точки. В самом низу дублируем основные разделы сайта и каталога. Ну и контакты, конечно. Тут всё стандартно и не надо выдумывать велосипед и ехать на нём открывать Америку.
Футер может быть большим. Это даже круто, когда футер самостоятельный блок, но вместе с тем является продолжением сайта.
Но на мой взгляд самый лучший футер - это маленькая полоска с копирайтом, политикой конфиденциальности и ссылкой на разработчика. А всё потому, что меню чаще всего закреплено в верхней части экрана и ездит вместе со страницей. Минимализм в действии, что тут ещё сказать.
Шрифты
Зачастую хорошие шрифты решают всё. По крайней мере многое.
В нашем случае расстояние между буквами везде было разное и везде необоснованное. Лучше всего разницу видно в шапке: кнопка каталога, корзины и профиля
Самый большой и страшный омут - это межбуквенное расстояние. Легко заиграться в кернинг. Кернинг (англ. kerning) — любимая игра начинающих дизайнеров, когда соревнуються, кто больше добавит расстояния между буковок. Создатели шрифтов заранее продумали и задали своё межбуквенное расстояние. Если его хочется увеличить (уменьшить), то либо следует выбрать другой шрифт, либо подумать, а нужно ли оно? Иногда бывает нужно - когда шрифт очень маленький, когда дело касается акцентных шрифтов (в плакатах, логотипах и т.д.). Но ни во всех подряд.
Выбор товара на мобиле
Здесь мы вдохновились всем известным сайтом синего маркетплейса. Вниз поместили основные функции. А на построение выбора товара нас вдохновил другой, уже розовый, всем известный магазин.
Можете спросить, а почему не придумали что-то свое. Ответ - а зачем придумывать велосипед? Такой функционал работает, удобен и хорошо себя показал. Он понятен пользователю, даже знаком.
Проблемы и ошибки
Основной ошибкой оказалась самонадеянность. Мы хотели добавить красивую анимацию для блока “о компании”. Но не вышло. Ошибка заключалась в том, что с самого начала мы не посоветовались с верстальщиком по поводу этой самой анимации.
Поэтому не посвятили блоку отдельный раздел, ибо там нет ничего интересного.
Над сайтом редко работает один человек. Создание сайта - это всегда взаимодействие. Но работая не в одной команде легко об этом забыть. Если есть контакт с верстальщиком проекта, скиньте ему концепт, пусть он посмотрит и скажет, что можно сделать, а что вызовет затруднение. Потому что если такая проблема возникнет где нибудь на середине вёрстки, виноват окажется дизайнер.
Выводы и итоги
Я не умею писать выводы. Вы знаете :Р
Задачка с виду не очень сложная, всё требует усилий. В первую очередь анализа. Основная проблема таких проектов, где есть не только готовый дизайн, но и вёрстка, не сломать вёрстку и не заставить заказчика заплатить дважды. Никто не любит платить дважды.
Если же что-то меняется кардинально - обосновывать это. Доносить и убеждать - так удобнее пользователю. Так пользователь сможет быстрее найти нужный товар и так далее.
Итоги… Больно осознавать, что наткнулась на грабли, на который натыкалась уже не раз. Учли, утёрли нос и пошли дальше)
Всем бобра!
У меня вопрос - "а зачем делать редизайн сайта?"
Скорее всего все ответят для ув. конверсии.
Так что дал этот редизайн?
Пока ждём статистику. Думаю через месяц будут полноценные данные. Правда оценивать сложно, так как сайт ни разу до этого не был на бою. Да и тут я описывала не столько сторону аналитики, сколько именно сторону чисто дизайнерских моментов.
На что натягивали?
Мне кажется вы ошиблись
Спасибо за находку. И правда ошибка) Поправили
Комментарий удален модератором
Комментарий удален модератором
Хорошая работа. Только вот тут (рис.) насчет позиции картинки и текста - полная лажа! Хуже стало! Надо центрировать текст и подводить кнопку под другие.. возможно выбрать подходящие картинки.
Комментарий удален модератором