HOW TO... OUR INDIVIDUAL TASKS AND DEVELOPMENT - - - SAM

HOW TO BUY A DIAMOND ENGAGEMENT RING

≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥≤≥

Here I've brought together notable development and the design ideas that each of us in the group brought forward, and also to illustrate how it came together in the end.

Sam

How to // Initial Ideas

From my initial ideas of rings and diamonds relating the most to the subject (obviously), i created this illustration of a diamond made from a different sized triangles put together. I chose these muted navy and light blue colours to represent the diamonds clear sparkle. I think they work really well together...

I then played around with this more. I added a gold ring to the diamond then using more shapes with the circles created this logo , possible from cover for a booklet style design. I added texture and played around with some type to see what the outcome was. I am really happy with the overall look at this and think if the group like it, it would be ice to keep a consistent theme throughout the booklet, looking like this...

How to// Design Ideas

After researching into how to buy an engagement ring more, i looked at what could be included in the booklet we are creating to give out to men. 

The main things we wanted to include was, 'The Four C's', which is cut, clarity, colour and carat weight.  I also looked at what the woman prefers, and also passing rings down the generation of people. 

I tried to create little diagrams, sort of relating to info graphics and also pictograms that could represent each idea. These are just some basic ideas and i will have to look further into developing them after speaking with the group. 

How to // Diamond Drawings

After a group discussion today, we settled on the format and basic idea for our design. Our plan is to create a hot dog fold booklet that also is a poster on the reverse. In the booklet we will include information such as the four C's along with diagrams loosely based on my initial design ideas but obviously more detailed and professional design.

We wanted to keep the information in the booklet serious but also try and bring a light hearted tone to the booklet as our target audience is men who don't know much about diamonds. Therefore, we want to keep it quite engaging and not too boring for them whilst also delivering the information.

I then went away from the group and decided to make some more accurate and detail geometrical drawings of diamonds that could be used in the booklet or on the diagrams. I started by working pen to paper. I tried to use geometrical straight lines to form the amazing shapes of a diamond...

Then re-creating this digitally...

I really like this digital drawing i created of a diamond from an angled view. This could be used to represent the four C's. 

I also made a geometrical birds eye view of the top of a diamond.

and also a standard side view that was more detailed than my last attempt. 

Iv'e also been working on some pictograms for the colours of the diamonds. We agreed that the diagrams need to be simple, so that they could be easily understood and also look really professional.

Below are the design sheets that i created for the pictograms. I researched more into the four c's then tried to create some simple icons to represent these...

I started to work on some pictograms for the four c's 'colour' digitally. The diamond with the most lines in is the darker colour and the empty one represents the pure clear flawless diamond. i also did a few variations of this...

On the next one, i have added more pattern for decoration and also placed in the letters, which is how the colour is determined for an actual diamond...

another experiment.

How to // Mock Ups

as a group, we decided to go with a hot dog fold booklet. This way, we could use it as a booklet primarily but this also could be opened out into a poster or large scale diagram/checklist on the other side. I decided to make a mock up of what the design would possible look like and so did some of the other guys to get some ideas down over layout etc.

This was the quick mock-up i created...

Front Cover 

1st Double Page

2nd double page

3rd double page

Back

Poster on the back (when folded out)

We also had the idea of having a large diamond when opened out (like the image above). Then when it was folded back up each section of the booklet had a small piece of the diamond running through it, but still contained the information. This is something we need to try and figure out quick before we start designing the final piece. 

How to // Further Development

Iv'e been playing around with a possible layout for the booklet. The image underneath this would be the first two pages about the 4'C's then the image underneath is the front cover. 

I have also been looking at colour varaitions. We all decided as a group that it would possibly look more classy if we printed just black on white or white on black, but still using the off white stock which represent quality as it is a guide to DIAMONDS!

Here are the black and white versions. I feel the white stands out on the black really well and this would look and work even more successfully on nice off-white / antique white stock. 

We have also looked into possibly adding a gloss effect but printing black ink onto black cad and adding a laminated gloss effect which would also represent class, sophistication and make the whole thing look really professional. 

Diamond Anatomy Diagram

