SlideShare a Scribd company logo
1 of 84
Download to read offline
Design fundamentals,[object Object],for Developers,[object Object],The fundamentals of graphic design for screens,[object Object],Paul Traniptrani@adobe.comwww.paultrani.com@paultrani,[object Object]
Paul trani,[object Object],Ride,[object Object],Work,[object Object],Live,[object Object],Love,[object Object],Play,[object Object],[object Object]
Lynda.com and Layers Magazine author
Adobe Certified Instructor
Art school graduate,[object Object]
“5 out of 4 designers have a problem with fractions.”      ,[object Object]
Agenda,[object Object],Understand the fundamentals of graphic design for screens,[object Object]
Why should I care?,[object Object],Understanding design will help you be a better developer,[object Object],Developers with design skills are in demand,[object Object]
Do’s and don’ts,[object Object],Design Don’ts,[object Object],http://bouncebargainrentals.com,[object Object],http://www.html5zombo.com,[object Object],Inspiration,[object Object],http://www.designmeltdown.com,[object Object],http://www.mobileawesomeness.com,[object Object],http://www.thefwa.com,[object Object],http://patterntap.com,[object Object],http://quince.infragistics.com,[object Object],http://www.designupdate.com,[object Object]
planning,[object Object],First, define what you’re trying to do.,[object Object]
planning,[object Object],First, define what you’re trying to do.,[object Object],bEtsy, we want to sell you stuff you don’t need.,[object Object]
Design Fundamentals for Developers
planning,[object Object],Next, determine your audience.,[object Object]
planning,[object Object],Next, determine your audience.,[object Object],Men and women between 18-35.,[object Object],Unique individuals that crave attention and have money to burn.,[object Object]
Design Fundamentals for Developers
planning,[object Object],The audience determines what needs to be created.,[object Object]
planning,[object Object],The audience determines what needs to be created.,[object Object],Audience has a laptop and a mobile phone.,[object Object]
Design Fundamentals for Developers
Two rules before designing,[object Object]
Rule 1,[object Object],Don’t use design programs.,[object Object]
Design Fundamentals for Developers
Rule 2,[object Object],It’s all about leading the eye.,[object Object]
Rule 3,[object Object],There are no hard and fast rules.,[object Object]
Design fundamentals,[object Object],Layout,[object Object],Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction,[object Object],Typography,[object Object],Serif vs. Sans,[object Object],Color,[object Object],Color Wheel, Color Choices, Meaning,[object Object]
Design fundamentals,[object Object],Layout,[object Object],Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction,[object Object],Typography,[object Object],Serif vs. Sans,[object Object],Color,[object Object],Color Wheel, Color Choices, Meaning,[object Object]
GRID,[object Object],Start with a,[object Object]
Rule of Thirds,[object Object],Dividing a page into 3 rows and 3 columns,[object Object],The eye naturally follows this “F” shape,[object Object]
Design Fundamentals for Developers
Layout Design AIR App:,[object Object],www.paultrani.com,[object Object]
Design Fundamentals for Developers
Design Fundamentals for Developers
Mobile = one column,[object Object]
betsy,[object Object]
The,[object Object],Golden ratio,[object Object]
The golden ratio,[object Object],Proportion defined as 1.618,[object Object],Found in nature, art and architecture,[object Object],1,[object Object],1.618,[object Object]
Fibonacci Numbers,[object Object]
The golden ratio in Layout,[object Object],Overall Width / 1.618 = Content Block,[object Object],Overall Width – Content Block = Sidebar Block,[object Object],Overall Width,[object Object],Sidebar Block,[object Object],1,[object Object],Content Block,[object Object],1.618,[object Object]
Design Fundamentals for Developers
Design Fundamentals for Developers
betsy,[object Object]
Elements of a good layout,[object Object]
Space,[object Object],Implies importance, elegance, and professionalism. ,[object Object]
Space,[object Object],“Perfection is achieved not when there is nothing left to add, but when there is nothing left to take away” ,[object Object],Antoine de Saint-Exupery,[object Object],Don’t try to be great, try to be invisible,[object Object]
Space,[object Object],WalMart,[object Object],Target,[object Object]
http://www.kennethcole.com,[object Object]
Design Fundamentals for Developers
Design Fundamentals for Developers
betsy,[object Object]
Balancegives a clear, unified message.,[object Object]
Symmetrical balance,[object Object],Salvador Dali – The Last Supper,[object Object]
http://www.cnn.com,[object Object]
http://www.mobilewebbook.com,[object Object]
http://www.bbc.co.uk,[object Object]
Design Fundamentals for Developers
http://www.hbo.com,[object Object]
Design Fundamentals for Developers
betsy,[object Object]
Variety VarietyVariety VARIETYVARIETY VarietyVARIETYVarietyvariety variety variety variety variety Variety,[object Object]
variety,[object Object],“Variety is the spice of life.” ,[object Object],Gives visual and conceptual interest,[object Object],Too much and the design will appear amateurish,[object Object],Too little and the design will appear boring,[object Object]
Joan Miro– Blue II  (surrealism),[object Object]
http://www.webdesignerwall.com,[object Object]
http://www.hawkart.com,[object Object]
betsy,[object Object]
A well designed project has,[object Object],Hierarchy,[object Object]
Heirarchy,[object Object],“Heirarchy does not refer to upper management.” ,[object Object],A clear starting point that guides the viewer through the design,[object Object],Separate the most important element,[object Object],Group the less important elements ,[object Object]
Design Fundamentals for Developers
http://www.semisture.com,[object Object]
Design Fundamentals for Developers
betsy,[object Object]
Design fundamentals,[object Object],Layout,[object Object],Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction,[object Object],Typography,[object Object],Serif vs. Sans,[object Object],Color,[object Object],Color Wheel, Color Choices, Meaning,[object Object]
typography,[object Object],“Typography has one plain duty before it and that’s to convey information in writing.” ,[object Object],Emil Ruder, Founder of Basel School of Design,[object Object],Choose a font that fits the subject,[object Object],Don’t use more than three,[object Object],@font-face,[object Object]
Choosing a font,[object Object],Two main types: ,[object Object],Serif fonts have short finishing lines on strokes,[object Object],Sans-serif lack Serifs and and are considered modern as a result.,[object Object]
Make it legible,[object Object],Contrast,[object Object],Size,[object Object],Hierarchy ,[object Object]
font structure,[object Object],There are different type classifications,,[object Object],Understand type anatomy,[object Object],Understand typemeasurements. ,[object Object],Use the Font Picker.,[object Object]
http://www.westin.com,[object Object]
http://www.toysrus.com,[object Object]
Design Fundamentals for Developers
betsy,[object Object]
Design fundamentals,[object Object],Layout,[object Object],Grid, Golden Ratio, Space, Balance, Variety, Hierarchy, Direction,[object Object],Typography,[object Object],Serif vs. Sans,[object Object],Color,[object Object],Color Wheel, Color Choices, Meaning,[object Object]
Color,[object Object],“Use color to emphasize importance, not decorate a page.” ,[object Object],Alexander White,[object Object],Use color to create hierarchy, dominance, and balance.,[object Object],Consistent use of a few colors makes a more cohesive design. ,[object Object]
Color,[object Object],The Color Wheel,[object Object],Warm colors bring elements forward.,[object Object],Cool colors move elements back.,[object Object],Kuler,[object Object]
Dong Kingman,[object Object]
Design Fundamentals for Developers
Design Fundamentals for Developers

