About the Project
InWave is an architectural bureau that creates 3D concepts, architectural designs, and interiors for private and commercial spaces. The goal was to build a lightweight, “living” website where visitors could instantly grasp the studio’s philosophy, explore its services, and browse the portfolio.
Tools & Methodology
- PHP + WordPress — core and CMS: easy content management for “Services” and “About” sections, with custom post types for projects.
- Figma — wireframes and final layouts: responsive design, clean typography, and large-format photos of completed works.
- Agile + Redmine — 1–2 week sprints; task planning (layout, integrations, content) directly in Redmine; weekly short sync meetings.
- CI/CD (GitLab CI) — automatic deployment to staging and production environments with every code update.
Key Stages
Requirements Gathering & Prototyping
- Interviewed the InWave team to identify key sections: “Philosophy,” “Our Services,” and “Contact.”
- Built a clickable homepage prototype in Figma:
- “Philosophy”: black background with a quote on movement and the creative process.
- “Our Services”: cards for “3D Concepts,” “Architecture,” and “Private Design” with large illustrations.
- Finalized a minimalistic visual style with a strong focus on completed project photography.
Design & Layout
- Final visual design in Figma:
- Clean white header with logo and navigation menu.
- “Our Services” section in three columns with outlined cards and no visual clutter.
- “Philosophy” section on a black background with contrasting text and a photo illustration on the right.
- HTML5/CSS3 layout using BEM and SASS:
- Responsive grid: from three columns on desktop to a single column on mobile.
- Smooth CSS transitions for card fade-in on page load.
WordPress Integration & Functionality
- Created a child theme based on a Gutenberg-ready template.
- Installed and configured:
- SEO plugins (Yoast SEO),
- Auto image optimization and lazy-loading.
- Integrated a “Request a Project” form using a WP plugin with validation and email delivery to the manager.
CI/CD & Testing
- CI setup: on push to develop branch, CSS/JS linting runs, styles are built, and the build is deployed to staging.
- QA testing:
- Checked responsiveness on iPhones and Android tablets,
- Verified forms,
- Ensured correct rendering of “About” and “Services” sections across browsers.
- After successful testing, the production release was triggered via one-click deployment using GitLab CI.
Content Upload & Launch
- Uploaded to WordPress:
- “Philosophy” content: movement quote and a paragraph describing InWave’s workflow.
- Service list with photo examples: “3D Concepts,” “Architecture,” “Private Design.”
- Configured Google Analytics, integrated Yandex/Google Maps on the “Contact” page, and set up SMTP for reliable form delivery.
Results
- Vivid and communicative website: Visitors immediately understand the bureau’s philosophy and areas of expertise.
- Simple content management: The InWave team independently adds new services and projects without needing developers.
- Fast turnaround: Thanks to CI/CD and Agile methodology, updates go live in just a few hours.
- More leads: In the first week after launch, “Request a Project” conversion grew by 40%.
Why Does It Feel Alive and Engaging?
We eliminated unnecessary fluff, emphasized large-scale visuals of InWave’s work, and clearly structured content around philosophy and services. The combination of Figma, PHP/WordPress, Agile, and CI/CD allowed for fast iterations and kept the project dynamic.
