Your SlideShare is downloading. ×
Introduction to Design Principles and Usability        Author        M. Semeniuk
Visual Organization: Gestalt PrinciplesThe right column of the blog has the Gestalt Principles defined underKey Sources an...
Elements on a Grid SystemPlacing elements on a grid system will help the user    – Group Information    – Align Elements a...
Quick Tips: Eye flowWhich shapes do you see first? Usually the user will see• Large to Small• Irregular to regular• Dark t...
Quick Tips: Eye flowUsers usually look first at the center column
Quick Tips: Usability-Button• Does a button express and function as a button?• Does the user know if they select the butto...
Quick Tips: Usability-Text Alignment• Accessible text alignment: know your audience – how do they read?   – left alignment...
Quick Tips: Usability-Color• Chromostereopsis is a visual vibration effect when the eye tries to  adjust or accommodate ex...
White space allows the user to focus on the content.
No White Space for the UserLorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent nonlectus odio, sagittis matt...
Please comment about your experiences on instructional technology or designat http://inst-designonline.blogspot.com/
Upcoming SlideShare
Loading in...5
×

A brief overview for design elements

1,312

Published on

Quick Tips on design elements

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

  • Be the first to like this

No Downloads
Views
Total Views
1,312
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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/

×