онлайн-курс “Школа фортепиано”
Презентация авторского обучающего курса преподавателя музыки в формате лендинга (одностраничного сайта-визитки).
FIGMA | TILDA | САЙТ ПОД КЛЮЧ
О проекте
текст | дополнительные материалы | дизайн | вёрстка
для кого
Данная работа — некоммерческий проект, созданный в рамках обучения на курсе от Tilda Publishing.
Задача
процесс
Прототип и структура
Предложенный текст для сайта я использовала и как техническое задание, и в качестве прототипа, т.к. информация в нём была хорошо структурирована, за счёт чего её легко было разделить на смысловые блоки.
Немного подкорректировала текст, внесла небольшие изменения и дополнения в плане стилистики и речевых оборотов.
Немного подкорректировала текст, внесла небольшие изменения и дополнения в плане стилистики и речевых оборотов.
стилистика
В плане цветового решения мне хотелось отойти от стандартных ассоциаций с чёрным и белым цветами (клавиши) и от мебельно-коричневых оттенков, в которых была выполнена основная масса клавишных инструментов.
В процессе поиска изображений пришла идея использовать глубокие красно-бордовые оттенки в сочетании с жёлто-золотыми акцентами.
Для соединения атмосферы эстетики классической музыки и современных онлайн возможностей преподавания я подобрала элегантный шрифт для заголовков: классически-вежливый, уверенно-изящный и слегка винтажный, напоминающий шрифты 18−19 вв.
В процессе поиска изображений пришла идея использовать глубокие красно-бордовые оттенки в сочетании с жёлто-золотыми акцентами.
Для соединения атмосферы эстетики классической музыки и современных онлайн возможностей преподавания я подобрала элегантный шрифт для заголовков: классически-вежливый, уверенно-изящный и слегка винтажный, напоминающий шрифты 18−19 вв.
Цветовая палитра
Создать лендинг для записи на онлайн-курс по обучению игре на фортепиано.
Основное условие — уникальный дизайн, выполненный в Zero Block, с настройкой базовой анимации.
Отображение сайта: ПК и мобильная версии.
Основное условие — уникальный дизайн, выполненный в Zero Block, с настройкой базовой анимации.
Отображение сайта: ПК и мобильная версии.
Продумать цветовое решение. Подобрать шрифты и изображения, подходящие тематике сайта.
Придумать подходящее название для курса. По необходимости отредактировать и исправить текст для сайта.
Десктопная версия
мобильная версия
Описание
Весь дизайн-макет сайта отрисован в Figma.
Сначала была создана десктопная версия (т.е. ПК). На её основе спроектирована мобильная.
Далее произведена вёрстка сайта на Тильда в Zero Block (с адаптацией под 5 разрешений экранов). После чего я настроила базовую анимацию и подключила навигацию внутри сайта.
Сначала была создана десктопная версия (т.е. ПК). На её основе спроектирована мобильная.
Далее произведена вёрстка сайта на Тильда в Zero Block (с адаптацией под 5 разрешений экранов). После чего я настроила базовую анимацию и подключила навигацию внутри сайта.
Технические моменты
Прочие технические настройки:
- Подключение и настройка форм приёма заявок записи на курс.
- Подключение кнопок обратной связи (мессенджеры, соцсети, электронная почта).
- Настройка базовой SEO (улучшение индексации сайта поисковыми системами).
- Подключение системы аналитики Яндекс.Метрика.
Если вам нужен сайт, оставьте заявку, и я свяжусь с вами в ближайшее время. Я на связи ежедневно с 02:00 до 15:00 (по мск), кроме воскресенья.
Если у вас другой часовой пояс, вы можете написать мне в удобное для себя время.
Если у вас другой часовой пояс, вы можете написать мне в удобное для себя время.
онлайн-курс
“Школа фортепиано”
“Школа фортепиано”
FIGMA | TILDA | САЙТ ПОД КЛЮЧ
дополнительные материалы | дизайн | вёрстка
Презентация авторского обучающего курса преподавателя музыки в формате лендинга (одностраничного сайта-визитки).
О проекте
для кого
Данная работа — некоммерческий проект, созданный в рамках обучения на курсе от Tilda Publishing.
Задача
процесс
Прототип и структура
Предложенный текст для сайта я использовала и как техническое задание, и в качестве прототипа, т.к. информация в нём была хорошо структурирована, за счёт чего её легко было разделить на смысловые блоки.
Немного подкорректировала текст, внесла небольшие изменения и дополнения в плане стилистики и речевых оборотов.
Немного подкорректировала текст, внесла небольшие изменения и дополнения в плане стилистики и речевых оборотов.
стилистика
В плане цветового решения мне хотелось отойти от стандартных ассоциаций с чёрным и белым цветами (клавиши) и от мебельно-коричневых оттенков, в которых была выполнена основная масса клавишных инструментов.
В процессе поиска изображений пришла идея использовать глубокие красно-бордовые оттенки в сочетании с жёлто-золотыми акцентами.
Для соединения атмосферы эстетики классической музыки и современных онлайн возможностей преподавания я подобрала элегантный шрифт для заголовков: классически-вежливый, уверенно-изящный и слегка винтажный, напоминающий шрифты 18−19 вв.
В процессе поиска изображений пришла идея использовать глубокие красно-бордовые оттенки в сочетании с жёлто-золотыми акцентами.
Для соединения атмосферы эстетики классической музыки и современных онлайн возможностей преподавания я подобрала элегантный шрифт для заголовков: классически-вежливый, уверенно-изящный и слегка винтажный, напоминающий шрифты 18−19 вв.
Цветовая палитра
Создать лендинг для записи на онлайн-курс по обучению игре на фортепиано.
Основное условие — уникальный дизайн, выполненный в Zero Block, с настройкой базовой анимации.
Отображение сайта: ПК и мобильная версии.
Основное условие — уникальный дизайн, выполненный в Zero Block, с настройкой базовой анимации.
Отображение сайта: ПК и мобильная версии.
Продумать цветовое решение.
Подобрать шрифты и изображения, подходящие тематике сайта.
Подобрать шрифты и изображения, подходящие тематике сайта.
Придумать подходящее название для курса.
По необходимости отредактировать и исправить текст для сайта.
По необходимости отредактировать и исправить текст для сайта.
Десктопная версия
мобильная версия
описание
технические моменты
Весь дизайн-макет сайта отрисован в Figma.
Сначала была создана десктопная версия (т.е. ПК). На её основе спроектирована мобильная.
Далее произведена вёрстка сайта на Тильда в Zero Block (с адаптацией под 5 разрешений экранов). После чего я настроила базовую анимацию и подключила навигацию внутри сайта.
Сначала была создана десктопная версия (т.е. ПК). На её основе спроектирована мобильная.
Далее произведена вёрстка сайта на Тильда в Zero Block (с адаптацией под 5 разрешений экранов). После чего я настроила базовую анимацию и подключила навигацию внутри сайта.
Прочие технические настройки:
- Подключение и настройка форм приёма заявок записи на курс.
- Подключение кнопок обратной связи (мессенджеры, соцсети, электронная почта).
- Настройка базовой SEO (улучшение индексации сайта поисковыми системами).
- Подключение системы аналитики Яндекс.Метрика.
Если вам нужен сайт, оставьте заявку, и я свяжусь с вами в ближайшее время. Я на связи ежедневно с 02:00 до 15:00 (по мск), кроме воскресенья.
Если у вас другой часовой пояс, вы можете написать мне в удобное для себя время.
Если у вас другой часовой пояс, вы можете написать мне в удобное для себя время.
