Material Design Research

Material Design is something that was initiated in it’s operating system after the flat design trend took off. It was designed to add levels of depth into an otherwise completely flat enviroment. The idea is that material is a metaphor for the “unifying theory of a rationalized space and a system of motion, this is emboldened by print based design techniques that fully take advantage of typography, grids, space, scale, color and use of imagery. This means  it creates a brilliant visual hierarchy, meaning, and focus. Another element of material design that perfectly fits my brief is that by adding motion to the techniques previously mention, the user is then presented with an easy to understand UI that is visually pleasing to most users.

A lot of techniques apply to material design, and they improve the overall look of the UI. The first is the use of light and shadow;

Screen Shot 2016-02-23 at 18.33.55.png

Depths of the elements also matter;

Screen Shot 2016-02-23 at 18.34.38.png

The use of images create really powerful pages and amplify the meaning of the content;

Screen Shot 2016-02-23 at 19.07.19.png

There are even specific colours that should be used, there are multiple resources in which you can find them.

Screen Shot 2016-02-23 at 18.38.55.png

It is also important to remember there are multiple tones to remember;

Screen Shot 2016-02-23 at 19.00.18.png

Below are screenshots of the iPhone adaptation of the Google Calendar application, you can see a great example of the shadow technique being employed.

Next up is the Google Maps introduction, note here the use of the colours, the same ones found in the palette shown above.

These examples perfectly show how to mix the palette and images to create the perfect visual content

References;

https://www.google.com/design/spec/animation/responsive-interaction.html#responsive-interaction-user-input

https://www.materialpalette.com/

Advertisements

Colour Scheme

Choosing the correct colour palette for the user interface is vital. It sets the tone for entire experience. I wanted to created very clean interface that allows the user to use the tools as they please as they walk around the museum, there I have searched for colours with a lower tint of hue for the main interface. The specific pop up areas will be darker and higher shade of hue, this will allow the user to understand they are experiencing something new within the exhibition itself. I will need a variety of different colours for the different sections, and below are the colour palettes I have chosen.

Login Pages
1
The main user interface
2
The map
3
Animal Information
4
Save the whale

5

Good & Bad Brochures

The purpose of a brochure is to inform the reader, this can be done in a varying amount of different forms and I am going to start researching them now. From my research I have found that there are a lot of small things that all add up to make a brochure good or bad. Fonts, colour choice, layout, shapes, form and lines all make the brochure stand out from the rest so the best way to start was to research the different types of brochures, you can see these here.

Bad
1
One awful one that jumped out at me straight away was this one. It was way to complicated with too much going on at once, a brochure to sell the reader a sport fishing trip uses out dated styles to present its information. In an age of flat colour and simplicity, this design has 3D boat drawing complete with way too much compact text and images. This brochure has no space to breathe in, making it difficult for the reader to read it.

2
This design has seemingly mixed lots of design techniques into one. It has used flat colours and text message like green boxes with a slight transparency, there is a very busy logo in the top right and a somewhat disturbing white flower design floating on an image of a field.  To make the image even more complicated there is three images of the vehicles available. Something that stands out to me about this image is that it isn;t instantly obvious what the brochure is about and I think this is definitely something to be avoided if making a brochure to inform or sell.

Good

3
I really like the idea of the book having a matte finish but a transparent cover to protect it and give it a gloss finish. By printing on the gloss, when it lifts naturally it gives it a natural shadow on the actual design too which is really nice. I think it is brilliant how the texts and images takes up the full page by themselves. This booklet also proves that white space makes the design so much better by simplifying the design.

4
I really like this image as it has some very interesting ideas about layout of images. The main reason I like this brochure though is the fact that it uses a total of only three colours for contrast in the background and text areas. Transparency also plays a nice cold in the areas over images.

5
This design is very clever in the way it uses the there colours of the american flag to add interest to the brochure. While I like the overall design and the seemingly random shapes I do find the design to be a bit cluttered and had a bit too much going on. I feel like I would prefer something a little more stripped back.

6
I like this design because it is very creative in the way the images are laid out, using unusual cropping of images lead the eyes across the page very well. Some of the positioning of the images and the flat images don’t work very well therefore I will probably disregard these but it’s all good inspiration regardless.

7
I like how this post uses cuts and folds to create a more interesting composition. Edging away from simplicity, and creating something.

8
I found this piece of art work and thought it was really interesting so thought it would be worthwhile noting it and trying to find a way of relating it with anything within web destign, this means I will have to look at and research pop ups in web design and print.

References;

http://www.printaholic.com/15-awful-brochures/

https://www.behance.net/gallery/7212089/Dwell-Coastal-Cities-Revisited

http://graphicdesignjunction.com/2014/02/corporate-brochure-designs/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:+GraphicDesignJunction+%28Graphic+Design+Junction%29

https://dribbble.com/shots/1491729-Webmaster-Manual/attachments/223595

http://www.thejealouscurator.com/blog/2010/08/20/im-jealous-of-abigail-reynolds/

http://www.thejealouscurator.com/blog/

Second Design Stage

The next step in doing my design was to get my initial ideas onto the computer, so here you will see quite a large jump in progress but at the same time, there are bits missing at this stage as I haven’t yet completely finished adding the content but this is the style so far.

1

At the top you see a video as soon as you land on the page, it would automatically play as soon as you land on the page, there is simply a button there to represent it being a video. This video will include America propaganda, visuals of war related events and presidents speaking in a reasonably fasted video. It also shows the top of the next section which is about the military budget and how it’s spent. as you can see war and peace are split up into columns with their own colour scheme.

2

