Индивидуальная программа развития для дизайнеров в студии. Личный опыт на примере сайта в Readymag
Развитие дизайнеров в aic и что такое ИПР
Помимо естественного роста, который неизбежно происходит на клиентских задачах, для дизайнеров в студии предусматривается индивидуальная программа развития. Каждый из них вместе с наставником старше грейдом составляет индивидуальный план развития (ИПР) и выполняет итоговую работу под его руководством. Такой работой три года назад, когда я была джуниором, стал для меня сайт музея скульптора Александра Бурганова под руководством моего наставника, арт-директора Юли Степановой.
Обо мне
Хочется представиться и рассказать немного о себе. Прошло уже три года как я работаю дизайнером в aic, и сейчас занимаю позицию ведущего дизайнера, но мой путь в дизайн был очень нелинейным. Я родилась в городе Севастополь, но выросла в Санкт-Петербурге, там же поступила на химический факультете СПБГУ. Отучившись там два года поняла, что химия не мое и идти в науку не хочу. Поэтому я перевелась в ИНЖЕКОН и получила специальность бакалавра по экономике. Сейчас я понимаю, что это был довольно странный выбор высшего образования. Ведь, наверное, уже с детства чувствовала интерес к визуалу, постоянно рисовала и успела поучиться пять лет в художественной школе. При этом осознанный выбор профессии я сделала только к 26 годам. После этого я серьезно занялась диджитал дизайном.
Я очень люблю свою работу и студию особенно. aic — это одна из самых сильных компаний сервисного дизайна России, отчасти потому что мы делаем много сайтов и приложений, для крупных компаний, которые знакомы каждому. Также мы не просто дизайн-студия, мы создаем сервисы ориентируясь на CX (customer experience) и помогаем выстраивать пользовательский опыт, делаем интерфейсы удобными для людей и полезными для бизнеса.
Выбор темы для ИПР
Тема для ИПР выбирается отдельно и зависит от того, какие скиллы надо развить каждому конкретному дизайнеру. Можно сделать любую работу — это могут быть кейсы на Behance или отдельные задания, например, по анимации. Также можно попросить у наставника необходимые инструменты или литературу, определить точки роста и назначить регулярные встречи для обсуждения рабочих процессов.
Я интересуюсь визуальным искусством и посещаю выставки. Так я узнаю много полезного и для работы, поскольку часто хорошие референсы для диджитала лежат в смежных областях. В один из походов в музей МОММА я попала на выставку работ Бурганова, которая произвела на меня оглушительное впечатление. После я узнала, что у него есть его собственный музей на большом Афанасьевском переулке и часто приходила туда. Потом пришла мысль — лучшее, что я могу сделать, это рассказать всем о Бурганове и его музее. Так и появилась идея. Я подошла к ИПР не просто, как к концепции, а как к реальному проекту, который смог познакомить ближе с миром скульптора, поэтому я выбрала формат полноценного сайта.
Вообще у музея есть официальный сайт, но он довольно громоздкий и устаревший. Весь контент для посетителей расположен вместе с официальной информацией, сканами документов о деятельности музея и прочим. Даже несмотря на то, что у них есть онлайн-форма покупки билетов, ее почти невозможно найти. К тому же, он совсем не передает пользователям атмосферу работ скульптора и музея, а для музея, пожалуй, самое главное — это его экспозиции. Но я не задумывала свой проект как альтернативный текущему, идея скорее в том, чтобы сделать промо-сайт после которого человеку захочется прийти в музей.
Выбор инструмента для реализации ИПР
Я решила сделать сайт на no-code инструменте, поскольку не было ресурса на разработчика, который мог его сверстать и нужно было рассчитывать на свои силы. В самом начале я плохо понимала масштаб сайта и у меня не было опыта работы с no-code инструментами, а в студии были ребята, которые умели работать в Readymag и он был довольно популярным. Мои коллеги сделали на нем даже клиентский проект — сайт для музея ММОМА «Здесь и сейчас. Атлас творческих студий». Проект был высоко оценен жюри и получил награду сайт года на Readymag. Мне тоже было очень интересно научиться работать в этом no-code, так я выбрала Readymag. Сейчас я , скорее всего, остановилась на другом инструменте, например Webflow, поскольку он позволяет создавать стили и классы, что существенно ускоряет работу и позволяет масштабировать проект.
Процесс работы над ИПР
Структура
Перед работой в Readymag я накидала короткую структуру сайта и поняла, что мне нужно сделать лонгрид с уклоном в промо. Это решение родилось после определения структура будущего сайта. Я вынесла все на пять больших разделов «Биография», «Скульптура», «Графика», «Рассказы» и «О музее» с линейной информационной архитектурой и без внутренних страниц. Это было задумано так — зритель постепенно знакомится с личностью и работами Бурганова, проходит все разделы его творчества и попадает в музей, как финальную точку. Еще это решение было принято из-за особенностей Redymag, в котором сложно делать несколько уровней вложенности. Также я вынесла в меню часы работы музея и ссылку на покупку билета онлайн, которая была на текущем сайте музея.
Референсы
Референсы искала на классических площадках: awwwards, httpister и других. В плане верстки там все заоблачно, поэтому я старалась заземляться и чаще смотреть на сайты, которые сделаны на Readymag и акцентироваться на переходы и анимацию — это помогает лучше понять ее возможности. А еще я люблю искать референсы среди студий графического дизайна, плакатов и печатных изданий. Советую посмотреть хэдлайн тех, кто выступает на международном фестивале Typomania и изучать по списку имен и студий забивая его в поиск. Там можно найти огромное количество вдохновения.
Подбор шрифта
После того как я нашла визуал и поняла язык будущей коммуникации, подобрала шрифт для заголовков, выбрав экспрессивный шрифт Austin из typetoday. Изначально шрифт использовался для заголовков журнала о моде Harpers & Queen, но затем Илья Рудерман сделал его кириллическую версию. Кажется, этот акцидентный шрифт передает какую-то магию скульптур и их застывшую динамику, в своей плавности и контурном напряжении.
Подготовка макетов в Figma
Изначально все макеты отрисовала в Figma — задала сетку и определила параллельно, какая анимация будет в блоках на Readymag, что сэкономило кучу времени. Поэтому, когда я открыла Readymag осталось собрать задуманные макеты на платформе.
Про покупку билета в музей
Отдельно хочется рассказать про возможность покупки билета через сайт. Я взяла готовую форму покупки с официального сайта, попасть на нее можно через несколько точек входа. Например, перейти из «меню», и из раздела «музей». Но этого показалось мало и я закрепила виджет поверх всех страниц в виде птицы — элемента одной из скульптур, при ховере на который появляется кнопка купить билет. Таким образом, я решила не делать фиксированную кнопку «купить билет», что похоже на e-comme, а превратить ее в элемент, который ничего не навязывает.
Особенности работы c Redymag
Отдельным пунктом стоит работа со шрифтами. Если вы планируете сделать проект на кастомном шрифте, стоит заранее подключить его. Менять шрифт потом придется вручную, даже если он будет зашит в стили, придется корректировать размеры блоков руками. Redymag позволяет прописывать текстовые и цветовые стили, что ускоряет работу. Также важно полностью продумать весь контент, так как потом даже поправить шейп при настроенной анимации может быть довольно трудоемкой задачей, из-за большого количества элементов, расположенных друг на друге. Поэтому предварительный сбор макетов в Figma необходимый этап.
Если говорить о структуре, каждый проект делится на страницы, проще продумывать каждый раздел меню, как отдельную страницу, поскольку ссылки из меню можно делать только на отдельные страницы. Также можно использовать дополнительную разбивку на страницы ради удобства, если планируется большое количество анимаций по скроллу. В своем проекте я использовала 10 страниц для основного сайта лонгрида и 10 для подсайта с рассказами, по одному рассказу на страницу. Это проще, если нужно дать ссылку на рассказ из меню.
Readymag предусматривает довольно удобную работу с адаптивами, по сути перенося весь контент с десктопного разрешения на мобильное или планшетное разрешение, который нужно просто правильно расставить. Однако, при работе с адаптивами стоит понимать, что сохранить всю анимацию, изначально задуманную на десктопе, вряд ли получится. Это будет перегружать сайт и устройство, поэтому лучше подумать об удобстве расположения контента.
Плюсы Readymag в том, что он сам по себе довольно простой и понятный, с низким порогом входа. Например, можно располагать объекты на любом месте в артборде. С Webflow для сравнения, такое не пройдет, нужно понимать основу разметки для того, чтобы заверстать даже обычный текстовый блок. Поэтому Readymag отлично подходит, как знакомство с no-code инструментами. Но из основных минусов можно отметить, что он не поддерживает стили и классы, так как это устроено, например, в Webflow, из-за чего любые изменения придется вносить вручную.
Оглядываясь назад, кажется, основной совет который бы я могла дать при работе с платформой, это не уходить сразу в продумывание вжухов, а продумать сетку, общую композицию блоков, в том числе стоит уделить внимание расположению всего контента сразу и заранее продумать лейаут и отступы, потому что если потом вы захотите их поменять, придется это делать вручную.
Результат ИПР
Наверное, у меня ушло более 200 часов на создание всего сайта, я точно не считала. В процессе я научилась работать с платформой и получила удовольствие от работы. Но, конечно, сейчас для ускорения процесса работы я все же выбрала бы другой инструмент.
Итоговый сайт состоит из двух проектов в Readymag, на одном лонгрид о творчестве скульптора и музее, и отдельным проектом я вынесла его рассказы, опубликованные на текущем сайте. Это связано с тем, что рассказов довольно много и делать их верхним уровнем на основном сайте кажется неуместным. В процессе работы часто возникали проблемы и тут мне помогала мой наставник Юля и раздел Learn на официальном сайте. Когда я делала проект, буквально три года назад, не было такого большого количества классных сайтов, которые есть на платформе сейчас и некоторых фичей. Часто я находила какую-то фишку, которую сделал кто-то на своем проекте и пыталась ее повторить. Иногда возникали сложности, например, я до последнего думала, что невозможно сделать фуллскрин меню, пока не нашла проект с таким решением, это мотивировало посидеть и попробовать еще, до тех пор пока у меня не получилось повторить.
Ну и хочется добавить, что я не ставила цели создать сайт, который бы послужил заменой основному. Поэтому проект рассчитан на привлечение внимания к творчеству Бурганова и его музею. Очень надеюсь, что у меня получилось это сделать. И я безумно благодарна Юле, которая ободряла меня и курировала работу и, конечно, коллегам, которые поддержали меня с проектом и помогли мне с покупкой шрифта и студийным аккаунтом в Readymag.
Хочется пожелать всем, кто начинает свой путь в дизайне оставаться любопытным в своей профессии, не думать о потраченных часах, а сохранять горящие глаза и наслаждаться процессом.
