SlideShare ist ein Scribd-Unternehmen logo
1 von 28
Principles of Design
The basic principles of design that appear in
every well-designed piece of work.
•Balance
•Movement
•Repetition/Rhythm
•Emphasis
•Contrast
•Unity
•Alignment
Principles of Design
How we apply the
Principles of design
determines how
successful we are in
creating a work of art.
 The principles of good
design are the tools used
by an artist or designer to
create an effective
composition or design.
 They are rules to help
guide a designer how to
arrange the various
elements of a
composition in relation to
each other and the overall
design.
Balance
 Balance provides stability and
structure to a design.
 Balance is the weight
distributed in the design by the
placement of your elements.
 Balance can be achieved by
placing a large element on
one side of your design and
several small elements on the
other side.
Balance
Balance can be achieved in 3 ways:
Symmetrical
Symmetrical balance is
achieved when the weight
of the elements on both
halves of the design is
even, given a centre line.
Asymmetrical
In asymmetrical balance,
the sides are different but
still look balanced.
Radial
In radial balance, the
elements are arranged
around a central point and
may be similar.
SYMMETRICAL BALANCE in WEBSITES
The elements of a composition are the same on either side of an axis line.
ASYMMETRICAL BALANCE in WEBSITES
Objects on the page are arranged so that, despite their differing size, shape, tone,
or placement, they equalize the weight of the page.
FAILING TO ACHIEVE BALANCE
Movement
 Movement is the path our eyes
follow when we look at a work of art.
 Movement can be directed along
lines, edges, shape, and color within
the work of art.
Repetition / Rhythm
 Repetition strengthens a
design by tying together
individual elements.
 Repetition helps to create
association and
consistency.
 Consistent repetition of an
element is widely used in
multi-page documents &
websites.

Repetition
Use the same colors, textures and
other design elements throughout
the page and from page to page
REPETITION in WEBSITES
Emphasis
 Emphasis is the part of the
design that catches the
viewer’s attention
 Emphasis is used by
designers to create
dominance and focus in
their work.
 Traditionally emphasis was
the central part of the
design, from which all other
parts radiated.
Contrast attracts the
attention of your viewers.
EMPHASIS in WEBSITES
Contrast attracts the
attention of your viewers.
FAILING TO ACIEVE EMPHASIS in WEBSITES
Contrast
 Contrast allows you to
emphasize or highlight key
elements within your design.
 Contrast is created when two
elements are total opposites
 It must be strong and obvious. It
needs to make an impact.
 It can be achieved with fonts
(classic/contemporary), lines
(thick/thin) and shapes
(big/small), just to name a few.
Contrast attracts the
attention of your viewers.
Contrast
Contrast attracts the
attention of your viewers.
CONTRAST in
WEBSITES
Contrast attracts the
attention of your viewers.
CONTRAST in WEBSITES
Unity
 Unity is the feeling of
harmony between all parts
of the work of art, which
creates a sense of
completeness.
 When all the elements in
a work look as though
they belong together, the
artist has achieved unity.
Use the same colors, textures and
other design elements throughout
the page and from page to page
UNITY in WEBSITES
FAILING TO ACHIEVE
UNITY in WEBSITES
Alignment
 Alignment governs how text and graphics line up with each other.
 The use of grids and guides can aid in placement and alignment of both
text and graphics.
Alignment
ALIGNMENT in WEBSITES
In Conclusion…
The difference between a weak design and a strong one is
completely dependent upon the artist's knowledge of the design
principles and how well he/she applies them.
All art, whether it is Web design, industrial design, fine art,
sculpture, commercial art, or graphic art, is subject to the same
principles of good design.

Weitere ähnliche Inhalte

Was ist angesagt?

Perspective Drawings
Perspective DrawingsPerspective Drawings
Perspective Drawings
Bruce Coulter
 
elements and principles of design
elements and principles of designelements and principles of design
elements and principles of design
Shahril Khairi
 
Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?
Bas Leurs
 
PRINCIPLES OF COMPOSITION
PRINCIPLES OF COMPOSITIONPRINCIPLES OF COMPOSITION
PRINCIPLES OF COMPOSITION
swetha karlmarx
 

Was ist angesagt? (20)

Basic Design : Elements & Principles
Basic Design : Elements & PrinciplesBasic Design : Elements & Principles
Basic Design : Elements & Principles
 
