SlideShare a Scribd company logo
WEB
DESIGN
PRINCIPLES
BALANCE
    CONTRAST
    EMPHASIS
    PROXIMITY
REPEAT OR RHYTHM
   WHITE SPACE
       LINE
BALANCE
 The use of symmetries provides simplicity, elegance and clarity to the designs




Symmetric
                                          Asymmetrical
                                          Balance
Out of
Balance
BALANCE

Symmetric

         The designer can guide the user
    though the page in the way that you
     want for ensure the best visibility
   of the most important elements of it.
Symmetric




It is the balance that must exist between the different elements of the page.
BALANCE

                                   The designer can guide the visitor through the
Symmetric                          page in any way you want to ensure the best
                                   visibility of the most important elements of it.


The different elements of a web page are   Asymmetrical
balanced or unbalanced but follow a
symmetrical pattern.                       Balance
Asymmetrical Balance




Balanced but without Follow a symmetrical pattern
BALANCE

                                           The designer can guide the visitor through
Symmetric                                  the page in any way you want to ensure the
                                           best visibility of the most important
                                           elements of it.
The different elements of a web page are   Asymmetrical
balanced or unbalanced but follow a
symmetrical pattern.                       Balance
Out of                                     The pages out of balance or out of

Balance                                    balance. This is done deliberately, looking
                                           for visual impact
Out of Balance




looking for visual impact
BALANCE




The use of symmetries provides simplicity, elegance and clarity to the designs.
TONE CONTRAST




tone played with variations within the same color to achieve that
                      desired visual impact.
TONE CONTRAST
CONTRAST COLOR
contrast objects through the use of different colors.
CONTRAST CONTOUR




The irregular shapes or abstract visual attract more attention tha
                     simple geometric figures.
EMPHASIS
contribute to the aesthetic design and clarity of the message of it.
REPEAT OR RHYTHM




Set standards against which to sort the items on the page
NO REPEAT HARMONIC




Used to give a feeling jarring, increasing the emotional message design
PROXIMITY
Refers to put together or close the items that are related
WHITE SPACE




Contributes to the balance of the different elements of a web page components
LINE
highlight or emphasize some content
Want more?



   Time to visit
 www.thefwa.com

More Related Content

What's hot

Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
RJNithin
 
Typography
TypographyTypography
Typography
Sai Kiran Reddy
 
Intro to the Principles of Graphic Design
Intro to the Principles of Graphic DesignIntro to the Principles of Graphic Design
Intro to the Principles of Graphic Design
Jordan Open Source Association
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theory
Abanoub Hanna
 
Graphic Designing
Graphic DesigningGraphic Designing
Graphic Designing
MuhammadHassan646
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
Mainstreethost
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
Shawn Calvert
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
Ravi Bhadauria
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.
Rahul KULKARNI
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
Sylhet IT Academy
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
Jordan Open Source Association
 
Page Layout Techniques: Contrast
Page Layout Techniques: ContrastPage Layout Techniques: Contrast
Page Layout Techniques: Contrast
clewis86
 
Raster vs Vector
Raster vs VectorRaster vs Vector
Raster vs Vector
akn4fotos
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Ravi Bhadauria
 
Design Elements
Design ElementsDesign Elements
Design Elements
Coky Fauzi Alfi
 
The Principles of Design
The Principles of DesignThe Principles of Design
The Principles of Design
Verbal+Visual
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
vaishnavi770
 
Communication design
Communication designCommunication design
Communication design
SchommerMedia
 
Design elements and principles
Design elements and principlesDesign elements and principles
Design elements and principles
Maged A. Morsy
 

What's hot (20)

Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)Graphic Designing Presentation (Tips & Tricks)
Graphic Designing Presentation (Tips & Tricks)
 
Typography
TypographyTypography
Typography
 
Intro to the Principles of Graphic Design
Intro to the Principles of Graphic DesignIntro to the Principles of Graphic Design
Intro to the Principles of Graphic Design
 
How to design - Graphic design theory
How to design - Graphic design theoryHow to design - Graphic design theory
How to design - Graphic design theory
 
Graphic Designing
Graphic DesigningGraphic Designing
Graphic Designing
 
Typography 101: The Basics
Typography 101: The BasicsTypography 101: The Basics
Typography 101: The Basics
 
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
WHAT IS GRAPHIC DESIGN? (Intro to GD, Wk 1)
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.Graphic Design Essentials by Rahul KULKARNI.
Graphic Design Essentials by Rahul KULKARNI.
 
Freelancing with graphic design
Freelancing with graphic designFreelancing with graphic design
Freelancing with graphic design
 
Intro to Graphic Design Elements
Intro to Graphic Design ElementsIntro to Graphic Design Elements
Intro to Graphic Design Elements
 
Page Layout Techniques: Contrast
Page Layout Techniques: ContrastPage Layout Techniques: Contrast
Page Layout Techniques: Contrast
 
