capture_wireframe Desirable interaction: hold and preview in gif selection - twitter.

Wireframing is where the rubber meets the road. Needfinding establishes the “potential energy” of your work; Information design turns that into kinetic energy.
Debrief instructions to our first assignment - "Information Design" course .

Wireframing

After knowing the user’s needs and having a set of ideas, it is time to work in a prototype. It is extremely recommended to start with a paper prototype first; and then move to wireframing. In this stage you are arranging the elements in your design, but yet not able to use fonts or colors. We try not to handle these aesthetic at the moment and just focus in the task the user is trying to accomplish. Take in consideration that wireframes should be in black and white, and also should include notes to explain interaction if is needed. Here are the steps given by Scott Klemmer regarding the designing process:

  • POV - Point of view.
  • Storyboards.
  • Paper prototype
  • Wireframing
  • Mock-ups
  • Code
As soon as you add fonts and colors, that's what they are going to talk about.
Scott Klemmer- "Information Design" course .

Here are some tips to take in consideration when you are creating a wireframe:

  • Use only black and white, no colors, no fancy fonts.
  • Don't think in "Home many buttons", focus more in "What task?"
  • Create or choose a grid system.
  • Make sure all text is large enough and with contrast, legible.
  • Think ahead in internationalization, for example some German text are too big.
  • How are you going to use your vertical space?
  • Arrange related content together and not related content apart.
  • If you are going to use charts, think how does it help to the task (avoid chartjusnk).
  • Text will be more readable if you align it to the left if you are reading from left to right like English.
  • Take in consideration the different devices your application or web site will be available in.

wireframe_task2.png Desirable interaction: Include an image in poll - twitter.

Coursera’s Assignment:

“As my colleague Larry Leifer is fond of saying, “all design is redesign.” In this assignment, pick a website or app. Any one you like. It’s best if you (or a close friend/family member) uses it regularly, so you have a sense of what’s working and what isn’t. Your mission is to unlock more of the site’s “potential energy” by redesigning it. For this assignment, what redesign means is: Write down two concrete, common tasks. For example, if you chose an airline’s site to redesign, a task might be, “Buy a one-way ticket from San Francisco to San Diego on March 10th.” Create two wireframes, one for each task. Your wireframes should provide alternative designs for accomplishing these two tasks. Each wireframe should show three key screens. Wireframe for a portrait-orientation tablet size: 1024px high × 768px wide. Or, if you prefer, 8”h × 6”w. All Helvetica (or similar), all black-and-white; no colors. That’ll come later. Pixel-proper in terms of location/size.
Think about what a user on a tablet might want to see. And create two alternative designs that will rock their world. How can you best use the space? Will there be nav? If so, where will it go? Will there be search? At the top? In the middle? Big? Small? Pictures? All the same size, or different? Gridded or rakish? To give you a sense of what a wireframe is, here is a wireframe redesign of the TripAdvisor home page..”

If you want to check my submission, here are the wireframes I sent to this assignment:
Task #1: Embed an animated gif into a tweet
Task #2: Create a striking poll

Licencia Creative Commons
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional.

Part of this material is based on Coursera’s Interaction Design Specialization