SlideShare a Scribd company logo
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.
Design Principles
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
Design Principles
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.

More Related Content

PDF
Principles of design
PPTX
Principles of Design
PDF
Principles of Design
PDF
The Principles of Design
PPT
The principles of design
PPT
Principles Of Design 1
PPTX
Design Elements
PDF
elements and principles of design
Principles of design
Principles of Design
Principles of Design
The Principles of Design
The principles of design
Principles Of Design 1
Design Elements
elements and principles of design

What's hot (20)

PPTX
Design Principles
PPT
Basic Design : Elements & Principles
PPT
Unity, Balance, Scale & Proportion, Contrast, Emphasis & Repetition & Rhythm
PPTX
Design elements and principles
PDF
PDF
Principles Of Design
PDF
Elements of Design
PPTX
Principle of design
PPTX
Elements and Principles of Design
PPTX
Elements and Principles of Design
PPT
Elements of Graphic Design
PDF
Elements and Principles of Design
PPTX
Elements and principles of design
PPT
Principles of design
PPTX
Harmony: Principles of design
PPT
The principles of design 1
PPS
PRINCIPLES OF COMPOSITION
PPT
Chapter 2 unity
PDF
Principles of design
PPT
Gestalt Principles of Design
Design Principles
Basic Design : Elements & Principles
Unity, Balance, Scale & Proportion, Contrast, Emphasis & Repetition & Rhythm
Design elements and principles
Principles Of Design
Elements of Design
Principle of design
Elements and Principles of Design
Elements and Principles of Design
Elements of Graphic Design
Elements and Principles of Design
Elements and principles of design
Principles of design
Harmony: Principles of design
The principles of design 1
PRINCIPLES OF COMPOSITION
Chapter 2 unity
Principles of design
Gestalt Principles of Design
Ad

Similar to Design Principles (20)

PPTX
1-2 Principles of Design lecture
PPTX
Principle of design
PPTX
The principles of design.
PPTX
The principles of design [autosaved]
PDF
Principlesofdesign
PPTX
Presentation By siddu.k.pptx
PDF
7 basic principles of graphic design
PPTX
LESSON 5 - Imaging and Design for the Online Environment.pptx
PDF
Web Design Principles and Element Presentation in Yellow Beige Line_20241105_...
PPTX
Principles of Visual Design and Communication: Creating Impactful Visuals.pptx
PPTX
Basic Design Principles
PPTX
PRINCIPLES OF DESIGN and elements of design.pptx
PPTX
arts and photos LESSON 2 for college.pptx
PPTX
The principles of design
PPTX
Empowerment-technologies-presentation.pptx
PPTX
Theory of Design
PDF
Principles of design
PPTX
AD DESIGN - PRINCIPLES
DOC
E&P Of Design Definitions Wkst.
PPTX
From Goya To Google: Traditional Design Principles at Work On The Web
1-2 Principles of Design lecture
Principle of design
The principles of design.
The principles of design [autosaved]
Principlesofdesign
Presentation By siddu.k.pptx
7 basic principles of graphic design
LESSON 5 - Imaging and Design for the Online Environment.pptx
Web Design Principles and Element Presentation in Yellow Beige Line_20241105_...
Principles of Visual Design and Communication: Creating Impactful Visuals.pptx
Basic Design Principles
PRINCIPLES OF DESIGN and elements of design.pptx
arts and photos LESSON 2 for college.pptx
The principles of design
Empowerment-technologies-presentation.pptx
Theory of Design
Principles of design
AD DESIGN - PRINCIPLES
E&P Of Design Definitions Wkst.
From Goya To Google: Traditional Design Principles at Work On The Web
Ad

More from Steve Guinan (20)

