IPhone Screenshot

Basically in my previous post I wrote that I was going to take some basic stock screenshots for my final presentation and that is what I have done, I removed all of my personal apps and replaced them with the standard stock ones at the bottom and removed all of the apps on the top section, this is because I want room to put my new designs.

I decided to use a basic pre-installed background for my screenshot, I might possible change this image depending on the app colours, which I have yet to decide, Below is just a quick image of the IPhone shell with my screenshot In the middle.

App Research Idea:

One thing just to mention is that I have noticed that a lot of apps feature a half shadow on the app icon, the phone and music icon above features this, the top half is like a half of a circle, this is something that I could use in my app designs?

Preparing Final Presentation Components

I’m all for saving time in a project so I wanted to think about my final presentation, I really wanted to show how the designs will look on an actual IPhone, so I went onto google and searched for a large Iphone 4S image and that’s what I got.

I found It pretty hard to find an actual decent quality image even though I was searching for large images, once I found one I began thinking about how the final presentation would look and I decided that I should have 3 IPhone 4S shells with the designs on the inside showing them how they would actually look, the first for all of the 7 apps, the second and 3rd for the app pages, the first the device page and the second an options page liked through the device page.

So all I basically did was go into Adobe Photoshop and Remove the side view of the IPhone and cut out the display part of the screen, my plan Is to take some screenshots from my IPhone and past them into this now empty slot, I removed all of my apps and I changed the background to make it look basic and new.

Just a quick mock-up of how the final display will look without the screenshots in the empty slots, I will probably do this in Adobe Illustrator rather than Photoshop simply because I am more comfortable using this, I will surely have some type around the outside of the 3 images, but I will decide this when I being the actual designing phase.

IPhone Icon Research

Good preparation in a project is key, so with this in mind I have decided to collect some relevent information that I will need when designing my app icons and app page, what I have initially found out is that different “Apple” devices has different sized screens, so the app icons and obviously the app pages are going to be different, with this in mind I have decided to design my apps for my current phone, an “IPhone 4S”.

I collected this information off of http://www.idev101.com/code/User_Interface/sizes.html, it has the comparison between the IPhone 4s and the 5, these are all the precise sizes for the IPhone home screen.

Element	iPhone 4S (and earlier)	iPhone 5
Window (including status bar)	320 x 480 pts	320 x 568 pts
Status Bar (How to hide the status bar)	20 pts	20 pts
View inside window (visible status bar)	320 x 460 pts	320 x 548 pts
Navigation Bar	44 pts	44 pts
Nav Bar/Toolbar Icon	white icon – up to 20 x 20 pts (transparent PNG)
Tab Bar	49 pts	49 pts
Tab Bar Icon	up to 30 x 30 pts (transparent PNGs)
Text Field	31 pts	31 pts
Height of a view inside a navigation bar	416 pts	504 pts
Height of a view inside a tab bar	411 pts	499 pts
Height of a view inside a navbar and a tab bar	367 pts	455 pts
Portrait Keyboard (English)	320 x 216 pts	320 x 216 pts
Landscape Keyboard (English)	480 x 162 pts	568 x 162 pts
Launch Image (Launch Image Sizes for iPhone & iPad)	640 x 960 pixels	640 x 1136 pixels

With a bit of reading around and comparing various sites I have found out that the App icons are  57×57 pixels, which is very small but this is the size I will design to, I could possibly design them bigger for the presentation but then also do them to the correct size.

App Research

So for me the first thing that I wanted to do was to collect some images, of the actual real life speedometer apps, to help me come up with idea’s and links between them.

Speedometer: A speedometer measures and objects, mainly motor vehicles speed in MPH and KM/H.

So as I wrote before I wanted to do my app research through my IPhone and write about my first impressions and thoughts on here, so I took some screenshots of a couple of apps that caught my eye, these apps could help my in future development for the same app of others.

So this was the first one that came up for my search, so my first though are, I can see what the app is through the small logo which I think is really important, but the actual app page is a bit of a let down, It would be better if it replicated the icon, rather than a completely need design, this would save time and effort and it would make the finished app better in my opinion.

This next app is a bit to complicated on first glance to me, the icon has too much detail on it for its size and the app page in to detailed as well, although it functions well, it’s just not my type of design, I hope my apps will be simple, clean and functional. I do like the darker colour scheme with the lighter detail but this will kept in mind when designing and developing my apps.

This app design really caught my eye, simply because it is clean and functional, exactly what I want my app to be, the colours all work together but I will need to test the colours on the other apps aswell before making my choice. The only thing that I would change is the type face to something a bit simpler, but I can see were the designer is coming from making the speedometer old school looking.

Pedometer: This is instrument for estimating the distance traveled on foot by recording the number of steps taken.

At first I didn’t know what a Pedometer is but it seems it would be useful in weight loss and fitness goals, taking this into consideration, active people normally like bright exciting things, with this i mind I might need to have a look at some bright colours for my app designs.

