OUGD504 - Design for Screen - Putting the App Together

I have now completed enough screens to provide a walk through example of buying a product.


    
    


I uploaded these images into Adobe XD in order to start putting the app together.



I drew squares and boxes around different elements, allowing me to link things together by clicking certain areas of the screen etc.

You are able to see the user flow of the app via this prototype flow chart from XD.



I set each transition to dissolve out and into the next screen, at a duration of 0.8s. This allowed for a gentle and smooth transition to the next screen, but not too slow for the user in terms of waiting time. The transition of each slide reflects the gentle and natural aesthetic of the app.