design principles
DESCRIPTION
Design Principles. Mrs. Levi. Think about it……. Who creates advertisements? Why do they look like that?. Design Principles are…. Rules of design used to create an ad Arrangement of one or more elements for a purpose Ways to organize text and graphics. 8 Design Principles. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/1.jpg)
Design Principles
Mrs. Levi
![Page 2: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/2.jpg)
Think about it……• Who creates advertisements?
• Why do they look like that?
![Page 3: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/3.jpg)
Design Principles are….
• Rules of design used to create an ad
• Arrangement of one or more elements for a purpose
• Ways to organize text and graphics
![Page 4: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/4.jpg)
8 Design Principles
• Alignment• Balance• Repetition & Consistency• Contrast & Color • Font• Directional Flow
– Z Pattern• Proximity• Focus
– White space
Select one of the Design Principles from the list. After learning the principles come back the Home Page and click
another from the list until you finish all 8 Design Principles.
![Page 5: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/5.jpg)
AlignmentAlignment is the placement of text and
graphics so they line up on the page. – Creates order – Organizes page elements – Group items – Create visual connections
![Page 6: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/6.jpg)
Question: AlignmentThe different types of alignment are:
Choose one:
a)Right align, left Align, center align, justification
b)Center Align, Right, left align, all over align
c)Justification and horizontal
d)All of the above
![Page 7: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/7.jpg)
SORRY!!!
Continue to next slide for answer.
![Page 8: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/8.jpg)
Correct Answer!a) Right align, Left align, Center
align, JustificationRight
align!
Right align!
Right align!
Right align!
Right align!
Right align!
Right align!
Left Align!
Left Align!
Left Align!
Left Align!
Left Align!
Left Align!
Center Align
Center Align
Center Align
Center Align
Center Align
Center Align
Center Align
justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify justify
![Page 9: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/9.jpg)
Balance• Balance can be:
• Symmetrical• Asymmetrical• Radial
• Symmetrical balance is mirror image balance.
• Asymmetrical balance – -several smaller items on one side are balanced
by a large item on the other side
• Radial balance- – All elements radiate out from a center point in a
circular fashion.
![Page 10: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/10.jpg)
Balance
• Radial • Asymmetrical• Symmetrical
![Page 11: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/11.jpg)
Question: BalanceThe picture is:
a) Radialb) Symmetricalc) Asymmetricald) None of the above
Choose your answer above
![Page 12: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/12.jpg)
Correct Answer!!b) Symmetrical
You could draw a line down the center of the church and it would be balanced on each side.
![Page 13: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/13.jpg)
Repetition• Using the same or similar elements
throughout your design – Logos– Images– Titles– Colors
![Page 14: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/14.jpg)
Repetition Repetition RepetitionRepeatedly seeing something helps you to
remember it!
– Takes 3 or more formats to stick!
What makes you read an ad?
– Less than 3 seconds for reader to decide to read the piece
Will you read it again?
– Read 1 time, 3X as likely to read it again
Consistency is recognizable and sticks!
![Page 15: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/15.jpg)
Example : Repetition
South America
America
Taiwan
![Page 16: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/16.jpg)
Contrast and ColorDo’s and Don’ts:• Use color in key words for added emphasis
• Use color to organize a page
• Use color to organize information in graphs, pie charts and tables
• Increase the impact of your visual with color
![Page 17: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/17.jpg)
Contrast and Color Continued…
• Use color to portray emotions
• Add color to the most important subject in a photograph to direct the reader’s eye
• Don’t use color on thin font styles
![Page 18: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/18.jpg)
Font•Font should simplify language
•When using fonts, only emphasize the words that need to be emphasized.
•If you use too many fonts, ideas are lost and the message becomes very hard to read.
![Page 19: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/19.jpg)
Typeface should match the image you are going to create
Halloween Poster
Wedding Old English
Birthday PartyResume
Font (typeface)
![Page 20: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/20.jpg)
Serif vs. Sans Serif
I started on my homeworkbut my pen ran out of ink.My hamster ate my homework.My computer's on the blink.I accidentally dropped itin the soup my mom was cooking.
sI started on my homeworkbut my pen ran out of ink.My hamster ate my homework.My computer's on the blink.I accidentally dropped itin the soup my mom was cooking.
sFeet No Feet
Serif San Serif
![Page 21: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/21.jpg)
Question: FontThe statement below is an example of what
type of font?
Design is key!Choose One below:
SERIF SAN SERIFSERIF SAN SERIF
![Page 22: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/22.jpg)
Correct Answer!!
Design
is key!Serif Font
have
Feet!!!
![Page 23: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/23.jpg)
Which house is for sale?
![Page 24: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/24.jpg)
Proximity• D i s t a n c e between words,
sentences, pictures, titles, headings, subheadings, etc.
RULES:Do: – Create a relationship among elements with
close proximity.– Use WHITE SPACE to draw attention to
something
![Page 25: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/25.jpg)
Now, which house is for sale?
Now you can see which is For Sale because the proximity is closer!
THIS ONE!!!
![Page 26: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/26.jpg)
Proximity
• Don’t :– Stick things in the corners or in the middle to
fill empty space
– Put too many separate elements on a page
– Leave equal amounts of white space between elements
– Put elements close together that don’t belong together!
![Page 27: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/27.jpg)
Focus
• Elements used to attract the reader’s eyes.
This design is a good example of FOCUS because the designer used a dull background and put the turquoise bracelet at the very front .
![Page 28: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/28.jpg)
White Space•It calls attention to something
•Blank space free of text or graphics
•DON'T confuse white space with dead space. White space is intentional; dead space is not. Dead space is merely empty pockets of space without a purpose.
TEACH
![Page 29: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/29.jpg)
True or False: This is an example of White Space
Choose One:
• TRUE
• FALSE
![Page 30: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/30.jpg)
Correct Answer!!TRUE
• White Space can be any color
![Page 31: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/31.jpg)
Directional Flow
• Positioning elements to
draw the reader’s eyes
through the document.
![Page 32: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/32.jpg)
Z-Pattern
• When scanning a paper the eyes have a tendency to move in a Z pattern.
![Page 33: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/33.jpg)
1. What message do these fonts convey?
2. How does the color impact your thoughts?
3. Which one would you want to eat, based on their logo’s appearance?
![Page 34: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/34.jpg)
Your DP Ad ProjectDAY 1
1.In Groups of 4 or 8
2. Divide the 8 principles between group members. Each will be responsible for 1 or 2 design principles.
3. Meet with other Members
Introduce self
Create Group Name
Decide how you want to present
Powerpoint, Prezi, Magazine, etc???
![Page 35: Design Principles](https://reader036.vdocuments.mx/reader036/viewer/2022062723/56813d06550346895da6aac7/html5/thumbnails/35.jpg)
DAY 2—Group Presentation
4. You can show GOOD and BAD examples to teach your class, use PowerPoint or Prezi.
5. Practice your presentation
6. Present to class