О клиенте и задачах
1/6
Астролог Лилия Гаевая — основатель школы адекватной астрологии с огромным опытом, клиентами в лице селебрити и успешных блогеров.
Ко мне обратился профессиональный астролог для разработки корпоративного сайта своей онлайн-школы астрологии.
Школа основана практикующим астрологом с 10+ лет опытом, автором книг, создателем МАК-карт и аудиторией 500 000+ аудиторией в социальных сетях.
Школа существует более 6 лет и предлагает: базовые и продвинутые курсы по западной астрологии; курсы по специальным направлениям: синастрия, хорарная астрология; авторские вебинары и практики; рекламирует свои книги и МАК-карты.
Особенность продвижения школы: продвижение строится на личном бренде основателя. Аудитория приходит через соц сети прежде всего к эксперту, а не к абстрактной школе. Поэтому сайт должен:
Цели сайта
Школа основана практикующим астрологом с 10+ лет опытом, автором книг, создателем МАК-карт и аудиторией 500 000+ аудиторией в социальных сетях.
Школа существует более 6 лет и предлагает: базовые и продвинутые курсы по западной астрологии; курсы по специальным направлениям: синастрия, хорарная астрология; авторские вебинары и практики; рекламирует свои книги и МАК-карты.
Особенность продвижения школы: продвижение строится на личном бренде основателя. Аудитория приходит через соц сети прежде всего к эксперту, а не к абстрактной школе. Поэтому сайт должен:
- убедительно демонстрировать эксперта;
- раскрывать философию и подход основателя школы;
- вызывать доверие;
- мягко вести посетителя от знакомства к покупке.
Цели сайта
- Имиджевая: сформировать образ школы как авторитетного центра астрологии.
- Коммерческая: принимать заявки и платежи за курсы/вебинары/гайды.
- Образовательная: знакомить с адекватным и профессиональным подходом школы без мистики и гадания.
- Коммуникационная: собирать контакты для рекламной рассылки.
Концепция
2/6
Концепция сайта — это набор идей, принципов и подходов, определяющих структуру, функциональность и внешний вид веб‑ресурса, включая его цели, целевую аудиторию и стратегию продвижения.
В основе дизайна — гармония контрастов: мистическая эстетика сочетается с чёткой структурой и функциональностью.
Цветовая палитра
Построена на оттенках фиолетового — от глубокого космического до мягкого и светлого. Фиолетовый символизирует: интуицию и духовность; мудрость и познание; таинственность астрологии.
Типографика
Выбран основательный, солидный шрифт без засечек для заголовков. Это:
Для декоративных элементов были взяты круги, как отсылка на округлость планет. А также символика планет, солнечной системы и созвездий.
Изображения стилизованы все в единой космической и эзотерической тематикой в фиолетовых оттенках.
Тон официальный, без фамильярностей, но без сложной терминологии, от третьего лица.
Цветовая палитра
Построена на оттенках фиолетового — от глубокого космического до мягкого и светлого. Фиолетовый символизирует: интуицию и духовность; мудрость и познание; таинственность астрологии.
Типографика
Выбран основательный, солидный шрифт без засечек для заголовков. Это:
- подчёркивает экспертность школы;
- создаёт ощущение основательности и надёжности;
- хорошо и удобно выглядит.
Для декоративных элементов были взяты круги, как отсылка на округлость планет. А также символика планет, солнечной системы и созвездий.
Изображения стилизованы все в единой космической и эзотерической тематикой в фиолетовых оттенках.
Тон официальный, без фамильярностей, но без сложной терминологии, от третьего лица.
Прототип
3/6
Прототип — это первичный вид сайта, целью которого является проработка структуры сайта, навигации, кнопок, заголовков и описаний без дизайна. То есть это черно-белый вид сайта без каких-либо визуальных решений, только текст и структура.
На сайте планировалось много страниц, поэтому была составлена карта сайта, где отражены были все переходы и размеры внутри сайта.
Особое внимание было уделено главной странице, ее структуре, наполнению и текстам.
Важно было отразить все платные и бесплатные продукты. Рассказать о регалиях школы и основателе. А также включить базовые разделы: контакты, статьи, отзывы.
На первом экране главной странице крупным планом показан основатель школы, так как продвижение школы строиться на личном бренде эксперта и название школы, а также указаны три основанных направления.
Остальные разделы, указанные на странице:
Было отдельно уделено внимание для каждой внутренней страницы сайта: от страницы для презентации курса до страницы с контактами.
В итоге на сайте получилось более 15 страниц. Каждая прорабатывалась с отдельным вниманием к деталям и для каждой были предприняты индивидуальными решения.
Важно было отразить все платные и бесплатные продукты. Рассказать о регалиях школы и основателе. А также включить базовые разделы: контакты, статьи, отзывы.
На первом экране главной странице крупным планом показан основатель школы, так как продвижение школы строиться на личном бренде эксперта и название школы, а также указаны три основанных направления.
Остальные разделы, указанные на странице:
- Перечень всех курсов, гайдов, практик;
- Книги и другие товары
- Лид-магнит
- Отзывы
- Актуальность астрологии
- Об основателе
- О выпускниках школы
- Статьи
- Контакты
Было отдельно уделено внимание для каждой внутренней страницы сайта: от страницы для презентации курса до страницы с контактами.
В итоге на сайте получилось более 15 страниц. Каждая прорабатывалась с отдельным вниманием к деталям и для каждой были предприняты индивидуальными решения.
Дизайн-макет
4/6
Дизайн-макет — это файл, который имеет вид завершённого сайта со всеми кнопками, текстами, цветами, изображениями и т.д.
На основе ранее утверждённой дизайн-концепции и проработанного прототипа создаётся дизайн-макет всего сайта.
Я предложила использовать минималистичный черно-белый стиль с акцентным цветом для передачи надежности и серьезного подхода к своего дела.
Шрифт для заголовков взяли широкий, рубленный, но читаемый, как олицетворение устойчивости и чего-то тяжеловесного как сама спецтехника.
Я предложила использовать минималистичный черно-белый стиль с акцентным цветом для передачи надежности и серьезного подхода к своего дела.
Шрифт для заголовков взяли широкий, рубленный, но читаемый, как олицетворение устойчивости и чего-то тяжеловесного как сама спецтехника.
При разработке дизайн-макеты заголовки и тексты были выровнены по левой стороне для официального тона, так как заказчик хотел показать официальный подход школы. В целом была использована устойчивая и привычная композиция как внутри блоков, так и на всем сайте. Для дополнительных вау-эффектов была добавлена анимация с картами для интерактива с пользователями.
Верстка
5/6
Верста сайта на Tilda — это создание и оформление веб‑страницы с помощью визуального редактора платформы Tilda, без необходимости писать код.
Заказчик безоговорочно был согласен на тильду, так как в прошлом уже имел опыт работы с тильдой, и она полностью удовлетворила все его требования.
Технические решения:
Технические решения:
- CMS: Верстка на Tilda;
- Платёжные системы: интеграция с Геткурс;
- CRM: синхронизация заявок с Геткурс;
- SEO: ключевые слова в заголовках и текстах;
- Адаптивность: мобильная версия с упрощённой навигацией (бургер‑меню, крупные кнопки);
- Микроинтеракции: плавные ховеры на карточках, анимация загрузки страниц.
Адаптивы
6/6
Адаптивные версии сайта — это дизайн веб‑страницы, который автоматически подстраивается под размер, разрешение и ориентацию экрана устройства пользователя.
Особое внимание уделила мобильной версии. Сейчас ведь большинство пользователей заходят на сайты через телефоны, поэтому мобильная версия была ключевым моментом.
А также, конечно же, были сделаны адаптивы для планшетов. Я всегда тщательно прорабатываю все самые популярные разрешения экранов устройств.
А также, конечно же, были сделаны адаптивы для планшетов. Я всегда тщательно прорабатываю все самые популярные разрешения экранов устройств.
Таким образом, сайт стал полноценным представителем личного бренда основателя:
- Визуально передаёт экспертность и атмосферу школы;
- Упрощает путь клиента от знакомства до покупки;
- Снижает нагрузку на поддержку за счёт автоматизации записей и платежей.
Портфолио
Смотреть Другие мои дизайн-работы