i created this digital version of my sketch to include in the booklet somewhere? ...

sketch

Digital

Mid-Project Crit Feedback

After the mid-project crit with tutors, we decided to keep the same idea as before but felt that the format was a little bit irrelevant for the purpose...

The tutors really liked the idea of keeping it a secret from your partner and therefore we come up with the idea of primarily having a secret app and website that you could easily hide away as appose to leaving a booklet around that your other half would defiantly find and start having ideas.

We all seemed to like the idea of an app that when you clock on it you need a password to get in therefore if your partner uses your phone they will not be able to access the program.

Inside the app will include all the same information as the booklet but in a easier form to keep secret and carry around with you at all times ready for when you need the information.

As a group we decided to create three main things to our project. The first would be a website that you can come across when you search 'how to buy and engagement ring'. When you enter the website it will included all the same information as the app so you can just view it online if you wish. there will also be an option to download the app and a printed guide to write on if you wish.

We think that this idea is much more realistic and something that we could see working in real life.

I will be in charge of the design for the app interface and this will include all the vital information that we have gathered form research. This will include... The Four C's, Tips and Hints, Anatomy of a Diamond, Glossary Of Terms and maybe more.

I will be designing pictograms and icons that can be easily recognisable and help make it easier for the average man to get a good understanding of diamonds.

The tone of voice will be not too formal as it is for the everyday man. I want to include all the important information that is needed but try to deliver it a friendly way for the average person with little understanding of diamonds to understand.

How To // Pictograms and App Icon Development

CREATING THE ICON...

To make the icon i wanted to keep it simple. We decided to go with this sleek white on black design for the previous design do i stuck with this through the app. I firstly created an icon button shape with the shape tool...

I added this white shaped gradient over the shape to create this 3D sort of looking button.


APP ICON

As the app is pretty secret i just went with the outline of a diamond for the icon. I used one of the previous digital drawings that i did from before. This way whoever has the app on the phone can ell which program it is but still keep it secret from the partner. 

I then went on to make icons for each section of the app. This would be the ring size guide, diamond anatomy, the four c's and the glossary. I wanted to keep the icons recognisable but really simplified to make it not to complicated for the user and also make the design look much more sleek and luxurious. 

For the ring size guide icon i just sued a white circle just to represent the band of the ring.

The diamond anatomy i used the simple icon of the diamond with the dotted lines drawn across it. This way it shows the lines separating and showing the different parts of the diamond. simple but effective and represents the anatomy well.

For the glossary, i wanted just to represent the text in a clear way so i just opted for the simple white lines to tie it in with the other icons too.

For the four c's, i just wanted to have the numbers simplified. I chose this really nice type to add abit of elegance to the icon. 

After creating the icons for the different sections, i also went on to create the icons for the four c's from my research. I first created design sheets thinking of how i could simplify the different "c's" into pictogram form before settling on the finalised ideas and making them come to life digitally. The four c's are Cut, Clarity, Colour and Carat Weight...

I based the icon for colour from the previous digital pictograms i had created with the diagonal lines across the diamond logo, acting as a shade and therefore colour. 

Similarly for clarity, i created the chart of clarity by using this polka dot pattern to represent the imperfections in the diamond. The more polka dots on the diamond, obviously the more imperfections or more visible the imperfections are on the diamond. 

For the icon i just used one of the polka dot patterned diamond logos to make it fit the theme and also to create easily recognisable logos. 

Again looking at the diagrams i have created for the 'Cut' of the diamond. I wanted to keep the same theme running through with the shape of the diamond outline. In this case, i altered the shape of the diamond to fit the shape of the cut... Shallow, Deep, Fine and Ideal. I also went with the dotted line to represent the movement of light into the diamond, including the arrow head at the end to represent where the light is finally released out of the diamond when it has entered. 

Again, these are simple pictogram versions that still get the message across but make it much easier to look at and understand. I believe it is also more aesthetically pleasing. 

Again, i just used one of the cuts with the lines on for the icon pictogram to represent this.

Now i have completed all the icons i want to include into the app. 

