The Web Design Process Part 2: Information Architecture

In yesterday’s post we looked at where to start when you’re designing a website. The first step was to gather your information from the client (or yourself if you’re making your own website). The next part of the process is to scrutinize, analyze and organize the information that you’ve gathered. This part of the web design process falls under the term “Information Architecture” and this post gives a general overview of how it works.

Information Architecture

Information architecture is defined by the Information Architecture Institute as follows:
    1. The combination of organization, labeling, navigation schemes and retrieval mechanisms within an information space.
    2. The structural design of an information space to facilitate task completion and intuitive access to Content.
    3. The art and science of structuring and classifying websites, intranets and all other organizational information repositories to help people find and manage information.
    4. An emerging discipline and Community Of Practice focused on bringing principles of design and architecture to the digital and paper-based landscape.

That may sound a little complicated if you’re just getting started with your first site. For large websites or information systems, Information Architecture is an entire career field of its own.  But the principles can be applied to and are an important foundation for small websites too.

InformationArchitecture

Image by murdocke23

So when you start to look at the information you’ve brought back from your client meeting, you should have answers to your many questions, now you have to decide how the information should be arranged. How can you make it easy for people to find the information they want on the client’s website. At this stage of the design process you need to focus on organizing the content and flow of the website into a structure that you will create your site around.

The tools required at this point are something everyone has at home. A pen (or pencil) and lots of paper. Some people use post-it or sticky notes as they’re easy to move around. From the information you’ve gathered, group the parts of the website that go logically together. For example, if the client has a lot of information about their company, you may like to break it up into pieces such as About Us with a sub menu of Our Team,

Think about how many clicks it will take to find information and don’t bury content too many clicks deep. It’s so much easier to work all this out on paper or sticky notes before even turning on your computer and it’s worth taking the time to figure out the best flow and organization for the site at this stage. Once you’ve worked this out, the next step is implementation.

In the next part of this series, we’ll look at how to implement your organization.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Dan

    Hi Jennifer,

    excelent, very good article, but the link is broken ‘yesterday’s post we looked at where to start when you’re designing a web site.’

    Regards

  • Chris Blair

    I can’t seem to find yesterday’s entry. I get a 404 error on the link above.

  • zaidybaby

    I’m also getting an Error 404 on the link to start.

    But this part is GOOOD! Thanks Jennifer

  • Ced

    Yep, there’s an Error 404 at http://blogs.sitepoint.com/2010/11/16/the-web-design-process-part-1-discovery/!

    Please get the page available!!

  • http://www.laughingliondesign.net Jennifer Farley

    Hi guys, apologies for the link error, I think there were some ghosts in the machine. Anyway the link has been fixed and the first part is here – http://blogs.sitepoint.com/2010/11/17/the-web-design-process-part-1-discovery/

  • pebcak-error

    So far the first 2 articles have lined up with my own process. I’m eager to see the rest of the series. I’ll admit if usability testing isn’t in there at some point I’ll be a little disappointed. Keep up the great articles.