What is a wireframe?


As with any design process, the early stages are full of excitement, brainstorming, and of course strategy. At FirstPage, we focus on a few main goals for the new website and develop strategies around achieving those goals. A wireframe allows our design team to articulate our strategies in the form a physical drawing. A wise person once said, a picture is worth a thousand words!

A wireframe is a blueprint

A wireframe is a simplified drawing of the layouts that make up the design of a website. They often have basic versions of page elements, site features, navigation areas, and content blocks. They are usually devoid of colour, font choices, logos, or any other real design elements. A wireframe focuses entirely on a site’s structure.

A wireframe is sometimes compared with the blueprint of a home. Blueprints outline the structural placement of plumbing, electrical, and other structural elements without showing the interior design of the home. Similarly for a website design, you can’t start building pixels, or writing chunks of code, without knowing where the content is going to go.

Web Design Blue Print

Wireframes focus conversation on structure and layout

Producing a wireframe is a crucial step in any screen design process. When our team starts the design process, many ideas will bubble up. The process of wireframing helps the team streamline these ideas. This helps us quickly determining which ideas are good and which ones are bad. It also focuses the team on website structure instead of cool design elements.

Why we show our wireframes to our clients

Showing the blueprints to our clients is crucial. We want our clients to understand the thought process that went behind our design decisions. Presenting wireframes also helps focus the conversation during early stages of the website’s design to structural elements like navigation layout, website features, and user experience. Once the groundwork is approved, we move into design. At that point, the conversation shifts from website structure to brand tone, thematic messages, and cool design elements.

Wireframes produce better performing websites

Experience has shown that wireframing will produce better websites that generate leads and help increase revenue. If your website isn’t performing properly, contact us and we will get the conversation going.