You Are Reading

How to // Creating the App Interface // The Four C's

Moving on now from the homepage (shown below)


Say if the App was fully functioning. you would then click onto the button labelled '4 C's' and this would take us through to another page with four more button icons for each of the different c's.

As i had already previously created the icons for this, it was just a case of laying them out onto the interface template...


Just a simple 2x2 layout of the icons with the text underneath is all that i felt was needed. I've also change the top title now to 'The Four C's' obviously.

The idea now is that when you click on each of the four icons, this will take you through to important information on these characteristics that make up a diamond. 

Basing the information off all the quantitative secondary and primary research that myself and the group had, i created each section for the four c's which are... colour, cut, clarity and carat.

Here are my finished pages...


COLOUR

Here, i used the different shades of colour that the diamonds are categorised into. 

Colourless, which is the perfect diamond. All the way through faint yellows, very light yellows to light yellow which is the worst coloured diamond. 

Underneath each heading i have gathered the information from research and re-phrased it so that it fit sthe concept and language of our App. 


CUT

Next us int he list is 'Cut'. Again, i had already created these digital diagram drawings earlier so it was just a case of placing them into the App. I layed them out again 2x2 just to keep it simple. Some of the diamonds are different sizes which is a little bit annoying because i like everything to be symmetrical and perfect when working on things like this. However, it is important that the diamonds are different sizes in this case to represent the different types of cut and how they look in accordance to each other. 

This time, i placed a re-written paragraph again from the research my group had created and sorted out.



CLARITY

I decided to create two pages for this particular 'C'. The reason being i feel that just the information at the side of the imagery would not actually be sufficient enough to educate the average guy. 

So, for the first page again from the research, i created a small paragraph just basically highlighting what clarity is is relation to diamonds. 

I added some more text at the bottom just to let people know there is another page about clarity. The arrow again pointing right this time above the left arrow is what will link them to the next page. 

The next page is similar to the 'Colour' page. I wanted to keep the pictograms very simple and very similar to keep it easy for the user and also to keep a nice constant design to look at.

Clarity is much like colour in the sense of the graded words, so this is what i included here.


The last c was carat weight. Again i used the same outlined diamond pictogram to demonstrate this. this time i reduced the size down just to represent the diamond getting smaller. The carat is what controls this. Another piece of body copy at the side to explain this. 











Comments for this entry

Leave your comment

 

Copyright 2010. All rights reserved.

RSS Feed. This blog is proudly powered by Blogger and uses Modern Clix, a theme by Rodrigo Galindez. Modern Clix blogger template by Introblogger.