Raster vs Vector
Raster vs VectorRaster vs Vector
Raster vs Vector
 
Grid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia InstituteGrid Systems in Graphic Design by ADMEC Multimedia Institute
Grid Systems in Graphic Design by ADMEC Multimedia Institute
 
Design Elements
Design ElementsDesign Elements
Design Elements
 
The Principles of Design
The Principles of DesignThe Principles of Design
The Principles of Design
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
 
Communication design
Communication designCommunication design
Communication design
 
Design elements and principles
Design elements and principlesDesign elements and principles
Design elements and principles
 
Principles Of Design 1
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
 

Viewers also liked

MCON Group Core Values
MCON Group Core ValuesMCON Group Core Values
MCON Group Core Values
Andres Vargas
 
Marketing intro
Marketing introMarketing intro
Marketing intro
Andres Vargas
 
Cultural shock: Understanding Cultures
Cultural shock: Understanding CulturesCultural shock: Understanding Cultures
Cultural shock: Understanding Cultures
Andres Vargas
 
Scrum - A different approach to project management
Scrum - A different approach to project managementScrum - A different approach to project management
Scrum - A different approach to project management
Andres Vargas
 
Introduction - Markedsføring Seminar 1/4
Introduction - Markedsføring Seminar 1/4Introduction - Markedsføring Seminar 1/4
Introduction - Markedsføring Seminar 1/4
Hello Group
 
Idea camp Kista-presentation
Idea camp Kista-presentationIdea camp Kista-presentation
Idea camp Kista-presentationAnna Åkerberg
 
Overall User Experience - Markedsføring Seminar 2/4
Overall User Experience - Markedsføring Seminar 2/4Overall User Experience - Markedsføring Seminar 2/4
Overall User Experience - Markedsføring Seminar 2/4
Hello Group
 
Quality Evaluations and Accessibility
Quality  Evaluations and  AccessibilityQuality  Evaluations and  Accessibility
Quality Evaluations and Accessibility
Vestforsk.no
 
User Experience 2012 - Introduction
User Experience 2012 - IntroductionUser Experience 2012 - Introduction
User Experience 2012 - Introduction
Hello Group
 
Turquoise presentation
Turquoise presentationTurquoise presentation
Turquoise presentationNidhi Saxena
 
Introduction into Scrum
Introduction into ScrumIntroduction into Scrum
Introduction into Scrum
msorin
 
Introduction to Agile software testing
Introduction to Agile software testingIntroduction to Agile software testing
Introduction to Agile software testing
KMS Technology
 

Viewers also liked (12)

MCON Group Core Values
MCON Group Core ValuesMCON Group Core Values
MCON Group Core Values
 
Marketing intro
Marketing introMarketing intro
Marketing intro
 
Cultural shock: Understanding Cultures
Cultural shock: Understanding CulturesCultural shock: Understanding Cultures
Cultural shock: Understanding Cultures
 
Scrum - A different approach to project management
Scrum - A different approach to project managementScrum - A different approach to project management
Scrum - A different approach to project management
 
Introduction - Markedsføring Seminar 1/4
Introduction - Markedsføring Seminar 1/4Introduction - Markedsføring Seminar 1/4
Introduction - Markedsføring Seminar 1/4
 
Idea camp Kista-presentation
Idea camp Kista-presentationIdea camp Kista-presentation
Idea camp Kista-presentation
 
Overall User Experience - Markedsføring Seminar 2/4
Overall User Experience - Markedsføring Seminar 2/4Overall User Experience - Markedsføring Seminar 2/4
Overall User Experience - Markedsføring Seminar 2/4
 
Quality Evaluations and Accessibility
Quality  Evaluations and  AccessibilityQuality  Evaluations and  Accessibility
Quality Evaluations and Accessibility
 
User Experience 2012 - Introduction
User Experience 2012 - IntroductionUser Experience 2012 - Introduction
User Experience 2012 - Introduction
 
Turquoise presentation
Turquoise presentationTurquoise presentation
Turquoise presentation
 
Introduction into Scrum
Introduction into ScrumIntroduction into Scrum
Introduction into Scrum
 
Introduction to Agile software testing
Introduction to Agile software testingIntroduction to Agile software testing
Introduction to Agile software testing
 

Similar to Web Design Principles

0102 a principles_of_design[1]
0102 a principles_of_design[1]0102 a principles_of_design[1]
0102 a principles_of_design[1]ccammarano
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
Steve Guinan
 
Basic principles of grapics and layout
Basic principles of grapics and layoutBasic principles of grapics and layout
Basic principles of grapics and layout
GeovelSarmiento
 
U4 jou231 basic_designprinciples
U4 jou231 basic_designprinciplesU4 jou231 basic_designprinciples
U4 jou231 basic_designprinciples
poole7
 
