Week 12

04-15-2015

Wireframes

Introduction

At this point, we’ve covered loads of ground. Your PHP and MySQL skills should be rounding out. While you might not be able to write PHP/MySQL code completely from scratch, you should be able to pull things together from previous weeks and resources online.

Wireframes

We studied wireframes already in previous weeks. However, I think it’s easy to loose track of their importance to the ideation process. It’s also to confuse them with crude sketches. Professional-grade wireframes are refined and capture the heart of a site. Since we’re about to start on the final project, one that will require collaboration, I think it’s a good idea for us to revisit them.

To begin, read the following articles:

http://blog.45royale.com/post/31822274280/wireframing

http://uxmag.com/articles/shades-of-grey-wireframes-as-thinking-device

Essentially, wireframes serve four purposes:

  1. They allow you to get a concept out of your head so you can start thinking visually. Which elements work? Which ones don’t? What buttons are you missing? Etc.
  2. They allow you to collaborate with others. Having a physical thing others can react to (beyond just concepts) allows ideas to build on one another.
  3. They are a way for you to do some initial usability testing. Showing others and asking them which area they would expect to represent which bit of functionality allows you to do a quick gut check of a concept.
  4. They allow you to document. Doing pixel-perfect Photoshop mockups is a time suck. Refined wireframes take a fraction of the time and allow you to start documenting the needs of a product to allow development to start. Often, developers are working from wireframes while designers are busy fleshing them out, then they both meet to implement the final “skin” of the wireframes.

To build on this, read chapter seven in User Experience Re-Mastered. Again, it is available online through lib.muohio.edu.

Assignment

:-)