the importance of Great Design

why design is important &
tips for designing well




JARED PONCHOT * DRUPAL CAMP ATLANTA ...
Jared Ponchot of Lullabot
Jared Ponchot of Lullabot
Jared Ponchot of Lullabot
Rainbows & Unicorns
Rainbows & Unicorns

‣   What is design?
Rainbows & Unicorns

‣   What is design?
‣   Why is design important?
Rainbows & Unicorns

‣   What is design?
‣   Why is design important?
‣   Design Fundamentals
Rainbows & Unicorns

‣   What is design?
‣   Why is design important?
‣   Design Fundamentals
‣   The Design Process
Rainbows & Unicorns

‣   What is design?
‣   Why is design important?
‣   Design Fundamentals
‣   The Design Process
‣   S...
Fun with semantics
Fun with semantics

because words mean things!
Design is NOT
Design is NOT

‣   Proficiency with Adobe’s Creative Suite
Design is NOT

‣   Proficiency with Adobe’s Creative Suite
‣   Proficiency with CSS
Design is NOT

‣   Proficiency with Adobe’s Creative Suite
‣   Proficiency with CSS
‣   Awareness of Helvetica Neue
Design is NOT

‣   Proficiency with Adobe’s Creative Suite
‣   Proficiency with CSS
‣   Awareness of Helvetica Neue
‣   Si...
Design is NOT

‣   Proficiency with Adobe’s Creative Suite
‣   Proficiency with CSS
‣   Awareness of Helvetica Neue
‣   Si...
What is design?

According to wikipedia, “Design is the planning
that lays the basis for the making of every object
or sys...
Or . . .

According to wikipedia, “Graphic design is a
collaborative process between a client and a
designer — in conjunct...
Design is the conscious effort to
impose a meaningful order.




                                    - VICTOR PAPANEK
Design is not just what it looks like and feels like.
Design is how it works.




                                        ...
Design is problem solving.

But wait, there’s more. Problem solving requires
knowing your problem!

Design is the diagnosi...
Solve problems, don’t create them
profound conclusion

Design is one tiny part decoration and several
giant parts problem assessment and solution.
Notice I ...
Design is Important!
Design is Important!
Design is Important!

‣   Great design yields meaningful communication.
Design is Important!

‣   Great design yields meaningful communication.
‣   Great design truly solves problems.
Design is Important!

‣   Great design yields meaningful communication.
‣   Great design truly solves problems.
‣   Great ...
Meaningful Communication
Meaningful Communication
Meaningful Communication
Meaningful Communication
Meaningful Communication
Meaningful Communication
Meaningful Communication
bad design creates confusion
Truly Solve Problems
What problem are we solving?
A nicer approach
Create great experiences
Let’s have fun with this thing!
“Often seduction is seen as a negative thing, it’s seen
as bad. People think of it as leading people astray.
However, I ac...
Let’s have fun with this thing!
Great Experiences Sell!
A case study in design importance

 mp3 player 1   vs.   mp3 player 2
1st mp3 Player in the US Market!

                   Diamond Rio PMP300
                   November 1998
Meet the competition (a few years late to the party)

                          Apple iPod
                          Octob...
And the winner is?

Diamond Rio advantages:
‣ Longer battery life


‣ More Storage*


‣ Able to play more formats


‣ Firs...
Design is strategic, and impeccably designed
systems, products, and services are really all that
separate one organization...
Great design for Apple meant
Great design for Apple meant

‣   A name change (no longer Apple Computer)
Great design for Apple meant

‣   A name change (no longer Apple Computer)
‣   Became the #1 music retailer in the world
 ...
Great design for Apple meant

‣   A name change (no longer Apple Computer)
‣   Became the #1 music retailer in the world
 ...
Great design for Apple meant

‣   A name change (no longer Apple Computer)
‣   Became the #1 music retailer in the world
 ...
Great design for Apple meant

‣   A name change (no longer Apple Computer)
‣   Became the #1 music retailer in the world
 ...
Quick Summary
Quick Summary

‣   Design is part beautification, but also problem
    discovery and problem solving.
Quick Summary

‣   Design is part beautification, but also problem
    discovery and problem solving.
‣   Design is import...
Quick Summary

‣   Design is part beautification, but also problem
    discovery and problem solving.
‣   Design is import...
How to produce GREAT design?

