![Page 1: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/1.jpg)
DESIGN PRINCIPLES
![Page 2: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/2.jpg)
1. Layout
2. Length
3. Hierarchy
4. Grouping
5. Alignment
6. White Space
7. Color
8. Fonts
9. Images & graphs
10. Concluding Tips
11. Sources
Find mater ials here : F :\Human Rights\ Infographics DIY
AGENDA
![Page 3: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/3.jpg)
Layout refers to the way in which any design is composed.
Balance gives a design its form and stability by
distributing the elements evenly through the design
Be consistent !
1 LAYOUT
![Page 4: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/4.jpg)
EXAMPLES
![Page 5: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/5.jpg)
Tell your story but…
2 LENGTH
1. Keep people’s interest – they have short attention spans!
2. The shorter the better
3. Divide projects if necessary
4. Keep it simple
2 LENGTH
![Page 6: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/6.jpg)
![Page 7: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/7.jpg)
• Not too long
• Simple
• Not too much text
• Balanced
EXAMPLEwe should all
![Page 8: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/8.jpg)
▪Bright, BIG objects
▪ Top left
▪ Contrast
▪ Use subtitles
▪ Consistency
3 HIERARCHY
Visual hierarchy helps the viewer to navigate
your work by making some elements appear
more important than others
![Page 9: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/9.jpg)
EXAMPLE
![Page 10: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/10.jpg)
By proximity
By creating borders
By size, color, lines, or shape
By bullet points/numbers
By repetition of all the above (the theme)
By charts and polls
Grouping elements together helps to organize information
because you can create a relationship between the single
elements/ information:
4 GROUPING
Be consistent !
![Page 11: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/11.jpg)
EXAMPLES
![Page 12: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/12.jpg)
EXAMPLES
![Page 13: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/13.jpg)
Why?
▪Defines importance
▪Leads the eye through a design
▪ It gives the eye a rest
▪Groups or separates information
It is not necessarily colored white.
5 WHITE SPACE
The parts of your design you choose to leave blank are just
as important as the ones you’re filling with color, texts, and
images.
![Page 14: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/14.jpg)
EXAMPLES
![Page 15: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/15.jpg)
Affects readability
Colour schemes with 2-4 colours
Contrasts: black & white, thin & thick, modern &
traditional. It is not only limited to colors.
▪ For color-blindness: http://blog.usabilla.com/how-to-design-for-color-blindness/
6 COLOUR
Colors are largely responsible for dictating the overall mood
of a design and help to guide the viewer’s eyes.
https://www.youtube.com/watch?v=_2LLXnUdUIc&t=3s
![Page 16: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/16.jpg)
![Page 17: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/17.jpg)
Serif, Sans Serif, decorative
Simplicity is key
Repetition and consistency is best
Spacing, paragraph width
https://www.youtube.com/watch?v=sByzHoiYFX0
6 FONDS
Typography allows you to define a tone
![Page 18: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/18.jpg)
![Page 19: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/19.jpg)
EXAMPLE
![Page 20: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/20.jpg)
Dyslexia-friendly
fonts:
Resources for accessible design:1. “Do’s and Don'ts on Designing for Accessibil i ty”:
https:/ /accessibi l i ty.blog.gov.uk/2016/09/02/dos -and-donts-on-
designing-for-
accessibi l i ty/?utm_campaign=PostBeyond&utm_medium=Social&utm_s
ource=Twit ter&utm_term=%2351948
2. Available in French, Dutch, German, Ital ian, Portuguese, Spanish,
Turkish, Taiwanese:
https:/ /gi thub.com/UKHomeOffice/posters/ tree/master/accessibi l i ty
FONDS ACCESSIBILITY
![Page 21: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/21.jpg)
Keep it simple
Keep it related to the topic
Align colours to colour scheme
SHOW THE INFORMATION THAT SUPPORTS YOUR
ARGUMENT
Clear, sharp
Backgrounds
Be aware of copyright
(di fferent creative commons l icenses -> https:/ /creativecommons.org/faq /)
7 IMAGES & GRAPHS
Use images and graphs to illustrate your story and to reinforce your message
and/or add information
![Page 22: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/22.jpg)
EXAMPLE
50
55
60
65
70
75
80
85
90
95
100
Legumes Fruit Proteins Dairy
products
2nd quarter 2012 2nd quarter 2013
85
90
95
100
Legumes Fruit Proteins Dairy
products
2nd quarter 2012 2nd quarter 2013
![Page 23: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/23.jpg)
EXAMPLE
80
85
90
95
100
80
85
90
95
100
19
99
20
00
20
01
20
02
20
03
20
04
20
05
20
06
20
07
20
08
20
09
20
10
20
11
20
12
![Page 24: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/24.jpg)
Infographic Size
403 x 403 mm Minimum
2048 x 2048 mm Maximum
IMAGE SIZE
![Page 25: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/25.jpg)
Less text!
CONCLUDING TIPS
Consult websites for colour palettes
Have an outside person check your work:
▪ avoids multiple interpretations
▪ Makes sure unfamiliarity is not a barrier to understanding
Keep it simple
![Page 26: Design Principles - ENNHRIennhri.org/.../2019/10/session_9_-_design_principles.pdf · 2019-10-11 · DESIGN PRINCIPLES. 1. Layout 2. Length 3. Hierarchy 4. Grouping 5. Alignment 6](https://reader034.vdocuments.us/reader034/viewer/2022042221/5ec72d7638d8e86675544abc/html5/thumbnails/26.jpg)
https://www.impactbnd.com/blog/how-to-create-content-better-than-your-competitors-infographic
https://accessibili ty.blog.gov.uk/2016/09/02/dos -and-donts-on-designing-for-accessibili ty/?utm_campaign=PostBeyond&utm_medium=Social&utm_source=Twitter&utm_term=%2351948
https://jasonc.coetail.com/fi les/2013/11/your -eyes-here.png
http://justcreative.com/wp-content/uploads/2017/09/sans-serif.jpg
https://visual.ly/community/infographic/how/8 -possible-ways-add-visual-hierarchy-your-design
https://www.crazyegg.com/blog/increase-email-newsletter-conversions/
https://twitter.com/mateenshaikh/status/704460316428673024
http://www.dummies.com/programming/big-data/big-data-visualization/printing-considerations-for-your-infographics/
SOURCES