Design Principles
Design Principles Principles of Information Technology
Applying principles to create appealing and professional printed and electronic publications
Copyright © Texas Education Agency, 2013. All rights reserved. 1
OBJECTIVES
List the four design principles
Define the four design principles
Identify characteristics of the four design principles
Identify publishing techniques that demonstrate the four design principles
Classify webpage designs according to the use of the four design principles Copyright © Texas Education Agency, 2013. All rights reserved. 2
BASIC DESIGN PRINCIPLES
Contrast
Repetition
Alignment
Proximity Copyright © Texas Education Agency, 2013. All rights reserved. 3
CONTRAST Definition: A method of design that emphasizes the differences between objects that are dissimilar; it purposely brings out their differences to set things in opposition.
Copyright © Texas Education Agency, 2013. All rights reserved. 4
REPETITION Definition: A method of design that purposely duplicates elements or aspects of elements within the same document.
Copyright © Texas Education Agency, 2013. All rights reserved. 5
ALIGNMENT Definition: A method of design that uses spatial properties to determine the optimal placement of objects or groups of objects.
Copyright © Texas Education Agency, 2013. All rights reserved. 6
PROXIMITY Definition: A method of design that uses spatial properties to purposely place related items together.
Copyright © Texas Education Agency, 2013. All rights reserved. 7
ASPECTS OF CONTRAST
Items must have opposing elements Needs to be strong to be effective Can be demonstrated using
Color Size Objects Alignment
Copyright © Texas Education Agency, 2013. All rights reserved. 8
ASPECTS OF CONTRAST Setting font color 1 in opposition to background color
Setting font color 3 in opposition to background color
Setting font color 2 in opposition to background color
Setting font color 4 in opposition to background color Copyright © Texas Education Agency, 2013. All rights reserved. 9
ASPECTS OF CONTRAST 1
2
Font style of
3
Font styl e of
• title is same
• title is same
• use bold to create contrast
• use kerning to create contrast
Font style of
Font style of
• title is same • use size increase to create contrast
4 • title is same
• use combination of the above to create contrast
Copyright © Texas Education Agency, 2013. All rights reserved. 10
ASPECTS OF REPETITION
Items must have obvious similarities Needs to be strong to be effective Can be demonstrated using
Color Objects Alignment
Copyright © Texas Education Agency, 2013. All rights reserved. 11
ASPECTS OF REPETITION 1
Repeating Font
3
• style choices
• style choice for
• creates conflict
• all text on document • creates unity
Random Color
Repeating Colors
2
• in text and objects • creates unity
Random font
4
• choices for objects • creates conflict
Copyright © Texas Education Agency, 2013. All rights reserved. 12
ASPECTS OF REPETITION 1
Repeating images
3
• using a duplicate
• using a duplicate
of an image, recolored, is acceptable
of an image, even resized, creates unity
Repeating images
Repeating images
2
• using different images, even with a common theme, is distracting
Repeating images
4
• using different images, even of the same object, can be distracting
Copyright © Texas Education Agency, 2013. All rights reserved. 13
ASPECTS OF ALIGNMENT
Items must have obvious spatial placement Needs to be visually noted instantly to be effective All items should significantly support the purpose of the publication Element placement should never be random Can be demonstrated using
Object rotation Text direction Line spacing Object size Copyright © Texas Education Agency, 2013. All rights reserved. 14
ASPECTS OF ALIGNMENT 1
Arranging Text
Arranging Text
3
• all text is left aligned
• title is centered
• bullets are indented • but still aligned left
• bullets are • centered as well
Text
Arranging Text 4 • title is left aligned • bullets are •right aligned
• text can be
Arran
2
• arranged other than • horizontally
Copyright © Texas Education Agency, 2013. All rights reserved. 15
ASPECTS OF PROXIMITY
Provides organization for the viewer All elements are supportive of main purpose
Elements are then divided into subgroups depending on the subtopic points Items related to each subtopic should be spatially grouped together in an arrangement
Can be demonstrated using
Color Size Objects Alignment Copyright © Texas Education Agency, 2013. All rights reserved. 16
ASPECTS OF PROXIMITY 1
Plumbing Emergency • (210) 971-1352 • James Madison • fast response time
James Madison 2 • Fast response time •Plumbing Emergencies •(210) 971-1352
3
(210) 971-1352 • Plumbing Emergency • James Madison •Fast response time
Plumbing Emergency 4 (210) 917-1352 • James Madison • fast response time Copyright © Texas Education Agency, 2013. All rights reserved. 17
REVIEW
The four design principles
Contrast—emphasizes the differences between objects that are dissimilar
Repetition—purposely duplicates elements
Alignment—determines the optimal placement of objects
Proximity—places related items together Copyright © Texas Education Agency, 2013. All rights reserved. 18
ACTIVITY #1
Using the Internet – navigate to various websites that demonstrate use of the four design principles.
Place a copy of the screen snapshot into a word processing document.
Resize the snapshot if needed.
Above the snapshot, place a label to identify the design principle represented. Beneath the snapshot, create a textbox. The textbox should contain text that displays
the definition of the design principle listed AND A justification or reasons why the snapshot represents that principle. Copyright © Texas Education Agency, 2013. All rights reserved. 19
Applying principles to create appealing and professional printed and electronic publications
Copyright © Texas Education Agency, 2013. All rights reserved. 1
OBJECTIVES
List the four design principles
Define the four design principles
Identify characteristics of the four design principles
Identify publishing techniques that demonstrate the four design principles
Classify webpage designs according to the use of the four design principles Copyright © Texas Education Agency, 2013. All rights reserved. 2
BASIC DESIGN PRINCIPLES
Contrast
Repetition
Alignment
Proximity Copyright © Texas Education Agency, 2013. All rights reserved. 3
CONTRAST Definition: A method of design that emphasizes the differences between objects that are dissimilar; it purposely brings out their differences to set things in opposition.
Copyright © Texas Education Agency, 2013. All rights reserved. 4
REPETITION Definition: A method of design that purposely duplicates elements or aspects of elements within the same document.
Copyright © Texas Education Agency, 2013. All rights reserved. 5
ALIGNMENT Definition: A method of design that uses spatial properties to determine the optimal placement of objects or groups of objects.
Copyright © Texas Education Agency, 2013. All rights reserved. 6
PROXIMITY Definition: A method of design that uses spatial properties to purposely place related items together.
Copyright © Texas Education Agency, 2013. All rights reserved. 7
ASPECTS OF CONTRAST
Items must have opposing elements Needs to be strong to be effective Can be demonstrated using
Color Size Objects Alignment
Copyright © Texas Education Agency, 2013. All rights reserved. 8
ASPECTS OF CONTRAST Setting font color 1 in opposition to background color
Setting font color 3 in opposition to background color
Setting font color 2 in opposition to background color
Setting font color 4 in opposition to background color Copyright © Texas Education Agency, 2013. All rights reserved. 9
ASPECTS OF CONTRAST 1
2
Font style of
3
Font styl e of
• title is same
• title is same
• use bold to create contrast
• use kerning to create contrast
Font style of
Font style of
• title is same • use size increase to create contrast
4 • title is same
• use combination of the above to create contrast
Copyright © Texas Education Agency, 2013. All rights reserved. 10
ASPECTS OF REPETITION
Items must have obvious similarities Needs to be strong to be effective Can be demonstrated using
Color Objects Alignment
Copyright © Texas Education Agency, 2013. All rights reserved. 11
ASPECTS OF REPETITION 1
Repeating Font
3
• style choices
• style choice for
• creates conflict
• all text on document • creates unity
Random Color
Repeating Colors
2
• in text and objects • creates unity
Random font
4
• choices for objects • creates conflict
Copyright © Texas Education Agency, 2013. All rights reserved. 12
ASPECTS OF REPETITION 1
Repeating images
3
• using a duplicate
• using a duplicate
of an image, recolored, is acceptable
of an image, even resized, creates unity
Repeating images
Repeating images
2
• using different images, even with a common theme, is distracting
Repeating images
4
• using different images, even of the same object, can be distracting
Copyright © Texas Education Agency, 2013. All rights reserved. 13
ASPECTS OF ALIGNMENT
Items must have obvious spatial placement Needs to be visually noted instantly to be effective All items should significantly support the purpose of the publication Element placement should never be random Can be demonstrated using
Object rotation Text direction Line spacing Object size Copyright © Texas Education Agency, 2013. All rights reserved. 14
ASPECTS OF ALIGNMENT 1
Arranging Text
Arranging Text
3
• all text is left aligned
• title is centered
• bullets are indented • but still aligned left
• bullets are • centered as well
Text
Arranging Text 4 • title is left aligned • bullets are •right aligned
• text can be
Arran
2
• arranged other than • horizontally
Copyright © Texas Education Agency, 2013. All rights reserved. 15
ASPECTS OF PROXIMITY
Provides organization for the viewer All elements are supportive of main purpose
Elements are then divided into subgroups depending on the subtopic points Items related to each subtopic should be spatially grouped together in an arrangement
Can be demonstrated using
Color Size Objects Alignment Copyright © Texas Education Agency, 2013. All rights reserved. 16
ASPECTS OF PROXIMITY 1
Plumbing Emergency • (210) 971-1352 • James Madison • fast response time
James Madison 2 • Fast response time •Plumbing Emergencies •(210) 971-1352
3
(210) 971-1352 • Plumbing Emergency • James Madison •Fast response time
Plumbing Emergency 4 (210) 917-1352 • James Madison • fast response time Copyright © Texas Education Agency, 2013. All rights reserved. 17
REVIEW
The four design principles
Contrast—emphasizes the differences between objects that are dissimilar
Repetition—purposely duplicates elements
Alignment—determines the optimal placement of objects
Proximity—places related items together Copyright © Texas Education Agency, 2013. All rights reserved. 18
ACTIVITY #1
Using the Internet – navigate to various websites that demonstrate use of the four design principles.
Place a copy of the screen snapshot into a word processing document.
Resize the snapshot if needed.
Above the snapshot, place a label to identify the design principle represented. Beneath the snapshot, create a textbox. The textbox should contain text that displays
the definition of the design principle listed AND A justification or reasons why the snapshot represents that principle. Copyright © Texas Education Agency, 2013. All rights reserved. 19
