Design Like A ProFOUR PRINCIPLES OF VISUAL DESIGN
The Four Principles Contrast Repetition Alignment ProximityDesign Like A Pro | Kelleher Web Design | www.kelleherwebde...
Why Are These Principles Important? Not just about looking pretty Easier and more inviting to read Easier to find impor...
Why Are These Principles Important? Establishes credibility and trustworthiness Guides the reader’s eye to important ele...
Principle# 1: ContrastNo contrast                                                              With contrastOur ServicesAc...
Principle# 1: Contrast Establishes relationship between elements Makes it easier to find information Makes it more invi...
Principle# 1: ContrastHow to Add Contrast Size Weight Color Style Negative SpaceDesign Like A Pro | Kelleher Web Desi...
Principle# 2: Repetition Our Services Acme Senior Consulting is a comprehensive geriatric care management company. Empower...
Principle# 2: Repetition Creates a consistent visual language Establishes relationship between elements Easier to read...
Principle# 2: Repetition Limited color palette Limited fonts (1-2 serif, 1-2 sans serif) Repeat image elements and styl...
Principle# 2: RepetitionToo many fonts & colors can make you look like a stalkerDesign Like A Pro | Kelleher Web Design | ...
Principle# 3: AlignmentOur ServicesAcme Senior Consulting is a comprehensive geriatric care management company.Empowering ...
Principle# 3: Alignment Makes text easier to read Gives a less cluttered look Easier to guide the user’s eye Establish...
Principle# 3: AlignmentUse                                         Avoid   Left-align looks good                        Ce...
Principle# 4: ProximityUniform proximity                                                               Varied proximity   ...
Principle# 4: Proximity Conveys relationship between elements Makes it easier to find informationKelleher Web Design - w...
Additional Concepts Color Models   RGB (red, green, blue) – on screen   CMYK (cyan, magenta, yellow, black) – print    ...
Additional Concepts Less is more (especially fonts & colors) There are exceptions to every ruleDesign Like A Pro | Kelle...
Additional ConceptsSpecific to Websites: Navigation menus must be logical and intuitive (for   users, not just you!) Mak...
Additional ConceptsSpecific to Websites (cont’d): To establish unique brand identity, avoid pre-made   themes/templates (...
ResourcesBooks: Design for Hackers: Reverse-Engineering Beauty by David  Kadavy Non-Designer’s Design Book by Robin Will...
Upcoming SlideShare
Loading in …5
×

Design like a Pro: Four Principles of Graphic Design

1,210 views
1,132 views

Published on

Do you want a more professional-looking website and marketing materials without having to hire a pro? Then you need to learn what the pros know about graphic design. This slideshow covers the basics.

Published in: Design, Technology, Business
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,210
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
49
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Design like a Pro: Four Principles of Graphic Design

  1. 1. Design Like A ProFOUR PRINCIPLES OF VISUAL DESIGN
  2. 2. The Four Principles Contrast Repetition Alignment ProximityDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  3. 3. Why Are These Principles Important? Not just about looking pretty Easier and more inviting to read Easier to find important information Communicates relationships between elementsKelleher Web Design - www.kelleherwebdesign.com
  4. 4. Why Are These Principles Important? Establishes credibility and trustworthiness Guides the reader’s eye to important elementsKelleher Web Design - www.kelleherwebdesign.com
  5. 5. Principle# 1: ContrastNo contrast With contrastOur ServicesAcme Senior Consulting is a comprehensive geriatric caremanagement company. Empowering older persons and their families Our Services Acme Senior Consulting is a comprehensive geriatric care managementis a vital component of our professional services. Our services company. Empowering older persons and their families is a vital componentinclude: of our professional services. Our services include:Geriatric Psycho-social Assessment: A crucial first step to assist you Geriatric Psycho-social Assessment: A crucial first step toin determining the care needed by your aging parents, it includes: assist you in determining the care needed by your aging parents, it includes:an evaluation of the emotional, mental, social, physical and living  an evaluation of the emotional, mental, social, physical andarrangement needs of your parent or family member. living arrangement needs of your parent or family member.a written report designed to organize all the current information  a written report designed to organize all the currentgathered during this assessment to get you started in providing information gathered during this assessment to get you startedappropriate care. in providing appropriate care.Geriatric Care Management: Ongoing service to assist you in Geriatric Care Management: Ongoing service to assist you incoordinating and managing your aging family member or parents coordinating and managing your aging family member or parents essentialessential daily living needs, this may include such support services daily living needs, this may include such support services as:as: Housekeeping, laundry, meal preparation, shopping,Housekeeping, laundry, meal preparation, shopping, transportation, transportation, bill payment, medical insurance claims andbill payment, medical insurance claims and medical appointments; medical appointments;Reassurance visits to ensure your parents safety and quality of life; Reassurance visits to ensure your parents safety and quality of life;Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  6. 6. Principle# 1: Contrast Establishes relationship between elements Makes it easier to find information Makes it more inviting to readKelleher Web Design - www.kelleherwebdesign.com
  7. 7. Principle# 1: ContrastHow to Add Contrast Size Weight Color Style Negative SpaceDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  8. 8. Principle# 2: Repetition Our Services Acme Senior Consulting is a comprehensive geriatric care management company. Empowering older persons and their families is a vital component of our professional services. Our services include: Geriatric Psycho-social Assessment: A crucial first step to assist you in determining the care needed by your aging parents, it includes:  an evaluation of the emotional, mental, social, physical and living arrangement needs of your parent or family member.  a written report designed to organize all the current information gathered during this assessment to get you started in providing appropriate care. Geriatric Care Management: Ongoing service to assist you in coordinating and managing your aging family member or parents essential daily living needs, this may include such support services as: Housekeeping, laundry, meal preparation, shopping, transportation, bill payment, medical insurance claims and medical appointments; Reassurance visits to ensure your parents safety and quality of life;Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  9. 9. Principle# 2: Repetition Creates a consistent visual language Establishes relationship between elements Easier to read Establishes credibilityDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  10. 10. Principle# 2: Repetition Limited color palette Limited fonts (1-2 serif, 1-2 sans serif) Repeat image elements and stylesDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  11. 11. Principle# 2: RepetitionToo many fonts & colors can make you look like a stalkerDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  12. 12. Principle# 3: AlignmentOur ServicesAcme Senior Consulting is a comprehensive geriatric care management company.Empowering older persons and their families is a vital component of our professionalservices. Our services include:Geriatric Psycho-social Assessment: A crucial first step to assist youin determining the care needed by your aging parents, it includes:  an evaluation of the emotional, mental, social, physical and living arrangement needs of your parent or family member.  a written report designed to organize all the current information gathered during this assessment to get you started in providing appropriate care.Geriatric Care Management: Ongoing service to assist you incoordinating and managing your aging family member or parents essential dailyliving needs, this may include such support services as: Housekeeping, laundry, meal preparation, shopping, transportation, bill payment, medical insurance claims and medical appointments; Reassurance visits to ensure your parents safety and quality of life;Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  13. 13. Principle# 3: Alignment Makes text easier to read Gives a less cluttered look Easier to guide the user’s eye Establishes credibilityDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  14. 14. Principle# 3: AlignmentUse Avoid Left-align looks good Centered is only and is easy to read. for wedding invitations Right-align is cool, too, and can create easy-to- Fully-justified text read lines. creates awkward spacing between wordsDesign Like A Pro | Kelleher Web Design |www.kelleherwebdesign.com
  15. 15. Principle# 4: ProximityUniform proximity Varied proximity Our ServicesOur Services Acme Senior Consulting is a comprehensive geriatric care managementAcme Senior Consulting is a comprehensive geriatric care management company. Empowering older persons and their families is a vital componentcompany. Empowering older persons and their families is a vital component of our professional services. Our services include:of our professional services. Our services include:Geriatric Psycho-social Assessment: A crucial first step to Geriatric Psycho-social Assessment: A crucial first step toassist you in determining the care needed by your aging parents, it includes: assist you in determining the care needed by your aging parents, it includes:  an evaluation of the emotional, mental, social, physical and  an evaluation of the emotional, mental, social, physical and living arrangement needs of your parent or family member. living arrangement needs of your parent or family member.  a written report designed to organize all the current  a written report designed to organize all the current information gathered during this assessment to get you started information gathered during this assessment to get you started in providing appropriate care. in providing appropriate care.Geriatric Care Management: Ongoing service to assist you incoordinating and managing your aging family member or parents essential Geriatric Care Management: Ongoing service to assist you indaily living needs, this may include such support services as: coordinating and managing your aging family member or parents essential Housekeeping, laundry, meal preparation, shopping, daily living needs, this may include such support services as: transportation, bill payment, medical insurance claims and Housekeeping, laundry, meal preparation, shopping, medical appointments; transportation, bill payment, medical insurance claims and medical appointments;Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  16. 16. Principle# 4: Proximity Conveys relationship between elements Makes it easier to find informationKelleher Web Design - www.kelleherwebdesign.com
  17. 17. Additional Concepts Color Models  RGB (red, green, blue) – on screen  CMYK (cyan, magenta, yellow, black) – print yellow Fonts to Avoid  Papyrus– overused, makes work look amateurish  Comic Sans MS –because it’s an ugly font!Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  18. 18. Additional Concepts Less is more (especially fonts & colors) There are exceptions to every ruleDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  19. 19. Additional ConceptsSpecific to Websites: Navigation menus must be logical and intuitive (for users, not just you!) Make design responsive to screen widths (increasing number of pageviews are on mobile devices) Avoid deprecated technology (e.g. Flash)Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  20. 20. Additional ConceptsSpecific to Websites (cont’d): To establish unique brand identity, avoid pre-made themes/templates (or your site will look just like 10,000+ others) Limit web fonts (increases page load times & too many can look amateurish)Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
  21. 21. ResourcesBooks: Design for Hackers: Reverse-Engineering Beauty by David Kadavy Non-Designer’s Design Book by Robin Williams (not the comedian)Web: http://kuler.adobe.com – Color selection http://www.google.com/webfonts – Web fontsDesign Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com

×