О Förskolan Spiggen
Förskolan Spiggen — частный семейный детский сад в Nacka, пригороде Стокгольма. Маленький, fristående (независимый, негосударственный), с акцентом на природе: лес, море, движение на свежем воздухе — основные принципы работы с детьми. Главное преимущество — атмосфера, где «все знают всех», большое для родителей, маленькое для ребёнка.
Аудитория сайта — родители маленьких детей в районе Nacka, которые рассматривают частные детские сады для своего ребёнка. Решение о выборе сада принимается тщательно, и сайт должен передать атмосферу и подход, не только информацию.
Что было нужно
Стартующему частному детскому саду нужен был полноценный запуск с нуля: дизайн бренда, разработка сайта, контентная структура.
Задачи проекта:
- Логотип и фирменная айдентика — отражающие природный, тёплый, семейный характер детского сада
- Дизайн сайта в Figma — соответствующий бренду, простой и доступный для родителей
- Кастомная тема WordPress под этот дизайн без page builders
- 100% Gutenberg — чтобы команда детского сада могла самостоятельно вести контент: добавлять новости, обновлять страницы тематических направлений
- Формы для запроса места — самый важный конверсионный элемент. Через них родители обращаются с заявкой на запись ребёнка
- Идеальная скорость загрузки — для маленьких сайтов это особенно важно, потому что родители просматривают несколько садов подряд, и медленный сайт сразу теряет посетителя
- Локализация на шведский — основной язык аудитории
Как я подошёл к работе
Дизайн бренда и сайта — от команды
Дизайнер моей команды сделал полный визуальный пакет:
- Логотип Spiggen — простой, узнаваемый, отражающий тёплый и природный характер сада
- Фирменную айдентику: палитру (естественные природные тона), типографику, иконки разделов, графические элементы
- Дизайн сайта в Figma — на основе айдентики
Когда дизайн и разработка идут от одной команды — клиент получает целостный результат без рассинхронов. Дизайнер знает технические ограничения, разработчик не «реализует чужую фантазию», а понимает архитектурные решения с самого начала.
Pixel-perfect вёрстка по Figma
Передача дизайна от макета к коду — критичная фаза. Здесь не «примерно по макету», а pixel-perfect: типографика, отступы, поведение на разных разрешениях, состояния hover и focus, плавность переходов. Всё точно соответствует Figma.
Это даёт два эффекта. Первый — клиент получает ровно то, что согласовал. Второй — финальный результат выглядит профессионально, а не „почти как в макете».
100% Gutenberg
Архитектурное решение, которое стало стандартом моих проектов 2025-2026 годов. Весь сайт собран на нативных Gutenberg-блоках без page builders.
Что это даёт детскому саду:
- Воспитатели и администраторы могут самостоятельно обновлять контент через стандартный редактор WordPress, который освоят за час
- Никаких сторонних редакторов с лицензиями и тормозами
- Скорость загрузки не страдает от тяжёлой инфраструктуры page builders
- Архитектура переживёт несколько обновлений WordPress без поломок
Под капотом — собственные блоки для всех ключевых секций: Hero, тематические направления (Skog/Lärande/Rörelseglädje/Trygghet), описательные блоки, контактные формы.
Идеальный PageSpeed: 100 desktop, 100 mobile
Это самое сильное техническое достижение в проекте. PageSpeed 100/100 в продакшене — крайне редкое явление, обычно недостижимое для контентных сайтов с изображениями.
Что сделано для этих показателей:
- WebP изображения для всего визуального контента с правильным fallback для старых браузеров
- Lazy loading для всего, что не на первом экране
- Минификация и объединение CSS/JS на уровне темы, не плагином
- Critical CSS инлайнится в
<head>— первый экран рендерится мгновенно - WP Rocket для серверного кэширования
- Удалены все лишние скрипты WordPress по умолчанию (emoji, oEmbed, RSD link и т.д.)
- Оптимизированные шрифты — только используемые начертания, preload для critical
- Web fonts через
font-display: swap— текст виден сразу, без FOIT - Изображения с правильными размерами в HTML атрибутах width/height — без CLS
Никакого «волшебного плагина» — это десяток мелких правильных решений, накладывающихся одно на другое. Результат — 100/100.
Contact Form 7 для заявок
Главный конверсионный элемент сайта — форма «Записаться на просмотр / запросить место». Реализована через Contact Form 7 с минимальными полями (имя, телефон, email, сообщение) — для частного детского сада с небольшим потоком заявок этого достаточно. Никаких сложных интеграций с CRM — заявки приходят на email администратору.
Контент-менеджмент
Помимо разработки, в проект вошло наполнение сайта контентом — структурирование информации, написание/адаптация текстов, размещение изображений в правильных разделах. Это не «дополнительная услуга», а часть запуска проекта: сайт должен быть готов к работе с первого дня, а не пустая оболочка ожидающая контента.
Что получилось
Сайт работает в продакшене с [МЕСЯЦА/ГОДА — уточнить]. PageSpeed стабильно держится на 100/98 — мы оптимизировали так, чтобы показатели не падали со временем (типичная проблема многих сайтов).
Förskolan Spiggen самостоятельно ведёт сайт через Gutenberg — добавляет новости, обновляет тематические страницы, ведёт связь с родителями. Заявки на запись детей приходят через Contact Form 7 без потерь.
