Wireframe and design

Return to Home

The Definitive Guide: How To Make Your First Wireframe

What is a wireframe?

A practice used to plan the design for a website, app, or product with the distactions of colors, typeface choices or text. A commonly-used argument for wireframing is that if a user doesn’t know where to go on a plain hand-drawn diagram of your site page, then it is irrelevant what colors or fancy text eventually get used.

Wireframe examples

Create wireframes either by software like Invision or Balsamiq, or by hand.

Wireframes drawn by hand are very easy to change.

The best tools for wireframing

• Pen and paper
• Uxpin
• InVision
• Wireframe.cc

6 Steps to make a wireframe

1. Do your research- understand your audience.
2. Prepare your research for quick reference- create a cheatsheet!
3. Make sure you have your user flow mapped out- think about the user and how you want them to interact with the webpage
4. Draft, don’t draw. Sketch, don’t illustrate- outling primary features and formats, don’t think about aesthetics or colors, don’t drown yourself in detail.
5. Add some detail and get testing- Add detail in the way you would naturally process a screen, or the page of a book: from top-to-bottom and left-to-right.
6. Start turning your wireframes into prototypes- use tools such as Sketch, Figma, and invision and begin user testing.

How to make your wireframe good: Three key principles

1. Clarity- what can the user do? Does it satisfy their needs?
2. Confidence- make pages clear and concise, easy to navigate for user.
3. Simplicity is key- too much information can affect the users’ ability to navigate, use clear layouts to guide users.

Semantics in HTML

HTML should be coded to represent the data that will be populated and not based on its default presentation styling. Presentation (how it should look), is the sole responsibility of CSS.

Some of the benefits from writing semantic markup are as follows:

• Search engines will consider its contents as important keywords to influence the page’s search rankings

• Screen readers can use it as a signpost to help visually impaired users navigate a page

• Finding blocks of meaningful code is significantly easier than searching through endless divs with or without semantic or namespaced classes

• Suggests to the developer the type of data that will be populated Semantic naming mirrors proper custom element/component naming

There are roughly 100 elements in HTML