⏰ 1 MIN LEFT: 60% off ALL freelancing products ends tonight! →
Matt Olpinski Company Website

The Purpose of Wireframes

Get answers to 100+ of your biggest freelancing questions
Download my FREE 52-page book!

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.

50-Page eBook Mastering Portfolio Websites Make strategic improvements to your website to attract high-value clients to your freelancing business. Stop chasing down work and transform your portfolio website into a powerful client-magnet that will help your freelance business thrive. View Product

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.

Last updated on April 15th, 2020

About Matt Olpinski
Matt runs his own web design and development company Matthew’s Design Co. and teaches thousands of freelancers how to succeed through his personal blog, newsletter, and community for freelancers — The Freelance Institute.
Get my FREE book when you join my Saturday morning newsletter!
Get my most popular 52-page eBook that answers 101 most common freelancing questions and covers 12 key freelancing topics!
Free when you join my newsletter. No spam. Unsubscribe any time.