In the first of our project process series, Josh introduced you to the Fifteen project start meetings. In this post, I’ll be outlining how sitemaps and wireframes form the next step in the process.
Site-mapping and wire-framing are crucial to the overall quality of the final website because this is the stage where you’ll be considering your website’s architecture; how will the website work? What will be in your navigation menu and how will your pages be laid out? I often think that one of the most challenging aspects of the site-mapping and the wire-framing process is understanding that sitemaps are not intended to look visually appealing. If you’re a visual person and you respond to pretty, aesthetically-pleasing things, then staring at a sitemap or wireframe can be pretty underwhelming.
A sitemap or a wireframe will almost always be very bland in colour and contain minimal words; I like to describe it as the skeleton to the website. Once the skeleton (sitemaps and wireframes) have been considered and formed, then all of the muscles, skin and pretty human elements of the website will gradually start to come alive through design and build.
Site-mapping
If you have an existing website, you’re probably sick and tired of looking at it by now and can’t wait for a new one! Despite this, it’s important to ensure you don’t discard your old website just yet because it could be pivotal in determining the overall success of your new one.
Does your current website’s sitemap work for your audience and your brand? One way to answer these questions is to install and use Google Analytics so that you can review which pages are performing better than others. Google Analytics will assess how efficient your website is for the user and help to support the decisions you make for the new sitemap. If you are about to embark on the new website journey, understanding your ‘what and why’ is important to determine how successful your new website will be. If you make the decision to remove some pages, you should consider re-directs and have a good think about where these pages will lead to.
Your navigation menu bar needs some attention too; the first and last items on the menu are most probably the most used, so take the time to consider your priority web pages. If you’re an e-commerce company, think about the structure of your products carefully and strategically. The same goes for page lists in your sitemap. If you know one of your products holds more value, place it at either the top or bottom of your product list.
Although sitemaps are important, they don’t always show each and every user step. If you have a very large website it could take a long while to complete each detailed step of the user journey. For example, a sitemap may not show the steps of a checkout process such as register, log in, buy, basket, payment details, review, confirm. These elements should still be thought about at sitemap stage, but would normally be addressed further down the line during the wire-framing process.
Try to use your imagination to help with simplifying the sitemap process. A list of similar pages in your sitemap may follow the same template and will, therefore, look the same in structure, but ultimately contain different content. It’s not always as complicated as it first may seem!
Wire-framing
Once the sitemap has been produced and you’re happy, we’ll move onto the wireframes. The wireframes are created using the information gathered at the project start meeting and during the audience/user journey research.
Heat Mapping will often be installed during the user research journey to see how a user navigates around a site. The more we can tailor the website to suit the user’s natural actions, the more we’ll be delivering the right website for your audience.
To kick start the wire-frames, our designer will refer back to the sitemap and first consider top level items from this list, they’ll look at what’s to follow after top level items, and assess which pages follow the same template and they’ll also begin to include hidden pages that were excluded from the sitemap.
Websites that are more complex should always have full wire-framing completed. Unlike the sitemap, the wireframe can include pop up boxes, user instructions, and some aspects of colour if areas of the website are colour coded for specific reasons. On the whole, the wireframe would normally be a more detailed shell of the website. It’s basically a wonderfully structured face with no make-up!
Pre-production can often be neglected in the rush to meet a tight deadline, but it’s essential to knuckle down with pre-production during the project process. At site-mapping and wire-framing stage, you’ll have the opportunity to make any major changes to the functionality of the website prior to the application of the prettiness during the design and build phase. Taking the time to understand and consider the logic of your website at the pre-production stage will significantly save time and money later down the line.
Try to be open minded about your knowledge of the website process too. In previous projects, you may have always experienced some degree of site-mapping and wire-framing but it doesn’t mean you’ll need to do it on all projects. Always assess your business objectives to see if site-mapping and wire-framing are really what you need for your business and discuss this with your agency to get solid advice. The smaller and less complex the website, the more likely it is to go straight into design and build which should save you some time and budget.
Hopefully, you’ll now be fully up to speed with site-mapping and wire-framing, but if you’d like more advice and information please contact the office on 0115 932 5151 and our team will be more than happy to help. Next up, Josh will be discussing the pretty parts of the website project process; design and content creation.