App Design Process

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.

1 Template

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.

2 Fill Grey Diff Layers

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.

3 Recolour

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.

4 Colour Promo Video

For the second page I placed the diamond shape in and added some text.

5 Place Diamond 6 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.

7 Menu Options & Lines 8 Lines & Glow

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.

9 Info Page

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.

10 Added Text 11 Glow

This screenshot shows the first three pages of the app.

12 First Three Pages

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.

13 Screenings Page

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.

14 Large Diamond

15 Cut Out to Guides

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.

16 Low Opacity Cut Out 17 Text

Below are the final five screens for my Colour app.

18 Final Five Pages

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.

19 Animation Info

Below is my complete Colour app design.

20 Final App Design


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