UX Designer
|
Melbourne, Australia
Fictionate
Designing a responsive book website for mobile and desktop
Design Project
Designing a book database website for both mobile and desktop.
Individual Project
Daniel Yuong
My Role
UX/UI Design
Information Architecture
Timeline
3 Weeks
Aug 2023
Information Architecture
Part of this project was deciding on the main features I wanted to focus on, and designing a navigation system which allowed users to easily access the desired information.

I created a sitemap to easily visualise all the navigation items, and sort them into a way which was accessible and intuitive.
Typography & Colour
In choosing typography for the website, I decided on Playfair Display SC for the titles, as the Serif font communicates a sense of class and sophistication. Helvetica is used for the body text as it is a clean, minimalist Sans Serif font which is easily read.

In determining a colour palette, I chose colours which conjured up imagery of libraries, books and pages - mainly neutral whites, greys and beiges.
Responsive Components
Utilising auto-layout and constraints in Figma, I was able to create responsive components which adjusted to different frame widths.

This saved me a lot of time when designing for different devices, allowing me to easily resize components for mobile, tablet and desktop.
Micro-interactions
Part of this project was also designing the micro-interactions that would occur when users interacted with the website.

This was done through component states and prototyping in Figma, and was focused on creating a simple yet pleasant experience for the user.
Mobile Design
Using the responsive components I had created, I was easily able to transfer my design across to mobile.

It was important to keep in mind layout and font-size to ensure that all the information was easily accessible.
Final Prototype
The outcome of this design project was a clickable prototype for desktop and mobile.

This project was a lot of fun, and I enjoyed utilising Figma to design aesthetic, minimalist webpages for both mobile and desktop.
Click on the panels to try each prototype.