Having now created my logo mark, I knew I wanted to create some sort of intro into the app whether that was a loading icon or just a delayed intro so that the app could load in the background during that time.

I was able to create this by using coloured shapes in the background in one of the screens, then moving them out of the way in another and using the smart animate feature so that they would slowly ease out of leaving the background white and then the wordmark fading out as well.

Screenshot 2023-03-13 at 16.37.47.png

Screenshot 2023-03-13 at 16.36.53.png

After this, the app should just open straight into the fridge / freezer / cupboard selection but I also want to include a sign-up screen for new users that want to set up the app.


Horizontal and Vertical Scrolling

To be able to have horizontal scrolling between each section I was able to create content that was bigger than the frames and enable each of those sections to have horizontal scrolling. I also turned on Fix position when scrolling for the nav bar and for the top nav which has the notification (and sometimes back button in). This meant that I was able to have vertical scrolling in my screens and the nav would remain in place.

Screens without content clipped

Screens without content clipped

Screens with the content clipped

Screens with the content clipped

Here is another example of where is used horizontal scrolling as you can scroll between fridge, freezer and cupboards to see what is inside each. I still have to draw an illustration for the cupboard and perhaps a better illustration for the freezer so there is a different image holding its place in the meantime.

Screenshot 2023-03-13 at 17.03.26.png