SlideShare a Scribd company logo
Photo: Martin Addison on Flickr
First, some questions…
The Big Four
• Contrast
• Repetition
• Alignment
• Proximity
• Contrast
• Repetition
• Alignment
• Proximity
The Big Four
Contrast jorgerieraflores.com
Ways to apply contrast:
• Color
• Size
• Shape
Color paper-leaf.com
Source: blog.digitaltutors.com
BAD GOOD
Contrast with Color
Contrast with Colorwonderbread.com
Contrast with Color
beanstalkapp.com
Sources: 3.7designs.co & vwo.com
Contrast with Size
mixd.co.uk
Contrast with Size
Contrast with Size paul-rand.com
gnosh.co.uk
Contrast with Size
designschool.canva.com
Contrast with Shape
Contrast with Shape
duplos.org
Contrast with Shape
cellzone.ca
Repetition
Photo:
nico7martin on Flickr
dropbox.com
Repetition
Repetition dropbox.com/jobs
whiplashmerch.com
Repetition
Alignment
Source: vwo.com
EDGE CENTER
huncwot.com
Alignment
dropbox.com
Alignment
lolcolors.com
Alignment
Alignmenttenonedesign.com
Proximity amazon.com
Proximity yogrow.co
Ready for more? giphy.com
Additional Principles
• Emphasis
• Figure Ground
Relationship
• Visual Hierarchy
• White Space
• Balance
Emphasis dropbox.com
Emphasis oreeartisans.com
Emphasis htcvive.com
Figure Ground Relationship
cayenne-mydevices.com
invisionapp.com/craft
Figure Ground Relationship
Figure Ground Relationship
gocub.es
Visual Hierarchy
coetail.com
Visual Hierarchy
hugeinc.com
Visual Hierarchy
github.com/trending
White Space
White Space alistapart.com
White Space medium.com
White Space fastcodesign.com
White Space etsy.com
White Space samsung.com
Balance dropbox.com
Balance
tenonedesign.com
Typography
webdesignerdepot.com
Typography
tomgabor.com
Typographychriswilhitedesign.com
weareisland.com
Typography
Typography
spyrestudios.com
• Limit the number of typefaces
• Match the typeface to your focus
• Stay consistent
Questions?
Mykl Roventine
mykl@myklroventine.com
@myklroventine


Slides: 

bit.ly/ffdesign-principles
Photo: ed_needs_a_bicycle on Flickr

More Related Content

More from Mykl Roventine

Design Principles for Non-Designers
Design Principles for Non-DesignersDesign Principles for Non-Designers
Design Principles for Non-Designers
Mykl Roventine
 
Is This Thing On? A Beginner’s Guide to Podcasting
Is This Thing On? A Beginner’s Guide to PodcastingIs This Thing On? A Beginner’s Guide to Podcasting
Is This Thing On? A Beginner’s Guide to Podcasting
Mykl Roventine
 
Visual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social SharingVisual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social Sharing
Mykl Roventine
 
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
Mykl Roventine
 
Visual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social SharingVisual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social Sharing
Mykl Roventine
 
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
Mykl Roventine
 
Planning for the Encore: Building An Online Community That Begs For More
Planning for the Encore: Building An Online Community That Begs For MorePlanning for the Encore: Building An Online Community That Begs For More
Planning for the Encore: Building An Online Community That Begs For More
Mykl Roventine
 
The Non-designer's Guide to WordPress (Making Your Site Awesome)
The Non-designer's Guide to WordPress (Making Your Site Awesome)The Non-designer's Guide to WordPress (Making Your Site Awesome)
The Non-designer's Guide to WordPress (Making Your Site Awesome)
Mykl Roventine
 
Lets Get Social
Lets Get SocialLets Get Social
Lets Get Social
Mykl Roventine
 
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
Mykl Roventine
 
Blogging Basics (for Nonprofits)
Blogging Basics (for Nonprofits)Blogging Basics (for Nonprofits)
Blogging Basics (for Nonprofits)
Mykl Roventine
 
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
Mykl Roventine
 
