Юбилейный разбор сайта на тильде

Всем привет! На связи студия маркетинга IMpro.pro и практикующий веб-дизайнер Никита. В рамках нашей программы я разберу сайт - врача-косметолога Елены Шаманиной. Для начала быстро просмотрим весь сайт, а потом конкретно пройдемся по блокам. Наша задача: выделить хорошие моменты, найти недочеты и подумать, как их исправить. Итак, поехали!

Видео разбора — https://youtu.be/BP59yAQr3jk?si=MLXzSjadRgtJKEAt 

Шапка

На сайте нас встречает шапка. Первое, что мы видим — логотип. Он не перетягивает на себя внимание, сделан без лишних шумов, достаточно лаконичен и подходит под стилистику сайта.

Далее идут пункты меню, контакты и месторасположение доктора — все информативно. 

Первый блок

Тут есть фотография, которая привлекает внимание и вызывает доверие. На ней подпись самого врача — это тоже классная деталь. Здесь у нас есть имя доктора, текст и сразу можно перейти к услугам. 

По первому экрану все супер, ничего лишнего.

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

После этого — кейсы и + небольшое описание про косметологию.

Дальше расширенная информация о докторе: он повышает свою квалификацию + можно посмотреть дипломы. Это важная информация, хорошо, что для нее выделили отдельный блок.

Ниже нас встречает “Направление услуг”. Верстка необычная, что привлекает внимание посетителей сайта. 

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

После — блок “Вопрос-ответ”. Здесь всего один пункт, рассказывающий про цены.

В блоке “СМИ обо мне” можно перейти на сайт издания, который написал статью. 

После этого у нас идут “Бьюти-советы”, можно посмотреть публикации. Это важная, образовательная деталь, которая вызывает доверие. Она показывает, что специалист разбирается в теме, раз сам пишет тексты.

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

Теперь я разберу сайт детально

В шапке “Контакты” и “г. Москва” ведут на один блок.

Совет. Было бы логичнее сделать “г. Москва” не кликабельным. 

По первому экрану все хорошо, претензий никаких нет. 

Второй экран

Фотография плохого качества + она обрезана. Лучше использовать здесь другое фото.

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

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

Видео

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

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

Кейсы

Тут все хорошо. Можно прочитать про косметологию и про отношение доктора к косметологии.

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

Начните с услуги

Этот блок тоже хороший. Единственное, здесь можно было дожать выгоды клиента.

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

Совет. Сделать акцент на выгоде для клиента.

Вопрос-ответ

Выглядит странно, что в этом блоке всего один вопрос. Его можно вставить ниже, перед картой. Блок с полезными советами  и со “СМИ обо мне” намного важнее для пользователей.

СМИ обо мне

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

Совет. Здесь галерея не должна быть кликабельной. Дайте ссылки на статьи в других разделах сайта.

Полезные советы

Здесь все отлично. Хочу отметить то, как хорошо подобраны фото для статей: смотрятся свежо, на них хочется кликнуть. 

В контактах все супер, переходим к футору.

Футор

Видна синяя линия, как логотип, который отличается от логотипа в шапке. Создается ощущение, что это блоки разных сайтов.

Совет 1. Придерживаться единого логотипа.

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

Совет 2. Выключку контактов сделать по правому краю, тогда был бы баланс с текстом слева.

Второй вариант, несколько колонок с основными пунктами, где выровнять текст по левому краю.

Иконки соцсетей круглые, кроме инстаграма (квадрат). Лучше придать им единую форму.

Виджет мессенджеров закрывает телефон, так как расположен по контейнеру (1150 пикселей).

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

По главной страничке все, можем двигаться дальше.

Блог

Его я уже затрагивал, тут все хорошо. Хочу отметить классный момент — можно перейти на зеркало инстаграма, которое не требует впн.

Обучение

Эта страница не работает на сайте. Раз так, то лучше пока ее убрать, чтобы не было неприятных эмоций. 

Но хорошо, что есть 404 страница.

Магазин

Возникает диссонанс из-за другого шрифта, он тут не такой, как на главной. А на этой странице их вообще несколько видов. 

Баннеры не совсем качественные.

Совет 1. Подогнать страницу магазина под стиль главной.

“Бренды” написаны на серой подложке. Но ведь “Бренды” и логотипы — один блог. Из-за серой подложки заголовок отделяется. Надо прикладывать дополнительные усилия, чтобы понять, что это одно целое.

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

Совет 3. Увеличить все отступы по сайту, потому что сейчас создается ощущение, что блоки слипаются. 

Каталог

Хочу его отдельно разобрать.

Здесь у нас три кнопки одинакового цвета. Хотя, главное действие, которое мы хотим получить от пользователя — добавить в корзину. 

Совет 1. Кнопку “Добавить в корзину” сделать синей, а “Подробно” и “Загрузить еще” белой, оставив только обводку и текст фирменного цвета. 

Многие не кликают на “Подробно”, а сразу нажимают на карточку товара. Поэтому на ней можно не акцентировать внимание клиентов.

Карточка товара стандартная, но здесь много текста. Из-за этого долгое листание смотрится небрежно.

Совет 2. В тильде есть фишка, где все фотографии скроллятся вместе с экраном при чтении.

Еще, как вариант, сделать снизу табы. (Их можно настроить в каталоге товаров, в отдельной вкладке “Табы”). 

Тогда информация будет в виде перелистывающихся, либо в открывающихся табах.

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

Если вы хотите научиться работать на Тильде, открыть для себя новые фишки или отправить свой сайт на разбор, то подписывайтесь на наш канал “О Тильда” 

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