Design Principles Applying principles to create attractive and professional printed and electronic publications Copyright © Texas Education Agency, 2013. All rights reserved.

OBJECTIVES List the four design principles Define the four design principles Identify characteristics of the four design principles Copyright © Texas Education Agency, 2013. All rights reserved.

BASIC DESIGN PRINCIPLES Contrast Repetition Alignment Proximity Copyright © Texas Education Agency, 2013. All rights reserved.

CONTRAST Definition: A method of design that emphasizes the differences between items; it purposely brings out their differences to draw attention. Note: ways that contrast is used on this slide is shown in the font: color- opposition of white and yellow; size- title is much larger than definition; Weight- title is bold (thicker letters); Form – title is all caps and definition is sentence case; Position – title is right aligned and definition is left aligned. Copyright © Texas Education Agency, 2013. All rights reserved.

CONTRAST SAMPLE 1 1 2 3 4 Here is a sample block of words. Can you read it from a distance? Here is a sample block of words. Can you read it from a distance? 1 2 Here is a sample block of words. Can you read it from a distance? Here is a sample block of words. Can you read it from a distance? Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG 3 4 Copyright © Texas Education Agency, 2013. All rights reserved.

CONTRAST SAMPLE 2 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

CONTRAST SAMPLE 3 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

WHAT IS CONTRAST? Showing a STRONG DIFFERENCE to draw attention Can be demonstrated using Color Size Borders or images Fonts Copyright © Texas Education Agency, 2013. All rights reserved.

REPETITION A part of design that copies or repeats elements. Definition: A part of design that copies or repeats elements. Note: ways that REPETITION is used on this slide is shown as follows: Each slide so far has repeated the same background design, the same background color, the same layout of objects, the same color and size of title and definition font. Copyright © Texas Education Agency, 2013. All rights reserved.

REPETITION SAMPLE 1 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

REPETITION SAMPLE 2 1 2 Here is a detail. Notice the color, shape, and size. Here is a detail. Notice the color, shape and size. 1 2 Here is a detail. Notice the color, shape, and size. Here is a detail. Notice the color, shape and size. Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Here is a detail. Notice the color, shape, and size. Here is a detail. Notice the color, shape, and size. Copyright © Texas Education Agency, 2013. All rights reserved.

REPETITION SAMPLE 3 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

WHAT IS REPETITION? Looks professional and planned to repeat things! Can be demonstrated using Color Fonts Sizes of items (photos, borders, etc.) Bullets Bold headings More… Copyright © Texas Education Agency, 2013. All rights reserved.

ALIGNMENT A part of design that lines up objects or groups of objects. Definition: A part of design that lines up objects or groups of objects. Note: ways that alignment is used on this slide is shown as follows: Title is most important so it is at the top Copyright © Texas Education Agency, 2013. All rights reserved.

ALIGNMENT SAMPLE 1 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

ALIGNMENT SAMPLE 2 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

ALIGNMENT SAMPLE 3 1 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

WHAT IS ALIGNMENT? Line up all items…. No random placement Once you choose an alignment, stick with it! ALL items on the page should have the same alignment. Can be demonstrated using Left alignment Center alignment Right alignment Copyright © Texas Education Agency, 2013. All rights reserved.

PROXIMITY Definition: A part of design that groups related items together and balances the design. Copyright © Texas Education Agency, 2013. All rights reserved. Note: ways that Proximity is used on this slide is shown as follows: The term/title is spaced further away from the label “definition”, while the label is spatially closer to the words that make up the definition.

PROXIMITY SAMPLE 1 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

PROXIMITY SAMPLE 2 Ask the students to determine which item 1-4 is more visually appealing to them – and tell why. When the font color is not significantly different than the background color – it is difficult to read. Rule of thumb: Black vs. White is the strongest contrast and is considered visually appealing. Remember: to be considered contrast it must be obvious and STRONG Copyright © Texas Education Agency, 2013. All rights reserved.

WHAT IS PROXIMITY? Groups like items together to make sense Balances the page using even spacing Can be demonstrated using Images that go together Details that go together Copyright © Texas Education Agency, 2013. All rights reserved.

REVIEW The four design principles Contrast — shows a strong difference to draw attention Repetition — repeats items to show professionalism Alignment — lines up items; stays the same for everything Proximity — groups related items together Copyright © Texas Education Agency, 2013. All rights reserved.

Because I KNOW you want the secret tricks! Extra Goodies Because I KNOW you want the secret tricks!

How Many Fonts? Never use more than 2 fonts on one project! © UNT in Partnership with TEA

How Many Main Colors? Most great design uses no more than 3 major colors. © UNT in Partnership with TEA

Borders Adding a border… even a simple line or a stripe like is shown here… makes your design instantly more professional! © UNT in Partnership with TEA

Odds The human brain sees ODD numbered things as more attractive. © UNT in Partnership with TEA

Reminders: Most important items should be BIG! Can you read it from a distance? Is your page balanced? © UNT in Partnership with TEA