Design Principles and Elements
Design Principles and ElementsDesign Principles and Elements
Design Principles and Elements
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Elements of design
Elements of designElements of design
Elements of design
 
Graphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspirationGraphic Design Elements and Principles - Tips and inspiration
Graphic Design Elements and Principles - Tips and inspiration
 
Elements and Principles of Design
Elements and Principles of DesignElements and Principles of Design
Elements and Principles of Design
 
Elements and Principles of Design
Elements and Principles of DesignElements and Principles of Design
Elements and Principles of Design
 
Design principles
Design principlesDesign principles
Design principles
 
The Principles of Design
The Principles of DesignThe Principles of Design
The Principles of Design
 
Principles of design
Principles of designPrinciples of design
Principles of design
 
Graphic Design For non graphic designers
Graphic Design For non graphic designersGraphic Design For non graphic designers
Graphic Design For non graphic designers
 
Perspective Drawings
Perspective DrawingsPerspective Drawings
Perspective Drawings
 
Principles Of Design 1
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
 
Colour Theory
Colour TheoryColour Theory
Colour Theory
 
elements and principles of design
elements and principles of designelements and principles of design
elements and principles of design
 
Elements and Principles of Design (Updated)
Elements and Principles of Design (Updated)Elements and Principles of Design (Updated)
Elements and Principles of Design (Updated)
 
Elements of Design
Elements of DesignElements of Design
Elements of Design
 
Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?Design Theory - Lecture 01: What is design?
Design Theory - Lecture 01: What is design?
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
PRINCIPLES OF COMPOSITION
PRINCIPLES OF COMPOSITIONPRINCIPLES OF COMPOSITION
PRINCIPLES OF COMPOSITION
 

Ähnlich wie Design Principles

Organization in the visual arts and Principles of Design
Organization in the visual arts and Principles of DesignOrganization in the visual arts and Principles of Design
Organization in the visual arts and Principles of Design
Mariz Ombajin
 
KCC Art 141 Chapter 7 Design Principles
KCC Art 141 Chapter 7 Design PrinciplesKCC Art 141 Chapter 7 Design Principles
KCC Art 141 Chapter 7 Design Principles
Kelly Parker
 

Ähnlich wie Design Principles (20)

Principles of Design.pptx
Principles of Design.pptxPrinciples of Design.pptx
Principles of Design.pptx
 
Principle of landscape design
Principle of landscape designPrinciple of landscape design
Principle of landscape design
 
Principlesofdesign
PrinciplesofdesignPrinciplesofdesign
Principlesofdesign
 
1-2 Principles of Design lecture
1-2 Principles of Design lecture1-2 Principles of Design lecture
1-2 Principles of Design lecture
 
Principle of art
Principle of artPrinciple of art
Principle of art
 
Organization in the visual arts and Principles of Design
Organization in the visual arts and Principles of DesignOrganization in the visual arts and Principles of Design
Organization in the visual arts and Principles of Design
 
The principles of design.
The principles of design.The principles of design.
The principles of design.
 
The principles of design [autosaved]
The principles of design [autosaved]The principles of design [autosaved]
The principles of design [autosaved]
 
Colour combination.pptx
Colour  combination.pptxColour  combination.pptx
Colour combination.pptx
 
Visual Design
Visual DesignVisual Design
Visual Design
 
Basic principles of grapics and layout
Basic principles of grapics and layoutBasic principles of grapics and layout
Basic principles of grapics and layout
 
Unity sad
Unity sadUnity sad
Unity sad
 
Principles of design
Principles of designPrinciples of design
Principles of design
 
Principles of Design.pptx
Principles of Design.pptxPrinciples of Design.pptx
Principles of Design.pptx
 
Principles of Interior Designing
Principles of Interior DesigningPrinciples of Interior Designing
Principles of Interior Designing
 
KCC Art 141 Chapter 7 Design Principles
KCC Art 141 Chapter 7 Design PrinciplesKCC Art 141 Chapter 7 Design Principles
KCC Art 141 Chapter 7 Design Principles
 
Design and colour
Design and colourDesign and colour
Design and colour
 
PRINCIPLES OF DESIGN.pptx
PRINCIPLES OF DESIGN.pptxPRINCIPLES OF DESIGN.pptx
PRINCIPLES OF DESIGN.pptx
 
The Principles Of Logo Design
The Principles Of Logo DesignThe Principles Of Logo Design
The Principles Of Logo Design
 
Basic design principles
Basic design principlesBasic design principles
Basic design principles
 

