A brief overview for design elements

1,575 views

Published on

Quick Tips on design elements

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,575
On SlideShare
0
From Embeds
0
Number of Embeds
970
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

A brief overview for design elements

  1. 1. Introduction to Design Principles and Usability Author M. Semeniuk
  2. 2. Visual Organization: Gestalt PrinciplesThe right column of the blog has the Gestalt Principles defined underKey Sources and Concepts – C.Chen Information Visualization – Definition example from Spokane Falls Community Proximity Common Region Connectedness Similarity Size Shape Shade Color
  3. 3. Elements on a Grid SystemPlacing elements on a grid system will help the user – Group Information – Align Elements and relax eye flow Elements on a Grid Elements not on a Grid
  4. 4. Quick Tips: Eye flowWhich shapes do you see first? Usually the user will see• Large to Small• Irregular to regular• Dark to light shade
  5. 5. Quick Tips: Eye flowUsers usually look first at the center column
  6. 6. Quick Tips: Usability-Button• Does a button express and function as a button?• Does the user know if they select the button another action will perform a function?• If those questions are true, the button has affordance.Common buttons for Videos:* Notice the grouping and the application of the Gestalt Principles.
  7. 7. Quick Tips: Usability-Text Alignment• Accessible text alignment: know your audience – how do they read? – left alignment creates a visual line instead of a jagged edge as in right justified text and does not interrupted eye flow. – avoid centering main the information. – Try to keep the text length under 100 to 150 words per line – Consistency of fonts and sizes per grouping; example, headers the same size. Left Alignment Center & Right Justified Alignments Lorem ipsum dolor sit amet, consecteturLorem ipsum dolor sit amet, consectetur adipiscing elitadipiscing elitLorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consecteturadipiscing elit adipiscing elit
  8. 8. Quick Tips: Usability-Color• Chromostereopsis is a visual vibration effect when the eye tries to adjust or accommodate extreme color spectrums; red and blues are side by side. This is very difficult for a user to maintain focus. Example Example• Keep the color simple, non-competing and consider designing within color blindness parameters. Example Blue
  9. 9. White space allows the user to focus on the content.
  10. 10. No White Space for the UserLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nonlectus odio, sagittis mattis nulla. Fusce at lectus erat, nec pulvinarerat. Etiam vel urna purus. Maecenas massa nunc, ullamcorper nondapibus a, facilisis a dui. Nam tempor arcu non lectus facilisis a duimass Vestibulum ultrices ipsum at lorem vestibulum et auctor nuncvehicula. Morbi molestie sapien id libero gravida id iaculis loremWithout white space it can confuse a user: Where is the focus?Vestibulum ultrices ipsum at lorem vestibulum et auctor nunc vehicula.Morbi molestie sapien id libero gravida id iaculis lorem aliquam.Vivamus nulla neque, pharetra ut sodales quis, malesuada nonjusto. Donec dapibus tincidunt posuere. Suspendisse mattis euismodmattis diam. Vestibulum ultrices ipsum at lorem vestibulum et auctornunc vehicula. Morbi molestie sapien id libero gravida id iaculis loremaliquam. Vivamus nulla neque.
  11. 11. Please comment about your experiences on instructional technology or designat http://inst-designonline.blogspot.com/

×