How to // Creating the App Interface // Ring Sizes

As we are working as a group of five, Luke created a ring size guide which would have the correct ring sizes and labelled letters placed next to each other in a chart.  you can view this HERE

My job was to then convert this to match the theme of my App. As we had already agreed on fonts and colour he had already used 'Bebas' and black and white which was handy.

I jsut took the file from him then began to place them into my interface...

Again i kept the style consistent and symbol. When working out the sizes of the ring, i figured it would be best to keep to 4 ring sizes per page. This way the sizes of the circles would not change so when the user placed the ring onto the screen to match the sizes, it would be incorrect and would remain the correct size according to the letter.

As you can see from the image above i placed the first four size in a grid shape below the text. I have also included a right arrow to scroll through to bigger ring sizes...

Now i have created the other pages with other sizes on you can see i have added an extra arrow on the left to move back to smaller size rings. 

I have also included some simple information at the top of the page, just informing the user to place an existing ring over the diagrams to check the sizes.