Rapid Wireframing: Finding the Right Product Design | Michael Angeles | Skillshare

Rapid Wireframing: Finding the Right Product Design

Michael Angeles, User Experience Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Videos (51m)
    • Course Trailer

    • Project Brief

    • Using Balsamiq

    • Initial Concepts: When it's really a sketch

    • Diving in to Wireframing

    • Working with Alternate Versions

    • Linking

    • Getting Ready for Presentation

    • Creating Smartphone Versions (Optional)

    • Some Final Thoughts

15 students are watching this class

Project Description

Create Project Wireframes and Prototype for a Product

Create a wireframe presentation and clickable prototype for a product idea. This assignment will use a project brief for a hypothetical restaurant ordering app. The brief provides the product requirements as the basis for creating an interface design proposal to solve the problem described. In the assignment, you'll focus on how to build wireframes describing how the product will function, and how the interface should behave and appear to the end user. You can create your wireframes for your own project brief, or you can use the example brief I've provided. To make it fun, maybe you can design the tool for your own favorite restaurant. Just have fun with it. Templates and the project brief are attached below. Note that we’ll be using the Desktop version of Balsamiq, which you can buy for $89.

Your finished project wireframes can be exported as a PNG images and uploaded to the Project Gallery.  To export as PNG in Balsamiq, select the menu Project > Export > All Mockups to PNG.

Your project will include screens demonstrating functionality X for the web app, and may optionally include accompanying interfaces for Smartphone and Tablet devices. See the PDFs or Balsamiq BMPR attached for the example project we're building in this course.

During the course, you can upload phases of your work. Here’s an outline of what you can upload and when:

  1. Sketches and Concepts (Unit 3-1)
    We have some high-level wireframes that are similar to sketches with annotation and flow. Upload that as your initial sketches or concept wireframes. 
  2. Detailed Wireframes (Unit 3-2 through 3-3)
    Prepare your first pass at more detailed wireframes. 
  3. Linked Wireframes (Unit 3-4)
    In our last iteration with a bit more detail and linking.
  4. Final Demo / Prototype (Unit 3-5 through End)
    The final part is our finished demo or presentation. This is a refined wireframe deck demonstrating the complete flow of the feature set we would demonstrate to our team or client.