Creating Wireframes

CSS: Cascading Style Sheets #

Wireframing is an important part of the web design process. It makes it easier for the designer to plan the layout and information hierarchy of the web page.

The following video introduces different ways to create a wireframe using a few free online tools.

Layout and Composition #

Before you begin the wireframe it's very important that you understand good design practices. The following is a great video on laying out and composing any design.

Example 1 #

In this example we will be using wireframe.cc as a tool to create a wireframe.

Visit wireframe.cc and watch this video to follow along with and practice using this tool.

Example 2 #

In this example we will be using gomockingbird.com, another tool to create a wireframe.

Visit gomockingbird.com and watch this video to follow along with and practice using this tool.