Duration: 2 weeks | 2 students in a group
Tools: Adobe Illustrator, Figma
Role: Responsible for UI design
UI Design | Dhyana - Meditation Website
💡Mind Map | 🎨 Mood board | 🌈 Style Guide | ™️ Logo Design | 📱 🖥️ Mockups for Mobile
Overview
This is an agile project for the project Management class, aiming to gain a deeper understanding of agile methodology. The goal of this project is to build a website that focuses on wellness and meditation, demonstrates a strong connection towards positivity, relaxation, and calmness. My classmate and I were in charge of the moodboard, style guide, logo design, and mockups.
Ideate
In order to figure out the features of this website, we gathered our ideas in a mind map.
Moodboard
We did research and chose 2 sets of colors for our website which are both calm and relaxing. We decided to use the second color scheme after our team voted between these 2 moodboards.
Style Guide
Colors
#555C6E
Button
Icon
#8A9183
Background
#E4DCD0
Background
#E1A853
Button
Warning
#EAE9E8
Background
Typography - Mobile
Body:
Body2:
Body3:
Heading 1:
Heading 2:
Typography - Website
Body1:
Body2:
Body3:
Body4:
Body5:
Heading:
Grid System - Mobile
Number of columns: 10
Column width: 11px
Gutter width: 21px
Grid System - Website
Number of columns: 12
Column width: auto
Gutter width: 15px
Logo Design
Here are the logo iterations. We chose the last one in the end due to it looks more balanced.
Mobile-Mockups
Web-Mockups
(Sue)
(Sue)
Other Projects
