When It Comes to Website Design, Don't Just "Make it Pretty"
Now that you have become savvy on the human mind (in Part 1 of this series) and have a better understanding of how online users think, it is time to use this knowledge to build a wireframe (i.e your website's blueprint) and work on the structure of your site.
Structural & Functional Planning
Q: Do I use a CMS or custom-code the website? (This question is for developers but is also something a designer should have an answer to before the design is started.)
A: Either / or … but for a better result, I would use Hubspot.
“With HubSpot Medium and HubSpot Large you get the flexibility to use HubSpot's inbound marketing software tools in conjunction with your existing, locally-hosted web site, instead of moving to a HubSpot-hosted site. This includes integration of HubSpot marketing analytics tools, lead-tracking, lead nurturing and Salesforce.com.” – Hubspot
There are other CMS options, such as WordPress, Joomla, and many others. Check out The List if you want to know almost all of the CMS options out there. But make no mistake, Hubspot offers qualities above and beyond the offerings of the listed CMS options. Not all CMS options are the same, and they differ greatly in ease of use.
E-commerce Design with Magento
Magento is an incredible e-commerce tool for developers, because it offers open source code, which means it can be modified by a knowledgeable developer with little restriction. And in the community version of Magento, the client does not have to worry about monthly licensing fees. When using Magneto, a paid plan is advisable due to the occasional bug in the community version.
Learn more about Magento's e-commerce solution:
- The Secret Behind Magento's Popularity
- Designer's Guide to Magento
Once you have gone through the material you will better know the range of pages you have to design. Also, you may want to download a free template as a reference (used to gauge and inspire but not to call your own) to judge dimensions, and ensure you are designing for all elements and pages needed. Use this as a beautiful reference for your next Magento Community design.
Please note that there are multitudes of e-commerce CMS options out there. I choose Magento based on personal preference.
Layout Planning
Navigation
Try to keep the top navigation 1-2 levels deep, max. In smaller websites, sole top navigations are not much of an issue, but in the case of an e-commerce site with an intricate structure of links, a top and side navigation are strongly suggested.
How many levels deep does your multi-tiered sub-navigation go? This depends on the number of products, but I would recommend you never go more than 3 layers deep. If you make the viewer click beyond 3 levels, they are likely to get disinterested and stop clicking. Direct the viewer where they need to go with the least number of clicks.
Sitemap
A sitemap is simply a list of links and sub links that will be on the website. You could have the client submit a document or diagram of how they would like their links to tier. Also, there are many diagram mapping programs you could use. Try out Gliffy.
Multiple Columns
The most common layout is a 3-column, but you have to analyze what is best for usability and functionality. To help you with columns, there are grid planning tools that come in handy. You do not have to use grid tools, but they are useful in creating a more balanced design.
- Design By Grid: Amazing tool - you figure out your column width, gutter width, number of columns, and the max width of the site, and it generates a png grid for your use.
- NetProtozo Grid Generator: Does the same as Design By Grid but is a bit more advanced.
Wireframing
Used as a rough web blueprint or core view of how things will be placed on a webpage, a wireframe features few, if any, visual indicators of the future theme or design. Creating and using a wireframe will give you a chance to get a concrete plan for the webpage before spending large amounts of time on unnecessary design elements. Want to try out wireframe creation? Check out the links below:
- MockFlow – This is a browser-based wireframing tool with free and low-cost versions to use. After signing up for a free account, I was impressed with their GUI and most enamored with the ‘Real-Time Design Collaboration’ feature that allows you to engage with co-workers while your wireframe is in the creation stage. Also, Mockflow allows creation of a ‘clickable prototype’ website for showing your clients.
- Learn about 14 other wireframing tools, Courtesy of UX Booth.
These are some but not all of the elements of planning for the structure, layout, and function of your next web project.
Have an article on web site structure or functionality that you would like to share? Please post it in the comment box below.
Thanks for reading! Next Week, Part 3: "Design, Plan, and Conquer"
Missed last week's? Check out Part 1: "Viewer Usability."