Today, I received wireframes from the designer on my team for the web application I’m building using Angular 2. This blog post is about my thought son using wireframes and why wireframing is an important stage in web development.

TL;DR

The importance of wireframes in web development.

Wireframes are simple layouts that outline the specific size and placement of page elements, features, navigations, and interactive items on the site. It can be a black and white structure, a hand-drawn sketch, and even a layout that resembles the final product.

Wireframes at my company are usually created in several stages. First, a pencil sketch type wireframe is drafted with minimal functionality using mock-up tools and user testing is performed on those mock-ups. During the testing user’s interaction and voice is recorded, which is later analyzed to improve the mock-ups. After several iterations of this process, the designer creates wireframes that very closely resembles the final product that is handed over to the front-end developers.

I have realized that there are several benefits of using wireframes. First, wireframes turn the abstract ideas and sitemaps into something real and tangible without distractions, making sure everyone is on the same page. It allows companies to clarify website feature among clients while pushing usability to the forefront. Wireframes are easier to update than redesigning the entire website.

As a front-end developer, it reduces latency in development since everyone is on the same page of what the final product would look like, making the development process a little easier. In the future, this is obviously something that I would like to integrate into my personal work-flow.