Word press plugins speed datingWordPress Plugin Speed Dating
Word press plugins speed datingWordPress Plugin Speed Dating Word press plugins speed datingWordPress Plugin Speed Dating
Word press plugins speed datingWordPress Plugin Speed Dating
Mykl Roventine
 
Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
Mykl Roventine
 
15 Essential WordPress Plugins
15 Essential WordPress Plugins15 Essential WordPress Plugins
15 Essential WordPress Plugins
Mykl Roventine
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
Mykl Roventine
 
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & CreationMaking WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
Mykl Roventine
 
Twitter Tools
Twitter ToolsTwitter Tools
Twitter Tools
Mykl Roventine
 
Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!
Mykl Roventine
 
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
You're So Money and You Don’t Even Know It: The Power of Real on the Social WebYou're So Money and You Don’t Even Know It: The Power of Real on the Social Web
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
Mykl Roventine
 

More from Mykl Roventine (20)

Design Principles for Non-Designers
Design Principles for Non-DesignersDesign Principles for Non-Designers
Design Principles for Non-Designers
 
Is This Thing On? A Beginner’s Guide to Podcasting
Is This Thing On? A Beginner’s Guide to PodcastingIs This Thing On? A Beginner’s Guide to Podcasting
Is This Thing On? A Beginner’s Guide to Podcasting
 
Visual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social SharingVisual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social Sharing
 
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
 
Visual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social SharingVisual Storytelling: The State of “Show Me” Social Sharing
Visual Storytelling: The State of “Show Me” Social Sharing
 
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
The Non-Designer’s Guide to WordPress (Making Your Site Look Awesome)
 
Planning for the Encore: Building An Online Community That Begs For More
Planning for the Encore: Building An Online Community That Begs For MorePlanning for the Encore: Building An Online Community That Begs For More
Planning for the Encore: Building An Online Community That Begs For More
 
The Non-designer's Guide to WordPress (Making Your Site Awesome)
The Non-designer's Guide to WordPress (Making Your Site Awesome)The Non-designer's Guide to WordPress (Making Your Site Awesome)
The Non-designer's Guide to WordPress (Making Your Site Awesome)
 
Lets Get Social
Lets Get SocialLets Get Social
Lets Get Social
 
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
The Non-Designers Guide to WordPress (Making Your Site Look Awesome)
 
Blogging Basics (for Nonprofits)
Blogging Basics (for Nonprofits)Blogging Basics (for Nonprofits)
Blogging Basics (for Nonprofits)
 
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
15 Essential WordPress Plugins (and 5 That Will Just Blow Your Mind)
 
Word press plugins speed datingWordPress Plugin Speed Dating
Word press plugins speed datingWordPress Plugin Speed Dating Word press plugins speed datingWordPress Plugin Speed Dating
Word press plugins speed datingWordPress Plugin Speed Dating
 
Demystifying WordPress
Demystifying WordPressDemystifying WordPress
Demystifying WordPress
 
15 Essential WordPress Plugins
15 Essential WordPress Plugins15 Essential WordPress Plugins
15 Essential WordPress Plugins
 
Just Your Type: Web Typography & You
Just Your Type: Web Typography & YouJust Your Type: Web Typography & You
Just Your Type: Web Typography & You
 
Making WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & CreationMaking WordPress Your Own: Theme Customization & Creation
Making WordPress Your Own: Theme Customization & Creation
 
Twitter Tools
Twitter ToolsTwitter Tools
Twitter Tools
 
Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!Web Typography: Viva La Revolution!
Web Typography: Viva La Revolution!
 
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
You're So Money and You Don’t Even Know It: The Power of Real on the Social WebYou're So Money and You Don’t Even Know It: The Power of Real on the Social Web
You're So Money and You Don’t Even Know It: The Power of Real on the Social Web
 

Recently uploaded

一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Mansi Shah
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
708pb191
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
PrabhjeetSingh219035
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
ameli25062005
 

Recently uploaded (20)

一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
一比一原版(UAL毕业证书)伦敦艺术大学毕业证成绩单如何办理
 
vernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdfvernacular architecture in response to climate.pdf
vernacular architecture in response to climate.pdf
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf20 slides of research movie and artists .pdf
20 slides of research movie and artists .pdf
 

Design Principles Overview