A wireframe is the blueprint of a design element or layout.
While not every project needs a wireframe, using one to construct a design layout can help you obtain early approval from your client on content flow without distracting them with color and texture. Wireframes also allow you to brainstorm the functionality and foundation of your design. You can easily create a wireframe in your graphics editing program, or use a multitude of online tools and graphic kits.
Before You Begin
1. Decide what elements will be present in your design. Common elements to include are: navigation, content areas, widgets or function boxes, images and buttons. An example of a list you might make would include: navigation, image slider, introduction boxes, social network icons, latest article links and a copyright/footer
2. Determine the width of your design that you want to start with. Standard layout dimensions are 960px, 980px and 1020px, but a benefit of the wireframe is that it allows you to experiment with the scale of your elements until everything looks right.
3. Choose a method for creating your wireframe. Creating a wireframe by hand can be the easiest, but it may not translate well to a digital file that can be used as an accurate blueprint for your composite. Software programs such as Adobe Photoshop, Illustrator, or InDesign are not really optimal for creating wireframes either, but they do assure maximum compatibility with your composite or actual design. Your final option is to use a wireframing tool, several of which allow collaboration and export to design-friendly formats.
Create A Wireframe From Scratch
4. Create a new document that is at least 1680px wide and 980px high. You will be able to envision how your design and its scale will look when presented in a web browser if your workspace is larger than your design. When drawing by hand, use grid paper if possible, where one square is equal to 10 pixels. Without a grid, convert one inch to 100 pixels.
5. Begin by creating a centered rectangle using the width and height of your starting layout dimensions, which will act as your initial frame. Draw each element in the desired positions by using simple shapes and shades of gray. If using software, Wireframe and UI graphic kits come in handy at this stage, providing you with standard elements you can place within your wireframe such as icons, text boxes, search bars, menus and so on.
6. Label each element clearly with neat handwriting or a sans-serif font. If you wish to include dimensions, do so using a light color dotted line outside of the element and make sure the element represents the labeled pixels accurately.
7. Add design notes in the margins or keep them in a separate file to present alongside the wireframe. Your design notes might include ideas related to color, functionality, or purpose of elements within the wireframe. If using a software program, make sure the notes are unobtrusive and clearly relate to the labeled elements by name or number.
8. Save the file as a JPG for maximum compatibility with whatever software your client may use to view it. If using software that supports layers, save a layered copy for yourself so you can easily edit elements later, or use this wireframe again as a template for another project. If you drew your wireframe by hand, you will need to scan the image and resize it to fit the accurate representation of the dimensions you set.
Create a Wireframe Using Wireframe Software
9. Begin by creating your main layout dimensions, which will act as your primary frame. Most wireframe software comes with standard layout sizes to choose from. Use a light colored or transparent background.
10. Drag and drop or add elements from the supplied libraries within the tool. Things to keep in mind are white space, content flow, and the intended user experience. You can adjust the scale and size of elements in these tools by dragging their dimension handles.
11. Label each element clearly by clicking the label text within each element and typing a name or number. If you wish to include dimensions, do so using a light color dotted line outside of the element and make sure the element represents the labeled pixels accurately. Some wireframing tools will do this for you automatically.
12. Add design notes corresponding to each element in the margins or in a separate document. Your design notes might include ideas related to color, functionality, or purpose of elements within the wireframe. If using a software program, make sure the notes are unobtrusive and clearly relate to the labeled elements by name or number.
13. Export or save the file as a PDF or JPG so your client can easily view it. If your chosen wireframe tool supports collaboration, it is a good idea to invite your client to log in and leave comments.