This app was interesting aswell to me, the logo was different on the icon to the first but this works better in my mind, the addition of the map on the app page is interesting and this completely skipped my mind, this design is something for me to inspire to.

Decibel Metre: A decibel meter is a device that measures sound pressure to determine how intense sounds are in decibel.

This was one of my first choices for the app page design, I already sort of knew how the design could look and work.

This design works but the colours and style don’t I feel, I like the icon design, it is easily recognisable and its simple but they are almost from two different design, they just don’t work together.

The logo for this app is awful, so shit but the apps page looks good, better than the previous one at less, If I think Decibel Metre this is what I think of and that what I want my design to be like, exactly what most people think of first.

Barometer: An instrument measuring atmospheric pressure, used esp. in forecasting the weather and determining altitude.

I personally have never known what a Barometer is, but after research I now do and I have realised that I see the Quiet often.

The first app that came up for my barometer search was this one below, the apps page design is really good but the icon I think is lacking quite a lot, other than that the simple and clean layout got me thinking that looking at some customer review would help simply because I am getting other people’s personally reviews and thoughts.

These 3 people have given the app 5 out of 5 stars which is really good, they say that the app is well designed and works flawlessly which is a huge complement, looking at these review will help me understand work looks good and what works good to others.

The icon on this app is very clean and well though-out, I quiet like the idea of using a section of the actual app page to use in the icon box, this will save time and it should be easily recognisable without compromising the design.

Thermometer: An instrument for measuring and indicating temperature.

Out of all of the 7 apps this one was my first thought on using for the app page design aswell, this hasn’t got a lot information which should make it the simplest out of the 7.

My first idea for an icon was this pretty much, It’s so simple and clean and it just works how it is supposed to, I like the little 2 tone shade on the icon’s background its subtle and it works, I want to try to keep all of my designs simple and this one is a good example.

Now this is a good-looking design and the way that apple display their apps on the marketplace is clean and simple, I could learn from this and possible use this when presenting my designs.

I do really like the white as a background it makes them almost look posh and only for the wealthy, the icon features the iconic design again so I will be using this for sure.

Below is just a quick screenshot of the app when launched, looks really clean and good, this is one to keep in mind for inspiration and development.

Anemometer: An instrument for measuring the speed of the wind, or of any current of gas.

Had no idea what this was, but after a tiny search I do, this one didn’t come up with many results when I searched for it but this is because it’s something that isn’t need much on a phone.

The icon for this app looks bad to me but I can sort of see that it is still wind, this is a good idea to use but I will need to develop how the wind would look first.

As for the app page is simple and clean, I just think that the colours and how simple it is lets it down a little, if the colours were possibly more from the same contrasting or the design had a tad more detail it would look the part aswell as working well.

Just a quick screenshot from inside that app and it still looks bland but what is interesting is it gives the user options to change the way it is measured and this is good because it allows the design to be cleaner in the first place, when doing my design I will need to think if I want the app page to just be one page or several, including options.

Altimeter: An instrument for determining altitude attained.

Now I don’t know why someone would want this on a phone, but it’s not my job to question, just to design.

Being blunt the colours go together but not on here, the design to me is to realistic and not simple enough but this is me, I don’t like the alarm like typeface and the blank area at the bottom, but I do like the way that the app page has been featured on the icon, it’s nice when this is done.

This design features a nice eye-capturing icon design, but it isn’t recognisable to me, but I suppose they don’t always have to when its a less well-known instrument, the problem I see with this design is that the app page is to simple and to be honest I wouldn’t want to use it, but other people may.

I was interested to see what the review said on this app and it seem people really like it, which goes to show that simple design always work as long as they have been thought out and done properly.

Review: Research is my less favourite part of any project, just because it’s boring to me and this project wasnt any different, this took a lot longer than I thought it would but in the long run for the project it was really needed, I didn’t know about the apps but now I do and I now know how other similar apps look and what other people think of them. This research has narrowed don a few things for my own designs like the possible colours, how the icons will look, which possible apps I will design the app page for and a couple more.

App Brief First Thoughts

The Brief

You are to research and design seven icons for Apps for the iPhone.  Present  planning and development for each icon in your sketchbook.

A digital company has produced seven Apps in a series. Each icon should demonstrate the concept of the theme but the icons should also show by their design that they are part of a series.

The seven Apps are all measuring devices:

* Speedometer

* Pedometer

* Decibel metre

* Barometer

* Thermometer

* Anemometer

* Altimeter

You should use the correct measurements and carefully consider the very small-scale of the Apps’ icons. You should also show in your sketchbook the navigation or usability of your App but the App does not need to actually function.

As well as producing seven icons for Apps you should also provide in your sketchbook a competent navigation /usability plan and some thumbnails for the actual pages of one of the above Apps. You do not need to produce final designs for these but your sketchbook work must demonstrate the elements of interactivity within an App.

