SlideShare ist ein Scribd-Unternehmen logo
1 von 55
GROKKIN’ DESIGN
     Jon Tan
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
Design is:                    ‣   Brand and identity

80% Science, 20% Art               ‣   Typography and layout
  Condensed into three sections…   ‣   Colour
“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
BRAND & IDENTITY
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.
…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.
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
  ‣   Typeface
  ‣   Colour
  ‣   Test in context
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.


               Affe)s:
Measure (line length) which can cause
extra lines to be created as text wraps.
         Test, test, test again.


       http://tr.im/rasterwars
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
LAYOUT BASICS
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.
“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 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.
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.”
                                                                                     — Albert Einstien, 1923
Thank you!
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.

Weitere ähnliche Inhalte

Ähnlich wie Grokkin’ Design

5.5 ways to be awesome
5.5 ways to be awesome5.5 ways to be awesome
5.5 ways to be awesomeBill Hardesty
 
Make your school magazine look professional
Make your school magazine look professionalMake your school magazine look professional
Make your school magazine look professionalpostgradasia
 
Mountain Top 2017 - Wherever The River Flows
Mountain Top 2017 - Wherever The River FlowsMountain Top 2017 - Wherever The River Flows
Mountain Top 2017 - Wherever The River FlowsJulian Taylor
 
Creation of magazine powerpoint
Creation of magazine powerpointCreation of magazine powerpoint
Creation of magazine powerpointIsaac Dawson
 
Diana Jimenez y Paola Cadenas
Diana Jimenez y Paola CadenasDiana Jimenez y Paola Cadenas
Diana Jimenez y Paola CadenasDiana Jimenez
 
Guide to decks
Guide to decksGuide to decks
Guide to decksGrace Ke
 
At the beach. Cambridge starters vocabulary
At the beach. Cambridge starters vocabularyAt the beach. Cambridge starters vocabulary
At the beach. Cambridge starters vocabularyiratxebilbus
 
Essay On My Favourite Subject English For Class 7
Essay On My Favourite Subject English For Class 7Essay On My Favourite Subject English For Class 7
Essay On My Favourite Subject English For Class 7Nicole Barnes
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principlesDzung Nguyen
 
Le Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash CourseLe Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash CourseBoris Paillard
 
Impactful Exhibit Design Lunch & Learn
Impactful Exhibit Design Lunch & LearnImpactful Exhibit Design Lunch & Learn
Impactful Exhibit Design Lunch & LearnThe Trade Group
 
DCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great DesignDCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great DesignJared Ponchot
 
Art Direction for Uncharted 2: Among Thieves
Art Direction for Uncharted 2: Among ThievesArt Direction for Uncharted 2: Among Thieves
Art Direction for Uncharted 2: Among ThievesNaughty Dog
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline Worldelliotjaystocks
 
Y8 Web Design Introduction
Y8 Web Design IntroductionY8 Web Design Introduction
Y8 Web Design IntroductionZ Hoeben
 

Ähnlich wie Grokkin’ Design (20)

5.5 ways to be awesome
5.5 ways to be awesome5.5 ways to be awesome
5.5 ways to be awesome
 
Make your school magazine look professional
Make your school magazine look professionalMake your school magazine look professional
Make your school magazine look professional
 
Mountain Top 2017 - Wherever The River Flows
Mountain Top 2017 - Wherever The River FlowsMountain Top 2017 - Wherever The River Flows
Mountain Top 2017 - Wherever The River Flows
 
Design doc
Design docDesign doc
Design doc
 
Creation of magazine powerpoint
Creation of magazine powerpointCreation of magazine powerpoint
Creation of magazine powerpoint
 
Diana Jimenez y Paola Cadenas
Diana Jimenez y Paola CadenasDiana Jimenez y Paola Cadenas
Diana Jimenez y Paola Cadenas
 
Guide to decks
Guide to decksGuide to decks
Guide to decks
 
At the beach. Cambridge starters vocabulary
At the beach. Cambridge starters vocabularyAt the beach. Cambridge starters vocabulary
At the beach. Cambridge starters vocabulary
 
The Design Panel
The Design PanelThe Design Panel
The Design Panel
 
Essay On My Favourite Subject English For Class 7
Essay On My Favourite Subject English For Class 7Essay On My Favourite Subject English For Class 7
Essay On My Favourite Subject English For Class 7
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
 
Ui ux designing principles
Ui ux designing principlesUi ux designing principles
Ui ux designing principles
 
Le Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash CourseLe Wagon - UI and Design Crash Course
Le Wagon - UI and Design Crash Course
 
Wtf 1
Wtf 1Wtf 1
Wtf 1
 
