Wireframes – The Blueprints For Good Design

In our last blog post we discussed the conversations we had with the client, that resulted in the initial project brief. From then on we began designing and building a brand for that client. Unfortunately at this time we can’t reveal the brand and hence the branding around the client, so we are going to skip straight ahead to the initial wireframes we designed.

When designing the layout for a site we always start with paper and pen. This keeps the ideas quick and loose, with no right or wrong at this stage. We always keep a list of main elements that have to be on each page at hand, as well as the most important information that each page has to convey. This ensures everything on the site has a reason to be there. We are firm believers in simplicity, and anything that doesn’t earn its place gets dropped in this early stage. Once we are happy with the initial sketches we build a quick wireframe of the main pages. Sometimes a wireframe isn’t enough to convey a site, especially if it has some complex UI elements. In these cases we build a prototype.

The main goal of wireframing is to build a firm idea that all parties understand without sacrificing too much time. With wireframes, changes can be made quickly and multiple avenues of thought can be explored before a final design is established. We try and keep the final design outcome as close to the initial wireframes as possible, some things change, or don’t work quite as well in the final stages, but we have found that the closer to the wireframes the site is, the better.

Ecommerce Project Wireframe Home Page

The brief called for a simple site with a strong emphasis on product. The brand is elegant with a strong color contrast. We’ve got some great photography available to use, so these should become the hero of the site. Nowhere is this more evident than the homepage. From the outset the client wanted full screen images to really push the product. With that in mind we kept the header and footer really simple. Homepage text would also be a part of the hero images. This left us an area where we added a small and simple navigation to reinforce the product lines.

Ecommerce Project Wireframe Home Page

With the category page simplicity was again the key. With only thirty products over the main site, and a maximum of fourteen a page, customers wouldn’t have trouble finding what they wanted. Keeping this in mind we decided a search and filter weren’t needed and that we could use the full width of the page to view the products.

The client wanted to create hero products, so throughout the wireframe, we added an area for a larger image, which visually helped break up the page.

Ecommerce Project Wireframe Home Page

The product page followed the same idea encountered throughout the rest of the site, that the product images were key. We created an unorthodox page with the product image taking up the full width of the screen. With thumbnail images in easy reach. Descriptions and specifications are not as important to the customer as to how it looks, so these can be pushed down the page. Price and the add to cart button are always important on the product page, so here they sit on the hero image, and hopefully won’t be missed.

These pages will be viewed mostly by customers and make up the bulk of the design decisions on the site. Getting these right for the target market is vital for a successful e-commerce strategy. These wireframes alongside the brand ideas and initial styling formed a project proposal which was sent to the client for feedback. We keep clients as involved in the design process as possible, their knowledge of the business, market and customers is invaluable in this early stage. In this case, together with the client we made some small changes before the final wireframes were completed.

The next stage was to use these wireframes to complete the overall design of the site. In our next post we take you through this stage and the decisions we came to and the problems we had, before a final site design was signed off.