PPTX
Chapter 18: Transitions, Transforms, and Animation
PPTX
Chapter 17: Responsive Web Design
PPTX
Chapter 15: Floating and Positioning
PPTX
Chapter 9: Forms
PPTX
Chapter 8: Tables
PPTX
Chapter 14: Box Model
PPTX
Chapter 13: Colors and Backgrounds
PPTX
Chapter 12: CSS Part 2
PPTX
Chapter 11: Intro to CSS
PPTX
Chapter 23: Web Images
PPTX
Chapter 7: Images
PPTX
HubSpot Student Instructions
PPTX
Ch 6: Links
PPTX
Ch 5: Marking up Text
PPTX
Ch 3: Big Concepts
PPTX
Ch 2: How the Web Works
PPTX
Ch 1: Getting Started
PPTX
Intro to Web Design 6e Chapter 7
PPTX
Intro to Web Design 6e Chapter 6
PPTX
Intro to Web Design 6e Chapter 5
Chapter 18: Transitions, Transforms, and Animation
Chapter 17: Responsive Web Design
Chapter 15: Floating and Positioning
Chapter 9: Forms
Chapter 8: Tables
Chapter 14: Box Model
Chapter 13: Colors and Backgrounds
Chapter 12: CSS Part 2
Chapter 11: Intro to CSS
Chapter 23: Web Images
Chapter 7: Images
HubSpot Student Instructions
Ch 6: Links
Ch 5: Marking up Text
Ch 3: Big Concepts
Ch 2: How the Web Works
Ch 1: Getting Started
Intro to Web Design 6e Chapter 7
Intro to Web Design 6e Chapter 6
Intro to Web Design 6e Chapter 5

Recently uploaded (20)

PPTX
20th Century Theater, Methods, History.pptx
PPTX
A powerpoint presentation on the Revised K-10 Science Shaping Paper
PDF
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
PDF
FORM 1 BIOLOGY MIND MAPS and their schemes
DOC
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
PDF
Practical Manual AGRO-233 Principles and Practices of Natural Farming
PDF
Τίμαιος είναι φιλοσοφικός διάλογος του Πλάτωνα
PDF
medical_surgical_nursing_10th_edition_ignatavicius_TEST_BANK_pdf.pdf
PDF
My India Quiz Book_20210205121199924.pdf
PDF
Indian roads congress 037 - 2012 Flexible pavement
PDF
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
PPTX
Computer Architecture Input Output Memory.pptx
PDF
What if we spent less time fighting change, and more time building what’s rig...
PPTX
Share_Module_2_Power_conflict_and_negotiation.pptx
PDF
1.3 FINAL REVISED K-10 PE and Health CG 2023 Grades 4-10 (1).pdf
PDF
IGGE1 Understanding the Self1234567891011
PDF
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
PDF
Empowerment Technology for Senior High School Guide
PPTX
Unit 4 Computer Architecture Multicore Processor.pptx
PDF
Computing-Curriculum for Schools in Ghana
20th Century Theater, Methods, History.pptx
A powerpoint presentation on the Revised K-10 Science Shaping Paper
ChatGPT for Dummies - Pam Baker Ccesa007.pdf
FORM 1 BIOLOGY MIND MAPS and their schemes
Soft-furnishing-By-Architect-A.F.M.Mohiuddin-Akhand.doc
Practical Manual AGRO-233 Principles and Practices of Natural Farming
Τίμαιος είναι φιλοσοφικός διάλογος του Πλάτωνα
medical_surgical_nursing_10th_edition_ignatavicius_TEST_BANK_pdf.pdf
My India Quiz Book_20210205121199924.pdf
Indian roads congress 037 - 2012 Flexible pavement
OBE - B.A.(HON'S) IN INTERIOR ARCHITECTURE -Ar.MOHIUDDIN.pdf
Computer Architecture Input Output Memory.pptx
What if we spent less time fighting change, and more time building what’s rig...
Share_Module_2_Power_conflict_and_negotiation.pptx
1.3 FINAL REVISED K-10 PE and Health CG 2023 Grades 4-10 (1).pdf
IGGE1 Understanding the Self1234567891011
BP 704 T. NOVEL DRUG DELIVERY SYSTEMS (UNIT 1)
Empowerment Technology for Senior High School Guide
Unit 4 Computer Architecture Multicore Processor.pptx
Computing-Curriculum for Schools in Ghana

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.
  • 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.
  • 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.