Сегодня мы зайдем на Behance и подвергнем здоровой критике лендинг пейдж и корпоративные сайты из топа выдачи. Посмотрим интерфейс, цветовые и дизайнерские решения. Анализировать будем отечественный сегмент данной площадки. Для тех, кто не знает, Behance ‒ это всемирная площадка, на которой дизайнеры, художники и интерфейс-инженеры делятся своими работами (их называют кейсами) с коллегами и аудиторией потенциальных заказчиков.
Какова цель нашего разбора сайтов?
Прежде всего мы хотим посмотреть актуальные направления веб-дизайна и разработки сайтов на отечественном рынке и поделиться с вами этими находками. Намеренно не хотим заходить в зарубежный топ, так как, во-первых, мы сами ещё не доросли до критики мировых гигантов индустрии, а во-вторых, гораздо интереснее исследовать своих ближайших коллег по цеху и конкурентов, ведь это дает нам практические представления и навыки.
Также, благодаря нашему разбору вы поймете, что в рекомендации Бихэнса попадают далеко не лидеры веб-индустрии. Забегая вперед, скажем, что их кейсы очень хороши, но при этом имеют недочеты, которые можно исправить и прокачать сайт ещё сильнее.
Как мы отбирали кейсы для анализа:
Для написания материала мы отобрали 4 кейса по следующим критериям:
- Поисковая выдача на русском языке;
- Направление: веб-дизайн;
- Кейс находится в лидерах рекомендаций площадки;
- Актуальность работы 2023-2026 гг.;
- Отсутствие признаков явной накрутки.
Следует отметить, что Behance выводит работы в топ не только и не столько по количественным метрикам лайков/просмотров, сколько по активности упоминаний, добавлений в сохраненные и удержанию внимания на кейсе во времени.
Давайте уже приступим к разбору, приятного чтения!
Кейс №1. Большой лендинг юридической компании, 2023 г.
➡️ полная версия дизайн-макета доступна здесь
Перед нами стильный современный лендинг пейдж юридической тематики. Дизайн-макет радует глаз, отлично подобраны цвета, первый экран встречает нас качественной большой фотографией владельца фирмы. Хорошо передана экспертность посредством инфографики и подробных текстов. Призывы к действию (CTA) размещены на каждом втором экране, что крайне важно для продающей посадочной страницы.
Детальный разбор дизайна сайта, поэкранно
Первый экран привлекателен, но перегружен текстами, из-за чего страдает акцентность (глазу не за что зацепиться). Надпись «Денис Куликов» мы разместили бы над левым плечом мужчины, «Защищаем основателей…» удалили бы.
Ведущий заголовок H1 необходимо выделить более жирным начертанием, либо другим шрифтом. Возможно, стоит его переписать под формат 4U, так как в текущем варианте он не несет какой-либо выгоды, а является лишь вопросом.
Крупные числа необходимо подписать «13+ лет», «5+ млн». Они сейчас плохо воспринимаются как преимущества при беглом чтении, а это именно преимущества.
100% необходимо переделать заголовок. Пример: «Найдем выход из любой вашей ситуации ‒ за плечами сотни заседаний по арбитражным спорам». После фразы «Основатель компании» ставим запятую или точку.
Четвертый экран хороший, однако после него надо пускать не кейсы, а сразу же шестой экран «Под ключ решаем все вопросы…». Так быстро закрываются крупные «боли» клиента юр. фирмы.
Здесь мы вынуждены резко перескочить вперед. Это 12-ый экран, блок о компании, и, на наш взгляд, его сильно задвинули вниз. Предлагаем поместить его сразу после предыдущих, то есть после шестого экрана. В текущем расположении теряется восприятие экспертности ‒ если пользователя завлекли ваши преимущества и он откликнулся на закрытие болей, он хочет увидеть блок о вас. А до 12-го экрана человек рискует просто не докрутить. Сюда же вставим логотип и убедимся, что название в шапке сайта соответствует названию компании в данном блоке.
Далее поместим вот этот экран. Он очень красивый и презентабельный.
И только потом (десятым экраном, а не пятым) пойдут кейсы.
Вот этот экран вызывает у нас сомнение. Во-первых, он начинается с пустой не вовлекающей фразы «Для полноценного аудита необходимо…». Читается как просьба к посетителю лендинга, а зачем ему лишние телодвижения? Во-вторых, экран перегружен мелкими текстами. В целом он не содержит явных выгод, и от него можно смело отказаться.
Смело можно удалить и вот эту секцию внизу странички.
Вот мы долистали и до футера. Футер лендинга явно пустоват, создает впечатление незаконченности. Его рекомендуем либо сократить по высоте в полтора раза, уместив инфу более компактно, либо добавить полноэкранный CTA с открытой формой обратной связи.
Наш краткий вердикт по сайту
Лендинг требуется чуть-чуть допилить. В общем плане посадочная страница получилась необоснованно длинной, и нисколько не пострадает (и даже выиграет!), если удалить ненужные экраны, а некоторые объединить в один. Сайт красивый и дорогой, услуга полного редизайна ему точно не грозит в ближайшее время. Есть пара замечаний по расстановке запятых и точек.
Кейс №2. Лендинг пейдж школы трафика ВК, 2025 г.
➡️ полная версия дизайн-макета доступна здесь
Сочный креативный дизайн, который моментально цепляет внимание. Выполнен профессионально и со вкусом, это однозначно работа профессионала своего дела. Первый экран без нареканий, косяков мы не обнаружили.
Детальный разбор дизайна сайта, поэкранно
Экран №2. Это классический блок «болей», призванный зацепить посетителя. На хорошем продающем лендинге такая секция идет вторым-третьим номером ‒ с этим все хорошо. Однако нам не нравится цветовая палитра. На наш взгляд, она должна быть менее позитивная, и подправить этот момент можно всего лишь двумя действиями:
- Фразу «Каждый месяц ты тратишь на рекламу» делаем красным;
- Парящую фигурку «крестик» также красим в красный.
Плохо считывается инфографика в четырех плашках. Сюда хорошо подойдут 3D-иконки или иллюстрации, а в нынешнем исполнении однотипные графики с маленькими циферками сильно грузят зрение и не передают смысл прочитанного.
Третий экран хорош как и первый. Возможно, придираемся, но есть смысл фирменным хвойным зеленым выделить словосочетание «…бесплатного трафика», а не «Готовая система».
Экран №4. Сочетание болей и преимуществ. Тут мы видим интерфейсные конфликты. Закругленные прямоугольники в блоке «Узнаешь себя?» напоминают табы или быстрые ссылки. Предлагаем сделать их одного цвета, а перед каждой фразой поместить смысловые эмодзи, например, рожицу или сообщение (😐 / 💬).
Ниже идет ряд четырех колонок, одинаковых по дизайну. При этом первая задает вопрос (ну или давит на больное) фразой «Почему контент не продает?», а последующие три раскрывают преимущества. Лучше так не делать. Первую плашку мы бы задизайнили другими цветами. Также есть вариант вообще сделать её выше, в 100% ширины, а ниже пустить ряд из трех преимуществ. Все это нужно для лучшей читаемости посетителем, а значит и более глубокой вовлеченности в продукт.
Экран пятый и, внезапно, он последний… Что тут можно исправить? Убираем запятую в заголовке после слова «быстрее», она не нужна. Имеется упоминание болей в очередной раз ‒ думаем, что это уже перебор, поэтому блочок про рекламу ВК можно удалить.
Почему на этом лендинг прерывается? Возможно, автор выложил кейс не полностью. Не видим привычного футера с юридической информацией и финальным CTA.
Наш краткий вердикт по сайту
Посадочная страница с сильным конкурентоспособным дизайном. Потенциал очень большой, нужно лишь проработать контент до состояния «конфетки». Ну и, как вы уже догадались, необходимо добавить экраны, которые усилят продающий эффект:
- Экран «Обо мне» с информацией об авторе курса, её краткой историей и достижениями. Это ощутимо прогревает посетителей, повышая шанс на конверсию в лид.
- Футер нужен 100%. Контакты, финальный призыв к действию, юридические формальности. Футер стал обязательным стандартом очень давно.
- Ещё больший рост конверсии принесет секция с отзывами. Маркетологи называют этот прием социальным доказательством. Поместим в неё фото с соц.сетей, благодарности или даже краткие видео.
Кейс №3. Корпоративный сайт международной транспортной компании, 2025 г.
➡️ полная версия дизайн-макета доступна здесь
Перед нами фирменный многостраничный корпоративный сайт, дизайн строгий, академичный, с большим количеством «воздуха». Открыв полную версию по ссылке выше, вы также убедитесь, что в отличие от лендингов этот веб-сайт практически не содержит ярких графических элементов и креативной инфографики. Ключевой визуальный фундамент здесь ‒ это работа с композицией и межблочным пространством.
Детальный разбор дизайна сайта, поэкранно
Первый экран очень хорош. Без лишнего пафоса, создает впечатление серьезности и уверенности в себе. Опытный дизайнер сразу заметит диагональную динамику с верхнего левого угла в правый нижний, которая грамотно ведет внимание к кнопке «Calculate cost».
Вторым блоком сразу идет информация о компании и её достижениях. Этот факт вкупе с отсутствием CTA свидетельствует о том, что сайт в целом разрабатывался как представительство компании, а не как продающий инструмент. В ином случае мы здесь увидели бы экран преимуществ или проработки болей.
Экран №3. Минималистичный экран, призванный усилить впечатление глобальности услуг фирмы ‒ карта мира хорошо справляется с этим. Думаем, стоит добавить «воздуха» между текстовым блочком и самой картой. Паддинги (отступы) на сайте довольно обширные, а здесь получился эффект слепленности, что смотрится неопрятно.
Блок №4 не доделан, содержит плейсхолдеры. Если судить по заголовку, в этом блоке описаны транспортные услуги. Возможно, главная горизонтальная картинка меняется при нажатии на блочок конкретной услуги. Кстати, обратите внимание, что эта картинка не совпадает по ширине и по высоте с окружающими колонками ‒ похоже, что это косяк дизайнера. В остальном очень приятная для глаз сетка и композиционное решение.
Полноэкранная открытая форма обратной связи идет пятой по счету. Тут особо нечего добавить. Мы бы удвинули саму форму на 20-30 пикселей повыше.
Экран №6 содержит список преимуществ, буллитов. К тому же, он содержит две ошибки. Одна очевидная, вторая не очень:
- Строки преимуществ не выровнены по вертикальной сетке, они гуляют друг относительно друга.
- Иконка с белым и синим кружочками может сбить с толку ‒ она напоминает кликабельную навигацию точками, а это общепринятый виджет интерфейсов. Лучше заменить иконки на что-то другое.
Заключительная секция, которая также неожиданно, как и рассмотренный выше кейс, обрубает сайт (где футер???). Видим здесь блоки усиления выгод в красивом гармоничном лэйауте. Почему-то здесь появляется тень под блоками, хотя ни в одном элементе на сайте теней нет. Так обычно не делают, ведь дизайн-код должен быть унифицирован для всего сайта.
Наш краткий вердикт по сайту
Стильный чистый дизайн, требующий небольших доработок и правок визуальных косяков. Такой корпоративный веб-сайт может представлять услуги солидной организации, которая уже состоялась и не испытает потребности кричать о себе. Однозначно хотелось бы видеть футер ‒ при разработке корпоративного сайта футер играет серьезную роль, даже более важную, чем на лендосах. На нем держится вся навигация по страницам и разделам, связь с техподдержкой, контакты, юридические акты обработки ПД (критически важный момент для ООО), и много чего ещё.
А теперь переходим к разбору последнего кейса.
Кейс №4. Корпоративный сайт производителя азотных удобрений, 2025 г.
➡️ полная версия дизайн-макета доступна здесь
Ещё один крутой и профессиональный web-design. Перед нами продуманный, серьезный корпоративный сайт, к которому крайне трудно придраться. Скажем прямо ‒ это топовый кейс в рамках нашего аналитического разбора.
Детальный разбор дизайна сайта, поэкранно
Главный экран радует четкой композицией, акценты расставлены на противоположных углах по периметру воображаемого прямоугольника. Зеленое растение по центру красиво анимировано.
Со второго экрана становится понятным генетический код дизайна данного сайта. Текст служит не только как передатчик информации, но и как непосредственный элемент визуального стиля. Умело подобраны шрифты, рассчитана оптимальная длина предложений под размер блоков. Смотрится зачетно.
Так как мы не обнаружили проблем и точек для улучшения интерфейса сайта, то не видим смысла разбирать отдельно все экраны. Напомним, что полный вариант доступен по ссылке выше. Вот так надо проектировать дизайны ‒ грамотно, со вкусом, профессионально!
Благодарим, что уделили время нашему материалу. Было ли вам интересно и полезно? Надеемся, что да.
Напоминаем, что в нашей веб-студии в Казани для вас доступна услуга редизайна и обновления сайта, в ходе которой мы тщательно проанализируем ваш продукт и спроектируем современное цифровое решение для роста вашего бизнеса и реализации любых идей.
