Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
GROKKIN’ DESIGN
     Jon Tan
A kid on a plane
           (A bit about me)


          Used to have hair
Creative Director at http://omniti.com/
  Blogs...
Design is:                    ‣   Brand and identity

80% Science, 20% Art               ‣   Typography and layout
  Conde...
“People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’
That’s not what we ...
BRAND & IDENTITY
Brand evolution




International Time Recording Co. (1889) and the Computing Scale Co. (1891) became the
Computing-Tabula...
…and fina&y…




International Business Machines as an acronym emerged in 1947, changed again in 1956.
It evolved into the ...
Nikon




Some use pure type as a logomark.
Coca-Cola




Some use custom type as a logomark.
Nike




Some combine type and an icon into a single graphic symbol.
Sony Vaio




Can some be both a logomark and logotype?
Brand is more than just a pretty logo…
…it’s the experience that surrounds it.
Branding: basic guide

  ‣   Vision
  ‣   Brand equity is user experience
  ‣   Keywords
  ‣   Emotional response
  ‣   Ty...
TYPOGRAPHY
Is typography important? Bruce Lawson’s spoof Zen Garden entry may give us a clue.
The Raster Wars
     Different operating systems.
          Different browsers.
           Different result.


           ...
Core web fonts

  ‣   Andale Mono by Steve Matteson
  ‣   Arial by Robin Nicholas and Patricia Saunders
  ‣   Arial Black ...
LAYOUT BASICS
One grid to rule
     them a&

Wem Crouwel’s 1968 Vormgevers poster
 for the Stedelik Museum, Amsterdam.


 Wem Crouwel us...
“I did it my way!”

           Grids for the Web.


(Props to Sinatra for the tangerine skin.)
Exact golden ratio. Round up values. Add gutters and margins. Adjust to suit.
Rule of thirds (my version). Round up if you wish. Add gutters and margins.
Compare this (A) with…
…this (B). Which is better?
1. Two columns. Approximate golden ratio split.
2. Basic body text and leading (line height).
3. One lead equals the line height of the body text. It is also the same as the distance between baselines.
4. One lead is the grid! Known as a ‘baseline grid’.
5. Head and lead, multiplied!
6. Headings and hierarchy
8. Vertical rhythm
6. Scale and Fibonacci numbers
7. Result recap
7. Result recap
Typography & layout summary

  ‣   Choose type to fit the content.
  ‣   Set type for legibility.
  ‣   Stack type with CSS...
Balance and composition may take a bit of practice
COLOUR BASICS
Colour Wheel
  12 colours: Primaries,
secondaries, and tertiaries.
Colour Wheel
  Opposites attract…
Colour Wheel
  Opposites attract…
Colour Wheel
  Opposites attract…
Colour Wheel
  Opposites attract…
Colour Wheel
  Opposites attract…
Colour Wheel
  Opposites attract…
Colour Wheel
Choose a primary color and either one or
           two compliments.


One or more can be used as muted tones.
Tints
Adding lightness.
Shades
Reducing lightness.
Tones
Reducing saturation.
Vibrant colour
 Rich, evocative, energetic.




    http://lealea.net/
Minimal colour
  Simple. Peaceful. Clear.




 http://jontangerine.com/
There’s a colour for every mood.
“A*er a certain high level of technical ski& is achieved, science, and art tend to coalesce
in æsthetics…and form.”
      ...
Thank you!
Credits & references

  ‣   Woman painting te wing: http://www.flickr.com/photos/library_of_congress/2178437377/
  ‣   ‘You...
Upcoming SlideShare
Loading in …5
×

Grokkin’ Design

9,676 views

Published on

Published in: Design, Business
  • Be the first to comment