Mehr von Steve Guinan

Mehr von Steve Guinan (20)

Chapter 18: Transitions, Transforms, and Animation
Chapter 18: Transitions, Transforms, and AnimationChapter 18: Transitions, Transforms, and Animation
Chapter 18: Transitions, Transforms, and Animation
 
Chapter 17: Responsive Web Design
Chapter 17: Responsive Web DesignChapter 17: Responsive Web Design
Chapter 17: Responsive Web Design
 
Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning Chapter 15: Floating and Positioning
Chapter 15: Floating and Positioning
 
Chapter 9: Forms
Chapter 9: FormsChapter 9: Forms
Chapter 9: Forms
 
Chapter 8: Tables
Chapter 8: TablesChapter 8: Tables
Chapter 8: Tables
 
Chapter 14: Box Model
Chapter 14: Box ModelChapter 14: Box Model
Chapter 14: Box Model
 
Chapter 13: Colors and Backgrounds
Chapter 13: Colors and BackgroundsChapter 13: Colors and Backgrounds
Chapter 13: Colors and Backgrounds
 
Chapter 12: CSS Part 2
Chapter 12: CSS Part 2Chapter 12: CSS Part 2
Chapter 12: CSS Part 2
 
Chapter 11: Intro to CSS
Chapter 11: Intro to CSSChapter 11: Intro to CSS
Chapter 11: Intro to CSS
 
Chapter 23: Web Images
Chapter 23: Web ImagesChapter 23: Web Images
Chapter 23: Web Images
 
Chapter 7: Images
Chapter 7: ImagesChapter 7: Images
Chapter 7: Images
 
HubSpot Student Instructions
HubSpot Student InstructionsHubSpot Student Instructions
HubSpot Student Instructions
 
Ch 6: Links
Ch 6: LinksCh 6: Links
Ch 6: Links
 
Ch 5: Marking up Text
Ch 5: Marking up TextCh 5: Marking up Text
Ch 5: Marking up Text
 
Ch 3: Big Concepts
Ch 3: Big ConceptsCh 3: Big Concepts
Ch 3: Big Concepts
 
Ch 2: How the Web Works
Ch 2: How the Web WorksCh 2: How the Web Works
Ch 2: How the Web Works
 
Ch 1: Getting Started
Ch 1: Getting StartedCh 1: Getting Started
Ch 1: Getting Started
 
Intro to Web Design 6e Chapter 7
Intro to Web Design 6e Chapter 7Intro to Web Design 6e Chapter 7
Intro to Web Design 6e Chapter 7
 
Intro to Web Design 6e Chapter 6
Intro to Web Design 6e Chapter 6Intro to Web Design 6e Chapter 6
Intro to Web Design 6e Chapter 6
 
Intro to Web Design 6e Chapter 5
Intro to Web Design 6e Chapter 5Intro to Web Design 6e Chapter 5
Intro to Web Design 6e Chapter 5
 

Kürzlich hochgeladen

Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
ZurliaSoop
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
KarakKing
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
heathfieldcps1
 

Kürzlich hochgeladen (20)

Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)Accessible Digital Futures project (20/03/2024)
Accessible Digital Futures project (20/03/2024)
 
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptxOn_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
On_Translating_a_Tamil_Poem_by_A_K_Ramanujan.pptx
 
Micro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdfMicro-Scholarship, What it is, How can it help me.pdf
Micro-Scholarship, What it is, How can it help me.pdf
 
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
NO1 Top Black Magic Specialist In Lahore Black magic In Pakistan Kala Ilam Ex...
 
How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17How to Give a Domain for a Field in Odoo 17
How to Give a Domain for a Field in Odoo 17
 
REMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptxREMIFENTANIL: An Ultra short acting opioid.pptx
REMIFENTANIL: An Ultra short acting opioid.pptx
 
Holdier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdfHoldier Curriculum Vitae (April 2024).pdf
Holdier Curriculum Vitae (April 2024).pdf
 
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
Jual Obat Aborsi Hongkong ( Asli No.1 ) 085657271886 Obat Penggugur Kandungan...
 
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptxHMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
HMCS Max Bernays Pre-Deployment Brief (May 2024).pptx
 
FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024FSB Advising Checklist - Orientation 2024
FSB Advising Checklist - Orientation 2024
 
Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024Mehran University Newsletter Vol-X, Issue-I, 2024
Mehran University Newsletter Vol-X, Issue-I, 2024
 