Impactful Exhibit Design Lunch & Learn
Impactful Exhibit Design Lunch & LearnImpactful Exhibit Design Lunch & Learn
Impactful Exhibit Design Lunch & Learn
 
DCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great DesignDCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great Design
 
Art Direction for Uncharted 2: Among Thieves
Art Direction for Uncharted 2: Among ThievesArt Direction for Uncharted 2: Among Thieves
Art Direction for Uncharted 2: Among Thieves
 
Recoupling
RecouplingRecoupling
Recoupling
 
Close Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline WorldClose Your Browser: Finding Inspiration In The Offline World
Close Your Browser: Finding Inspiration In The Offline World
 
Y8 Web Design Introduction
Y8 Web Design IntroductionY8 Web Design Introduction
Y8 Web Design Introduction
 

Kürzlich hochgeladen

Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation decktbatkhuu1
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Delhi Call girls
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...amitlee9823
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Call Girls in Nagpur High Profile
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxPastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxSegundoManuelFaichin1
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funneljen_giacalone
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...amitlee9823
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...home
 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxsuhanimunjal27
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...RitikaRoy32
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja Nehwal
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...Call Girls in Nagpur High Profile
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)amitlee9823
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxmirandajeremy200221
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...babafaisel
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...Call Girls in Nagpur High Profile
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxjeswinjees
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...SUHANI PANDEY
 

Kürzlich hochgeladen (20)