My Thoughts:

So basically I need to design 7 app icons and an actual page for one of the apps, my first thoughts about what apps I have to design for is that they are all measuring apps, so the designs will need to be clean and precise, now I really need to think about how the app icons will look, seeing that they are so small, the images that I am going to create for the icons need to be self-explanatory, meaning that they need to be very easy to recognise and know what they are.

Research:

So I first need to find out how big the app icons are and I need to do some research into similar apps that are already on marketplace, researching on my actual IPhone will be easier than doing a lot of my research on a computer, I can write my first thoughts on the apps icons and page layout, In doing this I can see what works and what doesn’t.

The next step after this is to research the actual real life measuring devices, to see how I could simplify them down in a different way to similar apps, or to see if I can come up with my own, from this I will start to sketch out some different idea’s and start thinking about different colours depending on the designs and other apps.

Designing:

To be honest the real thinking come about when designing the apps on the computer, I will have the icons layed out in an IPhone layout to see how the designs work to scale, but I will also have larger print outs with the page addition, at this point in time I don’t know how the designs will look but to make certain things easier for me when I get to the designing phase I will get templates ready to save time and to make the designs go together, in basic terms.

 

Case Study: Instagram

What is Instagram?:

Instagram is an online photo-sharing and social networking service that enables its users to take pictures, apply digital filters to them, and share them on a variety of social networking sites and apps, like Facebook, Twitter and Tumblr.

A distinctive feature that sets Instagram apart from other similar apps and service is the photo’s are formated to a square shape, similar to Kodak Instamatic and Polaroid images, in contrast to the 4:3 aspect ratio.

Instagrams well-known app icon, used on Iphones and Android Phones.

Usability:

Instagram Has been updating it’s user layout several times every year since it’s release back in 2010, these updates have new features and slight appearance and ascetic updates from the original Instagram User Interface, There is no type on the bottom menu to make it more appealing to the eye, a cleaner interface allows the menu to not distract from the content on the page. The Instagram layout is very straight forward and instantly usable, there’s the obvious home logo, photo logo and the menu logo, but first time using this I didn’t know what the other 2 are either side of the centre option, the left is the explore option and the right is the news page.

Everything from the simple logo’s used, to the 2 tone colour scheme, creates a calm and appealing look for the app.

Instagram has recently released a website compatible version, this features the same ascetics as the mobile version, this has been made for people who don’t have a compatible mobile phone, they are as a company accommodating for nearly every person that would use it.

Usage:

Instagram was launched in October 2010, The service rapidly gained popularity, with over 100 million registered users and around 90 million monthly active users as of January 2013. Instagram is distributed through the Apple App Store and Google Play. Support was originally available for only the iPhone, iPad, and iPod Touch; in April 2012, support was added for Android camera phones running 2.2 Froyo. The reason I would say that Instagram has so many user is the fact that it can be anything you want it to be, a researcher, social networking, designing, exploring, endless reason for an individual to use it.

Project: Iphone App Brief

Preamble

Non verbal communication in the form of pictograms, ideograms and symbols has been with us for thousands of years, and even our modern Latin alphabet is little more than symbols that have evolved over the past several thousand years. Today signage is designed with immediacy in mind, the message or instruction has to be communicated with speed: eg. consider motorway signage.

The focus of this project is upon non-verbal communication, although you are permitted to use some typography where appropriate.

Graphic design is mostly about sending the right message to the right group of people, usually to persuade, educate and inform. The latter of these is what this project is concerned with.

As well developing your computer skills, this project will help you develop your ability to make concrete complex abstract concepts and reduce them to their simplest visual forms whilst retaining meaning.

The Brief

You are to research and design seven icons for Apps for the iPhone.  Present  planning and development for each icon in your sketchbook.

A digital company has produced seven Apps in a series. Each icon should demonstrate the concept of the theme but the icons should also show by their design that they are part of a series.

The seven Apps are all measuring devices:

* Speedometer

* Pedometer

* Decibel metre

* Barometer

* Thermometer

* Anemometer

* Altimeter

You should use the correct measurements and carefully consider the very small scale of the Apps’ icons. You should also show in your sketchbook the navigation or usability of your App but the App does not need to actually function.

As well as producing seven icons for Apps you should also provide in your sketchbook a competent navigation /usability plan and some thumbnails for the actual pages of one of the above Apps. You do not need to produce final designs for these but your sketchbook work must demonstrate the elements of interactivity within an App.

Learning Outcomes

The specific Learning Outcomes for the module, against which you will be assesses are listed on Moodle and in the Course Handbook. You are strongly advised to make yourself familiar with these and to ensure that throughout your work you are providing evidence of how you have achieved these.

Labelling the evidence for each outcome in your sketchbook is highly advised.

Research

You will have to research, amongst other things, non-verbal communication, ideograms, pictograms and icon design.