Наши работы

Кейс: яркий UI/UX дизайн лендинга школы математики в Figma | Webplustudio

Landing Page физико-математической школы

— Разработаем эффективный инструмент продаж под ваши бизнес-задачи. Гарантируем, что у пользователя сложится целостная картина о вашем товаре/услуге, со всеми достоинствами и уникальными преимуществами. Готовы обсудить с вами проект!

— Разработаем эффективный инструмент продаж под ваши бизнес-задачи. Гарантируем, что у пользователя сложится целостная картина о вашем товаре/услуге, со всеми достоинствами и уникальными преимуществами. Готовы обсудить с вами проект!

Галерея

Получите расчет стоимости сайта за 4 минуты, ответив на несколько простых вопросов

Рассчитать стоимость

О проекте подробно

Продукт Курсы современных методов обучения математике (Частная школа)
Цель лендинга Конверсионная посадочная страница под запуск рекламной кампании
Целевая аудитория Молодые абитуриенты, старшеклассники и их родители
Объём работы 11 продающих экранов + Мобильный адаптив + UI-Kit + Исходники
Инструменты Figma, Photoshop
Типографика Gilroy (баланс молодёжной динамики и академичности)
Палитра Тёмный маджента, ярко-розовый, кораллово-оранжевый, масляный жёлтый, тёмно-серый, бледно-розовый
Результат Полный дизайн-пакет со всеми исходниками передан заказчику под вёрстку
Категории услуг Создание лендинговРедизайн и дизайн сайтов

Дизайним лендинг пейдж, ломаем стереотип о «скучной математике»

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

Главный вызов дизайна:
Большинство сайтов образовательных курсов по точным наукам выглядят сухо, отстранённо и серо. Нам требовалось сломать этот стереотип:

  1. Показать, что математика может быть увлекательной, динамичной и понятной.
  2. Сделать визуал ярким и привлекательным для молодой аудитории (абитуриентов).
  3. Сохранить чувство экспертности и академической надёжности, чтобы родители были уверены в высоком уровне преподавания.

 

Как проектировался 11-экранный макет в Figma

1. Копирайтинг и проработка продающих заголовков

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

2. Типографика: выбор шрифта Gilroy

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

3. Сочная палитра и математическая геометрия

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

4. Отрисовка мобильного адаптива всех 11 экранов

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

 

Мокапы мобильных версий landing page
Мокапы мобильных версий landing page

 

5. Формирование UI-Kit и передача исходников

Для того чтобы верстальщик заказчика мог легко воплотить проект в код, мы оформили полный UI-Kit:

  • Стилистика и состояния всех интерактивных элементов (кнопки, переключатели, формы).
  • Сетка, отступы и компоненты карт курсов.
  • Исходные графические файлы и векторные иконки.

 

Фрагмент ui-кита лендинга
Фрагмент ui-кита лендинга

 

Итоги работы

Заказчик получил готовый к передаче в разработку продуктовый дизайн-пакет:

  • ✅ Спроектирован сочный 11-экранный лендинг в Figma.
  • ✅ Отрисована полноценная мобильная версия каждого блока.
  • ✅ Сформирована уникальная дизайн-система (шрифт Gilroy + 6-цветная сочная палитра).
  • ✅ Собран UI-Kit и подготовлены исходные файлы для вёрстки.

 

Галерея дизайн-макета школы математики

Главный экран лендинга
Главный экран лендинга

 

Экран преимуществ
Экран преимуществ

 

Оформление отзывов на сайте
Оформление отзывов на сайте

 

Футер лендинг пейджа
Футер лендинг пейджа

 

Нужен яркий и конверсионный UI/UX дизайн для вашего проекта?

Мы в Webplustudio создаем уникальный продуктовый веб-дизайн и лендинги в Figma. Разработаем смысловую структуру, подберем фирменную типографику, отрисуем адаптивы и соберем аккуратный UI-Kit под вёрстку.