SlideShare a Scribd company logo
1 of 15
BASIC PRINCIPLES OF
GRAPHICS AND LAYOUT
Basic Principles of Graphics and Layout
✩Creating a web page is like creating a work of art. There are certain things that you
need to consider in order to get your message across.
✩ is a short term for information graphic, which refers to an image that combines
information, storytelling, and perceptions that help the cause of an individual or an
institution to communicate a message to viewers.
Infographic
✩ are graphic visual representations of information, data or knowledge intended to
present information quickly and clearly. They can improve cognition by utilizing
graphics to enhance the human visual system's ability to see patterns and trends.
Infographics
✩ 1.      Be unique 
✩ 2.      Keep it simple 
✩ 3.      Be creative and bold
✩ 4.      Less is more 
✩ 5.      The fortune is in the forwarding
Principles of Infographics
✩ - The principle of design that places elements on the printed page or website so that 
text and graphic elements are evenly distributed. In layouts with an even balance, 
the graphics don't overpower the text, and the page doesn't seem to tilt to one side or 
the other. 
✩ The visual weight of objects, texture, colors, and space is evenly distributed on the 
screen.
1. Balance
✩ The principle of proximity is about moving things closer or farther apart to achieve 
a more organized look. The principle says that related items should be closer to 
each other while non-related will be farther from each other. 
2. Proximity
✩ -The whole point of the alignment principle is that nothing in your slide design 
should look as if it were placed there randomly. Every element is connected visually 
via an invisible line. Where repetition is more concerned with elements across a deck 
of slides, alignment is about obtaining unity among elements of a single slide.
✩ Alignment means to arrange similar or other elements of design in the dimension of 
top, bottom, center, left or right to make design visually appealing. See above example 
image to understand it.
✩ Distribution means to giving or maintaining same distance between to similar or 
different elements of any design to make graphic layout clean and decent. See above 
example image to understand it.
3. Alignment
✩ -The principle of repetition simply means the reusing of the same or similar
elements throughout your design. Repetition of certain design elements in a slide or
among a deck of slides will bring a clear sense of unity, consistency, and
cohesiveness. Where contrast is about showing differences, repetition is about subtly
using elements to make sure the design is viewed as being part of a larger whole.
✩ Line has been used to add repetition in this example. It is then repeated across all
the design pieces to tie them together.
4. Repetition
✩ -The simple concept behind contrast is to ensure that every element within a design
does not look the same. In essence you should have a number of elements that look
vastly different to the others within a design.
5. Contrast
✩ Just as a deck of cards has a hierarchy from the Ace down to the Joker, so should
every design. A designer’s job is to communicate a message in a clear and concise manner.
Creating an order of importance amongst the elements will go a long way in achieving
this. Therefore, it is essential that time is taken to ensure a clear hierarchy is
developed.
✩ A good hierarchy is clearly evident in this recipe spread. A large photo of the dish is
used as the focal point and the secondary message is the second largest shape on the
page which is the recipe name. Colour and size has then been used to organize the
remaining content in a clear, concise and well-structured manner.
✩ Emphasis - An area in the design that may appear different in size, texture, shape or
color to attract the viewer's attention.
6. Hierarchy and Emphasis
✩ Visual elements guide the viewer's eyes around the screen.
7. Movement.
✩ is achieved when visual elements create a sense of organized movement.
8. Rhythm
✩ Visual elements create a sense of unity where they relate well with one another.
9. Proportion.
✩ This uses several design elements to draw viewer's attention.
10. Variety.

More Related Content

What's hot

Design Principles for Visual Communication
Design Principles for Visual CommunicationDesign Principles for Visual Communication
Design Principles for Visual Communicationeversmilingshubhi
 
Get Them in the Feels with Eric Huber at WordCamp Fayetteville 2017
Get Them in the Feels  with Eric Huber at WordCamp Fayetteville 2017Get Them in the Feels  with Eric Huber at WordCamp Fayetteville 2017
Get Them in the Feels with Eric Huber at WordCamp Fayetteville 2017Eric Huber
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skillsSteve
 
Production Of Front Cover
Production Of Front CoverProduction Of Front Cover
Production Of Front CoverPreston Manor
 
CMYK: Creating Masterpieces with your Kansei
CMYK: Creating Masterpieces with your KanseiCMYK: Creating Masterpieces with your Kansei
CMYK: Creating Masterpieces with your KanseiPeter Andic
 

What's hot (12)

Visual design
Visual designVisual design
Visual design
 
Visual Design
Visual DesignVisual Design
Visual Design
 
Design Principles for Visual Communication
Design Principles for Visual CommunicationDesign Principles for Visual Communication
Design Principles for Visual Communication
 
Graphic Design
Graphic DesignGraphic Design
Graphic Design
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 
lesson 6
lesson 6lesson 6
lesson 6
 
Get Them in the Feels with Eric Huber at WordCamp Fayetteville 2017
Get Them in the Feels  with Eric Huber at WordCamp Fayetteville 2017Get Them in the Feels  with Eric Huber at WordCamp Fayetteville 2017
Get Them in the Feels with Eric Huber at WordCamp Fayetteville 2017
 
Week 202 design skills
Week 202 design skillsWeek 202 design skills
Week 202 design skills
 
7. evaluation
7. evaluation7. evaluation
7. evaluation
 
7. evaluation(3)
7. evaluation(3)7. evaluation(3)
7. evaluation(3)
 
Production Of Front Cover
Production Of Front CoverProduction Of Front Cover
Production Of Front Cover
 
CMYK: Creating Masterpieces with your Kansei
CMYK: Creating Masterpieces with your KanseiCMYK: Creating Masterpieces with your Kansei
CMYK: Creating Masterpieces with your Kansei
 

