Foodious: Find Trendy and Delicious Foods
![Foodious Mobile App Design](../../img/foodious-img/foodie-banner.png)
Name: Foodious
Year: 2022
Okay, this time I just finished the results of my UI Design exploration, namely Foodious: Find Trendy and Delicious Foods. So, Foodious is a mobile app to find trendy and delicious food for sure.
![Foodious's Logo](../../img/foodious-img/foodious-logo.png)
Goals
After looking at some similar design references on Dribbble, I see a lot of designs that use white as the main color and use a modern style. So, in my exploration this time I decided to use color and style to give it a classic feel, because I was inspired by many restaurants that have classic interior designs.
![Foodious's Product](../../img/foodious-img/foodious-product.jpg)
The User & Audience
The target audience of this app are people who like to eat and mostly women.
Role & Responsibility
UI Designer. As a UI Designer, I collect design ideas, create color palettes, layout layouts, fill content and create final mockups.
Scope
Since this is an exploration, so, I just made some screens. And here's the list of screens:
-
Homepage
-
Detail Product
-
On Delivery
Process
Color Palette
The process of finding this color palette was a little difficult, because I tried to find colors that gave a classic feel but still relevant to Food. After trying several color palettes, I finally found a color that I think is suitable for this design. Oh yeah, I looked for color palettes on the colorhunt.co site. And these is the color palette.
![Foodious's Color Palette](../../img/foodious-img/foodious-colorpalette.png)
Typography
To give it a classic feel, I used 2 different fonts for typography, Fredoka to give it a classic feel and of course Poppins.
![Foodious's Typography](../../img/foodious-img/foodious-typography.png)
Icons
Icons are very important to make it easier for users to understand the information in the design. I got free icons from the internet, and used a simple style.
![Foodious's Icons](../../img/foodious-img/foodious-icons.png)
High-Fidelity Design
After getting the required elements, I proceed to the mockup process. As you know, this is a fun process, as we can already 'play around' with the colors, content, layout, and more. And this is the mockup result
![Foodious High-Fidelity Design](../../img/foodious-img/foodious-hifi.jpg)
Design Decision
Colors
First, I want to explain about color. As I explained above I tried to give a different color from the others and also give this design a classic impression. So, I used Red and Yellow. As far as I know, these two colors are very synonymous with food, but I don't use the natural colors of the two colors, I make this color more muted to give a classic feel.
![Foodious Main Color](../../img/foodious-img/foodious-maincolor.png)
Search Bar & Continuity Principle
Initially I created a separate search bar with Hero Banner, but when I couldn't put 'Near You' Section on the main screen and I was thinking how to make one of these important sections visible on the main screen. So, what I did was place a search bar floating above the Hero Banner, so I don't think this detracts from the convenience of the Search Bar and Hero Banner, and the 'Near You' section can still be on the Home screen.
![Search Bar and Continuity Principle](../../img/foodious-img/foodious-sb.png)
Elements
To create this design with a classic feel, I only used simple elements in the form of several variations of lines.
![Foodious's Elements](../../img/foodious-img/foodious-elements.png)
Result
After all processes are completed, then this design has been completely completed. And this is the final mockup.
![The Final Mockup](../../img/foodious-img/foodious-mockup.jpg)