How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17How to Create and Manage Wizard in Odoo 17
How to Create and Manage Wizard in Odoo 17
 
Wellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptxWellbeing inclusion and digital dystopias.pptx
Wellbeing inclusion and digital dystopias.pptx
 
Single or Multiple melodic lines structure
Single or Multiple melodic lines structureSingle or Multiple melodic lines structure
Single or Multiple melodic lines structure
 
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
Sensory_Experience_and_Emotional_Resonance_in_Gabriel_Okaras_The_Piano_and_Th...
 
Salient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functionsSalient Features of India constitution especially power and functions
Salient Features of India constitution especially power and functions
 
The basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptxThe basics of sentences session 3pptx.pptx
The basics of sentences session 3pptx.pptx
 
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
2024-NATIONAL-LEARNING-CAMP-AND-OTHER.pptx
 
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...Kodo Millet  PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
Kodo Millet PPT made by Ghanshyam bairwa college of Agriculture kumher bhara...
 
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
Beyond_Borders_Understanding_Anime_and_Manga_Fandom_A_Comprehensive_Audience_...
 

Design Principles

  • 1. Principles of Design The basic principles of design that appear in every well-designed piece of work. •Balance •Movement •Repetition/Rhythm •Emphasis •Contrast •Unity •Alignment
  • 2. Principles of Design How we apply the Principles of design determines how successful we are in creating a work of art.  The principles of good design are the tools used by an artist or designer to create an effective composition or design.  They are rules to help guide a designer how to arrange the various elements of a composition in relation to each other and the overall design.
  • 3. Balance  Balance provides stability and structure to a design.  Balance is the weight distributed in the design by the placement of your elements.  Balance can be achieved by placing a large element on one side of your design and several small elements on the other side.
  • 4. Balance Balance can be achieved in 3 ways: Symmetrical Symmetrical balance is achieved when the weight of the elements on both halves of the design is even, given a centre line. Asymmetrical In asymmetrical balance, the sides are different but still look balanced. Radial In radial balance, the elements are arranged around a central point and may be similar.
  • 5.
  • 6. SYMMETRICAL BALANCE in WEBSITES The elements of a composition are the same on either side of an axis line.
  • 7. ASYMMETRICAL BALANCE in WEBSITES Objects on the page are arranged so that, despite their differing size, shape, tone, or placement, they equalize the weight of the page.
  • 9. Movement  Movement is the path our eyes follow when we look at a work of art.  Movement can be directed along lines, edges, shape, and color within the work of art.
  • 10. Repetition / Rhythm  Repetition strengthens a design by tying together individual elements.  Repetition helps to create association and consistency.  Consistent repetition of an element is widely used in multi-page documents & websites.
  • 12.
  • 13. Use the same colors, textures and other design elements throughout the page and from page to page REPETITION in WEBSITES
  • 14. Emphasis  Emphasis is the part of the design that catches the viewer’s attention  Emphasis is used by designers to create dominance and focus in their work.  Traditionally emphasis was the central part of the design, from which all other parts radiated.
  • 15. Contrast attracts the attention of your viewers. EMPHASIS in WEBSITES
  • 16. Contrast attracts the attention of your viewers. FAILING TO ACIEVE EMPHASIS in WEBSITES
  • 17. Contrast  Contrast allows you to emphasize or highlight key elements within your design.  Contrast is created when two elements are total opposites  It must be strong and obvious. It needs to make an impact.  It can be achieved with fonts (classic/contemporary), lines (thick/thin) and shapes (big/small), just to name a few.
  • 20. Contrast attracts the attention of your viewers. CONTRAST in WEBSITES
  • 21. Contrast attracts the attention of your viewers. CONTRAST in WEBSITES
  • 22. Unity  Unity is the feeling of harmony between all parts of the work of art, which creates a sense of completeness.  When all the elements in a work look as though they belong together, the artist has achieved unity.
  • 23. Use the same colors, textures and other design elements throughout the page and from page to page UNITY in WEBSITES
  • 25. Alignment  Alignment governs how text and graphics line up with each other.  The use of grids and guides can aid in placement and alignment of both text and graphics.
  • 28. In Conclusion… The difference between a weak design and a strong one is completely dependent upon the artist's knowledge of the design principles and how well he/she applies them. All art, whether it is Web design, industrial design, fine art, sculpture, commercial art, or graphic art, is subject to the same principles of good design.