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;

Depths of the elements also matter;

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

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

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

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/

Advertisement

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

The main user interface

The map

Animal Information

Save the whale

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

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.

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

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.

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.

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.

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.

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

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/

Logo Evaluation

For my logo design I knew it was important to hit certain criteria, a lot of which I was not aware of when I first started the course, therefore I knew it was important to research before I even designed any logos whatsoever. While I was designing the logo for myself, this was excellent because I know the needs of the client (myself) better than anyone else. For me, the most important part was to advertise myself as a luxury design brand, this would have significant impact of the way clients considered me and my work, it would also impact how much I could charge. I learnt by researching colour and current luxury brands certain things I needed to do create a luxury style branding. Once I had completed my initial mockups, I created computer versions and removed the ones I thought that were not appropriate, I made sure that my logo worked in black and white as I had learnt this was very important in design, next I added colour to the logos and decided between the remaining two which meant I was left with my final design which had meaning behind it. Next I added specific details to further enhance the meaning of the logo, I used the fibonacci sequence which I had researched to make smaller adjustments to the layout of the logo, and finally changed the font to create the logo I was finally happy with.

For me the most important aspect of my design was the research stage, not only did it allow me to form a meaning for the logo but also allowed me to be certain my logo was following the correct stages to get to the perfect end result. At the time I thought that colour was the most important element to the logo and I chose purple because it represented luxury, I didn’t realise at the time I was making a choice not only for the logo but for all future branding I produced. Equally, this is probably because I was focusing on the end result of creating a logo rather than the overall branding of my image.

For me, a useful idea came from my research about luxury branding and how by mixing serif and sans-serif fonts enabled me to appear to be a much higher quality designer. Initially I felt uncertainty as to whether it would work in my logo but once I started to play around with the design in Illustrator I started get a much better feel for it. By using this font scheme I have significantly changed the appearance of my logo and it now targets the audience.

I have learnt that that research and initial design design stages are the most important to the logo to ensure it has the appeal you desire. Colour and fonts are second most important, and I believe you can’t go too far wrong if you spend a lot of time on these stages. If I was to do this again though, I would try to re-imagine the the two lower sections within the logo that represent my competition because when printed, they are not as visible as it is on the screen.

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.

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.

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.

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.

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;

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.

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.

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.

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.

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.

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.

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.

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.

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:

Revisiting Logo

Revisiting Logo

I wanted to make some final adjustments to the shape and design of my logo based upon some theory and design principles that I researched.

The main adjustment that I felt was required was to get the logo to work within the parameters of the Fibonacci Sequence, something I had earlier found in my research that was used you in a lot of iconic designs of today, and something that appears across nature from something as small as dragonfly wings to the incredibly colossal like the universe. I started by opening my logo design in Illustrator and importing the image of the Fibonacci Sequence spiral which is this:

The first step I took was to create the curvature of the graph so I rotated the FSS (Fibonacci sequence spiral) and lined up the corners then removed the irrelevant sections. You can see that here:

Next step I created two replicas of the graph and then resized them so that they were in line with the two lower lines, I have circled the points in which they cross below:

With the logo redesigned to fit the FSS, the next step would be to size and scale the elements of the logo including text to give it a proper hierarchy. I rotated the FSS and made the graph fit within the square at the top, next was ‘AKB’ so I resized the text and adjusted the letter spacing so it fit within the height and width of its box which you can see below:

The next step was to do the exact same with the design but this time I chose one of the small squares to give ‘AKB’ more importance within the hierarchy.

The very final step was to arrange the elements so they were in order and had the correct hierarchy. Once again this was easy as all I had to do was rotate the FSS and used the two smallest squares that meant the elements were equally spaced out to give the correct amount of space and improve hierarchy, you can see this below:

One point I haven’t discussed so far is some of the colour theory within the logo, obviously I have previously written about why I have chosen this colour set, but I haven’t discussed the colour arrangement within the logo. The basis of the logo is meant to somewhat represent a graph of my performance as a student at Hull College over the entire 3 years. There are six bars because there are 6 semesters for the entire web design course I am studying, therefore the logo represents the quality of my work whilst at college. The two lower sections I have added in have been applied with a lighter shade of purple, this is to represent the competition I will face as a web designer and that is why the two front sections are lower down because it would give the indication that my work is of a much better standard and quality. Again the front sections are lighter for a couple of reasons; firstly it adds contrast to the logo and secondly in the sense that it is meant to represent the competition, the front two sections are a lighter purple whereas the back section (which would in turn represent my work) is in a black to dark purple gradient which would indicate power, authority and elegance over the other competitors within the market. Below you can see the old (on the left) and new version of the logo (on the right).

Apple Logo

The apple logo (http://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/834px-Apple_logo_black.svg.png) is a simple logo. Unlike many, It is one that doesn’t feature the name of the company in the logo but is still one of the worlds most recognised logo and has a 5/500 Fortune Ranking (http://fortune.com/company/aapl/). Rob Janoff is the designer responsible for creating the logo (http://robjanoff.com/applelogo/) Creating the logo he took 3 reasonably simple steps,

1 – Create the apple logo

2 – Add a bite to the edge for a sense of scale and distinction (allowing customers to instantly recognise what the logo is

3 – Add colour to the logo (representing the fact the mac II was the first computer with a colour display

There are a couple of unofficial reasons for the bite and these are the few factors I have found;

“The byte is a unit of digital information in computing and telecommunications that most commonly consists of eight bits.” – http://en.wikipedia.org/wiki/Byte. The bite from the apple can be considered a play on words from the computer byte given it is all within the computer industry.

Another idea is that the bite was like taking a bite from the ‘forbidden fruit’ would make the company more desirable as wikipedia states here (http://en.wikipedia.org/wiki/Forbidden_fruit) ” the fruit of good and evil was eaten by Adam and Eve in the Garden of Eden. As a metaphor, the phrase typically refers to any indulgence or pleasure that is considered illegal or immoral.”. While Apple wouldn’t want their products to bee seen ‘illegal or immoral’, they would certain approve that their customers should be indulging in them and even taking pleasure from their use, this would put apple ahead of competition with just a logo.

Then there’s the fascinating story of Alan Turing. He was a British mathematician, logician, cryptanalyst, philosopher, computer scientist, mathematical biologist, and marathon/ultra distance runner. He was highly influential in the development of computer science, providing a formalisation of the concepts of “algorithm” and “computation” with the Turing machine, which can be considered a model of a general purpose computer. Turing is widely considered to be the father of theoretical computer science and artificial intelligence.” – (http://en.wikipedia.org/wiki/Alan_Turing). He was also responsible for the Fibonacci numbers in the leaf patterns of plants (http://www.turing.org.uk/bio/part8.html). He was a arrested for a sexual relationship with another man which was at the time illegal, “rather than go to prison he accepted, for the period of a year, injections of oestrogen intended to neutralise his libido.”. He died later having taken his own life after eating eating half an apple poisoned with cyanide.

Now theres an interesting concept within the Apple design itself, it actually falls right into place with the fibonacci sequence. I found (http://twentytwowords.com/breaking-the-apple-logo-down-fibonacci-style/)

this image that perfectly shows how the apple logo can be split up using the the circles created by the sequence into its perfect formation. Again another way of understanding how fibonacci is used is to watch this fantastic animation(https://www.youtube.com/watch?v=6GHDU9tW1_c).

Featured Image: http://wallpaperswide.com/apple_logo_white-wallpapers.html