Ayano

Role:

UX/UI and Web Designer.

Project Overview

This is a self-initiated learning project recreated in Figma. The goal was to practice working in Figma, systematize the web design process, and improve design system development skills.

Problem

The challenge was to design an aesthetically pleasing and functional website layout for an architecture studio using reference images without a real client. It was crucial to structure the layout logically, ensure adaptability across different screen sizes, and integrate design system principles with variables for efficient workflow.

Solution

• Developed a minimalist, modern layout reflecting the values of an architecture studio: innovation, aesthetics, and functionality.

• Fully adapted for mobile, tablet, and desktop, ensuring a seamless experience across all devices.

• Designed two color schemes — light and dark mode, allowing users to choose their preferred theme.

• Built a design system with extensive use of variables, covering font sizes, colors, layouts, and spacing, making the design scalable and flexible.

• Used a strict modular grid for precise composition and alignment.

• Carefully crafted typography to enhance readability and establish a clear visual hierarchy.

Methodology I Used

• Analyzed architecture studio websites to understand layout structures and common UX patterns.

• Designed the layout in Figma, utilizing Auto Layout, Components, and Variants extensively.

• Developed a flexible design system with variable-based customization for key UI elements.

• Iteratively refined the layout, focusing on usability and responsive behavior.

Research

• Examined UX/UI solutions from top architecture studio websites.

• Studied Figma Variables and their applications in design systems.

• Practiced creating adaptive layouts with multiple color themes.

Who I Interacted With

• This was an independent study project with no real client interaction, focusing on skill development.

Tools I Used

• Figma – for layout design, responsive adaptation, and design system creation.

• Affinity Designer – for refining UI elements.

• Google Fonts – for typography refinement.

This project helped me deepen my understanding of Figma Variables, Auto Layout, adaptive layouts, and design systems, enabling the creation of scalable and user-friendly interfaces.