The Freelance Institute
Join an exclusive Slack community for freelancers dedicated to learning and professional growth.
Join the Community

The Purpose of Wireframes

Hi, I'm Matt Olpinski

I teach thousands of freelancers how to get more clients, raise their rates, and create a better life for themselves.

Updated: May 18, 2014

Wireframes are the skeleton or structure behind the user interface. They don’t define the “look and feel”, but rather the layout, hierarchy, and interactions that make a good “user experience”.

Everyone has a different style of wireframing. Some people create rough sketches, others create detailed blueprints. There is no right or wrong answer here. In my experience, the level of detail is dictated by the complexity of the website or application.

I recently read an article on Creative Bloq called Why Wireframes Should Be Left to Die that implores the use of rapid prototyping through HTML, CSS, and Javascript over the use of wireframes through PSD/AI files. However, the reasoning is centered around a bad wireframing process rather than wireframes being bad in principle and because it’s written with such authority, it’s easily believable.

There IS a place for wireframing within the design and development process, despite the lies Creative Bloq is spreading. I, along with many of the best design professionals in the world, consider it a requirement. There is also a place for rapid prototyping. One is not a supplement for the other, as the article suggests.

Regardless of which you choose, you are still performing a step between strategy and design and it’s basically the same thing – using tools or documentation to convey concepts or ideas. Furthermore, it takes more time, thinking, and skills to create rapid prototypes through HTML, CSS, and Javascript than it does to create a PSD mockup using a blue box and Helvetica.

Wireframes serve 2 purposes. They establish the structure and user experience for the website or interface and provide a way to communicate that with the client. Regardless of how you construct and deliver your wireframes, you’re wasting your time if the wireframes are not fulfilling those 2 purposes.

Looking to increase your knowledge of user experience for your company or as a new career? A low-cost solution is Springboard’s UX Design Course that will take you through the fundamentals of user experience and apply your learning into real-world projects.