Before you start designing, there are several things you should look at first. I always find these extra initial steps help when you eventually do start diving into designing for your next project – and even though these tasks add a little time to the beginning of a project, it will be more than made up later on down the line.
The first thing you should start to do when you’re working on a new project is plan. I can’t stress how important the planning stage is – when you have a project that is well planned, it’s much more likely that the project will run smoothly and without as many problems or challenges.
The main things you need to think about when planning are related mostly to content – the content that you have to work with (hopefully the full, real content that will be in use on the site), how the content hierarchy works and fits together, a website site map and more. However, as well as all the work to do with content you may want to start looking at the structure of the project, workable deadlines and the scope of the project.
Working With Content
It’s super important when designing sites to abandon the Lorem Ipsum (or alternative filler text) and work with real content. This sometimes isn’t always possible, but as a freelancer I always push for the client to provide me with the content they’re wanting on the site.
If you don’t work with real content then you run the risk of designing without proper context, and without that you can’t make design decisions that will benefit the users and their experiences when interacting with your website.
When working on a design, working with real content means that you can see how this content interacts with the other design elements on a page. This is even more important with the introduction of responsive design – as we can see how the real content interacts and responds at particular viewports and sizes.
Sorting Content
Once you have the content in front of you, the first thing you want to do is analyse it and see if you can spot anything that needs changing or removing. You’ll likely have been supplied the content in what the client deems to be separate pages – so homepage content, about page content, etc. – but if not, then you’ll want to aim to start doing that yourselves.
Sarah Parmenter briefly touched upon this at Responsive Day Out in Brighton in March where she talked about analysing content in a traffic light system.
Whenever Sarah and her team receive content for a project, they go through and assign three colours to the content: for content they want to keep they mark it as green and for content that they know is unnecessary or is unneeded they mark it as red – and that content is removed. Those bits of content that end up in between the two extremes are marked as orange or yellow (or amber, if you’re into traffic light specifics!), to be looked at again in discussions with the client.
I think this is a really good technique to quite easily sort through content that you receive – it’s quick and very easy to visually look through and spot which bits of content you need to pay attention to.
When you’re sorting content, you also want to try and think about the relationships between all of the content. Like you would when developing a site, look to see if you can spot any modular or common patterns to the content and keep these in mind.
Content Hierarchy
Hierarchy is described as “a system or organisation in which people or groups are ranked one above the other” – and this relates exactly to how we can work with content hierarchy. In ideal terms, what we are trying to do is create a system that works to display our content in a meaningful and useful way.
When you are sorting through your content, ensure that you are always thinking about how the content relates and will be laid out – here you really want to think about making the content as easy to digest as possible. Think about using headings, lists, quotes, imagery and more to break up the content and make it easier to communicate more focused messages to the users.
Sitemaps
Having sorted through the content and making any relevant changes as you go along you should hopefully end up with a finished heap of content to work with. Once you’re happy with the state of the content, you need to start looking at how this content will work on the website itself.
This is a basic sitemap created using MindnodePro. If you have a small website (such as this) it’s sometimes an idea to add the elements you want on a page in the sitemap as well.
You can choose to create a site map once you’re happy with your final content but feel free to use them at the very beginning, as soon as you have the original, supplied content.
I find site maps great – they’re a brilliant visual aid to see the state of the website, how many pages there might be and the relationship between all of the pages. This can often be more easy to see through a site map, as you get to remove all of the clutter that pages of content can bring.
Creating a sitemap is a great example of where good planning will help you throughout the lifetime of a project. The great thing about sitemaps – whether you use a bunch of post-its on a whiteboard or create one digitally – is that it makes it really easy to spot where potential problems could be and have the power to fix them before getting stuck into the design.
Assignments
- Working with some real content (it can even be from a past project), go through and usethe traffic light system on the content. Remember, eliminate unnecessary content, keep content that works well and mark any you’re unsure of for future referencing.
- Putting into practice all the tips on site maps, create a sitemap with the content you’ve just been working with. Remember that when sorting your content you are looking for common elements and modules of content, just like you would with chunks of code. Do your best to section off all the different parts to your content to create a sitemap with all of the individual pages you think will be required on the website.
notebook 