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

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

badcompany.tv

Привет! На связи Молния — веб-студия, которая создаёт креативные сайты на Тильде. За многостраничником к нам пришла студия видеопродакшена «‎Плохая компания»‎. У ребят много крутых проектов — с Тинькофф Банком‎, ВКонтакте, Еврейским музеем и другими гигантами в своих областях. Однажды они поняли, что качество их видео растёт с каждым годом, а стилистика сайта при этом не поменялась ни на йоту. Крутым проектам — крутой сайт!

Ребята не хотели делать акцент на продающих инструментах или услугах, главная задача была — донести миру их творческий взгляд: с юмором, по-хулигански, но при этом показать их профессионализм и бережное отношение к съёмкам и конечному продукту — фильму или видео.

Поймали вдохновение

Мы уже были знакомы с ребятами до этого: они приходили к нам четыре года назад за разработкой сайта. Вот, кстати, он:

Старый сайт

До того, как обратиться к нам в 2023 году, «‎Плохая компания»‎ за год сменила трёх дизайнеров, а в студии обращаться боялась, так как считала, что там работа получится чопорной и шаблонной. После годовых хождений по мукам они накидали сайт сами и пришли к нам за консультацией по тому, что в нём можно изменить.

Креатив, хаос и китч. Как мы сделали сайт-визитку для студии видеопродакшена и чуть не облажались
<i>Сайт, который ребята отдали нам на разбор</i>
Сайт, который ребята отдали нам на разбор

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

Тексты для наполнения сайта у ребят уже были готовы, а главным требованием в задаче было использование брендбука — он должен был стать основой будущего сайта. В остальном мы получили полный карт-бланш. Нужно было найти золотую середину между агрессивным и китчевым дизайном, который так любит компания, и удобными пользовательскими решениями. Что ж, собираем референсы и поехали вдохновляться!

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

<i>Первый референс</i>
Первый референс
Второй референс

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

Показали премьеру… и поняли, что свернули не туда

Мы сделали первую версию сайта — очень приближённую к изначальной версии ребят, только с более удобными пользовательскими решениями. На ней расположили полное меню, чтобы пользователям не приходилось идти через единственную кнопку «‎Портфолио»‎ для просмотра контактов. Это сократило пользовательский путь.

<i>Страница «Портфолио», которая не «зашла» заказчикам</i>
Страница «Портфолио», которая не «зашла» заказчикам

Но первый блин оказался… комом. Заказчикам не понравилась страница с портфолио — ключевая на их сайте. Всё делали чётко по задаче и использовали фирменный стиль, но визуал, по словам клиента, получился перегруженным. Вроде сделали по ТЗ, но общее настроение оказалось не тем. Мы объяснили для себя это так: представьте, что вы начали смотреть вторую часть фильма от другого режиссёра… Всё понятно, сюжет продолжается, но ощущение не то.

<i>Фирстиль, на который опирались</i>
Фирстиль, на который опирались

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

При смене задачи мы решили отдать её и другому дизайнеру — Жене. Это радикальная, но обычная практика, если клиент просит изменить концепцию. Спойлер: это решение сыграло на руку всем.

«‎Часто так бывает, что делаешь дизайн-концепцию, а потом клиенты говорят: вот это не нравится, то не нравится, ну или в целом не то. И сложно отойти от уже придуманной идеи в сторону чего-то качественно другого. Думаю, поэтому и решили позвать другого дизайнера»‎

Женя, веб-дизайнер

Сменили дизайнера, затаили дыхание и продвинулись к развязке

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

«‎Дизайн — не творчество. Он должен решать задачи в первую очередь. Для одного проекта один стиль уместен, для другого — другой. А в этом проекте так получилось, что мне их стиль оказался близок, поэтому и случился мэтч»

Женя, веб-дизайнер

Мы учли пожелания «Плохой компании» и показали несколько референсов. В первом варианте ребятам понравилось, что всё внимание уделено проектам с кратким описанием. Но не подошёл первый блок: он показался слишком хаотичным.

Первый референс

На втором референсе понравился минимализм, хаотичная вёрстка и минимум отсылок к фирменному стилю. Работы здесь тоже на первом плане, что оценили ребята.

Второй референс

После сбора референсов дизайнер представила три варианта страницы с портфолио. Первая была с горизонтальным скроллом в чёрном варианте, вторая — такая же, но в белом. Третья — с классическим вертикальным скроллом и параллаксом при наведении мыши.

<i>Первые два варианта страницы «Портфолио»</i>
Первые два варианта страницы «Портфолио»

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

Итоговый вариант страницы «Портфолио»

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

Хорошо, тему светлую выбрали, но как быть с главной страницей? Все видео, как правило, тёмные, а остальные страницы белые. Этим вопросом задались мы вместе с заказчиками. Видео убрать нельзя, так как в них и есть фишка студии видеопродакшена. Но решение найти удалось: мы сохранили связь между страницами сайта за счёт белых вкраплений на главной странице и белого цвета логотипа и букв.

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

На странице «‎О нас»‎ использовали те же приёмы, что и в портфолио. Ребята — визуалы, и текста нужно по минимуму. Мы оставили параллакс для фото, хаотичный шрифт и росчерки.

Страница «О нас»

Получилось не так, как себе представляли. Получилось круче!

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

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

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

Другие кейсы Молнии можно найти в портфолио на сайте: flashfamily.ru.

А в нашем Telegram-канале мы анонсим новые статьи. Подписывайтесь, чтобы не пропускать лонгриды о веб-дизайне и наших проектах.

2424
11 комментариев

«Дизайн — не творчество. Он должен решать задачи в первую очередь» — вот я с дизайнером согласен. А какую задачу решал неймер, который придумал название «Плохая компания»?

3
Ответить

Придумал?

Тихо спи...л и ушёл —
Называется нашёл.

У нас во дворе так говорили.

Плохая компания — она вот такая. С 2010 года существует, если в этих ваших интернетах правда написана.

1
Ответить

Надежды на ответ мало. Но всё равно.

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

Зашёл с мобилки — видео нет. Так и задумано?

1
Ответить

Спасибо, что заметили, сейчас всё проверим)

1
Ответить

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

1
Ответить

Вот как смелый дизайн может эффективно подчеркнуть творческий подход компании

1
Ответить

Вот что значит, когда дизайн идет без визуального шума и в ногу со временем!

1
Ответить