Wireframes 101

Sanket Doshi
by Sanket Doshi 09 Jun, 2017
Only designers know - through each process they establish and every step they take - how they actually get closer to the design of their preference. It does not happen instantaneously as some employers or peers may expect.

The beautiful typeface, crisp color scheme and a perfectly eye-catching layout, all these just do not happen without following a process - and wireframing plays a big role. In order for a designer's wireframe to deliver an effective Web design, they need to remember certain principles.

wireframe-example

A pretty design is not always the effective design

Have you ever heard someone praising a design simply because it looks modern or sleak? Such moments are nevertheless trying for a designer. Before designers feel the silent push upon their ego, they should remember that "a pretty design" can be the worst compliment if it actually cannot help the user. Consider the Web conventions users expect and don't sacrifice function for fashion.

It must be playful as well

So, now that you have started putting the design elements into the respective wireframes, it is time to remember a crucial principle. The wireframing phase particularly needs lot of experimentation and creative outburst. You can be overly creative in the wireframing process - like adding interactive content. Once finalized, things start to get dialed back, removed, placed, improved, etc. 

Trends are OK as long as you do not get biased to them 

Looking at competitors, you may want to stay up to date with specific design trends. Don't, however, let the fear of missing out surpass the need for conversion-based elements.

Putting it together, while thinking about constraints

Way before the design is actually finalized, figure out the constraints like budget, project schedule, number of tools required, etc. Each constraint can significantly take a toll on the project expectations, so consider these as versions of the wireframes are created.

Happy Brainstorming

Design is what grabs attention and takes the customers through the buying process. Naturally, it deserves more brainstorming than other other areas. Wireframing is where this brainstorming about design takes place.

About the Author

Sanket Doshi is a founder of Elitech Systems, a Magento development company, where he works to bring client ideas to reality. He enjoys pushing the limits of user interaction and finding ways to create awesome reusable components within a Web environment.