Post on 25-Jun-2015
description
transcript
FOUR PRINCIPLES OF VISUAL DESIGN
Design Like A Pro
The Four Principles
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Contrast
Repetition
Alignment
Proximity
Why Are These Principles Important?
Not just about looking pretty
Easier and more inviting to read
Easier to find important information
Communicates relationships between elements
Kelleher Web Design - www.kelleherwebdesign.com
Why Are These Principles Important?
Establishes credibility and trustworthiness
Guides the reader’s eye to important elements
Kelleher Web Design - www.kelleherwebdesign.com
No contrastNo contrast With contrastWith contrast
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Our ServicesAcme 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 parent's 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 parent's safety and quality of life;
Our ServicesAcme 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 parent's 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 parent's safety and quality of life;
Principle# 1: Contrast
Principle# 1: Contrast
Kelleher Web Design - www.kelleherwebdesign.com
Establishes relationship between elements
Makes it easier to find information
Makes it more inviting to read
Principle# 1: Contrast
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
How to Add Contrast
Size
Weight
Color
Style
Negative Space
Principle# 2: Repetition
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Our ServicesAcme 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 parent's 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 parent's safety and quality of life;
Principle# 2: Repetition
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Creates a consistent visual language
Establishes relationship between elements
Easier to read
Establishes credibility
Principle# 2: Repetition
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Limited color palette
Limited fonts (1-2 serif, 1-2 sans serif)
Repeat image elements and styles
Principle# 2: Repetition
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Too many fonts & colors can make you look like a stalker
Principle# 3: Alignment
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Our ServicesAcme 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 parent's 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 parent's safety and quality of life;
Principle# 3: Alignment
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Makes text easier to read
Gives a less cluttered look
Easier to guide the user’s eye
Establishes credibility
UseUse AvoidAvoid
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Left-align looks good and is easy to read.
Right-align is cool, too, and can create easy-to-read lines.
Centered is onlyfor wedding invitations
Fully-justified text creates awkward spacing between words
Principle# 3: Alignment
Uniform proximityUniform proximity Varied proximityVaried proximity
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Our ServicesAcme 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 parent's 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;
Our ServicesAcme 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 parent's 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;
Principle# 4: Proximity
Principle# 4: Proximity
Kelleher Web Design - www.kelleherwebdesign.com
Conveys relationship between elements
Makes it easier to find information
Additional Concepts
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Color Models RGB (red, green, blue) – on screen CMYK (cyan, magenta, yellowyellow, black) – print
Fonts to Avoid Papyrus – overused, makes work look
amateurish Comic Sans MS –because it’s an ugly font!
Additional Concepts
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Less is more (especially fonts & colors)
There are exceptions to every rule
Additional Concepts
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Specific 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)
Additional Concepts
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Specific 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)
Resources
Design Like A Pro | Kelleher Web Design | www.kelleherwebdesign.com
Books:Design for Hackers: Reverse-Engineering Beauty
by David KadavyNon-Designer’s Design Book by Robin Williams (not
the comedian)
Web:http://kuler.adobe.com – Color selectionhttp://www.google.com/webfonts – Web fonts