More Related Content

What's hot

Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignDeb Aoki
 
Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Deb Aoki
 
Introduction to Slide Design: 7 Rules for Creating Effective Slides
Introduction to Slide Design: 7 Rules for Creating Effective SlidesIntroduction to Slide Design: 7 Rules for Creating Effective Slides
Introduction to Slide Design: 7 Rules for Creating Effective SlidesAlex Rister
 
UI/UX Learning: From Discovery to Design
UI/UX Learning: From Discovery to DesignUI/UX Learning: From Discovery to Design
UI/UX Learning: From Discovery to DesignRobert Hsu
 
UPDATED '33 things I know about Art Direction'
UPDATED '33 things I know about Art Direction'UPDATED '33 things I know about Art Direction'
UPDATED '33 things I know about Art Direction'David Bell
 
Copywriting for the reluctant
Copywriting for the reluctantCopywriting for the reluctant
Copywriting for the reluctantRellyAB
 
Survival skills for designers
Survival skills for designersSurvival skills for designers
Survival skills for designersRobert Hsu
 
How to be a great Art Director or Designer
How to be a great Art Director or DesignerHow to be a great Art Director or Designer
How to be a great Art Director or DesignerDavid Bell
 
Open Space Technology
Open Space TechnologyOpen Space Technology
Open Space TechnologyJaibeer Malik
 
