Design Theory

Planning a Design Project


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.


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.


  • Working with some real content (it can even be from a past project), go through and use the 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.
Related Posts
  • Web Design
    How to Become a Conversion-Centered DesignerUnbounce
    So you want to be a landing page template designer? You may think you have it easy - after all, landing page templates are just a single page. That’s much easier than designing a full-on website. But the rules of design change quite a bit when building conversion-centered landing pages.Read More…
  • Code
    The Beginner’s Guide to WordPress SEO by Yoast: Final TweakingThe beginners guide to wordpress seo by yoast
    In my previous article, I discussed the social settings of Yoast's WordPress SEO plugin. In this tutorial, you will learn the final steps to configuring the WordPress SEO plugin with the ultimate goal of making it as rock-solid as possible for your blog.Read More…
  • Design & Illustration
    Interview With Sarah SilverSarah silver preview400
    As the Photoshop Editor for Tuts+, I am fortunate enough, on occasion, to meet some very talented photographers and retouchers. Recently, I had some time to chat with one of my favorites, Sarah Silver, a New York-based photographer and director that has worked on some very exciting projects for Vogue, TRESemmé, and America's Next Top Model, to name just a few.Read More…
  • Web Design
    Design Theory
    An Introduction to HierarchyDsfd hierarchy retina
    Ensuring that your designs present a clear hierarchy is very important, and something that you should aim for in every one of your designs. There’s definitely an art to this, one which relates heavily back to your content planning and strategy stage.Read More…
  • Business
    The Top WordPress Plugins You Need for Your Authority Blog5 preview authority blog wordpress plugins
    In the last post we got your blog setup with a unique-looking design courtesy of the Canvas theme framework. But aesthetics are just one piece of the puzzle -- in reality, any successful blog needs to function well in order to succeed. Although WordPress has great functionality out the box, its true power lies in its extensibility, which is exactly what we're going to cover today. I'm going to take you through the top WordPress plugins you can use to elevate your authority site to another level. We're going to cover everything from backups, to security, to search engine optimization, to post promotion and more. This step-by-step guide will show you how to install and setup each of the WordPress plugins I consider to be must-haves for authority site owners. Enjoy!Read More…
  • Web Design
    Design Theory
    Introducing Wireframes to Your Design ProcessDsfd wireframes retina
    After sketching, there is one final thing you should work on before starting to design (although, admittedly, this is all part of designing). Wireframing is essentially a visual guide to a website which helps you to look at layout without thinking about the aesthetics of the project.Read More…