Дизайн продающего сайта. Ребрендинг на тильда 2024

Здесь я вижу классическое решение - расположение текста на фотографии. Лучше брать фото без “шумов”, с маленьким количеством деталей.

Минус. Фотография с “шумом”, на ней есть свой текст, поэтому основная информация, которую расположили на фото, читается плохо.

Здесь хорошо выделяется заголовок, его спасли размер и толщина.
Совет. Если вы хотите оставить эту фотографию, то ее лучше затемнить, а сам текст сделать белым.

Второй вариант - можно поработать с композицией или взять стандартные блоки из тильды cr-43, 45, 47 и разместить фотографию справа, а текст с кнопками - слева.

Кнопки на первом экране
Тут также надо поработать над кнопками. По своим акцентам они одинаковые. Сперва нам надо определить ключевое действие, которого мы хотим добиться от пользователей - “Перейти в каталог” или “Наша страница”, и выделить именно эту кнопку.

Например, акцент будет на кнопке с “каталогом”, тогда кнопку со “страницей” мы делаем второй по важности. Одну кнопку заливаем цветом, а во второй оставляем только обводку и текст. Тогда акцент будет на первой кнопке.

Как я понял, здесь нас встречают “Сезонные предложения”. Идея классная, но реализация хромает. Кнопки в карточках не похожи на себя. Клиент может их легко перепутать с обычной надписью. Они не выглядят кликабельно.

Совет 1. Здесь можно добавить заливку и сделать анимацию при наведении на них курсора.
Например, кнопка розовая, а текст - белый. Но при наведении на них курсора, она у нас инвертируется: розовый текст, белая кнопка.

Минус. Сами кнопки выходят за рамки карточек.

Совет 2. Сделать кнопку в две строчки. А еще лучше - сократить текст кнопки.

Совет 3. В самих карточках я бы сделал выключку текста по левому краю, просто потому что так намного удобнее читать и воспринимать информацию.

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

Здесь у нас длинный текст, который тяжело читать. Разбивка “пробелом” ему не помогает.

Совет 1. К перечисленным преимуществам лучше добавить иконку. В тильде есть стандартные блоки с иконками. А поясняющую информацию внести уже под форму.

Совет 2. Когда у вас есть сокращенная информация, необходимо давать ей пояснение. В представленной форме нас просят указать “ПДР”, но, что это такое - не объясняют. Как я понял, ПДР - предполагаемая дата рождения. Но лучше это расшифровать. А сам текст разместить по ширине этой иконки, не давайте ей выходить за границу.

В этом блоке меня встретила страничка ЛУКБУК. Здесь прекрасно все. Но, как говорится, в бочке меда нет кнопки “Купить”

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

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

Совет 1. Чтобы изменить стандартный цвет ссылки на любой другой, зайдите в настройки сайта - “шрифты и цвета” - “цвет ссылок”. Я бы тут выбрал какой-нибудь розовый.

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

Совет 3. Я бы поставил этот блок в самый низ. Это чисто мое мнение. А так, все тут хорошо.

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

Совет. Сделайте такую тенденцию по всему сайту. Черный текст с белым фоном контрастирует слишком сильно. А вот серый цвет, более спокойный. Текст такого цвета легче читать и воспринимать.

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

Это был последний блок сайта. Теперь мы переходим в каталог.
В категориях товара все хорошо. Но я все равно дам несколько советов.

Совет 1. К товарам можно добавить “шапку” и “подвал”, чтобы сохранить ощущение присутствия на сайте. А сейчас этого нет, потому что не видно шапки, нет логотипа. Рекомендую добавить. Таким образом лояльность к вам увеличится со стороны покупателей.

Совет 2. Поработайте над отступами. Сделайте их одинаковыми. Тогда общая картина каталога и карточек будет более привлекательней.

Совет 3. Сам поиск можно добавить в шапку, чтобы с любой страницы можно было найти товар. Это очень удобно.

А теперь покажу вам свой редизайн сайта. Мы перешли в фигму. Расскажу, что я сделал и почему.

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

Я переработал текст. Название, которое раньше было заголовком, я перенес в шапку. Оно всегда будет на виду. А, в плане конверсии, мы сможем сделать акцент на более важных вещах.

Заголовком я выделил текст про функциональную и стильную одежду. А в “преимущество” вынес бесплатную доставку. Поработал с акцентами на кнопках, по той технологии. которую советовал выше.

Второй блок
Здесь я ничего сильно не менял. Единственное, избавился от слайдера и сделал все сразу. На сайте в слайдере 5 элементов. В своем варианте я их все расположил в одном блоке.
Тут же решил показать, как выглядит кнопка с перенесенной второй строчкой. А главное - она не выходит за рамки карточки.

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

Получилось так: слева - описание консультации и преимущества товара, а справа - форма для заполнения, которую я тоже переработал. Здесь имя и почта в одной строчке, ниже - номер телефона, еще ниже - дата рождения. Тут же показал, как должно выглядеть согласие на обработку данных.

Стандартный цвет тильдовских ссылок заменил на фирменный цвет компании.

Четвертый блок
Здесь я решил сильно ничего не менять. Просто добавил кнопку “Купить”.

Пятый блок
В оригинале, после ЛУКБУКа шел блок с заказом, но я решил перенести его вниз, потому что это более системна информация. В моей версии, Пятый блок - Добро пожаловать!

Здесь я вынес текст с историей создания магазина. Внизу можно поставить Инициалы. Это вызовет доверие к вашему магазину у аудитории.

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

Шестой блок
Здесь я решил разгруппировать информацию. В оригинале она шла полотном. А у себя я разбил ее на смысловые блоки: заказ, доставка, внимание (выделил цветом, чтобы сделать акцент)

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

Всем пока! До новых видео!