We had to create an app design as part of the press pack, and these images illustrate the development of this app design for an iPad.
I started this design with an iPad template from online.
I filled in the app windows to the dark grey colour on each of the stages but on separate layers in separate layer groups so that I could keep track of each app page easily.
I opened the diamond shape up in Illustrator and recoloured the diamond to be teal/turquoise colours as I would need this for some of the pages on the app design.
The first thing in the app would be a short 30 second promo video about Colour. I added text with glow and the circular play button that iPads have for videos to make it look realistic.
For the second page I placed the diamond shape in and added some text.
After this, I realised I didn’t have of the menu options on this splash home screen and so I made MFM DEGREE SHOW smaller and added in three menu options (INFORMATION, SCREENINGS and GALLERY). I then drew connection lines from the shape to the menu options, and added outer glow to the graphics and text.
For the information page of the app, I added the point of the diamond, and aligned the text with that point using the guides on Photoshop. I added outer glow to the text too.
Then I added more information onto the app page about what the degree show ‘Colour’ is, when it is being held and where the showcase will take place. Finally I added outer glow to the text to make it look more professional.
This screenshot shows the first three pages of the app.
For the screenings page, I added the diamond along the bottom and resized it so it covered the whole of the bottom of the screen, and added text about where the screenings were being held and information about which module each colour lab will be showcasing.
For the final page of the app I drew guides to create space for four different boxes to represent the four media types being shown at the showcase (video, sound, photography and digital media). I then placed the diamond on this screen and increased the size to cover over the four box boundaries. Then I started to delete around the guided boxes.
I deleted all the unwanted areas until I was left with what is shown below. I lowered the opacity of these four boxes too, and added text on top of each box to represent which gallery that would lead to.
Below are the final five screens for my Colour app.
I then used the last box to type out how everything would animate in or what the viewer would need to click, or how to advance to the next screen, through swiping gestures.
Below is my complete Colour app design.