Posts Tagged ‘ grid ’

Class notes: Sketches and Wireframes

I started class today with a few announcements:

  1. If you are serious about learning more in the area of HCI, there is a course at Purdue, IE/PSYCH 577  Human Factors in Engineering (Purdue Catalog description) that covers in depth the topics we mentioned in the presentations about “Designing with the Mind in Mind.” It is taught by Dr. Robert Proctor, a legend in the field of human factors. If you have or are taking that course and can comment on its utility for students interested in user-centered design, please do so below.
  2. I’ve been contacted by someone who will pay a student to develop an Android app – email me if you want more details.

As we got to work, I wanted to clarify the concept of affordance and what an important role the body plays in seeing affordances in the physical world. I illustrated this with the slides below which show the difference in perceived affordances of common objects between humans and cats.

In the digital world, affordances are often communicated by making references to objects from the physical world. This is the concept of metaphor (this is the website I showed in class). However, metaphors have disadvantages when they impose the limitations of the physical world onto the digital one. Also, when taken too far, metaphors lead to skeumorphism, which is a tacky and outdated idea. We also discussed how metaphors can be outdated and become meaningless.

Next, we talked about using grid systems for alignment. The point is to limit the number of vertical alignments on a page. This will help you organize information better. This is the website I showed in class, where you can show and hide the grid on demand. I also recommend the book Making and Breaking the Grid.

Also, remember visual hierarchy. You can use size, color, shape, or texture contrast to make an object stand out and make it the first thing people look at. To assess visual hierarchy, use this simple test:

  • close your eyes
  • look at the screen and notice: what do you see first, second, third?
  • note what design elements are used to lead your eye from #1 to #2 and on.

Below are the slides on visual hierarchy I use in my undergraduate course.

Last, I mentioned typography – more about it in this other blog post.

A graphic design course can help you learn more about these things. As a user experience designer, if you know visual design, that is wonderful. You might be a UX unicorn! But if you are not a visual artist, you should at least be able to talk about these things intelligently.

You do need to know at least grids and visual hierarchy to create wireframes – for mockups, you do need a visual designer!

We spent the rest of class storyboarding a pizza ordering app and creating some wireframes.