Draw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDraw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDeb Aoki
 
Flow Engines & Fracking The Social Web
Flow Engines & Fracking The Social WebFlow Engines & Fracking The Social Web
Flow Engines & Fracking The Social WebJohn V Willshire
 

What's hot (11)

Introduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience DesignIntroduction to Storyboarding for User Experience Design
Introduction to Storyboarding for User Experience Design
 
Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015Drawing Stories for Product Development - May 2015
Drawing Stories for Product Development - May 2015
 
Introduction to Slide Design: 7 Rules for Creating Effective Slides
Introduction to Slide Design: 7 Rules for Creating Effective SlidesIntroduction to Slide Design: 7 Rules for Creating Effective Slides
Introduction to Slide Design: 7 Rules for Creating Effective Slides
 
UI/UX Learning: From Discovery to Design
UI/UX Learning: From Discovery to DesignUI/UX Learning: From Discovery to Design
UI/UX Learning: From Discovery to Design
 
UPDATED '33 things I know about Art Direction'
UPDATED '33 things I know about Art Direction'UPDATED '33 things I know about Art Direction'
UPDATED '33 things I know about Art Direction'
 
Copywriting for the reluctant
Copywriting for the reluctantCopywriting for the reluctant
Copywriting for the reluctant
 
Survival skills for designers
Survival skills for designersSurvival skills for designers
Survival skills for designers
 
How to be a great Art Director or Designer
How to be a great Art Director or DesignerHow to be a great Art Director or Designer
How to be a great Art Director or Designer
 
Open Space Technology
Open Space TechnologyOpen Space Technology
Open Space Technology
 
Draw the Line: Better UX With Sketching
Draw the Line: Better UX With SketchingDraw the Line: Better UX With Sketching
Draw the Line: Better UX With Sketching
 
Flow Engines & Fracking The Social Web
Flow Engines & Fracking The Social WebFlow Engines & Fracking The Social Web
Flow Engines & Fracking The Social Web
 

Viewers also liked

Fundamental of typography
Fundamental of typographyFundamental of typography
Fundamental of typographyRayn HOWAYEK
 
Presentation1
Presentation1Presentation1
Presentation1patreng25
 
Typography object portrait posters
Typography object portrait postersTypography object portrait posters
Typography object portrait postersMetroAdDesign
 
FUNDAMENTAL OF GRAPHIC DESIGN - assignment I
FUNDAMENTAL OF GRAPHIC DESIGN - assignment IFUNDAMENTAL OF GRAPHIC DESIGN - assignment I
FUNDAMENTAL OF GRAPHIC DESIGN - assignment INuraini Mohd Ghani
 
Design Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenDesign Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenHazlin Aisha Zainal Abidin
 
