If you’re a website owner, designer, developer, stakeholder or someone who is involved in to process of designing a website or software, it’s very common to use wireframes. This blog post explains some basics of wireframes, why we should use them, and ways to create wireframes.

What are wireframes?

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

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.

Why wireframe?

Save Time and Resources

Yes, wireframe adds one more layer to the process of designing. But it reduces or removes (removing is the core purpose) iterations. Less or no iterations reduce time, resources, and the most important, money spent.

Save iterations

In any organization, there’s almost everyone involved in taking decision about the design. Right from designers themselves, developers, analysts and SEO specialists, managers, and even investors have some role to play in entire design process. Thus, the design goes through enormous iterations. Follows the non-achievable deadlines to take it live, conflicts between teams, and chaos. Wireframes can be modified quickly and provide simulation of the website. After everyone is agreed upon the design and content organization, it can move to design process where colors other elegance can be added.

Be perfect

It’s not good for a designer to know about the design problems after it’s live or in testing process. By “Design problems”, I do not mean functionality related problems like “Form is not opening”. I mean things like, “The shopping process could have been smaller”, “Why is there no “About us” in the main menu?”

These are issues, which can come up as suggestions before the design process starts, because you are just starting the design process.

Everyone has ideas, but not Photoshop skills

In some cases, there’ll be a user experience planner, marketer or even a CEO who will have some great ideas for a landing page, newsletter, an ad banner, or even an entire website. They usually cannot work on professional tools like Photoshop and present their ideas. Wireframing is a handy technique that’s available and possible to everyone with ideas to build something. Presenting a design idea will impact better as a tangible form like wireframes rather than just a list.

Different ways of wireframing

Since wireframing is the elementary level of design process, it’s easy for anyone to create wireframes. People use different ways to create wireframes. It’s up to you what you want to choose.

Pencil & paper

Pencil and paper is not limited to sketching only.It’s the most handy thing! You don’t need a software, computer, and not even electricity. You can sit wherever you want and start giving our design ideas a shape. This is the cheapest and least time consuming technique of wireframing.

Microsoft PowerPoint

A wireframe created in PowerPoint

The ease of using PowerPoint makes it a great tool and animation, drawing and even design. With readily available auto shapes and drawing tools, it’s so fast to create wireframes that make sense to the designer.

Professional tools

After realizing the importance of wireframes in the design process, there are plenty of tools available that can be used to create wireframes in no time. These tools can come free and even cost you hundreds of dollars, depending up on your need and frequency of using them. Here’s a list of these tools:

Axure RP
Omnigraffle
Invision app
Mocking bird
Mockflow
Pencil project
Cacoo
Picodo
Adobe Fireworks

Pencil

Screenshot of Pencil

I will talk in detail about some of the tools in another blog post. But here’s one tool which I can’t stop mentioning about. The pencil project. It’s the most favorite in the industry and comes at no cost, zilch! It’s my favorite too. Pencil is an add-in from Firefox and also comes as standalone app for Windows, Mac and Linux. It offers features which some of the paid tools even don’t offer. It not only has an extensive list of auto shapes, but lot more other features like GUI elements, widgets like scroll bars, sliders, progress bars, multiple pages within one document, and also interlinking of pages for real simulation of interactivity. You can even align page elements to be pixel perfect, which will save the designer’s time. Use Pencil. It’s as easy as drawing on paper.

People use different ways for creating wireframes, based on their comfort level. It can be any way you choose, what’s important is to get the design right before it actually starts. It should save iterations, resources, a lot of time and at the end, money.

Looking to optimize your eCommerce Store? Try our Price A/B Testing Tool and increase margin on each transaction.

Bio
Latest Posts

Kamaksh

Kamaksh looks after User Experience at Tatvic. He's more than 5 years of experience in PPC, e-commerce and UI/usability. He generally writes about improving User experience and conversions rates, and things that can make life easier. Google Plus Profile: Kamaksh Gangani