Web design principles (2)
Web design principles (2)Web design principles (2)
Web design principles (2)
Briana O'Neill
 
Web Design Principles
Web Design PrinciplesWeb Design Principles
Web Design Principles
Mandy Reno
 
Web design principles (2)
Web design principles (2)Web design principles (2)
Web design principles (2)
ryanash1
 
Layout(advt.) by sarath
Layout(advt.) by sarathLayout(advt.) by sarath
Layout(advt.) by sarathSarath Allapra
 
Layout(advt.) by sarath
Layout(advt.) by sarathLayout(advt.) by sarath
Layout(advt.) by sarathSarath Allapra
 
Alignment
Alignment Alignment
Alignment
HollyFriesen3
 

Similar to Web Design Principles (10)

0102 a principles_of_design[1]
0102 a principles_of_design[1]0102 a principles_of_design[1]
0102 a principles_of_design[1]
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Basic principles of grapics and layout
Basic principles of grapics and layoutBasic principles of grapics and layout
Basic principles of grapics and layout
 
U4 jou231 basic_designprinciples
U4 jou231 basic_designprinciplesU4 jou231 basic_designprinciples
U4 jou231 basic_designprinciples
 
Web design principles (2)
Web design principles (2)Web design principles (2)
Web design principles (2)
 
Web Design Principles
Web Design PrinciplesWeb Design Principles
Web Design Principles
 
Web design principles (2)
Web design principles (2)Web design principles (2)
Web design principles (2)
 
Layout(advt.) by sarath
Layout(advt.) by sarathLayout(advt.) by sarath
Layout(advt.) by sarath
 
Layout(advt.) by sarath
Layout(advt.) by sarathLayout(advt.) by sarath
Layout(advt.) by sarath
 
Alignment
Alignment Alignment
Alignment
 

Recently uploaded

RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
9a93xvy
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
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
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
7sd8fier
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
farhanaslam79
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
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
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
fabianavillanib
 
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
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
aaryangarg12
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
kecekev
 
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
 

Recently uploaded (20)

RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
一比一原版(CITY毕业证书)谢菲尔德哈勒姆大学毕业证如何办理
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
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
 
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
一比一原版(MMU毕业证书)曼彻斯特城市大学毕业证成绩单如何办理
 
Design-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service DeliveryDesign-Thinking-eBook for Public Service Delivery
Design-Thinking-eBook for Public Service Delivery
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
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
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdfPORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
PORTFOLIO FABIANA VILLANI ARCHITECTURE.pdf
 
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
 
Transforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting ProfitabilityTransforming Brand Perception and Boosting Profitability
Transforming Brand Perception and Boosting Profitability
 
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
一比一原版(UW毕业证)西雅图华盛顿大学毕业证如何办理
 
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
 

Web Design Principles

  • 2. BALANCE CONTRAST EMPHASIS PROXIMITY REPEAT OR RHYTHM WHITE SPACE LINE
  • 3. BALANCE The use of symmetries provides simplicity, elegance and clarity to the designs Symmetric Asymmetrical Balance Out of Balance
  • 4. BALANCE Symmetric The designer can guide the user though the page in the way that you want for ensure the best visibility of the most important elements of it.
  • 5. Symmetric It is the balance that must exist between the different elements of the page.
  • 6. BALANCE The designer can guide the visitor through the Symmetric page in any way you want to ensure the best visibility of the most important elements of it. The different elements of a web page are Asymmetrical balanced or unbalanced but follow a symmetrical pattern. Balance
  • 7. Asymmetrical Balance Balanced but without Follow a symmetrical pattern
  • 8.
  • 9. BALANCE The designer can guide the visitor through Symmetric the page in any way you want to ensure the best visibility of the most important elements of it. The different elements of a web page are Asymmetrical balanced or unbalanced but follow a symmetrical pattern. Balance Out of The pages out of balance or out of Balance balance. This is done deliberately, looking for visual impact
  • 10. Out of Balance looking for visual impact
  • 11. BALANCE The use of symmetries provides simplicity, elegance and clarity to the designs.
  • 12. TONE CONTRAST tone played with variations within the same color to achieve that desired visual impact.
  • 14. CONTRAST COLOR contrast objects through the use of different colors.
  • 15. CONTRAST CONTOUR The irregular shapes or abstract visual attract more attention tha simple geometric figures.
  • 16. EMPHASIS contribute to the aesthetic design and clarity of the message of it.
  • 17.
  • 18. REPEAT OR RHYTHM Set standards against which to sort the items on the page
  • 19. NO REPEAT HARMONIC Used to give a feeling jarring, increasing the emotional message design
  • 20. PROXIMITY Refers to put together or close the items that are related
  • 21. WHITE SPACE Contributes to the balance of the different elements of a web page components
  • 23.
  • 24.
  • 25.
  • 26.
  • 27. Want more? Time to visit www.thefwa.com