ECommerce Website Wireframes: Taking Your Ideas To Your ECommerce Web Designer

Having an idea of what you want your website to look like in advance will save you time and money when you hire an ecommerce web designer. Wireframes are an easy way to communicate site layout ideas to your designer. The following diagram shows a very simple layout for a sample homepage.  The point is to not necessarily show a “best practices” layout, but rather show you what the diagram can look like.  This type of wireframe can be created using any  software tool that can draw basic shapes like Microsoft Visio, or even hand drawn on paper (which is my tool of choice).

Some ecommerce platforms and shopping carts that come with predefined templates often limit the scope in which you can change page designs.  If that is the case, its best to work within the limits of each systems capabilities, but a wireframe can still be helpful to show what elements should go where.  For example, you can indicate where your phone number and contact information should be placed. You can also indicate where your shipping information, return policy, etc go. Besides the homepage, you can create wireframes for product category, product detail, checkout pages, etc. Having a basic layout on paper can remove ambiguity in your site requirements and provide a basis for documentation of requirements.  When working with web design companies always make sure requirements are fully documented and agreed to in advance.  Be prepared to be flexible with your designs, because sometimes web designers are limited in what they can do based on a chosen platform.   Work together to come up with an agreed upon solution that benefits everybody and is realistic based on your budget.

Another technique I use to communicate with ecommerce web designers is to keep a portfolio of sites I like and circle or highlight features or techniques on the page that you think would be good for your design.  This helps add a visual element to your conversations with your developer and can help communicate your ideas in a way that is easy to see.   In fact,  whenever I come across a site that has some aspect of design I like, I try to print off the particular page and throw it in a binder so I can have a reference to it later should I need it.  On each page I try to make handwritten notes as to what I found interesting or what caught my eye.

Wireframes, are only part of the overall design process and you should obviously seek feedback from the designers as to what works best in your case, but it sure makes it easy when communicating with people who “think visually” as many designers do.