Элла Каверина
Личный сайт Мастерской природного проектирования
Инициативный редизайн сайта мастерской природного проектирования. Дизайн, вёрстка, архитектура CMS.
- Дизайн макетов
- Верстка
- Кастомные анимации
- продаж курсов за 3 месяца
- +19
- окупаемость проекта
- 240%
О проекте
Астрагал PRO это мастерская ландшафтного архитектора и преподавателя: авторский метод природного проектирования, проекты озеленения, ландшафтные экспедиции и обучающие курсы. Экспертиза сильная, научная. Сайт её не передавал.
Задача
У эксперта с авторскими курсами было два слабых места:
- сайт на конструкторе выглядел как визуитка и не соответствовал уровню материала;
- каждое изменение, от новой статьи до даты старта курса, упиралось в вёрстку.
Нужен был сайт, который выглядит как профессиональное издание о ландшафте и позволяет автору самой управлять контентом.
Что мы сделали
- Разобрали старый сайт и контент: перенесли все тексты и фотографии, определили, чего не хватает (метод, о себе, блог, галерея).
- Подобрали визуальные референсы среди международных ландшафтных бюро и выделили общее: светлый фон, фото как главный материал, лёгкий гротеск, много воздуха.
- Описали стиль и структуру в виде файлов (токены дизайна и схема блоков), чтобы сайт собирался предсказуемо.
- Сверстали сайт на чистом HTML, CSS и JavaScript, без конструктора, с анимациями и адаптивом.
- Спроектировали панель управления на базе CMS, чтобы статьи, курсы и галерея наполнялись формами.
Решение
- Главный экран: карусель фотографий на весь экран, крупный заголовок, спокойная анимация.
- Обо мне и метод: двухколоночные блоки с подчёркнутой рубрикой и крупным текстом, как в редакционных изданиях.
- Курсы: раскрывающийся список, у каждого курса своя программа, формат и кнопка записи.
- Блог и галерея: список статей и сетка фото с просмотром на весь экран.
- Визуальный язык: монохромный интерфейс, цвет приходит только из фотографий растений. Тонкие линии, круглые кнопки со стрелками, никаких теней и скруглений.
- Контент как данные: все блоки управляются из CMS, дизайн не ломается при любых текстах и фотографиях.
Технологии
HTML, CSS, JavaScript, Directus (CMS), статическая сборка, Node.js. Шрифты с кириллицей, адаптив для телефонов, оптимизация изображений.
Итог
Готовый сайт, где экспертный материал подан так же серьёзно, как он устроен. Автору больше не нужно обращаться к вёрстальщику за каждым изменением.
Студия «9 ярдов», дизайн и разработка.