Jared’s not-so-pantented, largely appropriated,
borrowed, learned, and sometimes stolen tips...
How to produce GREAT design?
How to produce GREAT design?

Seven Simple Tips/Fundamentals
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
How to produce GREAT design?

Seven Simple Tips/Fundamentals
‣ Steal . . . I mean get inspired (or at least influenced)


...
A thief is only as good as his loot

Steal from the best
Recreate the masters

Just as painters learn by doing “studies” or
reproductions of master works, so should you!




Bougu...
Unique solutions are often
NOT the best solutions
Don’t worry about people stealing your design work.
Worry about when they stop.




                                      ...
So what am I advocating?

‣   Study
‣   Be Influenced
    “Influence is borrowed, inspiration is earned.” -Cameron Moll
‣ ...
Something’s Gotta Win
Visual Hierarchy - Easy as 1, 2, 3

Visual hierarchy is the emphasis and classification of
elements according to a) relati...
Fundamentals of Design & Visual Hierarchy
Fundamentals of Design & Visual Hierarchy

‣   proportion
Fundamentals of Design & Visual Hierarchy

‣   proportion
‣   proximity
Fundamentals of Design & Visual Hierarchy

‣   proportion
‣   proximity
‣   position
Fundamentals of Design & Visual Hierarchy

‣   proportion
‣   proximity
‣   position
‣   alignment
Fundamentals of Design & Visual Hierarchy

‣   proportion
‣   proximity
‣   position
‣   alignment
‣   contrast
Fundamentals of Design & Visual Hierarchy

‣   proportion
‣   proximity
‣   position
‣   alignment
‣   contrast
‣   color
Proportion & Visual Importance


    2



                   1
    3
Proximity & Visual Relationships




Lorem ipsum dolor sit amet, consectetur adipiscing elit.




Lorem ipsum dolor sit am...
Position & Visual Importance


    1




    2          3
Alignment & Relationships
Contrast
Color & Visual Importance

‣   Warm colors stand out
‣   Cool colors recede
Nifty visual hierarchy trick
Nifty visual hierarchy trick
Double Click to Insert Title

Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, co...
Double Click to Insert Title

Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, co...
Double Click to Insert Title

Insert your fancy text right here. This is for body
copy etc. Lorem ipsum dolor sit amet, co...
?
Position?
Alignment?
Proximity?
Color?
Basic color theory tip

Create nice color palettes by:
‣ Letting others do it for you


‣ Choose a color and find somethin...
beautiful geometry

The nature of proportions & grid systems
the Golden Section Rectangle
simple 3 by 3 grid
pretty people grid systems
Grid Systems are a Designer’s Friend
Grid Systems are a Designer’s Friend
Grid Systems are a Designer’s Friend
Grid Systems are a Designer’s Friend
Web Typography Basics

‣   No mixxy the face types (serifs or sans serifs)
‣   Be mindful of contrast
‣   Let it breathe
No Mixxy the Serifs or Sans Serifs

Although it would be fine to have a Sans Serif face as your titles and then a
Serif fa...
No Mixxy the Serifs or Sans Serifs

A nicer example might be . . .



   My Fancy Titles are Helvetica
   Bold
   My fancy...
