Tag Archives: wireframes

(SP) Initial Wireframe

5 Dec

Wireframe of the front page for “Small Packages” at the beginning of the project:

The front page, at the start of the project.

The front page, pre-UX.

At first impression, this is a visually-appealing front page.  (Obviously, it looks even better with all the graphics and non-clickable text that make up the interface.)  It has a clean and symmetrical design, it avoids gimmicky Flash and animated GIFs, the header and footer include the correct information, and the central image block draws your attention to the site’s body.  But even just looking at the wireframe, a few areas of potential improvement pop up immediately:

  1. There’s a mismatch between the webseries the site is designed to advertise and the emphasis that content is given on the page.  (ex. In the header, the buttons for “Season 1” and “Season 2” are the same size as the buttons for everything else.  The main image block in the body emphasizes the “Latest Episode” with a HUGE image.  But then it undermines that emphasis by creating equally huge images for “Latest News” and “Latest About Series”.)
  2. Half of the site falls below the fold.  That’s prime real estate, under-used.
  3. Buttons leading to the same content appear in multiple places.  In and of itself, not a bad thing.  But in this case, it feels like the intent is to make the front page look fuller than it actually is.  Meanwhile, each season full of episodes is squished into a small drop-down menu at the top of the page.

Preliminary diagnosis: A more streamlined organization of the elements will get  more content into the area above that fold, while replacing some of the images will put the visual emphasis squarely on the webseries videos.


QuickNote: Wireframing Tools

3 Dec

Question for experienced UX designers: what was your first wireframing tool, and how did you conclude that it was the right place to start?

So far, I’m using pen-and-paper and whiteboards. They work great!  But the production values are less than stellar.  And whiteboards don’t scan too well.

An informal survey of job posting for UX designers reveals the Big Three: Microsoft Visio, Axure, and OmniGraffle.  I like the reviews for OmniGraffle, but it’s Mac-only, and my newbie budget cannot support the Mac transition right now.

There are numerous excellent-looking cheaper systems like HotGloo (in September, UXMagazine.com rated it the WireFraming Champeen of the web-tool class) and Balsamiq.  But at this point in my career, for credibility’s sake, I feel like I’ve got to start by mastering one of the Big Three.