SlideShare una empresa de Scribd logo
1 de 49
Rules of Design
Digital Skills
Manami Ishimura
Design
• Prerequisites of Design
• Elements of Design
• Gestalt Principles
• Digital Design Composition
Prerequisites of Design
1. Format
2. Orientation
3. Grid System
4. Composition
5. Eye Movement
6. Theme
Format
• Format is the canvas size and its usage. Portrait (vertical) and
Landscape (horizontal) are very popular. Especially, in Web designing,
you must imagine a format for each page.
Orientation
Camera Angle (Perspective) and Scale in the frame (Zoom in & out) create different impressions. Dynamic, Stable, etc,
Grid System
Grids help unifying a lot of information in a design. Hierarchy of information must follow those grids.
Grids may change by format.
Composition
• Third Grids
• Symmetry
• Approximate Symmetry
• Asymmetry
The rule of Thirds Examples
Symmetry
Approximate Symmetry
Asymmetry
Eye Movement
• All content needs to be arranged by
eye movement. For instance, people
read newspapers moving their eyes
like a Z line although Websites are
more F line and smartphones are I line.
• Scale/Visual Hierarchy
• Leading Line
• Figure Line
Scale & Visual Hierarchy
Student Example
Leading Line
Figure Line
Example
Failed Example
Theme
• Subject and concept; what do you want to visualize? Inform?
Gestalt
Principles
Proximity
Similarity
Closure
Common Fate
Figure Ground. Relationship
Good Continuation
Proximity
Elements next each other are more relative than further elements. Our perception groups those elements.
If people sit next each other, we think they are together, either a couple or friends
Similarity
Our perception groups similar elements such as shape, color, scale.
Closure
Our perception complements shapes that miss some elements although they associate a sequence.
Common Fate
Elements that are moving to the same direction are recognized more than still groups. Elements in the same
movement are stronger than similarity or proximity
Figure Ground. Relationship
Our perception recognizes an interest as a figure and others as a background.
Smaller shapes or enclosed shapes are apt to be recognized as a figure.
Good Continuation
A sequence is apt to be recognized as a group. Also, smooth curves suggest further continuance.
Digital
Design
Strategies
Focus & Line
Space & Body / Scale & Figure
Color & Unity / Color & Saturation ( Color Theory)
Color & Texture
Alignment
Repetition / Space
Pixel vs. Path
Focus & Line
Example
Failed Example
Space & Body Copy
Scale & Figure
Example
Color & Unity
Failed Example
Color/ Contrast
Example
Color/Texture
Color/Saturation
Color/ Saturation
Failed Example
Alignment
Example
Repetition
Repetition
Space
Pixel vs Path (Raster vs Vector)
Failed Example
Reference.
• https://webnaut.jp/design/620.html
• https://www.canva.com/learn/visual-design-composition/

Más contenido relacionado

La actualidad más candente

Graphic Design Elements&Principles
Graphic Design Elements&PrinciplesGraphic Design Elements&Principles
Graphic Design Elements&Principles
ASM2O
 
Final Exam: Elements & Principles Drawings
Final Exam: Elements & Principles DrawingsFinal Exam: Elements & Principles Drawings
Final Exam: Elements & Principles Drawings
Brooke Nelson
 

La actualidad más candente (20)

Principles and Elements of Design
Principles and Elements of DesignPrinciples and Elements of Design
Principles and 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 of Design
Elements of DesignElements of Design
Elements of Design
 
Elements and principles of design in context to Fashion
Elements and  principles of design in context to FashionElements and  principles of design in context to Fashion
Elements and principles of design in context to Fashion
 
Graphic Design Elements&Principles
Graphic Design Elements&PrinciplesGraphic Design Elements&Principles
Graphic Design Elements&Principles
 
Graphic Design - Shapes
Graphic Design - ShapesGraphic Design - Shapes
Graphic Design - Shapes
 
Graphic Design Fundamentals
Graphic Design FundamentalsGraphic Design Fundamentals
Graphic Design Fundamentals
 
Elements of Graphic Design
Elements of Graphic DesignElements of Graphic Design
Elements of Graphic Design
 
An Introduction to graphic design
An Introduction to graphic designAn Introduction to graphic design
An Introduction to graphic design
 
