![cooking Mobile app principle recipes sketch ui ux](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/7b635a108658277.5fc2b066acc06.jpg)
Introduction
It is time for this universal focusing on designing Mobile App so it is time for me to learn something new. I would like to show you my invented case study. "Invented" - that sounds incredibly hah - but that's just a little recipes mobile app. I aim to young ladies who love hovering around kitchen corner, therefore, I guess pink could be the easy colour to catch their attention. On the other hand, for those men living alone or mom/wife away from home, I hope they still can feel "La Vie En Róse". First of all, let's watch below video to understand which prototype I did.
P.S. Remember to enjoy the music within the video. To me, music can heal our soul; specially, designer - why don't you love music?
P.S. Remember to enjoy the music within the video. To me, music can heal our soul; specially, designer - why don't you love music?
I made the prototype by Principle and it allows me to record so I just freely use it. However, it did not give very quality, it is only 720. Besides, Adobe XD can give me 1080 video and InVision Studio is super cool with 4K.
User Flow Diagram
My handwriting looks bad, right? Can you please just ignore it and focus on my crazy arrows roaming around the boxes? I used Concepts App to draw it on my Ipad by Apple Pencil. Sounds cool hah?!
![cooking Mobile app principle recipes sketch ui ux](https://mir-s3-cdn-cf.behance.net/project_modules/1400/7b7e51108658277.5fc2b066ab281.png)
Wireframes
Guess which app I used to draw these wireframes!
Yeah yeah ok , that's Ideate App. Then I took screenshot of each wireframe, drop it into Marvel on Ipad or Iphone and what else? Let's make some basic prototype before transferring everthing into a real dedign.
![cooking Mobile app principle recipes sketch ui ux](https://mir-s3-cdn-cf.behance.net/project_modules/1400/227412108658277.5fc2b066ac6e0.png)
Typography
![cooking Mobile app principle recipes sketch ui ux](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/9b98b6108658277.5fc2b066abeb0.jpg)
Welcome page + Login page + Signup page
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/8c99bd108658277.5fc2b065b2faf.png)
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/80dee1108658277.5fc2b065b2ac7.png)
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/37f15b108658277.5fc2b065b353e.png)
Browse page + Profile page
![cooking Mobile app principle recipes sketch ui ux](https://mir-s3-cdn-cf.behance.net/project_modules/1400/c4de9d108658277.5fc2b066ab8cf.png)
Fancy pages
Why do I call it "Fancy pages"? Well, it's overside and looks yummy yam yam :)
1. Home page
2. Recipes list
3. Recipes details
4. Saved list
![](https://mir-s3-cdn-cf.behance.net/project_modules/1400/36faf6108658277.5fc2b0662f00a.jpg)
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/640a19108658277.5fc2b0662eada.jpg)
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/300ceb108658277.5fc2b0662e5fa.jpg)
![](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4b3a3a108658277.5fc2b0662f476.jpg)
Oh Hoh, I'm actually feeling hungry now. Let's find anything to cook!
Thanks for your feedback, guys!