Какие решения мы принимали, делая сайт анимационной студии Петрик

Ретроспекция
23 февраля 2023
Женя Арутюнов, Мария Верес, Людвиг Быстроновский

Студия «Петрик» знаменита клипами для Земфиры и Ивана Дорна, проектами «Герб Москвы» и «Пазть», работами для Комитета против пыток, Суперсобаки и Третьяковской галереи.

В 2022 году мы сделали новый сайт студии, вот такой:

Дизайнеры —
Женя Арутюнов
,
Мария Верес
,
арт-директор —
Людвиг Быстроновский

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

С чего всё началось

Женя Арутюнов

Впервые я узнал про студию Петрик лет пятнадцать назад, наверное

Глубоко я никогда не вникал, но образ могущественных людей, которые умеют делать вещи, которые я даже не знаю как назвать — был сформирован задолго до знакомства

(И он сохранился)

Однажды Миша Петрик обратился ко мне за консультацией

(Я в тот момент охуел, конечно)

Но оказалось, что он тоже из Ростова, а из Ростова это всегда хорошо

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

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

Конечно, сделаем! Нашёл кого спросить.

Как Женя вместо дизайнера нанял арт-директора

Женя Арутюнов

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

Потому что хочу

Потому что

Это

Мой

Проект

Осознавая, что кто-то же должен и работу делать, я позвал в проект Машу, в роли верстальщика, фронтендера и усердного человека

(я сам не усердный, и, к счастью, давно это понял).

Осознавая, что мы с Машей окажемся по уши завязнем в дизайне и забудем, в чём вообще смысл, я позвал в Людвига в качестве арт-директора

Я сделал это просто чтобы подстраховаться от замыливания и управленческого одиночества

(это когда некому пожаловаться на Машу)

Я сам не понимал, что делаю, но в итоге это решение определило судьбу проекта

Людвиг Быстроновский

я подозреваю что на 90% это был выебон сначала

Спасибо, Людвиг, мы ещё дадим вам слово

Как нам было лень рисовать макеты и что вместо этого

Женя Арутюнов

За всё время работы над этим сайтом я нарисовал ноль макетов в фигме или где-либо ещё

Весь дизайн появился прямо в коде

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

«Господи, но как?! И, главное, зачем?!» — 99% читателей

«Ну конечно, слава Богу, я не один во Вселенной» — 1% читателей

Людвиг Быстроновский

было бы круто прямо тут опрос поставить :-)

Спасибо, Людвиг

мы ещё дадим

вам

слово

ну ладно, опрос так опрос

(вы когда зовёте в проект арт-директора — просто делайте, что он говорит, ок? иначе зачем было звать-то)

Как и зачем придумывать дизайн в процессе написания кода:

За последние лет десять все эти способности у меня накопились, поэтому в первый же день я развернул пустой сайт

поставил в шапку логотип Петрика

и дело пошло

Но если дизайнер не рисует дизайн, кто-то же должен?

Слово арт-директору

Как мы придумали позициониро­вание студии Петрик и раскрыли её тайную силу

Людвиг Быстроновский

Как «дизайн без стресса» спасает дружбу

Зачем нужен аутсорс хвастовства

Где мы подсмотрели цветовые схемы и шрифты

Женя Арутюнов:

Мы делаем «информационный» (функциональный?) дизайн, то есть мы фокусируемся на «что», и все оформительские приёмы нацелены на повышение чистоты и внятности.

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

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

Можно было, конечно, перелопатить интеренер в поисках подходящий супергарнитуры, санс и моно в одном семействе сейчас не редкость. Но я придумал способ получше. Дело в том, что логотип Петрика придумали в Contrast Foundry. Конечно же, у них нашлась пара моно + санс — супергарнитура CoFo. И она прекрасно подошла.

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

Когда делаешь сайт прямо в коде, тест-драйвом шрифта на страничке не обойтись, нужны файлы шрифта. Но с самом начале ещё непонятно же, какие начертания нужны. Можно, конечно, купить все. Но есть способ получше: «дайте, пожалуйста». Я написал Марии и сказал «мы тут вот это, дайте, пожалуйста, шрифты погонять» — и вопросик моментально решился. Я не обещаю, что Мария даст файлы вам, всё-таки это было не первый наш разговор (и не второй). Но за спрос денег не берут, смело рекомендую вам писать авторам шрифтов, они не кусаются.

К тому же в инстаграме Contrast Foundry нашёлся ещё один шрифт из семейства CoFo, недоделанный и неопубликованный, но работающия, и его я тоже хочу. Дай!

Как анимировать сайт про анимацию

Как быть читателем своего дизайна

Про дизайн не в долг