wireframing

Ramjee Gantihttp://sodidi.blogspot.com

Wireframing your Website

“Change is the only Constant”

"If you fail to plan, you plan to fail"

In web design , wireframes are a basic visual guide used to suggest the layout and placement of fundamental design elements in the interface design

Wireframes also allow for the development of variations of a layout to maintain design consistency throughout your site.

Act as a communication tool to clients and stakeholders.

Helps to define the positioning of global and secondary levels of navigation in a prominent and intuitive position.

Sitemap before Wireframe

Create the Wireframe

Add Content

Layout the Page

Is that It?

Not Yet!

Real people don’t understand wireframes

Visual affordances, such as color and underlining links are key to using a site, and these cues make a significant difference in a usability test.

Visual Cues

Color, which identifies hyperlinks and focuses the user’s attention on an element of the page

Branding, which confirms that the user knows where they are

Recognizable web page elements, such as forms and search fields

“Content,” such as account numbers or product names, which allows experienced users to focus on how they would really use the page, instead of interpreting “lorem ipsum”

?

Sourceshttp://www.alistapart.com/articles/avoidedg

ecases/http://www.boxesandarrows.com/view/real_

wireframeshttp://www.sitepoint.com/article/wire-frame

-your-site