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/

Advertisement

Content Layout

Understanding layout of content is going to be a vital part of my brochure so that I am able to present the web trends in a readable, fashionable way. Using a mixture of images, text and white space creates an interesting layout on paper. It is understanding to balance these elements that creates a visually appealing brochure. I have found that if you are to have text, to make it understandable, the best layout is to use columns of two or three. You can see quite a few examples of this method used below;

1 3 2

Some printed material focus their efforts more upon the typography than the other aspects of the design, this creates a different feel to the printed material, you can see some examples of this here;

This example is excellent because it also shows the method of cutout text to reveal an image through the text.
4 8 7 6 5

Another important thing I noticed in print is the shapes used to add additional interest in the subject is the addition of shapes and lines around a person or object. I think this allows the reader to instantly recognise what is at the centre of attention. You can see some great examples of this here;
9 SONY DSC 10

References;
http://inspirationhut.net/inspiration/42-excellent-examples-of-magazine-layout-design-for-your-inspiration/
http://indulgy.com/post/pEfMtH34d1/layout-dansk-magazine
https://www.behance.net/gallery/Magazine-Feature-Magazine/9812813
(http://www.flickr.com/photos/marindsgn/3894231417/in/photostream)
http://www.amandamocci.com/#1906059/THE-UNIVERSE-POSTERS/
http://www.aisleone.net/2012/design/typographic-revolt/
http://www.opus-design.jp/press/item_539.html
http://www.magspreads.net/2013/07/fashion-look-book-layout-design.html
http://milesmind.tumblr.com/post/44590898712

A history of typography

Typography dates back as far as 1200 BC when the Phoenicians gained independence from the Egyptians, they developed the first language composed entirely of letters. Greeks then went on to develop this by adding 5 vowels that we use today but missed spaces, punctuation or lowercase. The romans were the next to improve the language by keeping the “ABEZHIKMNOTXY” letters and remodelling the “CDGLPRSV”. “UW” letters were based upon the letter V and were being used by the year 1000, J based upon the letter I wass added by 1500. Only 57 years later in 1557 Robert Granjon ” invented the first cursive typeface, which was built to simulate handwriting.” The first groundwork to a different type of font was when William Caslon IV created the first ever font without serifs, called sans serifs was ‘ridiculed’ for it. Years later the arrival of the Macintosh and the original concept of Graphic User Interface (GUI) meant user could take advantage of a total of ten different fonts on screen. The explosion in font design was when apple created the Truetype font technology that allowed small time designers to create fonts.

The different types of typography

There are many different categories and sub-categories of typeface. There are many factors that can effect the way we perceive text, weight, style, proportional, monospacing & mood are all major factors in this. The difference between serif and sans serif can be seen in this image; serif-sansserif Serif Serif fonts are usually used for large amounts of text, in print or online, Old Style serif, Modern serifs and Slab serifs are the three main types of serif. Serif   There are many examples of serif fonts being used today, the ibooks app offer many font choices but only one being sans-serif, the reason for this is as earlier stated, serif fonts are usually used for larger amounts of text; iBooks Old Style Serif typeface is one of the original roman typefaces designed in the sense that the style of the letters come from the fact someone is writing them with a pen at a consistent angle. This Apple advert below shows a good use of the old style font with sloped serifs. apple   Modern Serif typeface uses many of same ideas to create the font but create a bigger contrast between the thick and thin lines, have vertical stress and minimal brackets. The TIME magazine uses this on the cover of their magazines. Time   Slab Serif  typeface have almost no contrast between the thick and thin lines with thick rectangular serifs, the most notable is the use of the font Clarendon Bold Expanded in the sony logo (original is top); sony-logo sony   There are other uses of the typeface in mainstream media. The U2 album “How to dismantle an atomic bomb” has the exact same font as the sony logo (original is top). U2-How-To-Dismantle-An-Atomic-Bomb U2   The origins of this typeface was back in western “wanted” posters which i have mocked up here; wanted Sans-Serif typefaces look modern as they do not have the the ‘serif’ details on the end of characters. The font can be broken down in to four major categories. Grotesque, Neo-grotesque, Humanist and Geometric. SansSerif Grotesque typefaces are usually very similar to Sans-Serif fonts just without the serifs. It’s original meaning was “restricted to an extravagant style of Ancient Roman decorative art rediscovered and then copied in Rome at the end of the 15th century.” This cover of Vanity Fair shows an example of the use of a grotesque typeface in use, Sans-Ps-Cd (below cover) is very similar, but lacks the thinness and the height as you can see here:   jennifer-lawrence-cover vanity   Neo-Grotesque typefaces are plain and simple in comparison to the grotesque fonts. A modified version of Univers used in the HUGO BOSS logo, as you can see they have mixed serif with sans serifs which add clarity and contrast to the logo… hugo-boss-logo   Humanist typefaces are the most legible out of any font, they have the biggest variation of the line widths. Easily the biggest user of this typeface is the BBC when they used the font Gill Sans. bbc   Geometric typefaces are designed too look like they are layer out using direction. GQ’s cover is a mix between both Century Gothic and Futura, to further study the geometric font, I decided to research the covers that GQ do and then recreate my own.

zac-efron-gq-cover Rober-Downey-Jnr-GQ-May-Cover-2013-360nobs.com_42860-08-dec-gq-cover-796492

GQ

I studied these covers for things that I would need to re-produce on my cover, a couple of things that caught my eye was there fact that GQ was behind the faces, two covers also feature a red transparent box with text about the magazine. The covers tend to feature about 3 different font colours and sizes alternated across the cover, this was something important I needed to use. I photoshopped the background out of an image of myself, and replaced it with grey to white gradient. Used layers to put text in front of, behind of and around me, using varied sizes on the different sections, I give it a very realistic look. I make sure the text layout is exactly like the GQ cover for example the text is structured to the left and right, the text is measured from the sides to be flush all the way down also has a red line along a title of a feature and the red plus sign at the bottom just like the yellow one on Robert Downey Jr’s cover.

Script

Formal

Formal Script typefaces were created usually between the 17th and 18th century, the best example of a formal script typeface is the Spencerian Script which was created in the 19th century. There are two major companies that have used variations of this font. First one being Coca-Cola;

coke   800px-Coca-Cola_logo   The only difference between mine and the original is the letter spacing. Coca-Cola’s are joint and are inter-looped. I have also created this image;   ford     The Ford logo and Coca-Cola’s is very similar, using variations of the same font. You can see the font is varied to the point in which some of the small details are not the same, but you can see some of the similarities in the fact it flows like handwriting. I have also added the Coca-Cola logo in the top right just so you can note the similarities between the three.   Casual Casual Script typeface show a more relaxed, active hand. The fonts tend to look like they were created with a wet brush instead of a pen nib. They started to become mainstream in advertising in the 1970’s. A great example of Casual Script typeface being used was created by sbdesign with this design for a stationary company.   27b10da0cb6daaa6b71581be2e46669d The next stop on my journey on typography will be to learn how to match certain fonts.   References: http://planetoftheweb.com/components/promos.php?id=174 http://www.noupe.com/design/a-crash-course-in-typography-the-basics-of-type.html http://en.wikipedia.org/wiki/Slab_serif (http://www.gngcreative.com/newsletters/images/serif-sansserif.jpg). http://farm8.staticflickr.com/7206/6880915996_44cb8620f5.jpg http://www.kitguru.net/channel/generaltech/matthew-wilson/sony-executives-will-cut-wages-and-forfeit-bonuses-this-year/ http://cdn.americansongwriter.com/wp-content/uploads/2010/08/u2112.jpg http://photos.imageevent.com/afap/wallpapers/musicpictures/u2/huge/U2-How-To-Dismantle-An-Atomic-Bomb.jpg http://oakdome.com/k5/lesson-plans/photo-editing/wanted-poster/blank-wanted-poster.jpg http://idsgn.org/posts/know-your-type-clarendon/ http://typophile.com/node/13516 http://www.honestjohn.co.uk/media/3297865/ford-logo-big.jpg http://download.fontmeme.com/fonts/10107/coca_cola_ii.html http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Coca-Cola_logo.svg/800px-Coca-Cola_logo.svg.png http://en.wikipedia.org/wiki/Script_typeface http://williamaaronkelly.files.wordpress.com/2012/01/tumblr_kvfjo9wnlt1qz4s4lo1_500.jpeg http://th07.deviantart.net/fs43/PRE/i/2009/067/7/c/Time_magazine_cover_psd_by_almosh82.jpg https://akbrodie.files.wordpress.com/2014/09/42860-08-dec-gq-cover-796492.jpg http://www.drfunkenberry.com/2012/08/29/happy-birthday-michael-jackson-human-nature-howie-t-remix-listen-now/michael-jackson-gq-200809/ http://www.360nobs.com/wp-content/uploads/2013/04/Rober-Downey-Jnr-GQ-May-Cover-2013-360nobs.com_.jpg http://www.vanityfair.com/dam/blogs/2013/jennifer-lawrence-cover.jpg http://logopond.com/gallery/detail/159380 Featured Image: http://flaffitis.files.wordpress.com/2011/05/evolution_of_typography_by_silverthornz-d32ydi0.jpg