Design elements and principles
Design elements and principlesDesign elements and principles
Design elements and principles
 
Principles of Design
Principles of DesignPrinciples of Design
Principles of Design
 
Final Exam: Elements & Principles Drawings
Final Exam: Elements & Principles DrawingsFinal Exam: Elements & Principles Drawings
Final Exam: Elements & Principles Drawings
 
Elements of Design - Graphic Design 1
Elements of Design - Graphic Design 1Elements of Design - Graphic Design 1
Elements of Design - Graphic Design 1
 
Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)
Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)
Use of Shapes in Graphic Design | Psychology of Shapes by ADMEC (Updated)
 
Understanding Abstract Art
Understanding Abstract ArtUnderstanding Abstract Art
Understanding Abstract Art
 
Elements & principles
Elements & principles Elements & principles
Elements & principles
 
Design Principles
Design PrinciplesDesign Principles
Design Principles
 
Design principles
Design principlesDesign principles
Design principles
 
Elements and Principles of Design - Avantika University
Elements and Principles of Design - Avantika UniversityElements and Principles of Design - Avantika University
Elements and Principles of Design - Avantika University
 
The elements of design
The elements of designThe elements of design
The elements of design
 

Similar a Rules of Design Composition

Principlesofdesign10
Principlesofdesign10Principlesofdesign10
Principlesofdesign10
ahill7
 
Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
COM1005
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notes
cmurphysvhs
 

Similar a Rules of Design Composition (20)

Gestalt Principles of Design
Gestalt Principles of DesignGestalt Principles of Design
Gestalt Principles of Design
 
Class 7 Layout
Class 7 LayoutClass 7 Layout
Class 7 Layout
 
principlesofgraphicdesignbasics-13045312012103-phpapp01.ppt
principlesofgraphicdesignbasics-13045312012103-phpapp01.pptprinciplesofgraphicdesignbasics-13045312012103-phpapp01.ppt
principlesofgraphicdesignbasics-13045312012103-phpapp01.ppt
 
IVC - Lesson 14
IVC - Lesson 14IVC - Lesson 14
IVC - Lesson 14
 
Key Design Principles To Improve Your User Experience (UX)
Key Design Principles To Improve Your User Experience (UX)Key Design Principles To Improve Your User Experience (UX)
Key Design Principles To Improve Your User Experience (UX)
 
Practical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdfPractical Lecture 3_Graphics Elements and Principles.pdf
Practical Lecture 3_Graphics Elements and Principles.pdf
 
Theory
TheoryTheory
Theory
 
Theory
TheoryTheory
Theory
 
Dimensions of Media and Information - Visual.pptx
Dimensions of Media and Information - Visual.pptxDimensions of Media and Information - Visual.pptx
Dimensions of Media and Information - Visual.pptx
 
Design Overview
Design OverviewDesign Overview
Design Overview
 
Principlesofdesign10
Principlesofdesign10Principlesofdesign10
Principlesofdesign10
 
Deconstructing the Psychology behind Design
Deconstructing the Psychology behind Design Deconstructing the Psychology behind Design
Deconstructing the Psychology behind Design
 
Visual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.SVisual composition slideshow-Kyle.S
Visual composition slideshow-Kyle.S
 
Making sense of data visually: A modern look at datavisualization
Making sense of data visually: A modern look at datavisualizationMaking sense of data visually: A modern look at datavisualization
Making sense of data visually: A modern look at datavisualization
 
Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice) Graphic Design (Theory & Practice)
Graphic Design (Theory & Practice)
 
Data visualization data sources data types
Data visualization   data sources   data typesData visualization   data sources   data types
Data visualization data sources data types
 
Publication Design Chapter 02
Publication Design Chapter 02Publication Design Chapter 02
Publication Design Chapter 02
 
Chapter 1 Class PP Notes
Chapter 1 Class PP NotesChapter 1 Class PP Notes
Chapter 1 Class PP Notes
 
Week 5 - Visual Principles
Week 5 - Visual PrinciplesWeek 5 - Visual Principles
Week 5 - Visual Principles
 
Visual in Instruction
Visual in InstructionVisual in Instruction
Visual in Instruction
 

Más de ManamiIshimura

Más de ManamiIshimura (20)

OilClay_Demo.pptx
OilClay_Demo.pptxOilClay_Demo.pptx
OilClay_Demo.pptx
 
