Adding Design Features into the App

After a long period of structural development on the app we got to a point, where everything is relatively working and the skeleton of our code is completed. We needed to start designing the look of the app. The design side of our team made some mock-ups of how they thought the app would best look, in relation to the guidelines and it was our job now to implement these designs into a functional app.

The first major part of the design to do was simply to add a background colour to  all of the views. At first I though it was a simple task, as I assumed that there was a straight forward colour picker on the interface which would automatically change the colour of the view, but unfortunately there wasn’t. After a bit of research I found to set the colour of the background you need to call the backgroundColor class of that particular view and then set it with a UIColor an example of the code is used is below:

self.view.backgroundColor = UIColor.redColor()

The next task was to reformat the design of the buttons. The positioning of the buttons were already done as it was included in the structural design of the app.  The design of the buttons in the mock-ups were ones which are the full width of the view, with a proportional height and the colour was the blue supplied in the design guidelines as you can see below:


To achieve this style of button, it relied heavily on constraints. As the buttons had to be dynamic, change size depending on the screen size. Especially in the case of the question view (as you can see below) where there is a cluster of 4 buttons the spaces between the buttons had to relatively stay the same but the height of the buttons had to change in proportion to the screen size without going too small. The rest of the button design was simple, which was colour and opacity which is accessed and changed on the user interface.

Finally, the last thing I had to do was add in content created externally, for example turning the play button into an image and also adding a different variations of our ‘Magna-Carta man’ for example a image of him with his thumbs up when the user gets the correct answer. This process also involved me using constraints for positioning and keeping the aspect ratio of the images. The image on the play button is below:



The final design of the app is below, which includes all of the design features originally intend and is being previewed on an iPhone4s simulator.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s