Website Wireframes

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.

Importance Of Wireframes And Tools To Create Wireframes

A designer doesn’t have to reinvent the wheel with each new wire frame diagram, of course. Every page in a site will share some elements, even when the pages don’t follow the same template.

These common elements are the must-have items, which, if absent, can cause visitors to experience frustration and resentment that may linger long after they’ve moved on to other sites. Alienating visitors and creating a negative brand impression will not help the site-owning organization achieve its business goals, nor will it save money. For example, every page needs clearly labeled navigation so the visitor can easily move from one page to the next and from one section of the site to another without having to go back to the home page.

The Wireframe

Wireframe Example

Understanding how to work with wireframes is key to creating a success site prototype.

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.

wireframe webstyleguide

Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labeled), free of any potentially distracting design treatments.

Shapes used in wireframes

Using simple shapes lets you focus on the information design first, to make sure it meets users needs, before moving on to the pretty pictures. For an existing site, wireframes are abstracted from screen shots, with new content, functional, and navigational elements sketched in.

Wireframe vs. Visual Design

Usually, decision-makers in the site-owning organization will want to see visual designs by this time. I encourage you to be brave and delay – stall if necessary, but in any event resist temptation to yield to this request.


One very important reason is to save money. Why spend on graphics before the underlying information design is complete?

Equally important, colors, fonts and stylistic treatments of logos and other graphical elements can invoke emotional responses (“I hate this pink”; “I love that blue”; “That version of the logo makes me ill”) that distract from the task of determining the best information design for the page.

Example of wireframe to mockup

A wireframe diagrams lets everybody focus on what’s important at this step: clearly understandingwhat goes on each page, where it goes, and why it goes there, so you can achieve the best overall balance and structure for each pageA wireframe is a sketch of a page-layout idea. The sketch may be rendered in the computer using an illustration application or hand-drawn on paper. Either method is fine, as long as it clearly communicates your ideas.

The information design will evolve as wireframe diagrams change, incorporating results from the usability test at the end of this step, to reflect placement of page elements in ways that better meet user needs. Keeping the information design flexible at this stage will help you create a more positive brand experience over the long term, so you don’t want anyone to develop partisan attachments to a particular look this early in the game.

Note for Visual Designers

At this point in the process, visual designers should conduct exploratory meetings to understand the client’s visual preferences and the visual elements of the client’s brand. Wait until wireframes are set before showing visual-design treatments of the pages to the client.

Note for Clients

For clients who insist on seeing visuals earlier rather than later, you can ask visual designers to design page mock-ups representing possible colors, imagery, and look and feel – possible styles of what is being considered – at this stage. However, you should do this only if absolutely necessary – that is, if they won’t take no for an answer – and be sure to emphasize that these mock-ups in no way reflect the final designs (repeat this warning early and often).

Uwe Thimel’s version of a wireframe

Municipal wireframe by Uwe Thimel

Caution the people in the site-owning organization against developing any attachments to these mock-ups, because such attachments will make it difficult it change the visual design later on.Chances are these people will not be happy when they see the final design with text, links and information added to it. Focusing only on wireframes at this stage helps you avoid building unrealistic expectations about the site’s final look and feel, guarding maximum flexibility to evolve the site’s information design as necessary.

9 Application Tools To Create Wireframes Digitally

Traditionally, interactive web designers use pencil and paper or Photoshop to do a mockup. However, in recent years, there has been a handful of websites that allow designers to create prototypes, wireframes or sitemaps digitally. Here are 9 tools that you can consider using.

1. Balsamiq

Balsamiq Mockups Tool

Using BALSAMIQ mockups feels like you are drawing, but it’s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

2. iPlotz

iPlotz Wireframe Maker

With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

3. Pencil Project

Pencil Project GUI Wireframe

The PENCIL PROJECT‘s unique mission is to build a free and opensource tool for making diagrams and GUI prototyping that everyone can use.

4. templatr

Templatr Mockup Creator

templatr is a Template Generator, with which you can create an individual design for your Blog online. You need no knowledge of HTML and no special Software. All you need is a Browser, maybe a little creativity and a small idea of how the finished design should look. You can download the finished Template with a simple click.

5. Flair Builder

Flair Builder Interactive Mockup Creator

FlairBuilder is a cross-platform tool for rapid authoring of interactive wireframes and user interface prototypes. It comes with a palette of common fully functional components. Your prototypes will have interaction built-in from the first moment.

6. GUI Design Studio

Caretta Prototype Tool

GUI Design Studio is a fully featured application user interface design and rapid prototyping tool that requires absolutely no coding. It is equally suitable for creating desktop, mobile and Website application designs.

7. Proto Share

Protoshare Wire frame tool

PROTOSHARE makes it easy to create and then reuse templates giving you full creative control and efficiency.

8. Serena

Serena Web Application Development Company

PROTOTYPE COMPOSER is a completely new way of gathering requirements. Prototype Composer makes it possible to see how an application will look and function before any code is ever written. Instead of endless text documents, Prototype Composer makes it easy for business users and business analysts to collaborate on requirements by building simple, high-fidelity prototypes that simulate a working application.

9. DUB

Denim Wireframe Tool

DENIM is a system that helps web site designers in the early stages of design. DENIM supports sketching input, allows design at different refinement levels, & unifies the levels through zooming.

Wireframing diagrams use simple shapes to represent the content functions, and navigation on a page. Use them to design the best relationships among page elements for efficient information design that will meet user needs and achieve the site’s business goals. I hope this post gives you a better understanding on the importance of wireframing, please stay tune for part 2!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s