This section is still about the military budget but it shows the individual things the budget did, and could have bought. To keep my design flat I have decided to use icons that represent the appropriate items, I think this helps the simplicity and focuses the viewers attention on the actual facts themselves. There are some sizing issues that will yet need to be covered.

3

This section is about the economy and how it could about gaining wealth, I have introduced this section with a quote old president of the USA, George Bush which is about how every us citisen should go shopping more, the day after 9/11. I think this really works because even in this early stage, when I show peers for review, they all seem very shocked and say “did he really say that?”. I think this will create more intrigue as to the content of the section.

4

The footer is where the call to action happens to get the user involved with social debates.

You can see from this early stage the design is coming on nicely, it is taking form with a similar overall theme.

Letterhead Research

To create a strong, professional brand, I will need to apply the same visual identity to all of the products that I produce. Materials used in letterheads are very important, there are lots of types and thickness of paper that can be used depending on style and design of the actual letter. I spoke to a company Marqetspace, they mass produce trade printing from business cards to letterheads to flyers and asked them to send me examples of the different types of paper that they print on. A couple of things i learnt from actually receiving the products were that thickness generally provides the user with a sense of quality and luxury while the opposite is said for the thinner pieces of paper.

You can see images of all the letterheads I looked at here;

1 2 3 4 5 6

Given that the thickness gives the paper a certain quality the “120gsm CONQUEROR” has a really nice texture but I also believe that you wouldn’t want to go below 100gsm if you don’t want to loose that ‘quality’ feel. Also the fact we are in an age where we all have to consider the environment we live in it would also make your company stand above e it’s competitors if you showed that you care, one way of doing this would be to use the “100gsm RECYCLED” letterhead. Something else to consider when choosing the thickness of the letterhead would be the capabilities of the printer you used to print on the letterheads, as you need paper that would not jam in the printer. Yet another consideration of letterheads is the legal requirements as a business you are required to provide your name, the registered company name, contact number and address.

From my research about good and bad letterheads it is reasonably easy to state the plain white ones that the average company such as a bank send are considered to be the worst, while unusual shapes and sizes are seen as better design. Something I noted from the good designs is that they have all redesigned the envelope as well as the actual letter itself. You can actually see this in these two images below, they have actually redesigned the entire concept of sending out material to their customers.

3 4

I think I like these two designs and will actually use them to create my own designs when it comes to making my mockups. Something I noted earlier was to have consistency across all of the material I produce, the pieces below have actually got a similar colour scheme and design processes behind them so that as a user you know they relate to the same company.

2

I looked at the consistency across the portfolio of items below and I noted that it is very similar to what I was going aim for, the colours fall in line with my logo design and would work perfectly. I may consider this when making my designs.

1

Another consideration for the letter is the eligibility of the content, I need to make sure the content of my letter is easily readable. Firstly, contrast of colour is something I really need to to focus on, my logo is a black to light purple gradient with light purple text, therefore to get the contrast for my type and logo design to stand out on the page i need to consider the colours my letter and envelope will come in. Line height, spacing and length are all factors that can impact the readability of the page, as discussed in this article (http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0071161), dyslexic people find it easier to read shorter lines, so this is something I must consider when creating the letter layout. A larger line height is better because it improves the scannability which is something else I will need to consider when devising the layout of the letter because it allows the reader to flow through the content much easier by guiding them with the layout of the text.  At the same time though I don’t want too much text on the page so it is important to have a substantial amount of white space on the page as well, by using white space in between paragraphs it makes the content more scannable. Using grid layouts is going to be very important when creating the layout of the letters and their content and this is something I am going to examine in another post.

I really like the letterhead below because it uses flat colours (something that very fashionable in design right now) to separate the company information and the personalised information for the customer.

5

In a sense from the name ‘formal letter’ they should be simple and boring, but that is not the case by adding interest to the layout sets you apart from the competition. Making use of the back side of the paper is just important as it again adds interest to your letter, you can see below there are a couple of examples that take advantage of the free space.

6 7

References:

http://www.marqetspace.co.uk/home/

http://startups.co.uk/letterhead-legal-requirements-your-business-needs-to-follow/

http://www.peppermintprint.co.uk/products/letterheads/

http://www.plosone.org/article/info%3Adoi%2F10.1371%2Fjournal.pone.0071161

http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/

Wyke Printers company visit

To understand the process of creating a physical hand out like a business card or letterhead, I found it was vital to research the companies that produce these things. I organised a visit to G.F. Smith, the paper manufacturer and Wyke Printers.

b

One of the first things I learnt when being showed around Wyke Printers was about the ‘blueprint’, a paper cutout of anything that needs to be folded and cut to create a certain shape. The photo below shows the blueprint design for a folder that the company Lincat are paying Wyke printing for. You can see the design has dotted lines for folds and hard lines to be cut. The layout of the content is shown as it would be so that should there be any mistakes, they can be easily resolved. There are many machines in the building that do lot’s of different jobs, things like stapling books together, printing, checking colour levels  etc.

c

Along the top of each piece of paper printed, there is a set of colour codes which are read by the computer system, this will determine whether each machine has the correct amount of each colour in it. Wyke use CMYK (reason for this has been mentioned in previous research). You can see the numbers on the machine actually match up to the different colour sets on the paper.
d

Finally I shared the initial ideas for my self promotion material, and was shown the piece of equipment you can see below, if I was to create my designs on a mass scale, I would use a printing press, this basically is laid out like the blueprint you can see at the beginning of this post and will make the relevant scores and cuts on the paper, this saves time and money. Then all that needs to happen is the relevant folds, glue and and then they are shipped to the customer. This is obviously ideal and has shaped the way I will arrange my designs. This is the press I was shown:

a