Dr. Reshan Richards
  • Home
  • Home

The Vault: Posts through August 2015

SPAM Bots took over the comments! But I am unhiding these temporarily.

Explaining Everything: Product Specifications and Mockups

12/28/2011

0 Comments

 
One of the most important parts of the design process is translating your thoughts and ideas into something that experts in their fields (i.e. programmers and graphic designers) can understand and work with. Two important areas must be covered to get started: the product specification and the mockups.

Product Specification

This artifact can exist as a text outline, flow chart, concept map, or any other organizational structure. The idea is to detail every part of the app in this document. It not only helps the people you work with understand your vision, but it also helps you figure out potential gaps and identify needs.  This also helps you communicate to developers and graphic designers what your requirements are, and thus they can help give you a firmer idea of the costs. Dan Saffer's Designing Gestural Interfaces is a good resource for beginning designers, but I found it was helpful for thinking about every possible way an interaction might take place on a touch screen device.

I chose to do a text outline to organize the different tools in Explain Everything and outline their function, but I then spent a lot more time doing mockups of each tools individual menu.
Picture
Screenshot excerpt from draft of product specification.
The specification evolved over time once the design process began. New feature ideas emerged, and with those new bullet points and corresponding mockups.

Graphic Mockups

_For every detail in your product specification, you definitely want to have a graphic-mockup to accompany it. One thing that can be very helpful is to get familiar with the graphic elements that are standard in the Apple iOS SDK. Many menu items and selection options come standard, so those do not need to be custom made. Check out Geoff Teehan's blog for great resources for iOS Development. He provides (for a voluntary donation) a layered PSD file that you can use to create quick mockups of various popout and pop-over menus.
Picture
iPad GUI .psd file via Teehanlax.com
Using standard elements at first can be helpful for the initial phases of design when you are trying to get the functionality down. Once all of those pieces are sorted out, then you can know for sure which pieces you want to get custom graphics for. Below is an example of the Draw Tool pop-out menu for Explain Everything. On the left is the mockup which I created, and on the right is the actual current Draw Tool pop-out menu.  The Pop out frame, background, header text, 'Set' text options, and slider, are all from the standard SDK. The color palette, the thickness options, and pen tips are custom graphics.
Picture
Draw Tool mockup
Picture
Draw Tool actual
Below is an example of the home screen for Explain Everything.  All of thexe graphics had to be custom made, but at first it was important just to get the functions working, and once happy with how the buttons worked and were position, the graphic designer was able to make something great out of it.
Picture
Home screen mockup
Picture
Home screen actual
This part of the process is definitely the most time consuming, but at the same time its the most important to get right. Front-loading the effort into the details early on will save lots of headache later on.
0 Comments

Your comment will be posted after it is approved.


Leave a Reply.

    Watch

    Picture
    TEDxNYED: About Assessment

    Follow

    Tweets by @reshanrichards

    Enter your email address:

    Delivered by FeedBurner

    RSS Feed


    Archives

    August 2015
    June 2015
    February 2015
    October 2014
    August 2014
    July 2014
    June 2014
    April 2014
    March 2014
    January 2014
    November 2013
    September 2013
    August 2013
    July 2013
    June 2013
    April 2013
    March 2013
    January 2013
    December 2012
    November 2012
    September 2012
    June 2012
    May 2012
    April 2012
    December 2011
    November 2011
    August 2011
    July 2011
    May 2011
    April 2011
    March 2011
    February 2011
    January 2011
    November 2010
    October 2010
    September 2010
    August 2010
    July 2010
    May 2010

    Header photo by Robert S. Donovan
Powered by Create your own unique website with customizable templates.