Principles of Visual Design
What design principles have you heard of?
Key design principles Balance - equilibrium of visual weight within a composition (symmetrical / asymmetrical - tension) http://www.usask.ca/education/coursework/skaalid/theory/cgdt/designimages/balcolorgauguin.jpg
Key design principles Rhythm - repetition of elements, often with defined intervals (flowing - movement, progressive - sequence, regular - similar) http://www.geniusjones.com/images/products/flensted/flowing-rhythm-colors-M.jpg
Key design principles Proportion - relationship in scale between one element and another (visual weight and depth) http://char.txa.cornell.edu/language/principl/fishtn.gif
Key design principles Dominance - visual weight of element / space, focus (dominant - foreground, sub-dominant mid-ground, subordinate - background) http://www.vanseodesign.com/blog/wp-content/uploads/2009/10/kandinsky-composition-8.jpg
Key design principles Unity - relationship between the individual parts and the whole (variety, wholeness) http://www.vanseodesign.com/blog/wp-content/uploads/2009/10/kandinsky-composition-8.jpg
Key design principles Others: space, hierarchy, colour
What design principles can you see? http://www.luludesignsonline.com/wordpress/wp-content/uploads/2011/10/1-Rhythm-in-Decor.jpg http://thebranman.files.wordpress.com/2011/09/symmetrical-balance.jpg
Key design principles: Gestalt Theory of perception (how the brain interprets what we see / unified whole / German psychologists 1920’s)
Key design principles: Gestalt Closure – we fill in missing information to achieve closure http://philipdrummondnms2010.files.wordpress.com/2010/07/law-of-closure.jpg?w=950
Key design principles: Gestalt Continuance - once you begin looking in one direction, you will continue to do so (perspective, directional lines) http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/continuation/continuation_a.gif
Key design principles: Gestalt Similarity - similar elements are seen as a group (dissimilar = focus) http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/similarity/images/anomaly01.gif
Key design principles: Gestalt Proximity - elements close together are perceived as a group http://jeremybolton.com/wp-content/uploads/2010/07/gestalt_proximity_jeremy_bolton.jpg
Key design principles: Gestalt Alignment - elements that line up are seen as a group https://wiki.ucl.ac.uk/download/attachments/20714537/220px-Gestalt_similarity.svg.png
Key design principles: Gestalt Alignment - elements that line up are seen as a group http://www.pep-web.org/document.php?id=psar.087.0591a.fig001.jpg
Key design principles: Visual Tricks http://visualfunhouse.com/wp-content/uploads/2007/09/mc_escher_origional-waterfall.jpg
Key design principles: Photography Rule of Thirds (focus off centre / 9 segments) Framing - use objects to frame image Cropping - reducing visual clutter Balancing Elements Leading Lines Symmetry and Patterns Depth / Perspective http://digital-photography-school.com/wp-content/images/200605022117.jpg © 2007 Russ Burden, http://www.takegreatpictures.com/app/webroot/content/2010_images/2007/07/31/lines_photography_1.jpg
Key design principles: Colour Design tip - 3 colour design Primary colour - main colour of the page / theme tone Secondary colour - close to the primary colour Highlight colour - emphasize certain parts of the page / contrast (complimentary or split-complimentary) Font colour - white, black or contrasting colour http://media.smashingmagazine.com/images/illustrations-in-web-design/glamping.jpg
Key design principles: Colour Colour Wheel - useful for selecting colours Analog Colours - either side of any given colour / harmonious (secondary colour) Complementary Colours - directly opposite (contrast) Split Complementary Colours - the analog colours of the complementary colour Triad Colours - equidistant on the colour wheel / colourful yet balanced In most colour schemes you might add saturation, tint and shade to the selected colours. http://www.asiadragon.co.uk/interior_design/images/Colour-Wheel.jpg
Key design principles: Metaphor Describing something by reference to something else (shared quality) Visual metaphor - connects unrelated content Question: what metaphors have you seen used? http://www.devlounge.net/wp-content/uploads/2007/08/capitalcom.jpg
Key design principles: Text Text can be an important part of your design scheme Alice Litscher, 2009, http://www.thinkingwithtype.com/images/Thinking_with_Type_Letter_23.gif