Искусство в руках студентов Contented: как вместе с REDKEDS разработали дизайн лендинга для арт-объекта на Cosmoscow

Бриф от заказчика

Cosmoscow — международная ярмарка современного искусства. Ежегодно здесь выставляют работы более 300 художников из России и стран СНГ. 

Студенты Contented создали лендинг об итогах Cosmoscow 2023. Анонс конкурса на разработку дизайна сайта разместили в общем чате учеников. Откликнулось 17 человек — выпускники курсов «Профессия UX/UI-дизайнер», «Профессия веб-дизайнер», «Профессия графический дизайнер» и др.

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

• картинки героев; 
• логотипы партнеров; 
• текст;
• фотографии объекта (по желанию).

В брифе прописали главные требования к сайту: он должен получиться светлым и креативным. А еще удобным и читабельным, так как на лендинге часто бывает много текста. 

В проекте было важно использовать:

• фирменные цвета: красный (#FF0000), черный, белый и серый;
• шрифт Helvetica и Albina из базы RedKeds.

Готовый дизайн предложили сдать в формате макета в Figma, лендинга на Tilda или Readymag. 17 студентов-выпускников прислали свои проекты, но эксперты выбрали работы двух студенток — Меллат Кулешовой и Яны Нагаевой.

Проект Яны

О проекте Cosmoscow я узнала из общего чата студентов Contented. Для меня это была отличная возможность пополнить портфолио новым кейсом. Недавно я закончила учиться и сейчас ищу работу. 

Изучив бриф и пообщавшись с менторами, я поняла, что лендинг должен быть светлым и воздушным. А еще, что нужно разместить очень много текста. 

Важно построить композицию так, чтобы читатель дошел до конца и не потерял интерес.

Изначально я вдохновлялась работами из геометрических фигур, смотрела на постеры в стиле баухаус, двигала фигуры на листе в поисках интересной композиции. Когда все было собрано, я выслала наброски ментору Юлии. Она посоветовала упростить дизайн и убрать лишние акценты. 

После этого лендинг стал чище и понятнее. Чтобы уменьшить количество текста, я добавила кнопку «+». При наведении или нажатии на нее (в зависимости от версии) иллюстрация сменяется на текстовое описание персонажа.

Все работы я выполняла в Figma. Менторам и партнерам понравился мой прототип. В финальную версию сайта вошли 3 экрана моего лендинга, а также плавающее меню, анимация и шрифт. 

Я очень рада, что решилась участвовать. Стажировка дала крутой опыт. Не ожидала, что мой лендинг понравится заказчику. Это помогло поверить в свои силы. Хочу продолжать развиваться в UX/UI и изучать дополнительные программы помимо Figma.

Проект Меллат

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

После изучения брифа и созвона с кураторами начала делать десктопную версию макета на 1280 пикселей. Я долго просматривала референсы, искала идею, которую можно взять за основу, и в итоге вспомнила слова менторов о том, что важно осветить проблемы арт-рынка. Так на первом экране лендинга появилась настольная лампа.

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

• интерлиньяж;
• кегль (размер шрифта);
• размер картинок.

После правок текст стал более читабельным, а дизайн — динамичным. 

Для финальной версии сайта Cosmoscow взяли три экрана моего лендинга — красный фон с рукой, раздел с партнерами и закрывающий черный подвал, а также — решение с лампой на главном экране.

Я благодарна ментору Юлии, которая дала много полезных советов и поделилась крутыми лайфхаками. Например, добавить черный фон в середину лендинга для контраста. Или поменять цвет шрифта на красный, чтобы сделать акцент. 

Во время работы я поняла, какие ошибки допускала в верстке текста. Раньше я старалась сделать дизайн более минималистичным, но это плохо сказывалось на читаемости. Сайт был неудобным для посетителей. 

Итоговый результат

Ребята работали над проектом три недели. При финальном согласовании структуру сайта упростили, разбив ее на отдельные блоки. Это было нужно, чтобы облегчить верстку для студентов-разработчиков. 

Для готового дизайна сделали прототипы для планшетной и мобильной версии. Сейчас сайт в разработке.