(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(93905182, "init", { defer: true, clickmap:true, trackLinks:true, accurateTrackBounce:true }); ym(93905182, 'hit', window.location.href);

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

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

badcompany.tv

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

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

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

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

Старый сайт

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

Сайт, который ребята отдали нам на разбор

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

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

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

Первый референс
Второй референс

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

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

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

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

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

Фирстиль, на который опирались

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0
11 комментариев
Написать комментарий...
Вдумчиво о продажах

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

Ответить
Развернуть ветку
Евгений Ма

Придумал?

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

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

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

Ответить
Развернуть ветку
Евгений Ма

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

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

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

Ответить
Развернуть ветку
Молния
Автор

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

Ответить
Развернуть ветку
Андрей Вечерний

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

Ответить
Развернуть ветку
Анатолий Вебб

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

Ответить
Развернуть ветку
Андрей Маркин

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

Ответить
Развернуть ветку
Gala Rebr

А разбор сайта - это у вас отдельная услуга? Или в качестве коммерческого предложения дали идеи, как можно улучшить сайт?

Ответить
Развернуть ветку
Молния
Автор

Первичный анализ сайта у нас бесплатно проводит и презентует менеджер. Если говорить о более глубоком анализе, то это отдельная услуга. Более подробно вам расскажет и проконсультирует наш менеджер (ссылка на тг: https://t.me/KristinaVslv)

Ответить
Развернуть ветку
Дима Игротехник

А сколько такой сайт стоит?

Ответить
Развернуть ветку
Молния
Автор

На этот вопрос может ответить менеджер, напишите в тг https://t.me/KristinaVslv

Ответить
Развернуть ветку
8 комментариев
Раскрывать всегда