Peaches App development presentation deck
Peaches App development presentation deckPeaches App development presentation deck
Peaches App development presentation deck
 
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
Best VIP Call Girls Noida Sector 44 Call Me: 8448380779
 
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
RT Nagar Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bang...
 
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...Top Rated  Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
 
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️call girls in Dakshinpuri  (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
call girls in Dakshinpuri (DELHI) 🔝 >༒9953056974 🔝 genuine Escort Service 🔝✔️✔️
 
Pastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. XxxPastel Portfolio _ by Slidesgo.pptx. Xxx
Pastel Portfolio _ by Slidesgo.pptx. Xxx
 
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the FunnelTapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
Recommendable # 971589162217 # philippine Young Call Girls in Dubai By Marina...
 
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptxinfant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
 
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Basapura ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Hy...
 
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
VVIP Pune Call Girls Hadapsar (7001035870) Pune Escorts Nearby with Complete ...
 
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
Escorts Service Nagavara ☎ 7737669865☎ Book Your One night Stand (Bangalore)
 
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptxDragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
 
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
Kala jadu for love marriage | Real amil baba | Famous amil baba | kala jadu n...
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Stark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptxStark Industries Marketing Plan (1).pptx
Stark Industries Marketing Plan (1).pptx
 
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
 

Grokkin’ Design

  • 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. Design is: ‣ Brand and identity 80% Science, 20% Art ‣ Typography and layout Condensed into three sections… ‣ Colour
  • 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
  • 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. …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. Nikon Some use pure type as a logomark.
  • 9. Coca-Cola Some use custom type as a logomark.
  • 10. Nike Some combine type and an icon into a single graphic symbol.
  • 11. Sony Vaio Can some be both a logomark and logotype?
  • 12. Brand is more than just a pretty logo…
  • 13. …it’s the experience that surrounds it.
  • 14. Branding: basic guide ‣ Vision ‣ Brand equity is user experience ‣ Keywords ‣ Emotional response ‣ Typeface ‣ Colour ‣ Test in context
  • 16. Is typography important? Bruce Lawson’s spoof Zen Garden entry may give us a clue.
  • 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. 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
  • 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. “I did it my way!” Grids for the Web. (Props to Sinatra for the tangerine skin.)
  • 22. Exact golden ratio. Round up values. Add gutters and margins. Adjust to suit.
  • 23. Rule of thirds (my version). Round up if you wish. Add gutters and margins.
  • 24. Compare this (A) with…
  • 25. …this (B). Which is better?
  • 26. 1. Two columns. Approximate golden ratio split.
  • 27. 2. Basic body text and leading (line height).
  • 28. 3. One lead equals the line height of the body text. It is also the same as the distance between baselines.
  • 29. 4. One lead is the grid! Known as a ‘baseline grid’.
  • 30. 5. Head and lead, multiplied!
  • 31. 6. Headings and hierarchy
  • 33. 6. Scale and Fibonacci numbers
  • 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. Balance and composition may take a bit of practice
  • 39. Colour Wheel 12 colours: Primaries, secondaries, and tertiaries.
  • 40. Colour Wheel Opposites attract…
  • 41. Colour Wheel Opposites attract…
  • 42. Colour Wheel Opposites attract…
  • 43. Colour Wheel Opposites attract…
  • 44. Colour Wheel Opposites attract…
  • 45. Colour Wheel Opposites attract…
  • 46. Colour Wheel Choose a primary color and either one or two compliments. One or more can be used as muted tones.
  • 50. Vibrant colour Rich, evocative, energetic. http://lealea.net/
  • 51. Minimal colour Simple. Peaceful. Clear. http://jontangerine.com/
  • 52. There’s a colour for every mood.
  • 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
  • 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.

Hinweis der Redaktion

  1. Undergraduate design course in 40 minutes.
  2. Mrs. Irma Lee McElroy, a former office worker, painting the American insignia on airplane wings at the naval Air Base, Corpus Christi, Texas. Her husband is a flight instructor . Dated 1942 August. http://www.flickr.com/photos/library_of_congress/2178437377/
  3. Steve Paul Jobs - The Guts of a New Machine (30 November 2003) http://en.wikiquote.org/wiki/Steve_Jobs
  4. http://www.flickr.com/photos/jystewart/3393580386/
  5. Via Zlok branding and online strategy studio: http://www.zlok.net/blog/2009/01/13/ibm-logo-design-history/ 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.
  6. International Business Machines as an acronym emerged in 1947, changed again in 1956. It evolved into the current IBM logotype in 1972.
  7. Since 1917. Some use pure type as a logomark.
  8. Some use custom type as a logomark.
  9. Some combine type and an icon into a single graphic symbol.
  10. Can some be both a logomark and logotype?
  11. Image: http://www.flickr.com/photos/lwr/327003878/
  12. The Guitar Store, Commercial Road, Southampton, UK Image and notes: http://www.flickr.com/photos/glenscott/3263916059/
  13. Start with vision. Think of your brand as a person. Remember that brand equity, or how a brand is regarded &amp;#x2014; much like a person &amp;#x2014; is defined by the quality of the interactions people have with it. Write down keywords that describe the personality of the brand. What&amp;#x2019;s the emotional response you want to encourage in customers? Start in greyscale with the typeface; typefaces have resonance in the same way that color does. Apply color to enhance the resonance with want. Own the color. It&amp;#x2019;s more than decoration. Test your ideas at different sizes on the screen. It may be that alternatives are required for smaller sizes at low resolution.
  14. Heidelberg Windmill press at Yee Haw Industries, Knoxville, TN. http://www.yeehawindustries.com/
  15. Why typography is important. CSS Zen Garden spoof by Bruce Lawson.
  16. Core web fonts test suite (plus a couple of other combinations): http://jontangerine.com/silo/typography/web-fonts/
  17. Download from http://sourceforge.net/projects/corefonts/files/ Does Webdings also count? They put us in the same position as small printers: limited number of typefaces. However, we have unlimited fonts of those faces.
  18. Rule of thirds (my version). Round up if you wish. Add gutters and margins.
  19. The basis of any layout is the humble paragraph. Examples: http://jontangerine.com/silo/typography/p/
  20. Compare this (A) with&amp;#x2026;
  21. &amp;#x2026;this (B). Which is better?
  22. 1. Two columns. Approximate golden ratio split.
  23. 2. Basic body text and leading (line height) equals &amp;#x201C;1 lead&amp;#x201D;. Legibility: &amp;#x201C;Discernability: distinctness that makes perception easy.&amp;#x201D; &amp;#x201C;The quality of written language that makes it easy to read and understand&amp;#x201D;
  24. 3. The difference between baselines also equals one lead. One lead is the grid! Known as a &amp;#x2018;baseline grid&amp;#x2019; All values in the layout should relate to the one lead value. In this instance the margin between columns is 40px (1 lead &amp;#xD7; 2).
  25. 3. One lead is the grid! Known as a &amp;#x2018;baseline grid&amp;#x2019; All values in the layout should be multiple of 0.5 lead. In this instance the margin between columns is 40px (1 lead &amp;#xD7; 2).
  26. Example is 960px wide including gutters and margins.
  27. Importance defined by size and position.
  28. Auto polo: http://www.flickr.com/photos/library_of_congress/2477626151/
  29. http://www.colourlovers.com/
  30. Choose a primary from tints&amp;#x2026;
  31. &amp;#x2026;or choose a primary from shades&amp;#x2026;
  32. &amp;#x2026;or tones.
  33. So whether you go with something vibrant&amp;#x2026;
  34. &amp;#x2026;or something simple&amp;#x2026;
  35. &amp;#x2026;there&amp;#x2019;s a palette for every mood, and every message. http://en.wikipedia.org/wiki/Golden_ratio http://www.sitepoint.com/article/principles-beautiful-web-design/3/ http://webtypography.net/Rhythm_and_Proportion/Vertical_Motion/2.2.2/