Successfully reported this slideshow.

Why wireframing?


Published on

At we have DevCorners with all the developers. One talk I had was about using wireframing in our projects.

Published in: Technology
  • Be the first to comment

Why wireframing?

  1. 1. Why Wireframing?DevCorner #006: Joakim Westerlund @joakwest
  2. 2. The reasons why not wireframing?Some of us tend to skip the wireframe stage of websitedevelopment for a few reasons such as time constraints,client budget constraints yes even pure laziness.
  3. 3. The truth of wireframingThe truth of the matter is that wireframing is an"extremely important step in the planning process of a website or feature"
  4. 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. 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. 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. 7. Online wireframing toolsMockingbird (now out of beta) Mockups (FireFox add-on, Linux/Windows) HTML Wireframing
  8. 8. DEMO Time Mockingbird
  9. 9. Links and resources