Wireframes in Web Design

Article on OnextraPixel

Designing wireframes the right way the first time, cost no more than doing it the wrong way. Creating a paper prototype adds no cost, either- simply print out the wireframe diagrams for the pages a visitor will use to complete the tasks most closely related to achieving his goals and meeting the site’s business objectives.
Web Prototyping saves costs of any marketing communication that may be necessary to undo brand damage resulting from poorly functioning web site and a frustrating user experience. Expensive site redesigns are often undertaken to correct those kinds of problems. Adding a few days to create a wireframe and test a prototype ensures that the redesigned site won’t introduce any new causes for user frustration or further erosion of brand equity.
wireframe
A wireframe diagram illustrates the layout of a web page, using different shapes (such as boxes, ovals, and diamonds) to represent content, functional, and navigational elements and show their placement on the page. HTML coders use the diagrams to “wire” each page, connecting links, attaching content, and so on. A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea.

Wireframe vs. Visual Design
wireframe vs visual design
A wireframe diagrams lets everybody focus on what’s important at this step: clearly understanding what goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each page. A wireframe is a sketch of a page-layout idea.

9 Application Tools To Create Wireframes Digitally
01. Balsamiq
02. iPlotz
03. Pencil Project
04. templatr
05. Flair Builder
06. GUI Design Studio
07. Proto Share
08. Serena
09. DUB

Tags: , ,

Posted on Friday, October 9th, 2009 at 6:44 pm.
Online Article, Web Design.

Leave a comment