Final

This is my final piece, which is a suite of apps that would come with a mobile operating system. Each app is based off a real world physical equivalent of the application function.

This is the browser app, which I decided to use a address book for the real world object. We used an address book because it simulates how the internet connects people and places. 

This is the calendar app, which is uses a note pad design, similar to a flip calendar you would hang on a wall. 

This is a gallery app, which is based on a pin board of images, that you might hang on a wall; with the photos organised in separate albums.

This is the messenger app, which uses airmail envelopes for each message to represent how text messages are sent "through the air" via microwaves. 

This phone app, uses a circular dial pad based off of old fashioned rotary phones. 

Work in progress on final piece.

These are some screenshots while I was creating my final piece, showing some of the processes I used to create the final product.  

 This screenshot shows the basic image of my app, before I started to animate some of the features of the app. I used basic shapes to create the framework and then started to add detail to some of the objects, for example: I added a small gradient to half of the panel on the day and month because it gives depth to the drop down. It also could explain how the drop down would flip to the next day/month. I created to notepad using the pen tool by creating a small circle and duplicating it, but also adding a small gradient to continue to give my piece depth.

With some of the more detailed objects, I used illustrator to create vectors to make sure I keep the detail. I made this simple airmail envelope using the pen tool and pathfinder. I then simply added this illustration into photoshop to compliment my app design. 

 This screenshot shows the process on how I animated all of my applications. I used the Photoshop video animation tool to create some of the UI animations that would be included in my app. I used keyframes to tell the program where I would like to start and stop animations, for example: changing the position of something of the app like another window coming in from the side. I would put a keyframe when the window is outside to frame, and then move the window into place to add the next keyframe. This created a smooth transition into the window, giving my app extra features with a high quality finish.

Final Draft

These are my final draft ideas, for my suite of apps which I will be creating. I have taken five of the main apps and started to show a basic framework on how some of the apps will be laid out. These are the barebones of my apps and for the final piece I will go into much more detail and higher quality finish.  I have created a time lapse showing how I created the calendar app, which shows my work in progress and thought process. 

    

Font Choices

In this post I will be looking at how different fonts can be used in an application, but also reasons why certain fonts will be used to follow conventions or why they are used to challenge them. I will be using a few different typeface group to experiment, to see which font will work best. 

 With use of script font in a calendar app, it breaks up the formality the rest of the app. This font borders on legibility as you may find it difficult to read, with the letters be so close together, but breaks up the very simple and functional application. Large amount of text with this font would be extremely hard to read, but that is exactly the opposite of what the designer intended for the typeface.

 Using a large display font, will instantly grab the users attention when opening the application, but doesn't really have a purpose as the user is more likely to open the application because of the icon displayed and when it has opened they won't need a large typeface to remind them the app they are using. The legibility of this typeface is very good, as it is easy to distinguish the individual letters. However, readability can be different as a large amount of text in this typeface would be difficult to read and scan through because all the letters are capitalised. For this example the font choice would is good but not so much needed as the user would already realise the application they are using.

 Another display font being used is Chalkduster, which really is pointed towards one purpose. This typeface would be used in a handcrafted/handwritten type of environment, maybe used in kids books. This doesn't have great legibility as some of the letters could be hard to distinguish each individual letter. Readability isn't much better as large amount of text in this font would be difficult to read. With the other aspects and features of this app, I feel this font wouldn't work well with the application. As it displays a handmade and fun vibe, it doesn't continue the apps easily readable and highly functional  design, therefore not a good choice for this application.

Finally I decided to use Helvetica Ultralight, which is great for legibility as you can easily make out each individual letter. It also continues a professional and clean interface without drawing the users focus away from the applications main functionality. I would say one problem with my font choice is that it does not contrast with the other fonts on the screen, as it also very simple and functional. Changing the font to a more stand out typeface may distract the user or could enhance the visual aspects of my application.

Focus Group (Scamps of others)

I decided to get some feedback for other apps to see what people enjoy about Gallery App on their phone. I asked them to just use the app as they usually would and name a few design features they enjoy.

Ollie: Do you like the way your photos are displayed?

Ken: I like simplicity of this app. It is easy to navigate and view images and allows you to organise          

         images into separate galleries.
Ollie: Do you enjoy the colours used?
Ken: Yes, it is a clean, minimal design and the use of only white focuses the user on the images.
Ollie: Is there anything you would like to change?
Ken: It's very utilitarian, and doesn't give many options as to how you view your images.

Emulation: Notes app

This is my notes app based on the music player I copied earlier. I aimed to use a similar minimal design with as few buttons as possible, making it easy to learn and use. The notes are handwritten using the touchscreen and stack on top of each other in a fan pattern.

tapping on a note will expand it, fanning the notes below it downwards to expose the note. This may not be necessary on short ones but they can still be expanded in order to edit or add to them.

 I started by using indented plus and minus buttons for adding and removing notes, but decided they did not fit well with the post-it notes design, so I changed them to buttons, shown below.

 I used blue and white buttons in place of the plus and minus buttons, with a pin button to 'pin' new notes, and a bin to throw away notes that are no longer needed.

 I created the fanned note pattern using copied yellow square shapes with a small drop shadow to give the illusion that the notes are floating off the page slightly.

Copy

This post shows the process of copying the above music app in photoshop. 

I started by doing the basic font, Arial, which is used for the track info because it is the same font used in the original app. The reason for the use of this font is because it needs to be easy to read as the purpose of the font is to tell the audience about the track. The status bar is copied from screenshot of the app but is part of the User interface of the phone operating system and not the actual app. I also added a textured background similar to the original which was a leather texture.
 

To create this volume knob I used angular gradient with 3 dark points and 4 light points to give the effect of machined metal knob. I then used drop shadows to give the illusion the knob is raised above the background and implies that it has a use in the design and cam be interacted with.

The aux cord was created as a vector image, drawn over the original aux cord. I used gradients and drop shadows to give illusion that the aux cord is sticking out of the screen.

I created the repeat and shuffle button using the pen tool, tracing over the original buttons. I used inner shadows to indent the buttons into the texture background, similar to the arrow buttons either side of volume knob.

To create navigation button, I used the same technique as creating the machined aluminium effect. I used a series of drop shadows to give the illusion that the navigation button is set within an indent textured background.

   
This video shows how I created the play text, since we could not find a matching font I decided to make my own in illustrator.