✅ Сапожник в сапогах или САААМЫЙ сложный сайт в мире

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

Конечно мы говорим о сайтах студий/агентств.

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

Задача

Формальная: основная цель сайта – продемонстрировать экспертизу и опыт компании в области цифрового дизайна, разработке и создания веб-решений для клиентов.

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

Это был самый длительный процесс, ведь дизайн должен быть не только трендовым, но и иметь запас актуальности минимум на 2-3 года (хотя разрабатывать новую версию мы начали сразу после того как разработали текущий вариант).

Сразу стоит сказать, что текущий дизайн получился не сразу. Мы сделали дизайн, утвердили и начали разрабатывать, вроде нам все нравилось, но где-то на середине процесса разработки поняли, что радости эта версия нам не приносит, все вымученно и бездушно. Если коротко, "все не то – переделываем"

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

Поехали дальше 🏎

Мы полностью переделали дизайн, изменили цвета, шрифты и компановку

ЦВЕТ

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

ШРИФТЫ

В качество основного шрифта мы выбрали "Euclid", который не только выглядит как краш сердечек 💔 наших дизайнеров, но и имеет большое количество начертаний и настроек, которые позволяют "играть" даже с одним шрифтом.

Мы сделали большой акцент именно на типографике и добавили трансформацию букв в заголовках, как основную фишку: метафора изменений – делаем обычное необычным.

ГИБКОСТЬ

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

ПЕРВЫЙ ЭКРАН

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

Однако для студии, которая оказывает услуги в формате Digital-продакшена, возникает проблема как уместить на экране все виды услуг сразу.

А у нас это:

Поэтому мы разделили главный экран на 2 основных блока с помощью слайдера: Дизайн/Разработка, где уже при перелистывании перечисляется основной пул услуг по каждому из направлений.

КУРСОР

Даже курсора было разработано 6 типов состояния.

Мы реализовали для курсора плавную shape-трансформацию между состояниями, чтобы он был живым и "гибким" в зависимости от типа действия, которое будет реализовано при клике.

ПРЕЛОАДЕР

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

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

Поэтому мы пошли другим путем. Мы реализовали его в в виде большого количества вариаций буквы С или S.

ГЛАВНАЯ СТРАНИЦА

РАБОТЫ / УСЛУГИ

Все наши кейсы мы поместили в раздел "Работы", где пользователь сможет посмотреть либо все кейсы, либо отфильтровать по интересующей его тематике.

Помните была проблема с размещением услуг на главной? Так вот на отдельной странице "Услуги" мы развернулись на полную и для каждого вида услуги есть отдельный блок, где есть ПОЛНЫЙ перечень работ, включая актуальный технологический стек.

ОТДЕЛЬНАЯ РАБОТА

Каждый кейс (если он не под NDA) мы размещаем на сайте в виде отдельной страницы, где есть ссылки на реально работающий проект, Behance, статью на VC, а также все награды, которые собрал проект.

ВАКАНСИИ

Размещение вакансий на hh.ru это конечно хорошо, но те кто зашел на наш сайт и "вау, хочу здесь работать", должен найти вакансии здесь и сейчас.

СТРАНИЦА 404

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

Если пользователь попал на эту страницу он может выбрать с помощью клавиатуры нужную страницу и нажать Enter для перехода ⌨

Для разработки мы выбрали React.js и Next.js, т.к. нам нужно было делать SPA (нет это не то что вы представили, это Single Page Application).

Почему SPA:

Если в разработке на React нет никаких проблем, то реализация нестандартного функционала и анимации всегда нетривиальная задача.

Пару примеров:

ВИДЕО НА ГЛАВНОЙ

Видео, которое проигрывается вслед за скролом, Нам пришлось перепробовать около 2х или 3х реализаций этого блока, с помощью видео на сайте, с видео из YouTube, из Vimeo, но, в конечном счете, все свелось к набору изображений и их прокрутке в Canvas.

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

ТРАНСФОРМАЦИЯ ТЕКСТА

Дизайнеры изменили начертания шрифта в Figma, заанимировали в After Effects и рады. Разработчики обычно смотрят на это с facepalm 🤦🏻, т.к., для того чтобы реализовать такую трансформацию, нужно делать shape-анимацию по точкам, и при этом проставлять и продумывать промежуточные значения, чтобы не было пересечений линий при трансформации

Поэтому везде, где вы видите классную трансформацию букв, где-то неподалеку страдал разработчик)))

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

Изображения все переведены в webp, т.к. этот формат дает изображения, которые весят в 5-10 раз меньше почти без потери качества.

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

Хотя мы считаем, что одна желтая компания похоронила SEO, продав всю выдачу рекламодателям и забив ее своими сервисами, про SEO и интеграцию со schema.org мы не забыли.

Самый сложный клиент – это ты сам. И тебе всегда кажется, что можно сделать еще лучше.

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

А, ну и конечно пару слов про награды: мы получили их на AWWWARDS, BestCSS, WebGURU, и, конечно же, сайт дня на CSSDesignAwards.l