Москва, 24 года
Дмитрий Чаплыгин
Два корпоративных сайта для исследовательских компаний
Два корпоративных сайта для исследовательских компаний
#корпоративный сайт
#дизайн и верстка
#копирайтинг
#Tilda
/
Время прочтения ~5 минут
/
/
Контекст
Несколько лет назад я уже работал с этим заказчиком — тогда мы делали интернет-магазин. Спустя время он вернулся с новым проектом. Компании, в которой он работает, понадобился корпоративный сайт, а вместе с ним к работе подключился его партнер, которому тоже нужен был сайт для своей исследовательской компании
Обе компании уже много лет работают на рынке, но собственного сайта у них не было. Было важно, чтобы проекты визуально не перекликались: компании сотрудничают между собой, но развиваются отдельно
Пользовательская
Помочь посетителю быстро разобраться, чем занимается компания, какие исследования проводит и как с ней связаться. Без перегруженных страниц и долгого поиска нужной информации
Бизнес
Создать сайт, который станет полноценной презентацией компании: поможет произвести хорошее первое впечатление, покажет экспертизу и даст потенциальному клиенту ответы на основные вопросы еще до первого контакта с менеджером
Задачи
О проекте
Оба сайта создавались с нуля. Я занимался всем процессом: изучал работу компаний, продумывал структуру, писал тексты, разрабатывал визуальный стиль, дизайнил и собирал сайты на тильде
Работу начали с сайта UCPR. Второй проект в тот момент существовал только как ИП «Михайлов», поэтому помимо самого сайта нужно было придумать название будущей компании. В итоге остановились на варианте PeopleLab
Разобрался в специфике работы компании
Работу начали с сайта UCPR. На первом созвоне выяснилось, что готовых материалов практически нет: не было структуры, текстов и понимания того, каким должен быть сайт. Поэтому сначала нужно было разобраться в самой компании, понять, как строится ее работа и чем она отличается от других исследовательских агентств
Перед тем как продумывать структуру сайта, мне было важно понять, как вообще работает компания. На созвоне мы подробно разобрали весь процесс — от первого обращения клиента до подготовки итогового отчета
Ниже - упрощенный процесс работы
Что было сделано
Обе компании много лет работают на рынке, у них есть каналы для поиска клиентов. Сайт был нужен не как основной источник заявок, а как инструмент для укрепления имиджа компании и оптимизации работы менеджеров. Он позволяет заранее познакомить потенциальных клиентов с услугами, процессом работы и ответами на частые вопросы, сокращая время на однотипные консультации
Понимание процесса помогло понять, какие этапы стоит объяснить на сайте, а какие важны скорее для внутренней работы компании
Изучил сайты конкурентов
После знакомства с компанией я посмотрел сайты других исследовательских компаний. Хотел понять, как в этой нише принято рассказывать о себе и что потенциальный клиент ожидает увидеть на подобных сайтах
Почти все сайты оказались похожими: строгий дизайн, много текста и акцент на опыте компании. Чаще всего доверие строилось через крупные цифры, известных клиентов, масштаб проектов и размер команды
UCPR работает по тем же принципам, но не могла конкурировать количеством громких кейсов. Поэтому вместо попытки выглядеть крупнее было важнее сделать сайт понятным, современным и удобным для знакомства с компанией
Продумал структуру и подготовил тексты
После анализа конкурентов я начал работать над содержанием сайта. Готовых текстов у заказчика не было, поэтому сначала нужно было определить, что именно должен узнать посетитель и в каком порядке
Черновики я готовил с помощью нейросетей, а затем перерабатывал и адаптировал под проект. Логика получилась такой:
- с первого экрана коротко объяснить, чем занимается компания;
- дальше показать, в каких ситуациях помогают исследования;
- рассказать, как проходит работа;
- объяснить используемые методы и контроль качества;
- показать, какой результат получает клиент
После обсуждения заказчик внес лишь несколько небольших правок, и на основе согласованной структуры я подготовил прототип
Подготовил несколько дизайн-концепций
Перед началом работы над всем сайтом я сделал три варианта первых экранов. Хотел проверить разные направления: стандартную верстку на колоночной сетке, Bento-стиль, силовые линии и центральное выравнивание контента
Также рассматривал разные подходы к иллюстрациям — фотографии реальных людей и стилизованных персонажей
На созвоне вместе с заказчиком выбрали центральную компоновку и иллюстрации персонажей. Этот вариант выглядел дружелюбнее и помогал выделить сайт среди конкурентов
Разработал визуальный стиль
После утверждения концепции я перенес выбранное направление на весь сайт и собрал единый визуальный стиль
Основной фон сделал темным и добавил на задний план градиенты которые добавляют глубину (метафора глубины исследований) и помогают уйти от плоских корпоративных страниц. За счет этого сайт выглядит современнее и визуально отличается от большинства конкурентов
В качестве акцентных цветов выбрал яркий фиолетовый и оранжевый. Они делают подачу более живой, хорошо сочетаются с фоном, не перегружая интерфейс
Вместо фотографий выбрал иллюстрации с персонажами, созданные в Recraft. Они придали сайту собственный характер, сделали его визуально более цельным и помогли выделить компанию среди конкурентов
Часть блоков я специально сделал на светлом фоне. Темные секции создают более серьезное и экспертное ощущение, а светлые — выглядят легче и дружелюбнее. Для такого проекта это было важно: сайт должен был одновременно показывать профессиональный подход компании и оставаться понятным и комфортным для первого знакомства
Сверстал сайт
После утверждения дизайна собрал сайт на тильде, используя Zero Block
Уделил много внимания анимациям. Добавил анимированные градиенты, эффекты появления блоков при скролле, движение отдельных элементов за курсором и другие небольшие детали. Они делают сайт более живым
Для первого экрана разработал кастомную анимацию, реализованную с помощью стороннего кода. Она сразу привлекает внимание и делает знакомство с сайтом более запоминающимся
Адаптировал сайт для мобильных устройств
Итог проекта
В результате получился современный корпоративный сайт, который помогает познакомить потенциальных клиентов с компанией, объясняет процесс работы и отвечает на основные вопросы еще до общения с менеджером
Посмотреть сайт UCPR можно по
PeopleLab
После запуска первого сайта мы приступили ко второму проекту. На этот раз задача была похожей, но нужно было создать совершенно другой визуальный образ, чтобы сайты не воспринимались как проекты одной компании
Работа шла по тому же принципу: сначала определили структуру и подготовили тексты, затем согласовали прототип, после чего перешли к поиску визуального направления
Искал визуальное направление
Как и в первом проекте, перед началом работы я подготовил несколько концепций первых экранов. Пробовал разные стилистические решения и способы показать специфику компании
Одной из идей было использовать анимированное облако тегов с ключевыми темами исследований. С помощью такой нестандартной анимации можно вызывать вау-эффект с первых секунд захода на сайт
Другие концепты были с графиками в разных стилях. Ниже — 2 концепта первого экрана
Заказчику понравились графики с градиентами на первом концепте и цветовая палитра на втором. Решили объединить 2 варианта в один
Итоговый дизайн
После утверждения стиля задизайнил остальные экраны сайта, сохранив выбранную стилистику на протяжении всего проекта
Верстка
Дизайн утвердили без правок. Дальше сверстал сайт на тильде
Сделал интересные анимации для разных элементов и фона всего сайта
Адаптировал сайт под мобильные устройства
Итог проекта
Получился второй корпоративный сайт с собственным визуальным характером. Несмотря на общую сферу деятельности, он не повторяет UCPR и воспринимается как самостоятельный бренд
Посмотреть сайт People Lab можно по
Другие кейсы
