PCLab
Build and design the perfect PC easily through PC Lab, an intuitive online web app for custom PC building.
Project Overview
Disciplines
UI Design
Responsive Web
Interaction Design
Design System
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.
Responsibilities
UI Design
Designed the user interface for a responsive web platform, ensuring compatibility across wide and standard desktop screens, as well as tablet and mobile devices.
Design System
Developed a comprehensive visual style guide, establishing consistent design principles, and building reusable components, including atoms, molecules, and organisms, to ensure a cohesive and scalable user experience across the project.
Final Design
Responsive Design
Desktop to Mobile screen sizes
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.
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.
Inputs
Outcomes & Retrospective
The Ultimate Figma Masterclass, has significantly enhanced my proficiency in Figma, particularly in leveraging auto layout for evenly spaced, scalable, and accessible designs that facilitate collaboration with developers and users. The course also provided valuable insights into the end-to-end UI design process, encompassing idea presentation and iteration with clients and stakeholders, organising workflows and page structures for improved clarity, and delivering final designs and expressions so that my design intentions and layouts are apparent to clients and developers.