Posts Tagged ‘ conceptual design ’

Class notes F14 – week 9: Conceptual Design – execution & evaluation

Core interaction design concepts: controls and menus. Remember the 4 types of controls: Imperative, Selection, Entry and Display. Remember that they’re implemented differently on various platforms. Although the grammar is similar, the actual languages are different.

See, for example, the guidelines for iOSAndroid and Windows 8.

Slides used in class are below.

Remember the streamlined cognitive walkthrough as one rapid method for early in-house evaluation.

If you have further questions that were not answered in class, please ask them in the comments below.

Conceptual Design

Please look at the slides below. They take class conversation one step further, and show how you present the ideas you create using sketches, storyboards, wireframes, mockups and prototypes.

Please work on understanding the definitions and differences among:

  • sketches – hand drawn, quick, rough, low-fidelity
  • storyboards – series of sketches showing the user’s progression through interaction with a product
  • wireframes – computer drawn, pixel-perfect in terms of size; they show layout and functionality; medium-fidelity
  • mockups – computer drawn, pixel-perfect models of what the screen will look like. They include the visual design layer: color schemes, detailed icons, buttons, and typography; high-fidelity
  • prototypes – are interactive. They can be made out of sketches, wireframes or mockups. Or, they can be rough live codes of the product you envision. They vary in fidelity.

Read this article about wireframes and their importance, then look at the slide decks below that illustrate these definitions and differences.

There are many tools out there for wireframing and prototyping. In this class we will use Balsamiq and Axure, but I encourage you to try others as well – see a review of several tools from (yes, THAT Cooper). You might also want to bookmark this collection of wireframing resources I created a while back.

When you’re done, head back to Canvas and read the scholarly articles about how to evaluate the products of conceptual design.

Class notes: Prototyping and Storyboarding

You absolutely have to take a look at this post that illustrates  the entire process of moving from blank page to prototypes and finished product. Where do you start? With grids, of course. (btw, up to here, this could be one of your blog posts in the category Interesting Links).

Then, embedded below are the few slides I used in class:

And the copy of the class activity, which includes the questions for your follow-up blog post. Please remember to blog and reflect on “what you learned today in school.” Who knew pizza could be so educational?!