🏗️/Dwellist

Designing a Digital Identity for an Architecture Firm

Dwellist was created to showcase architectural work through a visually engaging and responsive website, helping the firm present its projects, services, and brand with clarity and professionalism.

RoleProduct Designer & Developer
Duration3 Weeks
TypeFramer CMS
FocusWeb Design • CMS • SEO
Walkthrough
[01 / 04]

Designing for Dwellist

The goal was to create a premium, responsive website that communicated trust, showcased projects effectively, and could be easily maintained without developer support.

Visual Strategy Map
🌐Existing WebsiteOutdated legacy portal
🎨MoodboardMinimalist & earth tones
✨Brand InspirationPremium editorial style
🏠Final HomepageCMS-integrated portal
Design Principle
"Architecture is visual. The website needed to communicate quality before visitors read a single word."
[02 / 04]

Visual Development Process

Rather than handing designs to developers, I translated the experience directly into a responsive website using Framer's visual development tools.

This allowed faster iterations, responsive layouts, and complete control over the final user experience.

Framer Development Workflow
🔍
DiscoveryDefine project requirements and design objectives
01
📁
Information ArchitectureMap website structure and content relationships
02
📐
WireframesCreate structural layouts and key user journeys
03
🎨
UI DesignDesign high-fidelity user interface and visual assets
04
⚡
Framer DevelopmentBuild interactive layouts and CMS schemas directly in Framer
05
📱
Responsive OptimizationConfigure breakpoints for seamless mobile viewing
06
🚀
LaunchOptimize SEO metrics and publish to custom domain
07
Technology Stack
Figma
Framer
ChatGPT
ChatGPT
Gemini
Gemini
Canva
Canva
Image Optimization
Google Fonts
Google Fonts
Product Vision
"Framer enabled me to move beyond design handoffs and bring the complete website experience to life."
[03 / 04]
Color Palette
#111111
#ebebeb
#265AC7
Typography
PrimaryMontserrat / Sans-serif
SecondaryMona Sans / Sans-serif
Spacing & Grid System
4px
8px
16px
24px
32px
12-Column Responsive Grid
Component Library
Actions
Form Controls
Search places...
Status & Tags
Active
Draft
Sold Out
[04 / 04]

Designing an Experience That Feels as Premium as the Spaces It Represents

Beyond creating visually appealing screens, the focus was on delivering an immersive browsing experience that reflects the quality, craftsmanship, and attention to detail behind every architectural project.

Every interaction, animation, and layout decision was designed to make exploring projects feel effortless while maintaining a clean and sophisticated visual language.

Responsive Experience

The website was designed to adapt seamlessly across desktop, tablet, and mobile devices while maintaining a consistent visual hierarchy.

Meaningful Interactions

Subtle hover states, smooth scrolling, and refined page transitions were introduced to create a premium browsing experience without distracting from the content.

Hover→Transition→Scroll
Visual Storytelling

Large project imagery, balanced whitespace, and thoughtful typography guide visitors naturally through each project.

Performance & Accessibility

Optimized layouts, responsive images, and clear typography ensure the experience remains fast, accessible, and enjoyable across devices.

99
Performance
100
Accessibility
Design Principle
"A premium digital experience isn't defined by visual design alone. It's created through thoughtful interactions, responsive layouts, and seamless usability."