This article is Part 2 of a 5 Part series shedding some light into our Web Design Process. This article explains how establishing an architecture and starting first with a prototype is always a winning strategy.
We now have a foundation capable of taking us through the web design project after dedicating time and resources to research and planning. With critical questions answered and a clear path forward established, we’re now ready to work on some tangibles. Here, we’ll want to look critically at establishing a sitemap and creating a design blueprint for us to move forward on. Just as you would never build a house without first telling an architect what your requirements are (such as square footage, number of bedrooms and baths, and other important information), the same is true of a website. Before starting the design process, we’ll want to see how your website will be laid out and provide you with a blueprint (in our world – a wireframe) for you to see.
Web Site Architecture – Your Sitemap
Just as a house has definable attributes, the same is true of a website. As a simple example, your website will have a series of pages starting at the top with the Home Page. Under the Home Page, this website will have an About Us Page, a Services Page (which will also have several pages dedicated to individual services), and a Contact Us Page. A Sitemap document will look a little like the following.
Identifying your site’s primary structure will get us started on a pivotal piece of your website’s architecture: the navigation. Providing an efficient, consistent navigation is a key input in keeping your visitor’s engaged. Overly complicated navigational structures can cause an increase in your bounce rate, or the rate of visitors who visit your site and do not click anything and continue on about their business elsewhere.
However, over simplifying your navigation can be equally troublesome. If your visitors aren’t able to find information quickly and easily, you’ll see the same bounce rate increase as a result. The key here is efficiency. Get your visitors to where they want to go with the least amount of clicks.
Wireframes – Your Website’s Blueprint
We mentioned before that you would never build a house without a blueprint. It’s equally important to blueprint your website before building as well. Yet we run across so many who skip this process altogether. At its best, the blueprint speeds up the design process and yields a more efficient work flow between vendor and client. The wireframe gets both parties on the same page before moving forward to design. Using this document, we can show you our vision of the website in block form before ever firing up Photoshop to begin design.
It may not look like much to begin with, but there’s a lot of important information inside a document like this. With a wireframe, we determine up front where content is, where image placement is, how the navigation relates to the header and the rest of the website, and other important elements such as this. It’s much easier to move things around in this phase if we’re not on the same page as you. If we skipped the wireframe and went straight to design and spent hours polishing the look and feel around the content and then found out that the layout is not what you were expecting, we would have to go back to the drawing board and start over which ultimately means more man hours and an increased budget.
With a firm understanding of your websites architecture and with a wireframe in hand, we’re ready for the fun stuff: Part 3 – Design.
