Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual design

1,897 views

Published on

Published in: Technology, Design
  • Be the first to comment

Visual design

  1. 1. Visual design.. Tools and principles for educational interface designers<br />
  2. 2. To transfer a written or spoken information into an imagery message (video, animation, statue, painting…etc<br />It is a method for seeing the unseen<br />It is not just about the pretty look and fancy colors<br />In education: visual design should consider the learner’s perspectives and learning theories <br />What is visual design?<br />
  3. 3. Capture and represent a multiplicity of relationships and patterns within an information space or domain to make them perceptually accessible and understandable using minimal cognitive effort on the part of learners<br />(Sedig, Liang & Morey, 2009)<br />The role of visual design In learning and teaching<br />
  4. 4. What we see is a combination of<br /> Masses <br />Solid objects one normally associates with design<br />Spaces<br />Open space and enclosed space<br />A skillful designer coordinates the use of mass and space to create a visually pleasant experience for the viewer<br />Visual design elements<br />
  5. 5. Directing<br /> the movement<br /> of the eye<br /> from the top<br /> to the bottom<br /> to increase attention<br />Visual design elements<br />Line <br />
  6. 6. Itcreateanopticalreactionthat recordedin the memory as anaid to identification<br />Visual design elements<br />Color <br />
  7. 7. See the images or art as shapes.<br /> And notice the entire piece as a form<br />Visual design elements<br />Form <br />
  8. 8. It is have the same significant of an image,<br />So, use it when it is needed <br />Visual design elements<br />Texture <br />
  9. 9. The ABC’s R’ US Visual Design Model <br />(Beriswill, J.E, 2004)<br />Alignment<br />Balance<br />Contrast<br />Chunking<br />Repetition<br />Utility<br />Simplicity<br />Visual design Principles<br />
  10. 10. Align the text to create a reading lines that direct the learner’s eye<br />Align the image according to outer points of the left, right, top and bottom <br />Visual design Principles<br />alignment<br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance, contrast, chunking, repetition, utility, and simplicity.<br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition,<br />utility, and simplicity.<br />No <br />Yes <br />
  11. 11. Visual design Principles<br />balance<br />balance<br />No <br />For effective visual<br />design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition, <br />utility, and simplicity.<br />Balance the weight of the objects between:<br />left and right <br />top and bottom<br />With dark background, use light objects and Vice versa<br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition,<br />utility, and simplicity.<br />Yes <br />
  12. 12. Visual design Principles<br />contrast<br />contrast<br />Placing the dark objects/ thin featured objects by light/ thick featured<br />The more the object contrasted the more the attention it draw <br />No <br />Yes <br />
  13. 13. Objects which have the same function placed in the same visual zone<br />Headings should be chunked within the text to support it <br />Visual design Principles<br />chunking<br />Chunking <br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition,<br />utility, and simplicity.<br />No <br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition,<br />utility, and simplicity.<br />Yes <br />
  14. 14. Visual design Principles<br />repetition<br />repetition<br />Consistent use of objects, effects, fonts, sizes, styles, and colors<br />Making themes from repeated characteristics to support the visual message<br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br /><ul><li> apply the principles
  15. 15. Alignment, balance,
  16. 16. contrast, chunking, repetition,
  17. 17. utility, and simplicity.</li></ul>No <br />For effective visual design<br />Designer should:<br />1- understand the elements<br />Line, color, form and texture<br />2- apply the principles<br />Alignment, balance,<br />contrast, chunking, repetition,<br />utility, and simplicity.<br />Yes <br />
  18. 18. Visual design Principles<br />Interactive objects<br />utility<br />utility<br />Learner should know his/her location and how to navigate through<br />It should consider the special needs of some students<br />http://viking.coe.uh.edu/~smarsh/fp2003/#steps<br />Navigation sidebar <br />
  19. 19. Visual design Principles<br />simplicity<br />simplicity<br />Keep the visual design simple <br />Visual objects are purposeful for<br /> their instructional value not their look or impact<br />http://www.webdesignfromscratch.com/basics/simplicity.php<br />
  20. 20. References <br />Beriswill, J. (2004). ABC’s R’ US: Teaching visual design principles. In R. Ferdig et al. (Eds.), Proceedings of Society for Information Technology and Teacher Education International Conference 2004 (pp. 1958-1961). Chesapeake<br />CARP (Contrast, Alignment, Repetition, Proximity), accessed 26/10/2009, http://units.english.uiuc.edu/ppw/prosem/2003/carp/index.html<br />Elements of graphical design, accessed 26/10/2009, http://www.allgraphicdesign.com/graphicdesignarticles/elementsprinciplesprocess/basicgraphicdesignelements.html<br />Sedig, K., Liang, H. & Morey, J. (2009). Enhancing the Usability of Complex Visualizations by Making them Interactive: A Study. In Proceedings of World Conference on Educational Multimedia, Hypermedia and Telecommunications 2009 (pp. 1021-1029). Chesapeake<br />Visual design principles, accessed 26/10/2009, http://www.fhwa.dot.gov/environment/visql/visql03.htm<br />

×