Cloudberry Meadows
Project Description
This project was a school assignment where I designed a 3-page responsive layout for both mobile and desktop views using Figma. I was provided with pages of content and tasked with organizing and presenting this content in a clear way, while ensuring it would adapt across all screen sizes. The goal was to apply key UX/UI principles to enhance the overall user experience, focusing on clarity, usability, and contrast. I also had to make design decisions that would improve accessibility and ease of navigation, making sure the final design would be intuitive and enjoyable for all users.
The complete design aimed to be fun and balanced. By optimizing typography and contrast for readability and accessibility, I created a design that would work for all users. I also paid close attention to consistency in terms of design elements and spacing, guaranteeing that each page maintained a cohesive look and functional flow.
Role
As the designer for this project, I was responsible for creating the entire design across three pages, making it responsive and pleasing to the eye. Using Figma, I designed wireframes, high-fidelity mockups, and a mood board, iterating on the layout to meet both aesthetic and functional goals.
A major part of my process was creating the mood board to define the visual direction. This was a new concept for me, but it quickly became an essential tool for solidifying key design elements like color palettes, typography, and imagery, maintaining a unified look and tone across all pages. To enhance the visual harmony of the layout, I also focused on vertical rhythm, utilizing tools like TypScale for typography and a baseline grid for spacing. I achieved a balanced and legible design across all screen sizes. This attention to detail in responsive design and accessibility contributed to a polished final product, offering an easy-to-navigate experience. Since this project, mood boards have become an important part of my design process, helping me define and maintain visual consistency from the very beginning of every project.
Tools Used
Figma
Responsive Design
UX/UI Principles
TypeScale
Baseline Grid
Typography