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

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsEnterprise Knowledge
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationSafe Software
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityPrincipled Technologies
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationRadu Cotescu
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024Scott Keck-Warren
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Igalia
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slidespraypatel2
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Drew Madelung
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)Gabriella Davis
 
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
 
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
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitecturePixlogix Infotech
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxOnBoard
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024Rafal Los
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Miguel Araújo
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘RTylerCroy
 

Recently uploaded (20)

IAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI SolutionsIAC 2024 - IA Fast Track to Search Focused AI Solutions
IAC 2024 - IA Fast Track to Search Focused AI Solutions
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Boost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivityBoost PC performance: How more available memory can improve productivity
Boost PC performance: How more available memory can improve productivity
 
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
Scaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organizationScaling API-first – The story of a global engineering organization
Scaling API-first – The story of a global engineering organization
 
SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024SQL Database Design For Developers at php[tek] 2024
SQL Database Design For Developers at php[tek] 2024
 
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
Raspberry Pi 5: Challenges and Solutions in Bringing up an OpenGL/Vulkan Driv...
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
Slack Application Development 101 Slides
Slack Application Development 101 SlidesSlack Application Development 101 Slides
Slack Application Development 101 Slides
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)A Domino Admins Adventures (Engage 2024)
A Domino Admins Adventures (Engage 2024)
 
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
 
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...
 
Understanding the Laravel MVC Architecture
Understanding the Laravel MVC ArchitectureUnderstanding the Laravel MVC Architecture
Understanding the Laravel MVC Architecture
 
Maximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptxMaximizing Board Effectiveness 2024 Webinar.pptx
Maximizing Board Effectiveness 2024 Webinar.pptx
 
The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024The 7 Things I Know About Cyber Security After 25 Years | April 2024
The 7 Things I Know About Cyber Security After 25 Years | April 2024
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
Mastering MySQL Database Architecture: Deep Dive into MySQL Shell and MySQL R...
 
🐬 The future of MySQL is Postgres 🐘
🐬  The future of MySQL is Postgres   🐘🐬  The future of MySQL is Postgres   🐘
🐬 The future of MySQL is Postgres 🐘
 

Untitled presentation