Be mindful of Contrast
Contrast can be a wonderful way to enhance the visual hierarchy of your
typography (e.g. darkest te...
Be mindful of Contrast
Another        No No




  Lots of reversed out body copy that is a saturated color on a darker
  b...
Don’t cram too much in
Let it breathe!

Remember your design fundamentals like Proximity when adding margins
or padding and remember to provide m...
Less is less. Less is better.

Jason Fried coined the phrase “less is less”
because he said that less is more "implies tha...
Any intelligent fool can make things bigger and
more complex . . . It takes a touch of genius - and a lot
of courage to mo...
more is MORE!
more is MORE!
anyone else hate facebook?
Perfection is achieved, not when there is nothing more
to add, but when there is nothing left to take away




           ...
That’s all I’ll say about simplicity
Creative Pause

Stop, take a break, do something fun or at least
move on to something else!
The ‘creative pause’ is defined as the time interval
which begins when the thinker interrupts conscious
preoccupation with...
Even if it keeps you up all night, wash down the walls and scrub the oor of your study
before composing a syllable.

Clean...
Typical Web Design Process
Typical Web Design Process

‣   Planning/IA
Typical Web Design Process

‣   Planning/IA
‣   Wireframing
Typical Web Design Process

‣   Planning/IA
‣   Wireframing
‣   Visual Layer
Planning/IA
Planning/IA

‣   Try to keep this geared toward wireframing*
‣   Identify key elements/entities
    ‣   Roles
    ‣   Navi...
Wireframing

‣          Keep it cheap
‣          Cover all unique node types, views, etc.
‣          Don’t make it pretty!...
The best design tool is a long eraser
with a pencil at one end.




                                        - MARTY NEUMEI...
Visual Layer
Visual Layer

‣   Remember the fundamentals
‣   Know your medium
‣   How far you go in PSD’s is up to you and your
    ski...
Drupal Design Nuggets

‣   Commonly overlooked Drupal elements
    ‣   Tabs
    ‣   Search Results
    ‣   Pagers
    ‣   ...
Drupal Design Nuggets

‣   Tweaking Drupal’s Defaults
    ‣ Semantic Views


    ‣ Admin Themes


    ‣ Admin Menu
Designer/Themer’s Tools

‣   OmniGraffle Stencils/Templates
    konigi UX stencils, 960 template
‣   Dot Grid Book
    Beh...
Great Expectations: Self & Others
Great Expectations: Self & Others

‣   Expect great things from yourself.
Great Expectations: Self & Others

‣   Expect great things from yourself.
‣   Surround yourself with people who expect you...
The Pygmalion effect

The Pygmalion effect, or Rosenthal effect, refers to
the phenomenon in which the greater the
expecta...
Great Expectations: Clients
Great Expectations: Clients

‣   Choose great clients
Great Expectations: Clients

‣   Choose great clients
‣   Never make the logo bigger
Great Expectations: Clients

‣   Choose great clients
‣   Never make the logo bigger
‣   Definitely don’t make it “pop”
To achieve great things, two things are needed: a plan,
and not quite enough time.




                                   ...
Questions? Comments?




 via dharmesh mehta on fwdmsgsnpics.blogspot.com




JARED PONCHOT * DRUPAL CAMP ATLANTA 2010
twi...
DCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great Design
DCATL 2010: The Importance of Great Design
Upcoming SlideShare
Loading in...5
×

DCATL 2010: The Importance of Great Design

2,229

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,229
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "DCATL 2010: The Importance of Great Design"

  1. 1. the importance of Great Design why design is important & tips for designing well JARED PONCHOT * DRUPAL CAMP ATLANTA 2010 twitter: @jponch
  2. 2. Jared Ponchot of Lullabot
  3. 3. Jared Ponchot of Lullabot
  4. 4. Jared Ponchot of Lullabot
  5. 5. Rainbows & Unicorns
  6. 6. Rainbows & Unicorns ‣ What is design?
  7. 7. Rainbows & Unicorns ‣ What is design? ‣ Why is design important?
  8. 8. Rainbows & Unicorns ‣ What is design? ‣ Why is design important? ‣ Design Fundamentals
  9. 9. Rainbows & Unicorns ‣ What is design? ‣ Why is design important? ‣ Design Fundamentals ‣ The Design Process
  10. 10. Rainbows & Unicorns ‣ What is design? ‣ Why is design important? ‣ Design Fundamentals ‣ The Design Process ‣ Some Drupal Design Nuggets
  11. 11. Fun with semantics
  12. 12. Fun with semantics because words mean things!
  13. 13. Design is NOT
  14. 14. Design is NOT ‣ Proficiency with Adobe’s Creative Suite
  15. 15. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS
  16. 16. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue
  17. 17. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue ‣ Simply liking Apple products
  18. 18. Design is NOT ‣ Proficiency with Adobe’s Creative Suite ‣ Proficiency with CSS ‣ Awareness of Helvetica Neue ‣ Simply liking Apple products ‣ Theming
  19. 19. What is design? According to wikipedia, “Design is the planning that lays the basis for the making of every object or system.” - WIKIPEDIA.ORG
  20. 20. Or . . . According to wikipedia, “Graphic design is a collaborative process between a client and a designer — in conjunction with producers of form — to convey a specific message to a targeted audience. The term "graphic design" can also refer to a number of artistic and professional disciplines that focus on visual communication and presentation.” - WIKIPEDIA.ORG
  21. 21. Design is the conscious effort to impose a meaningful order. - VICTOR PAPANEK
  22. 22. Design is not just what it looks like and feels like. Design is how it works. - STEVE JOBS
  23. 23. Design is problem solving. But wait, there’s more. Problem solving requires knowing your problem! Design is the diagnosis and solving of problems.
  24. 24. Solve problems, don’t create them
  25. 25. profound conclusion Design is one tiny part decoration and several giant parts problem assessment and solution. Notice I didn’t even mention PhotoShop
  26. 26. Design is Important!
  27. 27. Design is Important!
  28. 28. Design is Important! ‣ Great design yields meaningful communication.
  29. 29. Design is Important! ‣ Great design yields meaningful communication. ‣ Great design truly solves problems.
  30. 30. Design is Important! ‣ Great design yields meaningful communication. ‣ Great design truly solves problems. ‣ Great design creates great experiences.
  31. 31. Meaningful Communication
  32. 32. Meaningful Communication
  33. 33. Meaningful Communication
  34. 34. Meaningful Communication
  35. 35. Meaningful Communication
  36. 36. Meaningful Communication
  37. 37. Meaningful Communication
  38. 38. bad design creates confusion
  39. 39. Truly Solve Problems
  40. 40. What problem are we solving?
  41. 41. A nicer approach
  42. 42. Create great experiences
  43. 43. Let’s have fun with this thing!
  44. 44. “Often seduction is seen as a negative thing, it’s seen as bad. People think of it as leading people astray. However, I actually think that seduction can be a good thing, it can be a fun thing.” - ANDY BUDD
  45. 45. Let’s have fun with this thing!
  46. 46. Great Experiences Sell!
  47. 47. A case study in design importance mp3 player 1 vs. mp3 player 2
  48. 48. 1st mp3 Player in the US Market! Diamond Rio PMP300 November 1998
  49. 49. Meet the competition (a few years late to the party) Apple iPod October 2001
  50. 50. And the winner is? Diamond Rio advantages: ‣ Longer battery life ‣ More Storage* ‣ Able to play more formats ‣ First to market (by almost 2 years) ‣ More functionality *By the time the iPod released the Diamond Rio had more storage than the initial iPod
  51. 51. Design is strategic, and impeccably designed systems, products, and services are really all that separate one organization from another these days. Quality alone is not enough — a lot of people have good quality, right? Instead, the overall DESIGN of the "thing" must be so compelling that it serves as a key differentiator. - GARR REYNOLDS
  52. 52. Great design for Apple meant
  53. 53. Great design for Apple meant ‣ A name change (no longer Apple Computer)
  54. 54. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart)
  55. 55. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market
  56. 56. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market ‣ Sold over 5 billion songs
  57. 57. Great design for Apple meant ‣ A name change (no longer Apple Computer) ‣ Became the #1 music retailer in the world (surpassing Walmart) ‣ Approximately 80% of the mp3 player market ‣ Sold over 5 billion songs ‣ Inspired several other revolutionary products (e.g. iPhone, iPad)
  58. 58. Quick Summary
  59. 59. Quick Summary ‣ Design is part beautification, but also problem discovery and problem solving.
  60. 60. Quick Summary ‣ Design is part beautification, but also problem discovery and problem solving. ‣ Design is important!
  61. 61. Quick Summary ‣ Design is part beautification, but also problem discovery and problem solving. ‣ Design is important! ‣ Great design can help you knock Walmart down a peg or two.
  62. 62. How to produce GREAT design? Jared’s not-so-pantented, largely appropriated, borrowed, learned, and sometimes stolen tips and best practices for producing great design
  63. 63. How to produce GREAT design?
  64. 64. How to produce GREAT design? Seven Simple Tips/Fundamentals
  65. 65. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced)
  66. 66. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy
  67. 67. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems
  68. 68. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Typography 101
  69. 69. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Typography 101 ‣ Less is Less
  70. 70. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Typography 101 ‣ Less is Less ‣ Creative Pause
  71. 71. How to produce GREAT design? Seven Simple Tips/Fundamentals ‣ Steal . . . I mean get inspired (or at least influenced) ‣ Visual Hierarchy ‣ Proportions & Grid Systems ‣ Typography 101 ‣ Less is Less ‣ Creative Pause ‣ Great Expectations
  72. 72. A thief is only as good as his loot Steal from the best
  73. 73. Recreate the masters Just as painters learn by doing “studies” or reproductions of master works, so should you! Bouguereau reproductions painted by my wife
  74. 74. Unique solutions are often NOT the best solutions
  75. 75. Don’t worry about people stealing your design work. Worry about when they stop. - JEFFERY ZELDMAN
  76. 76. So what am I advocating? ‣ Study ‣ Be Influenced “Influence is borrowed, inspiration is earned.” -Cameron Moll ‣ Find Inspiration
  77. 77. Something’s Gotta Win
  78. 78. Visual Hierarchy - Easy as 1, 2, 3 Visual hierarchy is the emphasis and classification of elements according to a) relative importance within the composition as a whole and b) parent, child, and sibling relationships. - CAMERON MOLL
  79. 79. Fundamentals of Design & Visual Hierarchy
  80. 80. Fundamentals of Design & Visual Hierarchy ‣ proportion
  81. 81. Fundamentals of Design & Visual Hierarchy ‣ proportion ‣ proximity
  82. 82. Fundamentals of Design & Visual Hierarchy ‣ proportion ‣ proximity ‣ position
  83. 83. Fundamentals of Design & Visual Hierarchy ‣ proportion ‣ proximity ‣ position ‣ alignment
  84. 84. Fundamentals of Design & Visual Hierarchy ‣ proportion ‣ proximity ‣ position ‣ alignment ‣ contrast
  85. 85. Fundamentals of Design & Visual Hierarchy ‣ proportion ‣ proximity ‣ position ‣ alignment ‣ contrast ‣ color
  86. 86. Proportion & Visual Importance 2 1 3
  87. 87. Proximity & Visual Relationships Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  88. 88. Position & Visual Importance 1 2 3
  89. 89. Alignment & Relationships
  90. 90. Contrast
  91. 91. Color & Visual Importance ‣ Warm colors stand out ‣ Cool colors recede
  92. 92. Nifty visual hierarchy trick
  93. 93. Nifty visual hierarchy trick
  94. 94. Double Click to Insert Title Insert your fancy text right here. This is for body copy etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada diam at mauris cursus sodales. Nam ac dapibus lectus. Etiam tortor purus, dignissim a elementum.
  95. 95. Double Click to Insert Title Insert your fancy text right here. This is for body copy etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada diam at mauris cursus sodales. Nam ac dapibus lectus. Etiam tortor purus, dignissim a elementum.
  96. 96. Double Click to Insert Title Insert your fancy text right here. This is for body copy etc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada diam at mauris cursus sodales. Nam ac dapibus lectus. Etiam tortor purus, dignissim a elementum.
  97. 97. ? Position? Alignment? Proximity? Color?
  98. 98. Basic color theory tip Create nice color palettes by: ‣ Letting others do it for you ‣ Choose a color and find something in the neighborhood of it’s complement to go with it Complements reside opposite one another on the color wheel
  99. 99. beautiful geometry The nature of proportions & grid systems
  100. 100. the Golden Section Rectangle
  101. 101. simple 3 by 3 grid
  102. 102. pretty people grid systems
  103. 103. Grid Systems are a Designer’s Friend
  104. 104. Grid Systems are a Designer’s Friend
  105. 105. Grid Systems are a Designer’s Friend
  106. 106. Grid Systems are a Designer’s Friend
  107. 107. Web Typography Basics ‣ No mixxy the face types (serifs or sans serifs) ‣ Be mindful of contrast ‣ Let it breathe
  108. 108. No Mixxy the Serifs or Sans Serifs Although it would be fine to have a Sans Serif face as your titles and then a Serif face for your body copy, don’t mix multiple Sans Serifs or Multiple Serifs (as a general rule). No No My Fancy Titles are Helvetica My fancy subtitles are going to be Verdana And now for some nice body copy in Tahoma just for good measure Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu. Donec mollis rhoncus risus, eget adipiscing tellus eleifend . . .
  109. 109. No Mixxy the Serifs or Sans Serifs A nicer example might be . . . My Fancy Titles are Helvetica Bold My fancy subtitles are also a nice Helvetica And now for some nice body copy in Georgia just for good measure Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu.
  110. 110. Be mindful of Contrast Contrast can be a wonderful way to enhance the visual hierarchy of your typography (e.g. darkest text for title, slightly lighter text for subtitle, slightly lighter text for body copy). However, in instances like putting text on a darker background, you need to be very careful to keep things legible. No No Lots of reversed out body copy on a darker background can be tiring for the reader and therefore not honoring your content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu. Donec mollis rhoncus risus, eget adipiscing tellus eleifend vitae. Proin et rhoncus risus. Nulla id quam libero. Donec id velit felis. Sed vitae urna nunc, vel cursus nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sem tortor, aliquet et ullamcorper sed . . .
  111. 111. Be mindful of Contrast Another No No Lots of reversed out body copy that is a saturated color on a darker background can be really abrasive for the reader and therefore not honoring your content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at diam leo. Aliquam quis lorem ut sapien aliquam consectetur ut in justo. Fusce vel sem arcu. Donec mollis rhoncus risus, eget adipiscing tellus eleifend vitae. Proin et rhoncus risus. Nulla id quam libero. Donec id velit felis. Sed vitae urna nunc, vel cursus nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum . . .
  112. 112. Don’t cram too much in
  113. 113. Let it breathe! Remember your design fundamentals like Proximity when adding margins or padding and remember to provide margins/paddings and line heights that allow your copy to breathe. No No A nicer approach My Fancy Titles My Fancy Titles My fancy subtitles look nice My subtitles need more line and associate with titles spacing and margin And my body copy REALLY needs And my body copy is nice and more line spacing and is annoying to read with little room to breathe. readable and enjoyable to look at with all this room to breathe.
  114. 114. Less is less. Less is better. Jason Fried coined the phrase “less is less” because he said that less is more "implies that more is better."
  115. 115. Any intelligent fool can make things bigger and more complex . . . It takes a touch of genius - and a lot of courage to move in the opposite direction. - ALBERT EINSTEIN
  116. 116. more is MORE!
  117. 117. more is MORE!
  118. 118. anyone else hate facebook?
  119. 119. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away - ANTOINE DE SAINT EXUPRY
  120. 120. That’s all I’ll say about simplicity
  121. 121. Creative Pause Stop, take a break, do something fun or at least move on to something else!
  122. 122. The ‘creative pause’ is defined as the time interval which begins when the thinker interrupts conscious preoccupation with an unsolved problem, and ends when the solution to the problem unexpectedly appears in consciousness. - INTERNATIONAL JOURNAL OF PSYCHOANALYSIS, PROFESSOR LAJOS SZÉKELY
  123. 123. Even if it keeps you up all night, wash down the walls and scrub the oor of your study before composing a syllable. Clean the place as if the Pope were on his way. Spotlessness is the niece of inspiration. The more you clean, the more brilliant your writing will be, so do not hesitate to take to the open elds to scour the undersides of rocks or swab in the dark forest upper branches, nests full of eggs. When you nd your way back home and stow the sponges and brushes under the sink, you will behold in the light of dawn the immaculate altar of your desk, a clean surface in the middle of a clean world. From a small vase, sparkling blue, lift a yellow pencil, the sharpest of the bouquet, and cover pages with tiny sentences like long rows of devoted ants that followed you in from the woods. - BILLY COLLINS from SAILING ALONE AROUND THE ROOM
  124. 124. Typical Web Design Process
  125. 125. Typical Web Design Process ‣ Planning/IA
  126. 126. Typical Web Design Process ‣ Planning/IA ‣ Wireframing
  127. 127. Typical Web Design Process ‣ Planning/IA ‣ Wireframing ‣ Visual Layer
  128. 128. Planning/IA
  129. 129. Planning/IA ‣ Try to keep this geared toward wireframing* ‣ Identify key elements/entities ‣ Roles ‣ Navigation ‣ Node Types & Fields ‣ Contexts ‣ Views ‣ Identify visual hierarchy ordering ‣ Avoid early feature creep
  130. 130. Wireframing ‣ Keep it cheap ‣ Cover all unique node types, views, etc. ‣ Don’t make it pretty! ‣ Evaluate visual hierarchy (1, 2, 3) samplifee home | how it works | get started | browse | shop | sign in search samplifee home | how it works | get started | browse | shop | sign in search samplifee home | how it works | get started | browse | shop | sign in search Current Voting Cycle 23 days remaining Home Browse Current Voting Cycle: 23 days remaining Home Browse Science Fiction Sort by: Date | Rank | Popularity Science Fiction VIEW ALL Historical VIEW ALL Science Fiction Moderated by Larry Lancelot Current Voting Cycle 23 days remaining Hero Block (used to tease the tour or how it works or provide high level overview) 4,327 votes cast 137 works submitted Advertisement Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Author Name Author Name Author Name Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here Science Fiction Horror Author Name Author Name Moderated by Larry Lancelot VIEW ALL Young Adult / Chapter Books VIEW ALL Larry's Picks VIEW ALL Top Vote Getters VIEW ALL Recent Additions VIEW ALL Most Reads VIEW ALL Work Title Shows Here Work Title Shows Here Author Name Author Name Work Title Here Work Title Here Work Title Here Work Title Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Author Name Author Name Author Name Author Name Author Name Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here Work Title Here Work Title Here Work Title Here Work Title Here Author Name Author Name Author Name Author Name Author Name Author Name Fantasy VIEW ALL Mystery / Thriller VIEW ALL Work Title Here Work Title Here Work Title Here Work Title Here Author Name Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here Author Name Author Name Work Title Shows Here Work Title Shows Here Work Title Shows Here Work Title Shows Here Author Name Author Name Author Name Author Name Work Title Shows Here Work Title Shows Here Author Name Author Name Popular Items Current Voting Cycle: 23 days remaining | 4,327 votes cast | 137 works submitted Work Title Here Author Name PREV 1 2 3 4 5 NEXT Romance VIEW ALL Literary Fiction VIEW ALL Signup or Login Signup today and begin voting up your favorite works or even submitting your own works to be voted on! Work Title Here Author Name Signup or Login Signup today and begin voting or submitting your own works to be voted on! Work Title Here Work Title Shows Here Work Title Shows Here Author Name Work Title Shows Here Work Title Shows Here Author Name Author Name Author Name Author Name Browse Genres Info & Support Science Fiction Historical About FAQ Horror Young Adult / Chapter Books Privacy Help Western VIEW ALL Fantasy Mystery / Thriller Terms & Conditions Contact Romance Literary Fiction Copyright Info Western Signup or Login Signup today and begin voting and submitting your own works to be voted on! Browse Genres Info & Support Science Fiction Historical About FAQ Work Title Shows Here Work Title Shows Here Horror Young Adult / Chapter Books Privacy Help Author Name Author Name Fantasy Mystery / Thriller Terms & Conditions Contact Romance Literary Fiction Copyright Info Western Signup or Login Signup today and begin voting up your favorite works or even submitting your own works to be voted on!
  131. 131. The best design tool is a long eraser with a pencil at one end. - MARTY NEUMEIER
  132. 132. Visual Layer
  133. 133. Visual Layer ‣ Remember the fundamentals ‣ Know your medium ‣ How far you go in PSD’s is up to you and your skill set, project environment, etc.
  134. 134. Drupal Design Nuggets ‣ Commonly overlooked Drupal elements ‣ Tabs ‣ Search Results ‣ Pagers ‣ Title Lengths ‣ Block content in secondary regions ‣ Inline Images ‣ System Messages ‣ Print Styles
  135. 135. Drupal Design Nuggets ‣ Tweaking Drupal’s Defaults ‣ Semantic Views ‣ Admin Themes ‣ Admin Menu
  136. 136. Designer/Themer’s Tools ‣ OmniGraffle Stencils/Templates konigi UX stencils, 960 template ‣ Dot Grid Book Behance Dot Grid Book (http://creativesoutfitter.com) ‣ Semantic Views ‣ CSSedit *Mac only, sorry (Stylizer for Windows?) ‣ Base Themes Zen, Mothership, 960gs, custom, etc.
  137. 137. Great Expectations: Self & Others
  138. 138. Great Expectations: Self & Others ‣ Expect great things from yourself.
  139. 139. Great Expectations: Self & Others ‣ Expect great things from yourself. ‣ Surround yourself with people who expect you to be great.
  140. 140. The Pygmalion effect The Pygmalion effect, or Rosenthal effect, refers to the phenomenon in which the greater the expectation placed upon people, often children or students and employees, the better they perform.
  141. 141. Great Expectations: Clients
  142. 142. Great Expectations: Clients ‣ Choose great clients
  143. 143. Great Expectations: Clients ‣ Choose great clients ‣ Never make the logo bigger
  144. 144. Great Expectations: Clients ‣ Choose great clients ‣ Never make the logo bigger ‣ Definitely don’t make it “pop”
  145. 145. To achieve great things, two things are needed: a plan, and not quite enough time. - LEONARD BERNSTEIN
  146. 146. Questions? Comments? via dharmesh mehta on fwdmsgsnpics.blogspot.com JARED PONCHOT * DRUPAL CAMP ATLANTA 2010 twitter: @jponch

×