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?
Website Wireframe 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
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 upon 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
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.
Kamaksh
Latest posts by Kamaksh (see all)
- E-commerce Recommender Series: Where to Place Your Product Recommendation? - October 20, 2014
- Infographic: Call-to-action – Guidelines and practices to ensure more clicks - August 27, 2012
- Infographic: An E-Commerce checkout process your customers will love - April 16, 2012
2 Comments. Leave new
thumps
thumps up its nice