Interface-Driven Visual Planning
Translating a complex website interaction into production-ready visual assets.
ISOMETRIC ARCHITECTURAL VISUALIZATION / WEBSITE MOTION DESIGN
A building designed to assemble as the page moves.
A five-phase isometric architectural sequence created for a reverse-scroll website, where each section needed to connect into one continuous structure as users moved upward through the page. The work combined architectural visualization, phase planning, motion design, web-asset preparation, and close collaboration with the design team to make the sequence function as part of the interface, not just as a standalone animation.
Project classification: Client Work. Commercial proof: Client Validated Proof.
- Client
- Azimuth Builders
- Role
- Isometric Illustrator and Animator
- Project type
- Five-phase reverse-scroll website sequence
- Year
- 2025
Azimuth Builders was developing a reverse-scroll website experience. As visitors moved upward through the page, five sections would reveal five major stages of construction, progressing from the earliest structural phase to the completed building.
The original visual direction called for a clean, minimal isometric style using white and light-neutral architecture, warm wood accents, glass, and restrained landscaping. Every phase needed to share the same camera logic and footprint so the building could appear to grow continuously from one section to the next.
The most important production requirement became clear during implementation: the five assets had to function as one modular visual system.
That meant solving for more than appearance. The sequence required:
- One continuous building rather than five disconnected structures
- A stable, camera-facing viewpoint
- Consistent width, scale, and base alignment
- Clean top-and-bottom connections between phase sections
- Bottom-to-top construction movement
- No camera zoom that could cut off the building edges
- Matching color and lighting across every phase
- A precise #FCFCFC background for seamless website integration
- Separate assets that the web team could trigger section by section
- A final completed-building state that could remain visible after the last animation
I developed and refined the visual assets from the initial building direction through the final website-ready phase system.
My responsibilities included:
- Isometric architectural illustration
- Construction-phase planning
- Visual continuity across five separate sections
- Camera-angle and composition refinement
- Phase-specific animation development
- Bottom-to-top construction timing
- Background masking and color matching
- High-resolution final rendering
- Iteration from live website tests and Loom feedback
- Coordination with the design and development team during implementation
The first exploration treated the building more like a conventional animated visual. Once the team tested how the sequence needed to work inside the page, the production strategy changed.
The final system moved toward:
- A taller, continuous structure instead of separate building variations.
- A straighter, more camera-facing view that aligned more reliably across sections.
- A fixed camera with no zoom, protecting the building edges against the solid page background.
- Independent phase clips, allowing each section to trigger its own construction movement.
- Consistent #FCFCFC masking, removing visible background shifts between renders.
- A completed-building static state, giving the web team a lighter and more reliable way to show the finished structure at the end of the scroll.
The Five-Phase Visual System
Final aligned phase panels from the website-ready system
All five exact final phase images are the approved aligned panels used to document the five-stage website system. This viewer is a portfolio presentation of those panels, not the original client animation.
Foundation and groundworkThe visual base establishes the footprint and starting point for the sequence.
Foundation and groundwork
The visual base establishes the footprint and starting point for the sequence.
Structural framework
The building begins to rise, revealing the underlying structural logic.
Mid-build
Floors, massing, and facade elements establish the recognizable form of the tower.
Exterior and detailing
Glazing, balconies, wood accents, and landscaping bring the building close to completion.
Completed structure
The final upper volume, rooftop architecture, and planted areas complete the vertical story.
A 25.6-second screen recording documenting the final building progression inside the reverse-scroll website experience, not an individual phase-animation export.
This was an iterative production shaped by direct communication between illustration, motion, design, and web implementation.
The team used:
- Written feedback
- Loom walkthroughs
- Low-resolution animation tests
- Live homepage implementation
- Desktop and mobile checks
- Phase-by-phase approvals
Several decisions were refined only after the assets were tested in context. The process included correcting camera direction, eliminating zoom, improving construction timing, matching color between clips, and masking every render to the confirmed page background.
A visually attractive animation was not enough. The final assets also had to work inside a real webpage.
Key web-production decisions included:
- Delivering separate phase assets instead of one heavy continuous file
- Keeping the frame and building footprint stable
- Matching the website background exactly
- Avoiding unnecessary camera movement
- Testing shorter, lighter approaches before high-resolution rendering
- Using a static completed-building overlay where it offered a more efficient final state
This made the sequence easier for the site team to control while preserving the intended construction narrative.
The completed engagement included:
- Five isometric construction-phase illustrations
- Five phase-specific animation sequences
- High-resolution final renders
- Background-matched and masked versions using #FCFCFC
- Completed-building image assets for the final website state
- Implementation support during homepage testing
The portfolio handoff additionally includes the five exact final phase images and the website walkthrough screen recording so the completed system can be shown accurately.
The final masked phase animations were accepted and added to the homepage implementation. The website team confirmed that the revised sequence worked, then added the completed-building state for the final phase.
The supplied walkthrough documents the final building progression inside the website experience.
No website-performance, conversion, or business-growth result is claimed because none was supplied.
CLIENT FEEDBACK
“Exceptional work - would definitely hire again - very fast and on point.”
Azimuth Builders client
5.0 Upwork Review
The completed engagement received a five-star public review and two client endorsements.
- Committed to Quality
- Reliable
Full review transcript: Exceptional work - would definitely hire again - very fast and on point.
Web-Native Motion Design
Designing animation for interface behavior rather than standalone playback.
Modular Visual Continuity
Maintaining continuity across independently triggered sections.
Technical Visual Refinement
Solving camera, alignment, timing, color, and background issues through iteration.
Collaborative Implementation
Working directly with a design and development team.
Responsive Creative Revision
Responding quickly to detailed feedback without losing the visual direction.
I can help turn an early concept into a structured visual system - from style frames and phase planning through motion, revision, and web-ready delivery.