• Home
  • Contact
  • About
  • Search
  • Hypermedia and Education
 
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.
 


Comments




Leave a Reply

    Follow

    Enter your email address:

    Delivered by FeedBurner

    RSS Feed


    Categories

    All
    Art
    Collaboration
    Design
    English
    Geography
    Google Apps
    Ipad
    Iphone
    K 12
    K 12
    Language
    Literacy
    Math
    Mobile
    Multimedia
    Music
    Productivity
    Programming
    Project Based Learning
    Science
    Social Media
    Social Studies
    Web 2.0
    Web Based
    Websites


    Archives

    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