Project overview
PlayRent is a mobile app concept designed for musicians who want to rent, borrow, or trade musical instruments. The app allows users to browse categories, search for instruments, check availability, book items, and publish their own instruments for rent or trade.
The aim of this project is to practice using Material Design 3 (MD3) components and create a development-ready interface with reusable (MD3) components, user flows, and a design guideline to support implementation by developers.
Open the Figma Prototype
Design Guideline
Colours
The app uses the Material Design 3 (MD3) dark colour system, including primary, secondary, and surface colours. The dark theme improves readability and provides a consistent visual appearance.
Typography
Typography follows MD3 type roles such as Headlines, Titles, and Body text, ensuring a clear visual hierarchy and consistency across the app.
Grid & Spacing
The layout follows MD3 spacing and alignment principles to create a structured and predictable user experience.
Components
Standard components were imported from the Material Design 3 Figma library using the dark theme variant. Custom components were introduced only when needed and are described below.
Shared Components
Navigation Bar
A bottom navigation bar provides access to five main destinations. Each destination includes a 24 × 24 dp icon and label, with one destination always active.
Search Bar
The MD3 search bar is placed below the status bar and allows users to quickly find instruments using keywords.
Custom Instrument Card
A customised MD3 card displays instrument images, titles, and additional information. It includes a favourite button, follows MD3 styling, and is optimised for dark mode and two-column layouts.