Typography and grids
Typography and gridsTypography and grids
Typography and gridsGraeme Smith
 
Ma self portrait typography
Ma self portrait typographyMa self portrait typography
Ma self portrait typographyAllison McMath
 
Effective poster design
Effective poster designEffective poster design
Effective poster designa_han_solo
 
Fundamental concept of typography
Fundamental concept of typographyFundamental concept of typography
Fundamental concept of typographyAnna Zara
 
Typography and Grid for Mobile Design
Typography and Grid for Mobile DesignTypography and Grid for Mobile Design
Typography and Grid for Mobile DesignSara Quinn
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography FundamentalsSteve Hickey
 
Poster design Challenge
Poster design ChallengePoster design Challenge
Poster design Challengemissjessm
 
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile DevelopmentTypography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile DevelopmentTiago Pedras
 
Creative Workshop on Poster Design
Creative Workshop on Poster DesignCreative Workshop on Poster Design
Creative Workshop on Poster DesignSamsuddoha Safayat
 

Viewers also liked (17)

typography_fundamentals
typography_fundamentalstypography_fundamentals
typography_fundamentals
 
Fundamental of typography
Fundamental of typographyFundamental of typography
Fundamental of typography
 
Presentation1
Presentation1Presentation1
Presentation1
 
Typography object portrait posters
Typography object portrait postersTypography object portrait posters
Typography object portrait posters
 
FUNDAMENTAL OF GRAPHIC DESIGN - assignment I
FUNDAMENTAL OF GRAPHIC DESIGN - assignment IFUNDAMENTAL OF GRAPHIC DESIGN - assignment I
FUNDAMENTAL OF GRAPHIC DESIGN - assignment I
 
Design Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin CullenDesign Elements Typography Fundamentals by Kristin Cullen
Design Elements Typography Fundamentals by Kristin Cullen
 
Typography and grids
Typography and gridsTypography and grids
Typography and grids
 
3 Typography
3 Typography3 Typography
3 Typography
 
Ma self portrait typography
Ma self portrait typographyMa self portrait typography
Ma self portrait typography
 
Poster Design
Poster DesignPoster Design
Poster Design
 
Effective poster design
Effective poster designEffective poster design
Effective poster design
 
Fundamental concept of typography
Fundamental concept of typographyFundamental concept of typography
Fundamental concept of typography
 
Typography and Grid for Mobile Design
Typography and Grid for Mobile DesignTypography and Grid for Mobile Design
Typography and Grid for Mobile Design
 
Typography Fundamentals
Typography FundamentalsTypography Fundamentals
Typography Fundamentals
 
Poster design Challenge
Poster design ChallengePoster design Challenge
Poster design Challenge
 
Typography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile DevelopmentTypography and Responsive Grids in the World of Mobile Development
Typography and Responsive Grids in the World of Mobile Development
 
Creative Workshop on Poster Design
Creative Workshop on Poster DesignCreative Workshop on Poster Design
Creative Workshop on Poster Design
 

Similar to Design Fundamentals for Developers

Designfundamentals forweb-trani-2010
Designfundamentals forweb-trani-2010Designfundamentals forweb-trani-2010
Designfundamentals forweb-trani-2010Lex Pit
 
Putting Design Back into Instructional Design
Putting Design Back into Instructional DesignPutting Design Back into Instructional Design
Putting Design Back into Instructional DesignCammy Bean
 
Dead Simple Design 3 - For Web Designers
Dead Simple Design 3 - For Web DesignersDead Simple Design 3 - For Web Designers
Dead Simple Design 3 - For Web DesignersJohn Coonen
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets Agency
 
Good vs. Great Design
Good vs. Great DesignGood vs. Great Design
Good vs. Great DesignCameron Moll
 
Comm wkshop jqfin3
Comm wkshop jqfin3Comm wkshop jqfin3
Comm wkshop jqfin3Joanne Quinn
 
