Project Description

Project Description


Wireframes are to websites as blueprints are to buildings. They’re the design artifact that we give engineers so they can build what we’ve designed.

What it is.

Detailed designs that show functionality and layout — but not the visual UI.

The wireframes look like a black & white version of the application without any actual copy, pictures, or other visual elements. They only explain to engineers how a site or application functions, and the arrangements of elements on the screen.

How it’s used.

These critical design artifacts are given to engineers so they can build what you have designed. They must be very detailed about functionality and layout, and have none of the visual design elements in them (so they aren’t confused with the final design specs).


When an architect designs a building, she doesn’t illustrate a pretty picture of the outside of the building, hand it to the contractors and tell them to start building. They wouldn’t know what to build.

Likewise, the product designer can’t create the final UI design of an application, hand it to the engineer and expect her to know how that application functions.

Wireframes show the programmers how the website or application functions — in detail.

Her’s an example of what a low-fi wireframe might look like:

What’s that? You say they look a lot like sketches and the modular designs we did yesterday?

Yes, there is a method to this madness!

As we sketch and block out containers for content on websites and applications, we are actually beginning to create wireframes. Of course, when you do the finished, hi-fidelity wireframe, it will look polished and very well annotated. But to get started and learn how wires work, these low-fidelity sketches are just fine.

Notice that the key components are:

  • Content boxes that show where different types of content will live on the site
  • Annotations, that briefly describe functionality
  • General idea of layout (though you don’t need to be specific about aspect ratio and margins, you do want to show relative size of components.)


  • Understand the uses of wireframes

  • Learn the components of a wireframe

  • Practice sketching low-fidelity wireframes

Tips & Tricks

  • Block out the basic components and their placement on the page first
  • Annotate as you go
  • Don’t worry about exact sizes for low-fi wires (you’ll get to that at a later stage)
  • Don’t include any color, pictures, copy, ads
  • An icon here or there is fine


Your Assignment

Create a low-fi wireframe based on the modular sketches you did yesterday

Using the modular sketches from yesterday, evolve those into 3-5 pages of low-fidelity wireframes.

  • Be sure to include everything that is on the screen of the site you’re wiring
  • Write annotations in the margins that explain the content (what it is) and the functionality (what it does)
  • Be as detailed as possible, without including any actual content. (e.g. “This is the world news section” rather that including the actual article from that day.)


Create a pdf and share your wires in the comments and/or on Dribbble and Twitter #100daysdesign.