✦
✦
Overview
Timeframe
4 Weeks
Tools
Figma
In this project, I used the skills I acquired from an online Figma course on thedesignership.com to create a prototype of a PC Building platform. The goal was to develop a user-friendly platform where individuals could plan their PC builds, purchase components, and engage with a community of PC enthusiasts. The course covered Figma project management, design systems, responsive design, Figma components, design implementations, and prototyping.
Final Design
Design System
I developed a simple design system to improve consistency and efficiency, organized into three sections: Atoms, Molecules, and Organisms. The Atoms section covers foundational elements like colors, typography, grids, and icons, while the Molecules section combines these into components such as buttons and inputs. Using these atoms and molecules, I built more complex components like search bars and forms, classified as Organisms, for greater versatility.
Colours
Typography
Iconography
Buttons
Inputs
Responsive
I designed a responsive layout in Figma to ensure scalability across all devices, including iPhones (<320px), tablets (<768px), small desktops (>1152px), and large desktops (<1440px). For screens larger than 1440px, the content stays centered while empty borders expand, maintaining easy accessibility across all screen sizes.