Обсудить проект
Оставьте свои данные, наши менеджеры свяжутся с вами в ближайшее время
ПРАКТИКА
ВМЕСТО ГРОМКИХ ОБЕЩАНИЙ
Что нужно раскрыть до заявки
Взрослый человек выбирает курс с оглядкой на свободное время, нагрузку и собственную цель. Одного списка инструментов мало: нужно показать, что предстоит делать, где появится обратная связь и какую работу можно довести до публикации.
Для школы «Макет и смысл» разработал компактную визитку одной программы. Вместо каталога курсов и множества тарифов страница ведёт от знакомства к четырём этапам обучения, условиям практики, двум учебным заданиям и заявке на консультацию.
На чём построена подача
В основе содержание из брифа: восемь недель, Figma и Tilda, небольшая группа до восьми человек, две встречи в неделю и самостоятельная практика между занятиями. Визуальные примеры показывают сам процесс: прототип, композицию, мобильный вариант и сборку страницы.
Образ школы строится вокруг мастерской. Человек пробует, обсуждает решения и дорабатывает проект. Поэтому акцент стоит на заданиях и разборе работы. Отзывы, имена преподавателей, дипломы, статистика выпускников и обещания трудоустройства без исходных данных не добавлены.
Одна программа и шесть секций
Первый экран, подход школы, программа, формат и стоимость, учебные проекты, заявка. Меню и подвал помогают перейти к нужной части страницы.
Самостоятельный визуальный язык
Тёплый бумажный фон, кобальтовый синий, чёрная типографика и небольшие лаймовые метки. Страница кейса сохраняет чёрный фон и красные акценты surgutov.ru.
СНАЧАЛА ЗАДАЧА
ПОТОМ ДИЗАЙН
Первый экран соединяет предложение с рабочим процессом. Справа показан редактор и учебный проект, слева расположены срок, формат и действие. Уже в начале видно, что курс посвящён созданию сайтов, а не только изучению отдельных команд программы.
Разобраться в задаче
До выбора цвета и шрифта студент работает с брифом, аудиторией и содержанием. Эта последовательность становится главным тезисом школы и задаёт ход дальнейшей программы.
Объяснять свои решения
Второй акцент связан с аргументацией. Сетка, размер заголовка и расположение кнопки рассматриваются через роль элемента на странице. Разбор помогает обсуждать конкретную работу.
Доводить до результата
Задания не заканчиваются первым вариантом. После комментариев студент дорабатывает макет, затем переносит часть решений в рабочий учебный сайт.
Материалы как визуальный мотив
Бумажные сетки, образцы букв, палитра и фрагменты макетов поддерживают тему мастерской. Крупная типографика отделяет основные мысли от пояснений.
ОТ ПРОТОТИПА
ДО ПУБЛИКАЦИИ
Восемь недель разделены на четыре последовательных этапа. У каждого есть предмет работы и промежуточный результат. Посетитель может оценить содержание до общения со школой и сопоставить его со своим опытом.
Недели 01-02: задача и структура
Разбор брифа, изучение аудитории и выбор содержания страницы. Первый результат - схема сайта и прототип без декоративных деталей.
Недели 03-04: Figma и дизайн
Сетки, композиция, типографика и цвет применяются в небольшом промопроекте. Теория связана с конкретным макетом и выбором визуальной иерархии.
Недели 05-06: дизайн и адаптация
Проектирование лендинга, навигации, кнопок и формы. Отдельное внимание уделено мобильной версии: порядок элементов и размер текста пересматриваются под узкий экран.
Недели 07-08: Tilda и публикация
Перенос дизайна в Tilda, подключение формы и подготовка учебного сайта к публикации. Завершает этап презентация проекта и объяснение принятых решений.
Слева программа читается как вертикальная линия времени, справа видна эволюция одной работы. Прототип, типографическая система и готовый интерфейс не смешаны в один декоративный коллаж.
РАБОТА
С ОБРАТНОЙ СВЯЗЬЮ
Секция отвечает на организационные вопросы. Как устроено занятие, сколько времени выделить между встречами и где появляется помощь преподавателя. Стоимость стоит рядом с условиями, поэтому её не приходится искать в подвале или уточнять только после заявки.
Четыре шага практики
Изучить материал, выполнить работу, получить разбор, внести изменения. Комментарии привязаны к макету: заголовку, отступам, контрасту или композиции.
Нагрузка до начала обучения
В разработанном содержании указаны две встречи в неделю и четыре-шесть часов самостоятельной практики. Формат онлайн, в группе до восьми человек.
Одна стоимость
39 000 ₽ за программу из восьми недель. Цена не разделена на искусственные пакеты. Условия оплаты и доступ к материалам следует закрепить до набора.
Контрастная колонка условий
Кобальтовый фон отделяет срок, нагрузку и стоимость от процесса практики. Разные иконки помогают просмотреть факты, сохраняя общий ритм страницы.
ДВА ПРОЕКТА
ДВА РАЗНЫХ ХАРАКТЕРА
Результат программы показан через два задания. Они различаются по теме, стилю и объёму работы. Здесь важен не набор красивых экранов сам по себе, а связь между задачей, дизайном и навыком, который отрабатывается.
Промостраница события
«Смена» помогает отработать сетку, типографику и композицию. Крупные буквы, архитектурный кадр и активный синий цвет создают характер события. Результат задания - законченный макет в Figma.
Лендинг для бизнеса
«Линия» посвящена архитектурной практике. Более спокойная палитра, фотографии домов и другая шрифтовая пара показывают, что один приём не подходит для любой задачи. Задание включает мобильную версию и сборку на Tilda.
Это примеры заданий, разработанные для содержания курса. Они не представлены как работы реальных выпускников. Финальный объём и качество учебного проекта зависят от выбранной темы, исходных материалов и самостоятельной практики.
ПЕРВЫЙ КОНТАКТ
БЕЗ ДЛИННОЙ АНКЕТЫ
Завершающая секция приглашает обсудить программу, нагрузку и ближайший набор. Отправка контакта отделена от оплаты: человек сначала получает ответы и принимает решение после разговора.
Только контакт и имя по желанию
В макете формы два поля. Обязателен телефон или Telegram, имя можно пропустить. Согласие на обработку данных и необязательная рассылка разделены; обе отметки выключены.
Шесть экранов без повторов
Редактор в первом экране, принципы школы, линия программы, процесс практики, крупные примеры и заявка создают разные композиции в одной системе.
Поисковая основа проектируемой визитки связана с онлайн-обучением веб-дизайну с нуля, Figma, Tilda и практической программой курса. Страница кейса описывает разработку сайта школы: структуру, содержание и оформление. Частотность запросов отдельно не проверялась.
ЧТО ПОЛУЧИЛОСЬ
В РЕЗУЛЬТАТЕ
Подготовил содержание и шесть отдельных крупных макетов сайта-визитки школы «Макет и смысл». Одна программа раскрыта через подход, последовательность обучения, условия и учебные примеры. Визуальная система опирается на типографику и рабочие материалы дизайнера.
Сайт одной программы
Шесть секций ведут от предложения к заявке, не превращая визитку в каталог курсов.
Практика видна в дизайне
Прототипы, сетки, комментарии и адаптивные варианты показывают содержание работы.
Условия до заявки
Срок, нагрузка, размер группы и стоимость собраны в одной контрастной колонке.
Отдельная обложка
Для каталога создан кадр с типографическими материалами проекта, без мелкого интерфейса.