Website Prototypes: Blueprints of the Web

Creating website prototypes is just as critical to the process of building a website as blueprints are to building a house. Without a blueprint, the plumbing from your shower might end up creating a pond in your front yard, or more likely, will cost three times what it should have in order to re-do it correctly. Working out a blueprint is the least costly way to make changes to your floorplans, rearrange your plumbing and electrical design, and play with ideas to create what will become a house you love.

It is much the same with building websites. It often seems to people that the first step in creating a website would be to design how it looks. It seems at first that it might be obvious what goes on the page, what goes where, and how the content flows. However, once you dive in, you’ll discover that there is a lot of thought, planning, and testing that needs to be done to figure out those basic things first – before doing any design or build.

Here is how one thing leads to another.

This is the prototype we used for our 435 Digital website, showing the desktop view.

435 Digital prototype

This is the prototype we used for our 435 Digital website, showing the mobile view as seen in an iPhone. We had additional views and full smartphone layouts, as well. However, this is one example.

435 Digital Mobile Website Prototype

This is the final design that you see on the site today, in the desktop view.

435 Digital website design

And this is the final design in the mobile view, as a screenshot captured on an iPhone.

435 Digital mobile website design

It brings the prototype to life. The designer was free to focus on font and color and overall look – all the elements of design – without getting distracted by changes to the actual elements that would appear. And our business and web development teams were able to work together to decide on specific elements and placement in an efficient and cost-effective way.

There are multiple ways of doing prototypes. They can be simply sketches, they can be online and interactive, they can even include some design. The most important thing is to do the prototype early in the web development process – before the design and before the site development.

If you begin building your new kitchen without a blueprint, you are going to make many more trips to the store for wood and tile and cabinets than you would if you had everything specified ahead of time. For building websites, the designer needs to know the layout and flow, and the developer needs to know the layout, flow, and functionality in order to write clean code efficiently. All of this means a reasonable cost for the business and a better website in the end.

Tags: ,