SlideShare a Scribd company logo
Web Design Principles
Bailey Bode, Tonya Loewen, Andrew
Murphy
Unity –Coca Cola
Use of the color red throughout and
use of the same shapes (rectangles)
create unity.
Variety –Unique Websites
The scrolling of the website allows the
viewer to see different things in the
background.
Balance –Wikipedia
The use of white space and there is a
focal point, but the amount of items
around it align with each other and
create a simple flow.
Scale and ProportionWarChild
Images size relates to the font size and
the things that need your attention are
bigger in scale.
Rhythm -Pinterest
Not all ‘boxes’ or images are the same
shape nor are they all aligned the
same way, but they create a sense of
flowing organization and movement.
Emphasis -YouTube
The place a significant video/image in
a certain spot that your eye is lead to
and makes the image bigger so your
focus is put on that.
Simplicity -Tumblr
This site just has the simple log in and
then allows you to create a log in if you
don’t have one as well. The log in is
also placed in the center to allow you
to find it more easily.

More Related Content

What's hot

Express Yourself with Sway - Tots Galveston 16
Express Yourself with Sway - Tots Galveston 16Express Yourself with Sway - Tots Galveston 16
Express Yourself with Sway - Tots Galveston 16
Diana Benner
 
Weebly
WeeblyWeebly
Weebly
Nicole Hunt
 
How To Create EPIC SEO Copy
How To Create EPIC SEO CopyHow To Create EPIC SEO Copy
How To Create EPIC SEO Copy
Amy Edwards
 
Current Trends in Web Design & Development
Current Trends in Web Design & DevelopmentCurrent Trends in Web Design & Development
Current Trends in Web Design & Development
Jenny Mandeville
 
3 Minute Power Presentation by Eric Edelstein
3 Minute Power Presentation by Eric Edelstein 3 Minute Power Presentation by Eric Edelstein
3 Minute Power Presentation by Eric Edelstein RAMP Group
 

What's hot (6)

Express Yourself with Sway - Tots Galveston 16
Express Yourself with Sway - Tots Galveston 16Express Yourself with Sway - Tots Galveston 16
Express Yourself with Sway - Tots Galveston 16
 
Weebly
WeeblyWeebly
Weebly
 
How To Create EPIC SEO Copy
How To Create EPIC SEO CopyHow To Create EPIC SEO Copy
How To Create EPIC SEO Copy
 
Movement
MovementMovement
Movement
 
Current Trends in Web Design & Development
Current Trends in Web Design & DevelopmentCurrent Trends in Web Design & Development
Current Trends in Web Design & Development
 
3 Minute Power Presentation by Eric Edelstein
3 Minute Power Presentation by Eric Edelstein 3 Minute Power Presentation by Eric Edelstein
3 Minute Power Presentation by Eric Edelstein
 

Similar to Web Design Principles

Media final evaluation
Media final evaluationMedia final evaluation
Media final evaluationlaurensj12
 
WEB AUTHORING - (E.Eniola O)
WEB AUTHORING - (E.Eniola O)WEB AUTHORING - (E.Eniola O)
WEB AUTHORING - (E.Eniola O)
haverstockmedia
 
Principles of interactive design
Principles of interactive designPrinciples of interactive design
Principles of interactive design
Samantha Lopez
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
Richard Meriveles
 
Dans evaluation
Dans evaluationDans evaluation
Dans evaluation
DanField97
 
Research + planning - Use of the Internet
Research + planning - Use of the InternetResearch + planning - Use of the Internet
Research + planning - Use of the Internet
anouska1234
 
Research + Planning- Websites Used
Research + Planning- Websites Used Research + Planning- Websites Used
Research + Planning- Websites Used
anouska1234
 
1. fmp initial plans 2
1. fmp initial plans 21. fmp initial plans 2
1. fmp initial plans 2
Jordannekay99
 
Web Design Principles
Web Design PrinciplesWeb Design Principles
Web Design Principles
bucknergit
 
Webdesignprinciplesbaileybucknergomez 2
Webdesignprinciplesbaileybucknergomez 2Webdesignprinciplesbaileybucknergomez 2
Webdesignprinciplesbaileybucknergomez 2
Steven_G1563
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
nolly00
 
diary.pptx
diary.pptxdiary.pptx
diary.pptx
jturner12
 
Media evaluation first draft
Media evaluation first draftMedia evaluation first draft
Media evaluation first draftlaurensj12
 
Evaluation - Q4
Evaluation - Q4Evaluation - Q4
Evaluation - Q4
X-ton
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
NatalieCairns31
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
Beth Case
 
Slide Share Aassignment
Slide Share AassignmentSlide Share Aassignment
Slide Share Aassignmentkatiecurtis
 

Similar to Web Design Principles (20)

Media final evaluation
Media final evaluationMedia final evaluation
Media final evaluation
 
WEB AUTHORING - (E.Eniola O)
WEB AUTHORING - (E.Eniola O)WEB AUTHORING - (E.Eniola O)
WEB AUTHORING - (E.Eniola O)
 
Principles of interactive design
Principles of interactive designPrinciples of interactive design
Principles of interactive design
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
Dans evaluation
Dans evaluationDans evaluation
Dans evaluation
 
Research + planning - Use of the Internet
Research + planning - Use of the InternetResearch + planning - Use of the Internet
Research + planning - Use of the Internet
 
Research + Planning- Websites Used
Research + Planning- Websites Used Research + Planning- Websites Used
Research + Planning- Websites Used
 
1. fmp initial plans 2
1. fmp initial plans 21. fmp initial plans 2
1. fmp initial plans 2
 
Web Design Principles
Web Design PrinciplesWeb Design Principles
Web Design Principles
 
Webdesignprinciplesbaileybucknergomez 2
Webdesignprinciplesbaileybucknergomez 2Webdesignprinciplesbaileybucknergomez 2
Webdesignprinciplesbaileybucknergomez 2
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 
diary.pptx
diary.pptxdiary.pptx
diary.pptx
 
Diary
DiaryDiary
Diary
 
Media evaluation first draft
Media evaluation first draftMedia evaluation first draft
Media evaluation first draft
 
Evaluation - Q4
Evaluation - Q4Evaluation - Q4
Evaluation - Q4
 
Evaluation question 4
Evaluation question 4Evaluation question 4
Evaluation question 4
 
Designing Navigation
Designing NavigationDesigning Navigation
Designing Navigation
 
Design and User Interface
Design and User InterfaceDesign and User Interface
Design and User Interface
 
Slide Share Aassignment
Slide Share AassignmentSlide Share Aassignment
Slide Share Aassignment
 
Question 4.
Question 4.Question 4.
Question 4.
 

Recently uploaded

White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
Mansi Shah
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
boryssutkowski
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
jyz59f4j
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
Hess9
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
7sd8fier
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
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
 
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
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 
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
 
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
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 

Recently uploaded (20)

White wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva TschoppWhite wonder, Work developed by Eva Tschopp
White wonder, Work developed by Eva Tschopp
 
Borys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior designBorys Sutkowski portfolio interior design
Borys Sutkowski portfolio interior design
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
一比一原版(LSE毕业证书)伦敦政治经济学院毕业证成绩单如何办理
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
 
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
一比一原版(NCL毕业证书)纽卡斯尔大学毕业证成绩单如何办理
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
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
 
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
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 
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...
 
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
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 

Web Design Principles