Кейс: сайт-кинотеатр для Fullscreen Agency

Интервью с веб-дизайнером Анной Морозовой, чьи работы входят в подборку лучших проектов на Tilda, о создании сайтов на конструкторах, тренды и визуальные приемы.

Анна, в твоем портфолио много успешных проектов (архитектурная студия «Место», Secret Venture Capital (лендинг для Secret Venture Capital вошел в подборку лучших проектов на Тильде), Форум ассоциации глэмпингов и другие), расскажи с самого начала - как пришла в веб-дизайн?

Анна Морозова: Началось все с того, что три года назад моя приятельница хотела сделать сайт для своего бюро экскурсий и попросила помочь ей разобраться с конструктором сайтов Tilda. Результат нам всем понравился, и тут же знакомые предложили сделать сайт для них. На момент создания первого сайта у меня не было особых навыков веб-дизайна, но на платформе Tilda было много обучающих материалов для новичков, закрывающих практически все первоначальные вопросы. Затем я училась по урокам «Тильдошной» (комьюнити продукта, созданное Максимом Ширко, евангелистом Тильды), а с осени 2020 работаю с ментором – основателем студии «Имя» Даниилом Клинчуком, не только в части дизайна, но и сайта как маркетингового продукта. Сейчас, благодаря возможностям Тильды, выросшей в платформу со множеством функций, я могу выпустить готовый продукт, работая над всеми этапами самостоятельно (тексты, прототип, дизайн, первичное SEO и т.д.). Опыт в гуманитарных науках, коммерческой сфере в этом помогают.

А обладать какими-то навыками программирования веб-дизайнеру нужно?

Анна Морозова: Веб дизайнер и веб-программист — разные профессии, необходимости знать языки программирования нет. Но если ты понимаешь основы CSS, то возможности в реализации идей расширяются: большинство конструкторов позволяют добавлять свой код прямо на страницу, создавая уникальные элементы или расширяя функции существующих блоков.

Как вообще поэтапно проходит процесс создания сайта?

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

Ты - дизайнер-фрилансер. Как находишь заказчиков? Или они сами приходят?

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

А были ситуации, когда ты отказала клиенту?

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

Что можно сделать в ситуации, когда непонятно, чего хочет заказчик?

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

Расскажи про одну из последних работ - сайт для Fullscreen Communication Agency: какая была задача?

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

Расскажи про элементы сайта, что к чему и для чего?

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

Несмотря на то, что в целом сайт выполнен в минималистичном стиле, мне он показался насыщенным, в нём много инфографики, видео и фото. Насколько сложно интегрировать такое количество интерактивного контента на одну страницу?

Анна Морозова: Большое количество визуального контента на странице компенсируют приемы, которые облегчают восприятие: например, я задала последовательность подачи контента, применив регулярную сетку с тремя силовыми линиями. Часть контента доступно для пользователя при взаимодействии: эффекты при наведении на область, табы, поп-ап окна и т.д., это дает возможность не перегружать страницу при прокрутке.

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

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

Расскажи что-нибудь про приемы, которые удерживают внимание посетителя сайта там, где это нужно? Что ты применила в этом кейсе?

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

В случае с кейсом Fullscreen Agency, сколько времени ушло на создание сайта (начиная от первой встречи с клиентом и заканчивая финальной версией)?

Анна Морозова: Ориентировочно 6-7 недель, с учетом правок. Но если ужать до рабочего времени, то месяц.

Что для тебя самое интересное в работе?

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

Есть ощущение, что в цифровую эпоху веб-дизайн постоянно меняется. Как следишь за трендами?

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