i also created the little house icon as well as the back arrow which i want to place maybe in a bar at the bottom of the app. The house will take you back to the home page of the app and the back arrow will send you back one page. Using the basic knowledge of existing apps, this is why i chose to include these functions and create the icons for this. 

How To // Creating the App Interface

As we had previously decided to go with this luxurious sleek white on black look i moved on to designing the interface of the actual app.

From research, i had seen that most apps had a little bar at the bottom with different buttons. On the whole there is usually a button that takes you back to the home page, which i have created. For this app, I also thought it would be really useful just to have a back arrow icon on the bar which would take the user back a page to where they had previously come from (just like a website). For now, that is the only buttons i have included but maybe after further discussions with my group, i could add another one or two buttons.

I started by creating the base for my interface. This will be a 'Wisdom Script' headline font because this represents class and sophistication...

For the sub heading we all decided to go with Bebas. This is a clear font that also shows sophistication but is really bold and easy to look at straight away....

After problems i had in my previous project with body copy, i decided to go for a universal font that is easier to read in body copy than others. I went with Helvetica Bold. A classic font!

As for the actual layout. I wanted to create a bar at the bottom of the app in the same style as the icons with the classy white gradient...

As you can see this is the basic layout i will be going with. The app needs to be kept consistent througout. for example the type of course, the placement of the buttons, the placement of the type, the simple imagery like the ones i have already created. 

After i had sorted this problem out, i then moved on to looking how the icon would sit in a iphone menu and also the first page that would come up when you click on the icon. This page needed to conceal the app and also contain a username, password and a sign in button...

I placed the icon i created into an image of the iphone menu. 

The 'Diamonds' icon is how it would sit in the menu.

The challenge of creating the home page and icon was concealing the app so that the partner would not know what you was up to. However the design still had to link with everything else and give enough away for the user to know what and where it is. 

i decided eventually to just go with the logo of the diamond that i had used on the icon with the simple curved boxes for the username, password and sign in button. 

the idea of the user name and password being in grey is so that the person would type in black over it which would let them know what they are doing. 

How to // Creating the App Interface // Ring Sizes

As we are working as a group of five, Luke created a ring size guide which would have the correct ring sizes and labelled letters placed next to each other in a chart.  you can view this HERE

My job was to then convert this to match the theme of my App. As we had already agreed on fonts and colour he had already used 'Bebas' and black and white which was handy.

I jsut took the file from him then began to place them into my interface...

Again i kept the style consistent and symbol. When working out the sizes of the ring, i figured it would be best to keep to 4 ring sizes per page. This way the sizes of the circles would not change so when the user placed the ring onto the screen to match the sizes, it would be incorrect and would remain the correct size according to the letter.

As you can see from the image above i placed the first four size in a grid shape below the text. I have also included a right arrow to scroll through to bigger ring sizes...

Now i have created the other pages with other sizes on you can see i have added an extra arrow on the left to move back to smaller size rings. 

I have also included some simple information at the top of the page, just informing the user to place an existing ring over the diagrams to check the sizes. 

How to // App Mock Ups

I did a couple of mock ups of how the app might look on a smart phone in somebody's hand.

Apologies for the terrible quality of the image but it was the only free image stock i could find. from HERE.

Password Page

Four C's Page

How to // Website Development

I mocked up some pages of the website that would accompany the app with some help from other members of my group.

I decided to go with this basic border for the website. Black page, to match the app. I also decided to go with a simple white line top and bottom of the content page. This would look something like this...

I then went onto adding some content. I added the page links at the top of the page, then created a basic home page...

I feel that this simple layout works really well and fits nicely with the app.

I added the logo that Abbas created to the centre of the homepage just to keep it really simple and clear.

I also added two icons to the bottom left of the page. This is of a Smart Phone and an envelope to symbolise the links to the two pages. 

As we will not only be including a downloadable App but also, for those who do not have a smartphone, a shopping guide that you add you send for. This will mean you can carry it around with you while shopping and use the information when speaking to jewellers and sellers to give you a better knowledge and help you feel more confident.

I went on to create the layout of these pages, just to show how this would look...

Downloadable App Page

Shopping Guide Page