Wireframing is an important step in the website development process that allows teams to plan pages effectively before design begins. It provides clarity around what information and elements belong on each page, establishes expectations upfront, and makes future changes less costly. Key benefits include clear goal setting, early identification of needs, and a shared vision across teams. Online tools make wireframing an efficient process that improves planning and outcomes.

1. Why Wireframing?
DevCorner #006: Joakim Westerlund
@joakwest

2. The reasons why not wireframing?
Some of us tend to skip the wireframe stage of website
development for a few reasons such as time constraints,
client budget constraints yes even pure laziness.

3. The truth of wireframing
The truth of the matter is that wireframing is an
"extremely important step in the planning
process of a website or feature"

4. Key reasons for wireframing
Allows you get a clear picture of what type of information that will
be needed on page level before design
Allows you to spend time and focus on what each page’s purpose
is. Careful plannings is important.
Allows you a fail-safe for uneducated clients who tend to change
their minds during the design phase of the project.
Allows you to set a fallback point, when every member in the
team/client signs off means that everyone agree what´s on a page.

5. More reasons for wireframing
Allows you to have a clear look at how the site will react to various
visitors without the clutter of color or design elements
They’re easily adjustable (pre-signoff) and easy to produce
allowing the planning process to move along smoothly and
efficiently.
Gives the designer/developer a clear view of what needs to be
designed
Proper planning of page elements, page goals and site objectives
can make or break the overall project.

6. What can we solve?
All parts in the team have a clear goal of what to be done.
We now what type of new/changed fields/data we need to have for
the interface and maybe what we have to store.
We get a clear view of the interface when implementing the GUI.
We can change early before development start. Less migration,
less reimplementation.
Perhaps we can catch up things that we might need help from a
designer with.

7. Online wireframing tools
Mockingbird (now out of beta)
https://gomockingbird.com/
HotGloo
https://www.hotgloo.com/
MockFlow
http://mockflow.com/
Balsamiq Mockups
http://balsamiq.com/products/mockups
Pencil (FireFox add-on, Linux/Windows)
http://pencil.evolus.vn/en-US/Home.aspx
Or HTML Wireframing

8. DEMO Time
Mockingbird
https://gomockingbird.com/

9. Links and resources
http://www.delicious.com/jorkas/devcorner006