Кейс: Разработка сайта inwave-project.ru

О проекте

InWave — архитектурное бюро, которое создает 3D-концепции, архитектурные проекты и дизайн для частных и коммерческих объектов. Задача — сделать легкий, “живой” сайт, где посетитель быстро поймет философию студии, познакомится с услугами и портфолио.

Инструменты и методология

• PHP + WordPress — ядро и CMS: лёгкое наполнение разделов “Услуги”, “О студии”; кастомные типы записей для проектов. 
• Figma — прототипы и финальные макеты: адаптивный дизайн, четкая типографика, крупные фотографии реализованных объектов. 
• Agile + Redmine — спринты по 1–2 недели; планирование задач (верстка, интеграции, наполнение) прямо в Redmine; еженедельные короткие встречи для синхронизации. 
• CI/CD (GitLab CI) — автоматическая публикация новых релизов в staging и production-окружения при каждом обновлении кода. 

Основные этапы

1. Сбор требований и прототипирование 
   • Интервью с командой InWave: ключевые разделы — “Философия”, “Наши услуги”, “Контакты”. 
   • В Figma сделали кликабельный прототип главной страницы: 
     • “Философия”: чёрный фон с цитатой о движении и творческом процессе. 
     • “Наши услуги”: карточки “3D-концепции”, “Архитектура”, “Дизайн для частной жизни” с крупными иллюстрациями. 
   • Согласовали стиль — минимализм + акцент на фото готовых проектов. 
2. Дизайн и верстка 
   • В Figma финализировали визуал: 
     • Строгая белая шапка с логотипом и меню. 
     • Секция “Наши услуги” в три колонки: карточки с рамкой и без лишних украшений. 
     • “Философия” на черном фоне с контрастным текстом и фото-иллюстрацией справа. 
   • Верстка (HTML5/CSS3, BEM, SASS): 
     • Адаптивная сетка — от трёх колонок на десктопе до одной на смартфоне.
        
     • Плавные CSS-переходы для появления карточек при загрузке страницы. 
3. Интеграция и функционал на WordPress 
   • Создали дочернюю тему на базе Gutenberg-готового шаблона:
      
   • Настроили SEO-плагины (Yoast SEO), автозагрузку картинок и “ленивую” подгрузку (lazy-loading). 
   • Подключили форму “Заказать проект” через WP-плагин с валидацией и отправкой в почту менеджера. 
4. CI/CD и тестирование 
   • Настроили CI: при пуше в develop автоматически прогоняется линтинг CSS/JS, билдятся стили, и билд деплоится в тестовый стенд. 
   • QA-тест: проверили адаптивность (iPhone, Android-планшеты), работоспособность форм, корректное отображение секций “О студии”и “Наши услуги” в разных браузерах. 
   • После успешного тестирования одним кликом через GitLab CI провели релиз в продакшен. 
5. Наполнение контента и запуск 
   • Загрузили в WordPress: 
     • Тексты из раздела “Философия” (цитата о движении, абзац о процессе работы InWave). 
     • Перечень услуг с фото-примерами: “3D-концепции”, “Архитектура”, “Дизайн для частной жизни”.
        
   • Настроили гугл-аналитику, карту Яндекс/Google Maps на странице “Контакты” и подключили SMTP для надежной доставки заявок. 

Результаты

• Яркий и “говорящий” сайт: посетитель сразу видит философию бюро и основные направления работы. 
• Простота управления: команда InWave самостоятельно добавляет новые услуги и проекты без разработчиков. 
• Быстрый отклик: благодаря CI/CD-процессу и Agile-методологии новые правки выходят в продакшен за считанные часы. 
• Увеличение заявок: за первую неделю после запуска конверсия “Заказать проект” выросла на 40%. 

Почему получилось живо и интересно?
Мы оставили минимум “текста-воды”, сделали акцент на крупной визуализации работ InWave и четко структурировали информацию о философии и услугах. Комбинация Figma, PHP/WordPress, Agile и CI/CD позволила быстро реагировать на правки и держать проект в тонусе.