Game Development

Unit Design Principles

Basic Design Principles

O Contrast O Repetition O Alignment O Proximity

Contrast

How is contrast represented?

Contrast

Difference in color

Size of the text and alignment

All CAPS, bold

So what is contrast?
O Contrast is the purpose of bringing out the

differences to set things in opposition (TEA, 2011).

Contrast
O Items must have opposing elements O Needs to be strong to be effective O Can be demonstrated using:
O Color O Size O Objects O Alignment

Bad vs Good Contrast

On a dark background use lighter text and vice versa

Repetition
Do you see repetition?

Do you see it now?

Repetition
Font type and size, label design

Color Scheme, Font type

How is repetition accomplished?

O There should be obvious similarities O Similarities are accomplished by using the

same:
O Font type
O Color scheme O Objects O Alignment

Why do we need repetition?

O Eliminate chaos and confusion.

No consistent color Scheme or font type

This website is a representation of bad use repetition or has no Repetition.

Alignment
O uses spatial properties to determine

the optimal placement of objects(TEA,2011)

How is alignments accomplished?

Alignment
O uses spatial properties to determine

the optimal placement of objects.(TEA, 2011)

Picture to the right text to the left, heading is centered.

Heading is centered

Proximity
O uses spatial properties to purposely place

related items together. (TEA,2011)

Why do we need it?

O All elements are supportive of main

purpose O Can be demonstrated using:

O Color

O Size
O Objects O Alignment

Reference
O TEA (2011). Career and Technology Education

Principles of Information Curriculum. Retrieved from http://cte.unt.edu/it/curriculum/principles

References
O Images
O

Inventive Duck http://www.google.com/imgres?q=alligments+in+poster+design&start=324&hl=en&biw=1600&bih=712&tbm=isch &tbnid=u1P2k5giLaX5RM:&imgrefurl=http://gathering.tweakers.net/forum/list_messages/1175900/2&docid=0lgT1 CCs-CsYCM&imgurl=http://ic.tweakimg.net/usericons/4641/inventive_duck.gif&w=200&h=125&ei=rSp6UbEJ8KT2QXxz4DgCg&zoom=1&iact=rc&dur=78&page=8&tbnh=100&tbnw=160&ndsp=52&ved=1t:429,r:69,s:300,i :211&tx=43&ty=61 Deal it http://www.google.com/imgres?q=alligments+in+game+poster+design&hl=en&biw=1600&bih=712&tbm=isch&tbn id=Ruqu2j3NRVqRpM:&imgrefurl=http://cfasblogtf05.blogspot.com/&docid=ixK8XidQIhEzDM&imgurl=http://img3 5.imageshack.us/img35/5383/cimg0062y.jpg&w=320&h=240&ei=aix6UY6uOHq2AWljYGgCQ&zoom=1&iact=hc& vpx=360&vpy=169&dur=78&hovh=192&hovw=256&tx=171&ty=94&page=1&tbnh=142&tbnw=195&start=0&ndsp =36&ved=1t:429,r:2,s:0,i:90 Black and White http://www.google.com/imgres?q=contrast&hl=en&biw=1600&bih=712&tbm=isch&tbnid=OEeAJ6HFAv0aWM:&i mgrefurl=http://maddisondesigns.com/2009/03/the-5-basicprinciplesofdesign/&docid=MreC4ju8TaHHSM&imgurl=http://maddisondesigns.com/wpcontent/uploads/2009/03/i mg_contrast1.jpg&w=600&h=300&ei=HjB6UfqzDark2wW_yYCgCQ&zoom=1&iact=rc&dur=94&page=2&tbnh=13 9&tbnw=278&start=30&ndsp=38&ved=1t:429,r:31,s:0,i:246&tx=-5&ty=69