SALT AND PEPPER: новый сайт агентства

Главное о кейсе

Нашему старому сайту, который выиграл для нас первый Сайт Дня на AWWWARDS, стукнуло 5 лет. За это время мы выросли больше чем в два раза в команде, заработали боле 70 международных наград и расширили наш спектр услуг. Мы просто выросли из старого сайта;

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

Основной целью запуска новой версии сайта было повышение узнаваемости бренда SALT AND PEPPER в России и в зарубежном коммьюнити. Для этого мы выбрали проверенный путь — участие в конкурсах и премиях. Наши результаты на текущий момент:

Awwwards — Site of the Day, Developer Award, Portfolio Honors
CSS Design Awards — Site of the Day, номинация на Site of the Month
The FWA —Site of the Day
Фестиваль нового дизайна Среда — Золото Открытого Жюри и Серебро Основного Жюри в номинации «Дизайн сайтов B2B»

Как проект изменил жизнь пользователей

У потенциальных клиентов и партнёров появилась возможность ознакомиться с актуальным портфолио компании и быстро связаться с нами.

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

Бизнес-задача и ее решение

Предыдущая версия нашего сайта запустилась в апреле 2018 и стала нашим билетом в международное коммьюнити, выиграв наш первый Сайт Дня на AWWWARDS. За следующие 5 лет мы выросли с 30 человек до 65, и завоевали больше 70 международных наград. Помимо этого наше позиционирование и спектр услуг заметно изменились — мы перестали быть просто веб-продакшеном и выросли в агентство полного цикла. Нам нужен был новый большой сайт, который отражал бы актуальное состояние компании.

Одной из важных задач, которую мы поставили перед собой — сделать заполнение контента удобным. В старой версии у нас не было CMS и каждый кейс приходилось верстать отдельно. Теперь 95% контента на сайте можно редактировать из CMS.

Крафт (мастерство), реализация, технические детали

Нам было важно сохранить ключевые элементы look & feel предыдущего сайта – цветовую контрастность, дышащую верстку и минимализм в интерфейсе. При этом количество страниц и смысловых блоков выросло кратно. Для них мы подбирали решения, которые вписывались в заданный стиль, но при этом не были избитыми. Например, для контактной формы мы сделали имитацию чата, а на странице Карьера решили вынести все открытые вакансии в правый блок, чтобы у пользователя всегда был к ним доступ.

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

Для списка кейсов мы решили сделать анимацию, имитирующую перебор виниловых пластинок. Нам хотелось добавить тактильности процессу выбора кейса для ознакомления.

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

Мы ценим человеческую коммуникацию в нашей работе — это часть нашего культурного кода. Поэтому мы решили сделать контактную форму в виде чата. Чтобы ещё на этапе первого касания человек чувствовал, что уже «общается» с нами.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

Скриншоты