I decided I wanted to tie my double page spreads and the app design for 'Phitograph' together. I decided to use the same colour scheme and typeface as I felt it would work well for the app as well as the double page spreads.
I started by creating the grids on illustrator. This was a very precise process and involved lots of maths to get the proportions perfect. The one that i struggled with most was the grid with the spiral. Getting the curve of the spiral to be even was fairly difficult. I also designed a pop out box which would be used for the interface of the app.
I then mocked up the interface using illustrator. I spent time thinking about how I could tie the design of the app into the golden ratio. The shutter button uses two concentric circles based around the fibonacci numbers. The curved corners on the pop out box are made using different sized circles, again all of these are based on fibonacci numbers. And the main body of the camera icon (used to change the app to front camera) is a golden rectangle.
I started thinking about ideas for the logo design. I had already started trying to design some on Illustrator but I wasn't getting very far with it. I decided to try and do some sketches as I feel this is when i get my best ideas. I wanted to incorporate the Ancient Greek Phi symbol and an icon of a camera. It didn't take long before I had an idea for a logo that I was happy with. I moved back onto illustrator to produce the logo.
As I have previously said I wanted to use the same typeface and colour scheme as my double page spreads for the app. I used Din in the logo, splitting the Phi from the rest of the word by making it bold and using the yellow. I tried a few variations but this one worked the best. I then spent time designing the icon. I overcame a few technical problems but managed to resolve them. I tried different weights for the stroke but decided on the one above. Originally the icon didn't have a shutter but I felt this made it more obvious that it was a camera and also balanced the image as the type on the left hand side is bold.
I made an app icon in Illustrator and then transferred it to Photoshop to give the logo an engraved look. I used a free iPhone mock up to display the interface, using a photograph I took on a recent holiday, attempting to use golden ratio proportions. I also edited the interface slightly adding some shading to the icons in Photoshop to make them look less flat. I also mocked up a home screen, using the logo, the grey I used in the interface design as a background and then adding a vignette. I will put some type onto this page explaining what the app does and why it is needed.
0 comments:
Post a Comment