Grokkin’ Design

  1. 1. GROKKIN’ DESIGN Jon Tan
  2. 2. A kid on a plane (A bit about me) Used to have hair Creative Director at http://omniti.com/ Blogs at http://jontangerine.com/ Responds via @jontangerine Likes Toblerone
  3. 3. Design is: ‣ Brand and identity 80% Science, 20% Art ‣ Typography and layout Condensed into three sections… ‣ Colour
  4. 4. “People think it’s this veneer — that the designers are handed this box and told, ‘Make it look good!’ That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” . — Steve Jobs, 2003
  5. 5. BRAND & IDENTITY
  6. 6. Brand evolution International Time Recording Co. (1889) and the Computing Scale Co. (1891) became the Computing-Tabulating-Recording Co. in 1914 and then International Business Machines in 1924.
  7. 7. …and fina&y… International Business Machines as an acronym emerged in 1947, changed again in 1956. It evolved into the current IBM logotype in 1972.
  8. 8. Nikon Some use pure type as a logomark.
  9. 9. Coca-Cola Some use custom type as a logomark.
  10. 10. Nike Some combine type and an icon into a single graphic symbol.
  11. 11. Sony Vaio Can some be both a logomark and logotype?
  12. 12. Brand is more than just a pretty logo…
  13. 13. …it’s the experience that surrounds it.
  14. 14. Branding: basic guide ‣ Vision ‣ Brand equity is user experience ‣ Keywords ‣ Emotional response ‣ Typeface ‣ Colour ‣ Test in context
  15. 15. TYPOGRAPHY
  16. 16. Is typography important? Bruce Lawson’s spoof Zen Garden entry may give us a clue.
  17. 17. The Raster Wars Different operating systems. Different browsers. Different result. Affe)s: Measure (line length) which can cause extra lines to be created as text wraps. Test, test, test again. http://tr.im/rasterwars
  18. 18. Core web fonts ‣ Andale Mono by Steve Matteson ‣ Arial by Robin Nicholas and Patricia Saunders ‣ Arial Black by Robin Nicholas and Patricia Saunders ‣ Comic Sans MS by Vincent Connare ‣ Courier New by Adrian Frutiger and Howard Kettler ‣ Georgia by Matthew Carter ‣ Impact by Geoffrey Lee ‣ Times New Roman by Stanley Morison with Starling Burgess and Victor Lardent ‣ Trebuchet MS by Vincent Connare ‣ Verdana by Matthew Carter http://tr.im/testwebfonts
  19. 19. LAYOUT BASICS
  20. 20. One grid to rule them a& Wem Crouwel’s 1968 Vormgevers poster for the Stedelik Museum, Amsterdam. Wem Crouwel used this grid for every piece of work he did.
  21. 21. “I did it my way!” Grids for the Web. (Props to Sinatra for the tangerine skin.)
  22. 22. Exact golden ratio. Round up values. Add gutters and margins. Adjust to suit.
  23. 23. Rule of thirds (my version). Round up if you wish. Add gutters and margins.
  24. 24. Compare this (A) with…
  25. 25. …this (B). Which is better?
  26. 26. 1. Two columns. Approximate golden ratio split.
  27. 27. 2. Basic body text and leading (line height).
  28. 28. 3. One lead equals the line height of the body text. It is also the same as the distance between baselines.
  29. 29. 4. One lead is the grid! Known as a ‘baseline grid’.
  30. 30. 5. Head and lead, multiplied!
  31. 31. 6. Headings and hierarchy
  32. 32. 8. Vertical rhythm
  33. 33. 6. Scale and Fibonacci numbers
  34. 34. 7. Result recap
  35. 35. 7. Result recap
  36. 36. Typography & layout summary ‣ Choose type to fit the content. ‣ Set type for legibility. ‣ Stack type with CSS based on availability: • font-family { '<preferred font>', '<system font>', '<core web font>', <generic>; } ‣ Test for rendering quality. ‣ Line height or ‘1 lead‘ defines the vertical rhythm. ‣ Use a grid. ‣ Try Fibonacci numbers. Compose to a scale. Aim for balance.
  37. 37. Balance and composition may take a bit of practice
  38. 38. COLOUR BASICS
  39. 39. Colour Wheel 12 colours: Primaries, secondaries, and tertiaries.
  40. 40. Colour Wheel Opposites attract…
  41. 41. Colour Wheel Opposites attract…
  42. 42. Colour Wheel Opposites attract…
  43. 43. Colour Wheel Opposites attract…
  44. 44. Colour Wheel Opposites attract…
  45. 45. Colour Wheel Opposites attract…
  46. 46. Colour Wheel Choose a primary color and either one or two compliments. One or more can be used as muted tones.
  47. 47. Tints Adding lightness.
  48. 48. Shades Reducing lightness.
  49. 49. Tones Reducing saturation.
  50. 50. Vibrant colour Rich, evocative, energetic. http://lealea.net/
  51. 51. Minimal colour Simple. Peaceful. Clear. http://jontangerine.com/
  52. 52. There’s a colour for every mood.
  53. 53. “A*er a certain high level of technical ski& is achieved, science, and art tend to coalesce in æsthetics…and form.” — Albert Einstien, 1923
  54. 54. Thank you!
  55. 55. Credits & references ‣ Woman painting te wing: http://www.flickr.com/photos/library_of_congress/2178437377/ ‣ ‘Your logo here’ body: http://www.flickr.com/photos/jystewart/3393580386/ ‣ IBM iterations: http://www.zlok.net/blog/2009/01/13/ibm-logo-design-history/ ‣ ‘Freshly made’: http://www.flickr.com/photos/lwr/327003878/ ‣ Yee Haw Heidelberg Windmill Press: http://www.flickr.com/photos/tnboriqua/1176715935 ‣ Sinatra: http://www.flickr.com/photos/marcelonoah/2939542950 ‣ Copy used in examples from The God-Idea of the Ancients (or Sex in Religion) by Eliza Gamble: http://www.authorama.com/god-idea-of-the-ancients-1.html ‣ Color wheels adapted from: www.tigercolor.com/color-lab/color-wheel/color-wheels.htm ‣ Auto polo: http://www.flickr.com/photos/library_of_congress/2477626151/ ‣ Y-fronts worn by Vitruvian Man: model’s own.

×