“Create a sophisticated, visually striking website for a fictional architecture and interior design studio called FORMA.”
Read the full website brief
Create a sophisticated, visually striking website for a fictional architecture and interior design studio called FORMA.
This is a fictional brand created for a website builder showcase. Do not reference any real companies, architects, addresses, projects, clients, awards, or testimonials.
The website should feel like a high-end independent architecture studio with an extremely polished visual identity. Think contemporary editorial design, minimalist architecture magazines, refined typography, and beautiful architectural photography.
The goal is to create something visually memorable, not a conventional corporate architecture website.
BRAND IDENTITY
Brand name: FORMA
Tagline: "Spaces that stay with you."
FORMA is a fictional independent architecture and interiors studio creating residential, hospitality, and commercial spaces. Its design philosophy focuses on material honesty, natural light, thoughtful proportions, and timeless architecture.
The brand should feel confident, artistic, restrained, and expensive.
PAGES
1. Home
2. Selected Works / Projects
VISUAL DIRECTION
Use a warm architectural palette:
- Background: soft warm ivory (#F5F3EF)
- Primary text: charcoal black (#252420)
- Secondary: warm gray (#77736E)
- Accent: muted clay (#AA8067)
- Occasional dark sections: near-black (#1D1D1B)
Typography:
- Large elegant editorial serif headlines
- Minimalist sans-serif body text
- Small uppercase navigation with generous letter spacing
- Oversized project numbers and editorial captions
Layout:
- Generous negative space
- Strong architectural grid
- Carefully controlled asymmetry
- Large edge-to-edge photography
- Unconventional image proportions
- Alternating image and text compositions
- Thin separators rather than heavy borders
- No generic SaaS cards, gradients, glassmorphism, or excessive rounded corners
Visual references should feel inspired by independent design studios and premium architecture publications, but don't reproduce any existing website.
Use stunning architectural imagery: contemporary villas, concrete structures, sculptural staircases, minimalist living rooms, brutalist architecture, warm timber interiors, soft sunlight, natural stone and dramatic shadows.
IMPORTANT: use imagery that is coherent with each fictional project. A project should feel like one real building with consistent materials and architecture.
HOME PAGE
1. HEADER
Create a minimal navigation with:
FORMA wordmark on the left
Studio
Projects
Approach
Journal
Contact
On desktop, keep navigation spacious and editorial. Add an understated "Start a project" link on the right.
2. HERO
The hero should be visually extraordinary.
Use a large architectural photograph featuring a sculptural contemporary residence with dramatic sunlight and minimal landscaping.
Headline:
"Architecture for the way we live."
Below it, a smaller introduction:
"FORMA is an independent architecture and interiors practice creating thoughtful spaces shaped by light, material, and human experience."
Include a small "Explore our work" text link with a subtle arrow.
The hero layout should be asymmetrical and editorial. Avoid placing every element in the center. Consider a split composition with enormous typography and photography extending toward the right edge.
Include small details like "Independent design studio / Est. 2018" but make all details fictional.
3. INTRODUCTION
Create an oversized typography section:
"We believe good spaces aren't simply seen. They're felt."
Follow with two short paragraphs about FORMAs design process, relationship with materials and approach to architecture.
Use lots of whitespace, an asymmetric layout, and a subtle horizontal line.
4. SELECTED WORKS
This should be the visual centerpiece of the website.
Show five fictional architecture projects:
01 / The Still House
A minimal residential retreat defined by warm concrete, uninterrupted lines, and light-filled interiors.
02 / Villa Sora
A contemporary coastal residence with natural stone, sculptural geometry, and ocean views.
03 / Atelier No. 04
An intimate creative studio with exposed timber, soft daylight, and considered workspaces.
04 / The Courtyard Residence
A modern private residence organized around a tranquil central courtyard.
05 / Monolith House
A striking hillside dwelling blending dark materials and expressive structural forms.
Each project should have:
- Large editorial architecture photography
- Project number
- Project title
- Category (Residential, Hospitality, Commercial)
- Fictional year
- A short caption
- View project link
Avoid placing all projects in identical cards. Use an asymmetrical editorial grid with alternating image sizes and compositions.
One project could span the full width. Others can be arranged in two columns with intentional offsets.
Add restrained hover effects, subtle image zooms, and tasteful transitions.
5. PHILOSOPHY
Create a dark charcoal section for visual contrast.
Headline:
"Less, but infinitely more."
Three editorial principles:
- Material honesty
- Intentional living
- Enduring design
Use short descriptions, large numbering, minimal linework, and subtle visual details.
6. FEATURED PROJECT
Highlight The Still House in an immersive, full-width section featuring a large architectural photograph.
Overlay a subtle title:
"The Still House / A study in quiet living."
Include a View project link.
7. STUDIO SECTION
Introduce the fictional team and approach.
Headline:
"An independent perspective on space."
Add editorial studio imagery such as architectural models, material samples, drafting tables, and a beautifully composed design workspace.
Keep the writing concise, thoughtful, and authentic.
8. JOURNAL PREVIEW
Show three fictional editorial articles:
- The beauty of imperfect materials
- On designing with natural light
- Spaces for slower living
Use a stylish editorial grid with photography and dates.
9. CONTACT CTA
Create a striking, minimal closing section.
Headline:
"Let's create something lasting."
Supporting text:
"Every meaningful space begins with a conversation."
CTA:
"Start a conversation"
No real contact details. Use a placeholder contact form or example-only interaction.
10. FOOTER
Large FORMA wordmark
Navigation links
Fictional copyright
Subtle "Architecture & Interiors" text
SECOND PAGE: SELECTED WORKS
1. Hero
Large editorial heading:
"Selected works."
Short supporting copy:
"A collection of spaces shaped by context, character, and intention."
2. Project filter
Minimal text-based filters:
All / Residential / Commercial / Hospitality
3. Portfolio grid
Display the five fictional projects with beautiful imagery, editorial typography, categories, and descriptions.
Use varied image sizes and a premium magazine-style layout.
4. Project detail experiences
If supported, clicking a project should reveal additional content or a detail section including:
- Project title
- Category
- Fictional year
- Design brief
- Concept narrative
- Multiple coordinated photographs
- Material palette
- Architectural philosophy
5. Closing CTA
"Have a space in mind?"
"Let's talk about what it could become."
Include a link back to the main page or contact section.
RESPONSIVE DESIGN
Mobile should feel as intentional as desktop.
Use strong typography scaling, carefully cropped architecture photographs, balanced whitespace, and intuitive navigation.
Animations should be subtle: gentle fade-ins, soft image reveals, and restrained transitions.
AVOID
- Generic corporate architecture aesthetics
- Fake real-world awards or customer endorsements
- Overly colorful sections
- Rounded SaaS-style cards
- Excessive gradients
- Stock-looking office meeting photographs
- Long paragraphs
- Repetitive layouts
- Too many decorative icons
- Unrelated photographs for the same project
FINAL QUALITY STANDARD
The finished site should look like a premium boutique architecture practice that a professional design agency would proudly feature in its portfolio.
Prioritize visual composition, typography, beautiful imagery, and intentional spacing over sheer quantity of sections.
This is a website for Blockora, so every project, person, business detail, and interaction must be clearly fictional or illustrative.
