Дизайн макета онлайн-курса для последующей верстки в Тильде

Описание

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

Решение

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

Дизайн-концепция была выбрана в стиле “неовинтаж”: базовая цветовая палитра включила сложные оттенки сепии и тёплые контрасты, ассоциирующиеся с классическими кинолентами, а также детали — киноплёнка, характерные композиции и плавные переходы между блоками.

В работе я использовала Figma для проектирования макетов как для десктопной, так и для полностью адаптивной мобильной версии.

Часть иллюстраций была подобрана на фотостоках с акцентом на достоверность эпохи, а обложки и некоторые отдельные изображения я создала с помощью нейросетей (что позволило получить максимально индивидуальный и атмосферный визуал). Для каждого блока продумывалась уникальная подача — аккордеоны для раскрытия программ, карточки преподавателей и блоки отзывов.

Особое внимание было уделено удобству пользовательского пути: все основные действия (получить консультацию, узнать подробности курса, оставить заявку) всегда доступны и выделены на макете.

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

Результат

В результате получился яркий, стилистически цельный и легко узнаваемый сайт онлайн-курса по сценарному мастерству. С первых секунд сайт создаёт у посетителя ассоциацию с настоящим миром большого кино: оттенки “под киноплёнку”, визуальные маркеры индустрии (кадры, хлопушки, винтажные шрифты) вдохновляют на творчество и повышают лояльность к курсу.

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

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

Презентация проекта