Wireframe Prototype Review
Current Site ↗ Design Phase
Website Redesign

Reimagining Ideal Fitouts
for the Digital Age

A complete website redesign — from strategy through execution-ready wireframes. Browse each page prototype below to explore the proposed structure, layout, and experience.

10
Pages
45+
Sections
3
Breakpoints
1
Design System
Scroll to explore
Client
Ideal Fitouts LLC — Premium interior fit-out, Dubai, UAE
Objective
Transform from template-driven site to a premium portfolio-first digital presence
Target Audience
Retail brands, real estate developers, and commercial clients across the UAE
Design Direction
Apple-inspired minimalism with editorial typography and cinematic imagery

Every page, designed with purpose

Click any page to view the full interactive wireframe with scroll animations, section annotations, and responsive behavior.
02
About Us
Brand Story & Team

The founder narrative — connecting five decades of Ideal Group's engineering legacy to today's design-led fit-out practice. Editorial team portraits, pull-quote from leadership, vision/mission, and heritage statistics.

HeroStory NarrativeVision & MissionTeam GridLegacy StatsCTA
View
03
Portfolio — Work
Project Showcase Hub

The heart of the site. A filterable asymmetric masonry grid — featured projects at double scale, sector filters for Retail, Office, Residential, F&B, and Hospitality let prospects find relevant work instantly.

Minimal HeroFilter BarMasonry GridCTA Strip
View
04
Project Detail
Case Study Template

Transforms projects from gallery dumps into stories. Full-viewport hero, three-act narrative (Brief → Challenge → Approach), mixed-layout gallery, technical specs, and seamless next/previous project navigation.

Full-Bleed Hero3-Part NarrativeMixed GallerySpecs GridNext/Prev Nav
View
05
Services
Template for 3 Service Pages

A unified template serving Interior Design, Fabrication, and Turnkey Solutions. Each gets its own hero, detailed scope checklist, filtered project showcase, and value propositions. Tab navigation between services.

Service TabsHero + CTAScope ChecklistFeatured ProjectsWhy Choose
View
06
Process
Client Journey Visualization

Replaces the typical 4-icon static layout with an immersive scroll-driven timeline. Each phase — Direction, Design, Value, Delivery — gets its own section with deliverables and estimates. Ends with an interactive FAQ.

Typographic HeroPhase 1–4 TimelineFAQ AccordionCTA
View
07
Bespoke Products
Custom Fabrication Showcase

Highlights Ideal's unique advantage — in-house fabrication. A macro-detail hero celebrates craftsmanship, followed by a filterable product gallery: Custom Furniture, Joinery, Feature Walls, Display Units, and Reception Desks.

Craft HeroCategory FiltersProduct GalleryCTA Strip
View
08
Insights
News & Thought Leadership

Rebranded from "News" to "Insights" — signaling expertise over press releases. Editorial grid with featured article prominence. Category filters: Project News, Industry Insights, Company Updates. Supports SEO strategy.

Editorial HeroCategory FiltersFeatured ArticleArticle Grid
View
09
Contact
Conversion & Booking

The most strategically important page. Redesigned from a generic form to a 5-step consultation booking experience (project type, stage, budget, details, calendar). Expectation-setting copy creates a premium concierge feel.

Split HeroProject Type SelectorBudget & StageCalendar BookingContact Bar + Map
View
10
Careers
Recruitment & Culture

Positions Ideal as a destination employer. Team-focused hero, expandable accordion job listings with apply buttons, culture section highlighting Craft, Growth, Collaboration, and Creativity. General application pathway included.

Team HeroJob ListingsCulture ValuesTeam Photo
View

Visual Identity & Components

Every color, font, button, card, and interaction pattern used across all 10 wireframe pages — live and interactive.

Color Palette
5 core colors — inspired by luxury interior materials
Deep Charcoal
#1A1A1A
Warm White
#F7F5F2
Brushed Gold
#C4A35A
Cool Gray
#8A8A8A
Soft Taupe
#E8E2DA
Typography Scale
Cormorant Garamond (headlines) + DM Sans (body/UI)
Display Hero
Cormorant Garamond
72px / 400
Hero headlines
Section Heading
Cormorant Garamond
52px / 400
Section titles
Card Title
Cormorant Garamond
22px / 600
Card headings
"Testimonial Quote"
Cormorant Garamond
28px / Italic
Quotes, pull-quotes
SECTION LABEL
DM Sans
11px / 500 / +3px
Section markers
Body text for descriptions and narratives throughout the site
DM Sans
16px / 300
Body copy
BUTTON LABEL
DM Sans
13px / 600 / +2px
CTA buttons
Buttons
Hover each button to see interaction state
Primary CTA
Secondary
Outline
Ghost (on dark)
Text Link
Navigation
Two variants — light background and dark/transparent
Light variant
Dark variant
Cards
Hover to see lift, zoom, and overlay effects
[ Project Image ]
Retail
Taqado Mexican Kitchen
PROJECT CARD
Image overlay with zoom + gradient reveal
[ Service Image ]
Turnkey Solutions
End-to-end fit-out from design through delivery
SERVICE CARD
50+
Projects Delivered
500K+
Sq. Ft. Fitted
STATISTICS CARDS
Counter animation on scroll entry
Filter Pills
Click to toggle — used on Portfolio, Bespoke, and Insights pages
Form Elements
Contact page uses visual selectors + underline inputs
PROJECT TYPE SELECTOR
🏪Retail
🏢Office
🏠Residential
🍽️F&B
TEXT INPUTS
Hover & Interaction Effects
Hover each box to preview the interaction pattern
View Project →
Image zoom + darken + text reveal
Explore →
Scale 1.06x + overlay + gold border
Next Project →
Parallax zoom + content fade-up
Spacing Scale & Grid
12-column grid · 80px gutters · 60px margins
XS
8px
SM
16px
MD
24px
LG
40px
XL
60px
2XL
80px
3XL
120px
1
2
3
4
5
6
7
8
9
10
11
12
12-column grid at 1440px · Content rarely spans more than 8 columns · 80px gutters · 60px side margins