Everything you need to know about Wireframes
Wireframing is an important step in every website and app screen design process. It allows you to define the flow chart and information hierarchy of website design. It makes it easier to plan layout according to how you want your users to process the information. Adding wireframes and testing a prototype in your website design process ensures that the redesigned site would not introduce any new error for the user.
What is Wireframe?
Wireframes are a visual representation of the content of a website web pages that is the equivalent of user research, Content and business objective. They are working documents. Wireframing is important for the designer because it allows the designer to plan the layout of an interface without being distracted by colors.
Most of the time people confuse with wireframes, mockups, and prototypes. Wireframes are basic illustrations of the structure and components of a web page and its flow. Mockups generally focus on the visual design elements of the site. Prototypes are semi-functional web page layouts of a mockup/comp that serves to give a higher-fidelity preview of the actual site being built.
Types of Wireframes
1) Low Fidelity Wireframes: It resembles a sketch that you can draw on your own. Sketches are just black and white representation of the user interface.
2) High Fidelity Wireframes: This type of frame are used to create to show the finer details of the user interface. They used color to represent of their counterparts with more attention to alignment and sizing of each element of the user interface.
Reasons behind Wireframing
1) To help Mobile & Web App designer and developers to understand the flow of entire web app.
2) It provides a completely clear picture of what information will be needed on each page before design.
3) It helps the web designer to spend time and really focus on the very layout/content of a website to make website structure more equate. Same goes for a mobile designer.
4) It specifies a clear set of visual specifications for designers and developers.
5) It provides an interface where clients also involved in the planning process.
6) And most importantly sets fallback points to avoid scope creeps and rework. Which can save your time, money and efforts by clarifying important development steps upfront.
Wireframing Process
Tools for Wireframing
1) Omnigraffle — With the help of Omnigraffle you can easily create diagrams, process charts, quick page layouts and website mockups
2) Visio — This tool helps to visualize, explore, and communicate complex information.
3) Balsamiq — With the help of this amazing tool you can easily and quickly created rough mockups with predefined elements, site maps. For web and mobile. (Personal favorite)
4) iPlotz — If you want to quickly sketch wireframes of Web sites and demonstrate navigation between pages you must consider this tool in your collection.
5) Jumpchart — This tool is used for Online collaborative wireframe
6) Gliffy — Create website wireframes and share web mockups with anyone.
And there are much more such tools. Previously I had written and article on UI Tiles for wireframing.
I hope this post will help you to understand and get a clear idea of what a wireframe is and how to go about. Wireframing the user interface to convey your design ideas. If you have nay questions or doubts, feel free to comment below or conatct me.
What’s next? Start downloading one of the tools and play around with it.
Bonus: Go ahead and download the free e-book provided by UXPin “The Guide to Wireframing”
