What are wireframes?

Wireframing a music store

Source: tokyowebdesigns.com

According to Wikipedia, “A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.”

Wireframes provide the skeleton of design at elementary level.
 

What they have:

• Structure of each page
• Content organization
• Process flow

What they lack:

• Colors
• Real content
• Look & feel
• Design elegance

How do they fit in the design process?
 

A sample wireframe created in Adobe Fireworks

Source: tatvic.com

Wireframes decide the information architecture of the page/website you are going to design. It has flow of processes (shopping, Sign up etc.), page structure and rough look & feel of the end design. Elements on a wireframe are not necessarily to be aligned and be pixel perfect, and don’t require real content. After the wireframe is finalized, prototypes are created using professional tools like Adobe Fireworks, Photoshop etc. These prototypes are pixel perfect mock up, which has real content, colors and elegance. Some designers also use prototyping and designing mock ups as different processes. After mock ups are created, it goes for web development, where HTML and CSS codes are written, database connectivity, plug-ins installation etc. happens. After this, the website is tested again for functionality and it goes live if everything is perfect. 

Source / read more: tatvic.com