Lessons from a 40 year old
Lessons from a 40 year oldLessons from a 40 year old
Lessons from a 40 year oldMatt Haughey
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designersErlend Debast
 
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015Codemotion
 
Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Clive K. Lavery
 
(Don't) Use Your Words: Visual Communicators Rock!
(Don't) Use Your Words:  Visual Communicators Rock!(Don't) Use Your Words:  Visual Communicators Rock!
(Don't) Use Your Words: Visual Communicators Rock!Katie Laird
 
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...visualdesignthinking
 
Bulgaria Web Summit #VDT Visual Design Thinking
Bulgaria Web Summit #VDT Visual Design ThinkingBulgaria Web Summit #VDT Visual Design Thinking
Bulgaria Web Summit #VDT Visual Design ThinkingChiara Francesca Albanesi
 
Creating a Great Portfolio Site
Creating a Great Portfolio SiteCreating a Great Portfolio Site
Creating a Great Portfolio SiteMel Choyce
 

Similar to Design Fundamentals for Developers (20)

Designfundamentals forweb-trani-2010
Designfundamentals forweb-trani-2010Designfundamentals forweb-trani-2010
Designfundamentals forweb-trani-2010
 
Goodgreater
GoodgreaterGoodgreater
Goodgreater
 
Putting Design Back into Instructional Design
Putting Design Back into Instructional DesignPutting Design Back into Instructional Design
Putting Design Back into Instructional Design
 
Dead Simple Design 3 - For Web Designers
Dead Simple Design 3 - For Web DesignersDead Simple Design 3 - For Web Designers
Dead Simple Design 3 - For Web Designers
 
Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012Prophets trends in Interactive Design 2012
Prophets trends in Interactive Design 2012
 
Good vs. Great Design
Good vs. Great DesignGood vs. Great Design
Good vs. Great Design
 
Prophets trends-in-interactive-design
Prophets trends-in-interactive-designProphets trends-in-interactive-design
Prophets trends-in-interactive-design
 
Comm wkshop jqfin3
Comm wkshop jqfin3Comm wkshop jqfin3
Comm wkshop jqfin3
 
Lessons from a 40 year old
Lessons from a 40 year oldLessons from a 40 year old
Lessons from a 40 year old
 
What web designers could learn from print designers
What web designers could learn from print designersWhat web designers could learn from print designers
What web designers could learn from print designers
 
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015
Emanuela Damiani - Be a designer in a startup world | Codemotion Milan 2015
 
8 key-steps
8 key-steps8 key-steps
8 key-steps
 
Liberated Accessibility
Liberated AccessibilityLiberated Accessibility
Liberated Accessibility
 
Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)Being a Digital Do-Gooder (IxDA Berlin Event #53)
Being a Digital Do-Gooder (IxDA Berlin Event #53)
 
(Don't) Use Your Words: Visual Communicators Rock!
(Don't) Use Your Words:  Visual Communicators Rock!(Don't) Use Your Words:  Visual Communicators Rock!
(Don't) Use Your Words: Visual Communicators Rock!
 
#VDT - A review of the process. EP. 2
#VDT - A review of the process. EP. 2#VDT - A review of the process. EP. 2
#VDT - A review of the process. EP. 2
 
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...
Bulgaria Web Summit 2014 - #VDT - Visual Design Thinking - a review for the p...
 
Bulgaria Web Summit #VDT Visual Design Thinking
Bulgaria Web Summit #VDT Visual Design ThinkingBulgaria Web Summit #VDT Visual Design Thinking
Bulgaria Web Summit #VDT Visual Design Thinking
 
Sweating the UX Details
Sweating the UX DetailsSweating the UX Details
Sweating the UX Details
 
Creating a Great Portfolio Site
Creating a Great Portfolio SiteCreating a Great Portfolio Site
Creating a Great Portfolio Site
 

More from paultrani

10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findings10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findingspaultrani
 
5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Design5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Designpaultrani
 
Creativity and Tools
Creativity and ToolsCreativity and Tools
Creativity and Toolspaultrani
 
Things Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for DevicesThings Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for Devicespaultrani
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Designpaultrani
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotnesspaultrani
 
Adobe, Flash and HTML5
Adobe, Flash and HTML5Adobe, Flash and HTML5
Adobe, Flash and HTML5paultrani
 
Flash and HTML5 Compared
Flash and HTML5 ComparedFlash and HTML5 Compared
Flash and HTML5 Comparedpaultrani
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Designpaultrani
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Developmentpaultrani
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobilepaultrani
 
Mobile Design that Doesn't Suck
Mobile Design that Doesn't SuckMobile Design that Doesn't Suck
Mobile Design that Doesn't Suckpaultrani
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flashpaultrani
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screenspaultrani
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devicespaultrani
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devicespaultrani
 

More from paultrani (16)

10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findings10 Easy-to-Implement Usability Findings
10 Easy-to-Implement Usability Findings
 
5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Design5 Things Developers Need to Know About Design
5 Things Developers Need to Know About Design
 
Creativity and Tools
Creativity and ToolsCreativity and Tools
Creativity and Tools
 
Things Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for DevicesThings Every Designer Should Know About Creating for Devices
Things Every Designer Should Know About Creating for Devices
 
CSS3 and Advanced Design
CSS3 and Advanced DesignCSS3 and Advanced Design
CSS3 and Advanced Design
 
HTML5 Hotness
HTML5 HotnessHTML5 Hotness
HTML5 Hotness
 
Adobe, Flash and HTML5
Adobe, Flash and HTML5Adobe, Flash and HTML5
Adobe, Flash and HTML5
 
Flash and HTML5 Compared
Flash and HTML5 ComparedFlash and HTML5 Compared
Flash and HTML5 Compared
 
CSS3 For Advanced Design
CSS3 For Advanced DesignCSS3 For Advanced Design
CSS3 For Advanced Design
 
Tips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash DevelopmentTips and Tricks for Mobile Flash Development
Tips and Tricks for Mobile Flash Development
 
Designing for Mobile
Designing for MobileDesigning for Mobile
Designing for Mobile
 
Mobile Design that Doesn't Suck
Mobile Design that Doesn't SuckMobile Design that Doesn't Suck
Mobile Design that Doesn't Suck
 
Creating Mobile Content Using Flash
Creating Mobile Content Using FlashCreating Mobile Content Using Flash
Creating Mobile Content Using Flash
 
Creating Flash Content for Multiple Screens
Creating Flash Content for Multiple ScreensCreating Flash Content for Multiple Screens
Creating Flash Content for Multiple Screens
 
Flash for Mobile Devices
Flash for Mobile DevicesFlash for Mobile Devices
Flash for Mobile Devices
 
Creating Flash Content for Mobile Devices
Creating Flash Content for Mobile DevicesCreating Flash Content for Mobile Devices
Creating Flash Content for Mobile Devices
 

Design Fundamentals for Developers

  • 1.
  • 2.
  • 3. Lynda.com and Layers Magazine author
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 13.
  • 14.
  • 16.
  • 17.
  • 19.
  • 20.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 29.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 55.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 67.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 85.
  • 86.

Editor's Notes

  1. In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  2. In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  3. In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.
  4. First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into. As well as give you some fundamental tips when you do get thrown into the design world.
  5. There are many tutorials on how to program but hardly nothing on how to be a good designer.First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.avoid the major pitfalls I sometimes see developers fall into.
  6. First things first, I am not going to be able to teach you how to be a stellar designer in 50 minutes. That comes with time, training.However, although I cannot make you an expert designer, I can offer some advice of how to avoid the major pitfalls I sometimes see developers fall into. As well as give you some fundamental tips when you do get thrown into the design world.
  7. (inform, sell, create)
  8. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  9. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  10. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  11. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  12. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  13. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  14. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  15. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  16. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  17. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  18. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  19. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  20. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  21. http://www.useit.com/alertbox/reading_pattern.html
  22. http://www.useit.com/alertbox/reading_pattern.html
  23. http://www.useit.com/alertbox/reading_pattern.html
  24. http://www.useit.com/alertbox/reading_pattern.html
  25. http://www.useit.com/alertbox/reading_pattern.html
  26. http://www.lipsum.com/
  27. Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://davidpratt.info/pattern1.htm
  28. Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://davidpratt.info/pattern1.htm
  29. Each section of an index finger, from the tip to the base of the wrist, is larger than the preceding one by about 1.618, fitting the Fibonacci numbers 2, 3, 5 and 8.The Fibonacci numbers and golden section are widely found in the plant kingdom. In nearly all flowers, the number of petals is a Fibonacci number. For instance, lilies have 3 petals, buttercups have 5, many delphiniums have 8, marigolds have 13, asters have 21, and daisies commonly have 13, 21, 34, 55 or 89. http://www.intmath.com/Numbers/mathOfBeauty.phphttp://davidpratt.info/pattern1.htmhttp://discovermagazine.com/2007/jun/blinded-by-science
  30. http://www.useit.com/alertbox/reading_pattern.html
  31. http://www.useit.com/alertbox/reading_pattern.html
  32. http://www.lipsum.com/
  33. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  34. “It’s complete not when there’s nothing left to add, but when there’s nothing left to take away. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  35. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  36. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  37. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  38. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  39. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  40. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  41. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another. Arranging elements so that no one part of a work overpowers, or seems heavier than any other part. The three different kinds of balance are symmetrical, asymmetrical, and mosaic.Grid-based design.
  42. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  43. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  44. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  45. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  46. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  47. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  48. If a design is out of balance, the individual elements of the design will dominate the overall design. A well-balanced design has a clear, single, unified message. Alex White points out that there are three types of balance: Symmetrical, asymmetrical, and mosaic. Symmetrical balance is vertically centered and is equivalent on both sides. Symmetrical designs are more static than asymmetrical designs and evoke feelings of formality (think wedding invitations).Asymmetrical designs are more informal and are dynamic with a variety of sizes, shapes, etc. on both sides of the page/slide. Asymmetrical designs make good, calculated use of white space. Asymmetrical designs evoke feelings of action and modernity. Mosaic designs usually are ones with too much information according to White. This kind of balance often lacks hierarchy and a unified message can be difficult to achieve, leaving the design to look just plain "noisy."All seven of the above design elements are evident in good design. You can focus on one or two more than others, but all will be in there to one degree or another.
  49. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  50. Groupings, calls to action, important stuff. Disassociated from other items.The differences which give a design visual and conceptual interest: notably use of contrast, emphasis, difference in size and color.
  51. One of the biggest mistakes typical business people make with documents is going out of their way to seemingly use every centimeter of space on a page, filling it up with text, boxes, clip art, charts, footers, etc. Space, often called "white space," is good. Embrace it. Use it. Often, the more space you don't use on a page, the clearer your message becomes.Empty space is beautiful, yes. But empty space also implies importance, elegance, professionalism. This is true with graphic design, but you can see the importance of space (both visual and physical) in the context of interior design. Think of the retail space, for example. Target is dedicated to design although they are a discounter. They know about space. Target stores are well designed. They have more empty space than other discounters, Walmart, for example.
  52. Joan MiróiFerrà (1893-1983; was a Catalan/Spanishpainter, sculptor, and ceramist born in Barcelona.Earning international acclaim, his work has been interpreted as Surrealism, a sandbox for the subconscious mind, a re-creation of the childlike, and a manifestation of Catalan pride. In numerous interviews dating from the 1930s onwards, Miró expressed contempt for conventional painting methods as a way of supporting bourgeois society, and famously declared an "assassination of painting" in favour of upsetting the visual elements of established painting.
  53. At the forefront of the ‘large bkgd’ trend which has become very popular. Variety b/t floral illustrations and tactile paper creates both a divide and a balance
  54. Pop quiz: why is this design unsuccessful?
  55. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  56. A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  57. Having more than three levels of hierarchy in a single design leads to confusion.A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  58. Having more than three levels of hierarchy in a single design leads to confusion.A well designed page/slide has a clear starting point (helped by a clear dominance) and guides the viewer through the design. What is most important, less important, and the least important parts of the design can be clearly expressed by having a clear hierarchy. You can achieve clear hierarchy of elements by clearly separating the most important element on the page and group more closely together other less important elements. You can use the same color or shape of similar elements to guide a reader or viewer down the page. In general, according to White, having more than three levels of hierarchy in a single design leads to confusion for the reader.
  59. Your turn, show me how direction is used here. The black threads subconsciously lead your eye around
  60. Your turn, show me how direction is used here. The black threads subconsciously lead your eye around
  61. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  62. http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  63. http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  64. http://lab.arc90.com/experiments/readability/ http://psd.tutsplus.com/articles/techniques/a-20-minute-intro-to-typography-basics/ http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/ http://ilovetypography.com/2008/04/04/on-choosing-type/
  65. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  66. Conservative example.
  67. Fun example.
  68. Using an elegant font does not make a site elegant.
  69. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  70. The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  71. The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  72. The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  73. The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  74. The conscious use of color to create hierarchy, dominance, and balance in a design can be very effective.Remember that color is useful for achieving a more unified and organized design. But to do so one must be consistent with the use of color on a page. Consistency is easier to achieve if the designer (i.e., you) limits the use of color choices to just a few. Using many colors in a single design would be like using many different font types — this inevitably leads to a messy and confusing piece of work. Make your color choices at the beginning of the design process rather than at the end. Leaving color choice to the end will likely end up leading to a superficial application of color. Color, like good design in general, is not cosmetic or veneer. Color choice is fundamental.Good color usage can help you guide the viewer's eyes through the design. Color can be used to emphasize. For example, darker type is noticed first. Color (say, red on a white page with black body text) can be used to highlight elements on a page which are most important. Color can also provide direction. Warm colors bring elements forward; cool colors move elements back. Alexander White suggests using graduated tints since there are no flat colors found in nature. When it comes to color use, however, one thing is quite clear: The benefits of color usage quickly diminish when color highlights are used too much or too many colors are applied to a design.
  75. Avoid graphical applicationsThe temptation is to think “I have to do some design, that means I need to open Photoshop. That is what designers use”. Of course that is entirely true, designers do use graphic applications like Photoshop or Freehand. However, I would suggest that unless you are already familiar with these kinds of applications, you are just adding more complexity to the problem.Its hard enough to apply the principles of good design without adding learning a new application on top of it.You know code, so work with code. Build your site using CSS and XHTML and these are the tools with which you are familiar. Sure, it wont lead to outstanding design, but that is not the aim as I discuss next…Don’t try and be great; be invisibleDon’t try and produce a “creative” or “innovative” piece of design. Designers find this hard enough to do. The danger is that if you try and do this, you will create something that some people may love, but the majority completely hate. Instead, play safe. Try and make your design invisible. A good solid piece of design will not impress but neither will it offend. The idea is that the users will not even notice it, they just use it. If the user doesn’t acknowledge what you have produced it means it hasn’t caused them any problems and that is a good thing. Sure, you wont win any design awards but that isn’t very likely anyway!
  76. In an ideal world designers design and developers develop. However, we don’t live in an ideal world and from time to time we have to swap roles. The problem is that there is a lot of tutorials and articles showing designers how to develop but little showing developers how to design. I therefore thought I would share some very basic tips.