In the grid above is the first four pages of my cooking app the start screen starts off with the ball dropping down to the bottom of the page then the ball expands covering the page and the click her sign will appear when you click on it fades to the next page which features the European logo and a sign to continue in the centre. I wanted for the start screen to stand out which is why i chose the color red for the beginning and i used the european union flag for the trasition because the colors used for the flage are blue and yellow
The grid above features the onboarding sequence of the app for the design of the sequence I decided to place three images representing three different cities in Europe on the top half of the page and on the bottom half is the text that informs the user about the app I also placed three dots opposite of the text underneath the image and on each of them only one dot is black as you move along the sequence the black dot will movie its position.
This grid above features the main page of my prototype app which features the different countries in the top half of the page and on the bottom half of the page I place landmarks that originate form the 5 countries that I selected as a way of representing those countries and when you click on the flag it will zoom out a tiny bit and zoom in along with the landmark image at the bottom and the recipes are placed in front of the landmark image. When you click on the recipe of your chocie it takes you to the first step.
For the last few boards, I have kept the design consistent with the page buy having a map of the European continent on the top half and having each individual country feature their capital cities at the bottom of the page and i decided to fade the images of the cities so that way the instructions for the food will be able to stand out. Each country has three different recipes but for some countries the steps to make them are either long or short depending on the recipes. In order to move to the next step you will need to click the arrow above the instructions and it takes you to the next step of instructions. Below will be a video of me demonstrating the way my cooking app works on Adobe XD
Reference: https://www.bbcgoodfood.com/