Similar to Untitled presentation

Design 101 > Lesson 01
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01Sean Buch
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxAPRILROSEVICENTE1
 
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...MinalabacMpsCsppo
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design compositionsuniltalekar1
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro formaGeorginaWhitelock
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online EnvironmentRichard Meriveles
 
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORT
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORTDESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORT
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORTMayAnnRodriguez2
 
Comm via printed media 07
Comm via printed media 07Comm via printed media 07
Comm via printed media 07HasanErkaya1
 
Empowerment technology Myrene B.Cantos
Empowerment technology Myrene B.CantosEmpowerment technology Myrene B.Cantos
Empowerment technology Myrene B.CantosMaridelBajeta
 
Top 5 scrapbook layering trends in web designing.pdf
Top 5 scrapbook layering trends in web designing.pdfTop 5 scrapbook layering trends in web designing.pdf
Top 5 scrapbook layering trends in web designing.pdfEligo Creative Services
 
design aesthetics.pdf
design aesthetics.pdfdesign aesthetics.pdf
design aesthetics.pdfishagogia2
 
Group 9 ite k 11D
Group 9 ite k 11DGroup 9 ite k 11D
Group 9 ite k 11DCrisFer8
 
Module 6_Graphic Designs for senior high school students
Module 6_Graphic Designs for senior high school studentsModule 6_Graphic Designs for senior high school students
Module 6_Graphic Designs for senior high school studentsJaysonGaralde1
 
Digital Art (Virtual) week 2.pdf
Digital Art (Virtual) week 2.pdfDigital Art (Virtual) week 2.pdf
Digital Art (Virtual) week 2.pdfStephanieWitham
 

Similar to Untitled presentation (20)

Design 101 > Lesson 01
Design 101 > Lesson 01Design 101 > Lesson 01
Design 101 > Lesson 01
 
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptxPRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
PRINCIPLES-ELEMENTS-OF-GOOD-WEBSITE-DESIGN-USING.pptx
 
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...
Visual-Persuasion_the process of influencing people’s thoughts and stimulate ...
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 
7. evaluation
7. evaluation7. evaluation
7. evaluation
 
Graphic design composition
Graphic design compositionGraphic design composition
Graphic design composition
 
Digital graphics evaluation pro forma
Digital graphics evaluation pro formaDigital graphics evaluation pro forma
Digital graphics evaluation pro forma
 
Imaging and Design for Online Environment
Imaging and Design for Online EnvironmentImaging and Design for Online Environment
Imaging and Design for Online Environment
 
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORT
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORTDESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORT
DESKTOP PUBLISHING COMPUTER 7-LESSON 6 CREATING REPORT
 
Comm via printed media 07
Comm via printed media 07Comm via printed media 07
Comm via printed media 07
 
Empowerment technology Myrene B.Cantos
Empowerment technology Myrene B.CantosEmpowerment technology Myrene B.Cantos
Empowerment technology Myrene B.Cantos
 
Top 5 scrapbook layering trends in web designing.pdf
Top 5 scrapbook layering trends in web designing.pdfTop 5 scrapbook layering trends in web designing.pdf
Top 5 scrapbook layering trends in web designing.pdf
 
design aesthetics.pdf
design aesthetics.pdfdesign aesthetics.pdf
design aesthetics.pdf
 
Group 9 ite k 11D
Group 9 ite k 11DGroup 9 ite k 11D
Group 9 ite k 11D
 
7. evaluation(3)
7. evaluation(3)7. evaluation(3)
7. evaluation(3)
 
Module 6_Graphic Designs for senior high school students
Module 6_Graphic Designs for senior high school studentsModule 6_Graphic Designs for senior high school students
Module 6_Graphic Designs for senior high school students
 
Digital Art (Virtual) week 2.pdf
Digital Art (Virtual) week 2.pdfDigital Art (Virtual) week 2.pdf
Digital Art (Virtual) week 2.pdf
 
Principles Of Design 1
Principles Of  Design 1Principles Of  Design 1
Principles Of Design 1
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 
7. fmp evaluation
7. fmp evaluation7. fmp evaluation
7. fmp evaluation
 

Recently uploaded

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Patryk Bandurski
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxMalak Abu Hammad
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxnull - The Open Security Community
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure servicePooja Nehwal
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...HostedbyConfluent
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsMark Billinghurst
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticscarlostorres15106
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptxLBM Solutions
 

Recently uploaded (20)

Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
Integration and Automation in Practice: CI/CD in Mule Integration and Automat...
 
The Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptxThe Codex of Business Writing Software for Real-World Solutions 2.pptx
The Codex of Business Writing Software for Real-World Solutions 2.pptx
 
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptxMaking_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
Making_way_through_DLL_hollowing_inspite_of_CFG_by_Debjeet Banerjee.pptx
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
Neo4j - How KGs are shaping the future of Generative AI at AWS Summit London ...
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure serviceWhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
WhatsApp 9892124323 ✓Call Girls In Kalyan ( Mumbai ) secure service
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
Transforming Data Streams with Kafka Connect: An Introduction to Single Messa...
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Human Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR SystemsHuman Factors of XR: Using Human Factors to Design XR Systems
Human Factors of XR: Using Human Factors to Design XR Systems
 
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmaticsKotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
Kotlin Multiplatform & Compose Multiplatform - Starter kit for pragmatics
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
Key Features Of Token Development (1).pptx
Key  Features Of Token  Development (1).pptxKey  Features Of Token  Development (1).pptx
Key Features Of Token Development (1).pptx
 

Untitled presentation