Iman Syed
All case studies

Form & Found Studio

A five-page WordPress site for a fictional Toronto interior design studio, taken from paper sketches to a live build.

Problem
The studio is found on Instagram, but clients can't see its services, process or how to get started.
Solution
A five-page website that shows the work, explains each service and ends in a consultation form.
Role
UX/UI designer & WordPress developer (solo)
Tools
Figma, WordPress, Elementor
Timeline
Nov 2026

Brief

A self-initiated project, built around a fictional client.

Form & Found Studio

To practice designing and building a complete website, I worked from a realistic brief for a fictional client: Form & Found, a boutique interior design studio in Toronto.

The studio gets clients through Instagram and referrals, but people can’t find what it offers, how it works or how to start. It needed a site that builds trust, shows its projects, explains each service and turns visitors into consultation inquiries.

Who it’s for

  • Young homeowners

    Furnishing a first home and researching studios online before they reach out.

  • Condo owners and renters

    Making a small space work, with practical layout advice and flexible consultations.

  • Property investors

    Getting properties market-ready through staging and well-coordinated projects.

Sketch

Five pages on paper, and how they connect.

Mapping the site by hand

I started in my sketchbook, blocking out Home, Our Work, About, Services and Contact. Arrows map how the navigation and footer link every page, so a visitor can reach the projects, services or quote form from anywhere.

The home page previews each part of the site, while Our Work gets filter tabs so people can browse by service.

Wireframes

Testing layout and type in Figma before building.

Layout first, then type

In Figma I turned each sketch into a full desktop wireframe with placeholder images and text, so I could focus on layout, hierarchy and spacing.

I also added a project detail page, giving each project a brief, the approach, a before-and-after slider and a client quote.

  • Ivory#F3F0E9
  • Sand#D8CBB9
  • Taupe#A58F78
  • Walnut#55483D
  • Charcoal#292825

Spaces designed around the way you live.

Cormorant Garamond · headings

Warm, functional interiors for first homes, condos and everything in between.

DM Sans · body and labels

From wireframe to website

Pick a page, then switch between my wireframe and the final site to compare them. On the final site, the Our Work filter tabs and the project page’s before-and-after slider both work.

Home page wireframe: full-screen hero, studio introduction, four service cards on a dark band, featured projects and a quote call to action

Scroll inside the frame to see the whole page.

Build

Built in WordPress, so the studio can update it without code.

  • Projects as posts

    Each project is a WordPress post with a category, so a new project appears in the filterable Our Work grid without editing the page.

  • One clear inquiry form

    Built with Fluent Forms: name, contact details, budget, property type and service, with required fields marked.

  • A shared style

    The Astra theme and Elementor layouts share one set of colours and fonts across all five pages and the project pages.

  • Set up for search

    Each page has its own search title and description, set up with Yoast SEO.

Learning outcomes

  • Sketch the connections, not just the pages

    Drawing how the navigation and footer link every page made the sitemap clear before I opened Figma.

  • Settle type and spacing early

    Deciding the type pairing, scale and spacing in the wireframes gave every page the same rhythm once I built it.