Cardboard fabrication
Cardboard fabricationCardboard fabrication
Cardboard fabrication
 
Character design theory
Character design theoryCharacter design theory
Character design theory
 
Mixedmedia art list
Mixedmedia art listMixedmedia art list
Mixedmedia art list
 
Materiality of Metal for Art
Materiality of Metal for ArtMateriality of Metal for Art
Materiality of Metal for Art
 
Mixed Media Project - steel
Mixed Media Project - steelMixed Media Project - steel
Mixed Media Project - steel
 
Wearable sculpture project
Wearable  sculpture projectWearable  sculpture project
Wearable sculpture project
 
Artist statement
Artist statementArtist statement
Artist statement
 
Abstract Art in Sculpture
Abstract Art in SculptureAbstract Art in Sculpture
Abstract Art in Sculpture
 
Digital Color Theory
Digital Color TheoryDigital Color Theory
Digital Color Theory
 
Figurative sculpture history
Figurative sculpture historyFigurative sculpture history
Figurative sculpture history
 
Claymation
ClaymationClaymation
Claymation
 
Drawing for Sculpture
Drawing for SculptureDrawing for Sculpture
Drawing for Sculpture
 
Website sculpture
Website sculptureWebsite sculpture
Website sculpture
 
Orientation sculpture spring2022
Orientation sculpture spring2022Orientation sculpture spring2022
Orientation sculpture spring2022
 
Animation step by step instruction
Animation step by step instructionAnimation step by step instruction
Animation step by step instruction
 
Laser cut step by step instruction
Laser cut step by step instructionLaser cut step by step instruction
Laser cut step by step instruction
 
Architectural Design
Architectural DesignArchitectural Design
Architectural Design
 
Trophy Project multi media sculpture
Trophy Project multi media sculptureTrophy Project multi media sculpture
Trophy Project multi media sculpture
 
3D Design Project for space and balance
3D Design Project for space and balance3D Design Project for space and balance
3D Design Project for space and balance
 

Último

codes and conventions of film magazine and website.pptx
codes and conventions of film magazine and website.pptxcodes and conventions of film magazine and website.pptx
codes and conventions of film magazine and website.pptx
17duffyc
 
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptxEngineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
DanielRemache4
 
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
Nitya salvi
 
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
SaketCallGirlsCallUs
 
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu DhabiMussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
romeke1848
 
Van Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson todayVan Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson today
lucygibson17
 
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
delhimunirka15
 
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
delhimunirka15
 

Último (20)

Orai call girls 📞 8617370543At Low Cost Cash Payment Booking
Orai call girls 📞 8617370543At Low Cost Cash Payment BookingOrai call girls 📞 8617370543At Low Cost Cash Payment Booking
Orai call girls 📞 8617370543At Low Cost Cash Payment Booking
 
Jaro je tady - Spring is here (Judith) 3
Jaro je tady - Spring is here (Judith) 3Jaro je tady - Spring is here (Judith) 3
Jaro je tady - Spring is here (Judith) 3
 
Storyboard short: Ferrarius Tries to Sing
Storyboard short: Ferrarius Tries to SingStoryboard short: Ferrarius Tries to Sing
Storyboard short: Ferrarius Tries to Sing
 
codes and conventions of film magazine and website.pptx
codes and conventions of film magazine and website.pptxcodes and conventions of film magazine and website.pptx
codes and conventions of film magazine and website.pptx
 
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptxEngineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
Engineering Major for College_ Environmental Health Engineering by Slidesgo.pptx
 
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
Russian Call Girls Lucknow Just Call 👉👉 📞 8617370543 Top Class Call Girl Serv...
 
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
Call Girls In Dilshad Garden | Contact Me ☎ +91-9953040155
 
Just Call Vip call girls Farrukhabad Escorts ☎️8617370543 Two shot with one g...
Just Call Vip call girls Farrukhabad Escorts ☎️8617370543 Two shot with one g...Just Call Vip call girls Farrukhabad Escorts ☎️8617370543 Two shot with one g...
Just Call Vip call girls Farrukhabad Escorts ☎️8617370543 Two shot with one g...
 
Jaunpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Jaunpur
Jaunpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime JaunpurJaunpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Jaunpur
Jaunpur Escorts Service Girl ^ 9332606886, WhatsApp Anytime Jaunpur
 
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu DhabiMussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
Mussafah Call Girls +971525373611 Call Girls in Mussafah Abu Dhabi
 
SB_ Scott Pilgrim_ Rough_ RiverPhan (2024)
SB_ Scott Pilgrim_ Rough_ RiverPhan (2024)SB_ Scott Pilgrim_ Rough_ RiverPhan (2024)
SB_ Scott Pilgrim_ Rough_ RiverPhan (2024)
 
Van Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson todayVan Gogh Powerpoint for art lesson today
Van Gogh Powerpoint for art lesson today
 
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
Pari Chowk Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genuine...
 
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
Nehru Nagar, Call Girls ☎️ ((#9711106444)), 💘 Full enjoy Low rate girl💘 Genui...
 
Nadiad call girls 📞 8617370543 At Low Cost Cash Payment Booking
Nadiad call girls 📞 8617370543 At Low Cost Cash Payment BookingNadiad call girls 📞 8617370543 At Low Cost Cash Payment Booking
Nadiad call girls 📞 8617370543 At Low Cost Cash Payment Booking
 
Sonbhadra Escorts 📞 8617370543 | Sonbhadra Call Girls
Sonbhadra  Escorts 📞 8617370543 | Sonbhadra Call GirlsSonbhadra  Escorts 📞 8617370543 | Sonbhadra Call Girls
Sonbhadra Escorts 📞 8617370543 | Sonbhadra Call Girls
 
Theoretical Framework- Explanation with Flow Chart.docx
Theoretical Framework- Explanation with Flow Chart.docxTheoretical Framework- Explanation with Flow Chart.docx
Theoretical Framework- Explanation with Flow Chart.docx
 
Call Girls Aligarh Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Aligarh Just Call 8617370543 Top Class Call Girl Service AvailableCall Girls Aligarh Just Call 8617370543 Top Class Call Girl Service Available
Call Girls Aligarh Just Call 8617370543 Top Class Call Girl Service Available
 
Russian Call Girls In Bhubaneswar 📱 Odisha 9777949614 Indore
Russian Call Girls In Bhubaneswar 📱 Odisha 9777949614 IndoreRussian Call Girls In Bhubaneswar 📱 Odisha 9777949614 Indore
Russian Call Girls In Bhubaneswar 📱 Odisha 9777949614 Indore
 
Sui Generis Magazine volume one Kristen Murillo.pdf
Sui Generis Magazine volume one Kristen Murillo.pdfSui Generis Magazine volume one Kristen Murillo.pdf
Sui Generis Magazine volume one Kristen Murillo.pdf
 

Rules of Design Composition

Notas del editor

  1. Noe only arrangement of objects but also color. The design is asymmentric but the dark color of center circle generates the center of gravity in the design on the center so still make a balance.
  2. Scaling is also important to organize information. For example, News paper, Headline catch an eye and give an second to read a short information about the subject matter. Then, give more information below.
  3. Line effects in design is not only emphasizing impression of an object but also lead an eye to information. Arrow is the typical example. the radial lines on the right design is not to expend the scale but also to lead reader’s eye to the information
  4. The effects is not only the illustrated lines but figure as well. The figure in the design catch an eye and the eye follows the arm. The arm lead an eye to the logo design. So the logo design is not so big but still get an attention.
  5. Focal Point is the most common strategy of design composition. Main image of these designs are the figures. The yellow circle and big letter suggest an eye to go to her face first and the thin line direct an eye to go to the bottom where secondary information is. The elderly person wears dark color clothing to create contrast the illustration and the figure and the radial line around the illustration directs an eye to go to him.
  6. Space and the rule of thirds
  7. If you need to multiple images in an design, you have to unify those images adjusting color balance.
  8. Saturation and brightness
  9. Color Contrast is another option to create a balance.
  10. Unity of color Aligment
  11. Space in a design lead to imagine the lingering sensation. Also the space create a balance between different textures of object, font, and images as well.
  12. Photos are made up of pixels Illustration made by path uses mathematical formulas so they are scalable and can be enlarge with no loss of quality. The surface are always clean and sharp compare to pixel based image such as photos. When you combine those, you have to carefully merge them.