Planning a Website Using Wireframes
You may choose to design and build your website yourself using a simple Content Management System (CMS) like WordPress or Magento, or outsource this work if it seems a bit too technical for you. Either way, you will need to develop a concept and define the structure of your site, so that you can move on to the development stage.
Keep in mind the primary purpose of your website: if it is an e-commerce site, your primary purpose is to sell! Therefore present the design of the site in an easy to navigate, uncluttered format that allows customers to quickly find your great products, and gives them confidence to make their purchase.
Your Website Wireframe
A wireframe is a graphical map of your website, detailing what each page will look like and the functionality required. Wireframes are usually created with or by a designer; however it will greatly speed up your site development (and lower your design costs) if you map this stage out yourself first.
You might want to use an online tool such as http://iplotz.com/ or https://balsamiq.com/products/mockups/, which can help you sketch out the basic wireframes for free (or you pay extra for more functionality).
In most websites, you will want to include the following web pages:
- Home page
- About us page
- Contact us page
- Frequently Asked Questions page
- Sales pages: product list pages & product detail pages
- Shopping cart page
- Checkout page
- Thank you for purchasing page
- Terms and conditions and privacy policy page
When you are designing your wireframes, think about the customer journey and how they will navigate your site. You may want to ask yourself the following questions during this process:
- What is the main purpose of the site?
- What will an average or ideal customer journey look like?
- How can I make the site easy to navigate for first time visitors?
- How is the layout of similar sites, and what will my customers expect?
The clearer you can define your wireframes, the quicker you can move through the website development stage, as you’ll then have a strong roadmap for what you want to achieve and how it will look.
KIS – Keep it Simple!
Keeping it simple is a good idea at the beginning; once you have a functional site that is capable of bringing in revenue you can then add the bells and whistles (if necessary).
Anything is possible in web design and functionality, but you will pay for this with longer development time and larger setup costs, delaying your chances of making sales.
Also, try to build the site so that even your mother or grandmother could navigate it easily; don’t assume that just because you find it easy to use, others will too. In many cases, sites that are not obviously easy to navigate miss out on customers that cannot be bothered to stay and find their way around.
You should test this later on a number of people, but getting it solid from the beginning will save you extra development work and generate more revenue in the meantime.
If you’re designing an e-commerce process, try to include minimal steps in your sales funnel.
Make it linear and no more than three pages: from shopping cart to checkout page to thank you page. Giving too many options, or distracting the customer mid-purchase, can result in suboptimal sales results.
A strong wireframe will help you visually map out how your site will look, feel, and function. When this task is complete (which may take several revisions), you will have a strong mock-up of your website, the user experience, and the customer journey towards your website’s goals. Planning a website using wireframes may take time, but it is definitely well worth the effort spent. So go on, get to it!
