Starting Out Organized: Website Content Planning The Right Way

Advertisement

So many articles explain how to design interfaces, design graphics and deal with clients. But one step in the Web development process is often skipped over or forgotten altogether: content planning. Sometimes called information architecture, or IA planning, this step doesn’t find a home easily in many people’s workflow. But rushing on to programming and pushing pixels makes for content that looks shoehorned rather than fully integrated and will only require late-game revisions.

Your New Project: How It Goes All Too Often

Day one

On day one things are great. You’ve landed a new job, the client is excited, you’re stoked and the project will be great. First things first: you have to collect the main materials to begin the design. You send the client an email asking for what you need.

On day two you get the following:

  • A TIFF logo (in CMYK) via email;
  • A set of logo standards that include the RGB values, via email (separately);
  • A disc full of photos with various names (like “DSC09080978″);
  • A fax that labels the photos according to their file names;
  • An email that lays out the top and second-level navigation, as the client sees it;
  • A phone that makes last-minute changes to the top-level navigation;
  • An email with a DOC attachment full of text for various pages (but not all of it).

And on day three you get an email that makes half of the junk you got yesterday obsolete.

You’re only three days in, and the project is already no fun. You got into Web design to make great layouts, solve problems and create functional art that breathes through programming. It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.

We know that a great website relies on all parts working in harmony. To achieve this, you have to start on the right foot at the beginning of the project. You need an organizational system that does the following things:

  • Allows you to organize deliverables from various media;
  • Lets you rapidly make changes when needed (it’s called planning for a reason: things change!);
  • Helps you collaborate with all stakeholders;
  • Shows how the project is developing and what’s left to do;
  • Ideally launches you into the actual design and building phase.

The Architecture: Every Brick Counts

The architecture

Your website’s users will have to “live” inside your website for a period of time. Because of this, some real-world architectural principles apply to website planning. A sense of context and “place” helps users find what they’re looking for. When we talk about the architecture of a website, we’re talking about the hierarchy of its navigation and its structure. We’re not talking about graphics, text or anything cosmetic.

You can plan your architecture in many ways.

Card Sorting

Index cards are an easy tool to use for car sorts

Card sorting1 is a way to organize content based on hierarchy. To try it, simply put all of the pages for your website onto index cards. Ask stakeholders to sort those cards into logical stacks that represent the hierarchy of your website’s navigation. It’s a great exercise to make sure that the content on your website can be found in the most logical place and that like-minded content is grouped and named appropriately.

  • What’s it for?
    To gather feedback on what pages should go where on your website.
  • What’s good about it?
    It’s a great way to learn the assumptions of multiple users.
  • What’s bad about it?
    The results should be taken with a grain of salt. Your participants will be making a lot of guesses and assumptions.
  • In sum
    One major task in website development is making people feel included. Card sorting is an interactive process that helps people feel like they are contributing.

A few resources to learn more about card sorting:

Content Inventories

Using a spreadsheet for a content inventory

A content inventory6 is a great way to understand the breadth of your website and the purpose of each page. Simply create a spreadsheet of all your pages and their corresponding URLs. But a content inventory gets much more useful when you add things like page notes and single-sentence summaries of why a page exists. Use a content inventory to quickly understand topography and figure out what should fit where. It is a great way to think through a redesign but may not be the best way to plan new websites.

  • What’s it for?
    To understand the context and purpose a website’s pages.
  • What’s good about it?
    Once it’s complete, dragging things around and playing with alternate navigation schemes is easy. It also makes it easy to see the topography of your website.
  • What’s bad about it?
    Laborious to create. It’s not of much use during the development phase, and it gets out of date pretty quickly.
  • In sum
    A content inventory is a great way to find unnecessary pages on your website. Forcing yourself to look at each page in turn and summarizing its usefulness nearly outweigh the disadvantages of this method.

A few resources to learn more about content inventories:

Paper and Sketchboards

sketchboarding

Sometimes paper9 just feels good. The free form allows for incredible expressiveness, and nothing is faster for capturing ideas. Unfortunately, the drawbacks are tough to ignore. Paper is easy to lose, hard to share, wasteful and not very useful past the early stages of a project. Eventually, everything for a website becomes digital, and so going digital as soon as possible is best. Use paper to capture thoughts in a meeting to brainstorm and to explore. But do yourself a favor and transcribe or scan the information as early as possible.

  • What’s it for?
    To quickly and collaboratively sketch out a website architecture.
  • What’s good about it?
    You can move pieces of paper around. And drawing with markers is fun. It’s also great for energizing a group and quickly scanning a lot of ideas.
  • What’s bad about it?
    Once your big sketchboard is complete, it has to be transcribed into another format to be useful.
  • In sum
    Beware the feel-good meeting! Sketchboard meetings are fun and seemingly productive, but you’ll often wonder afterwards what you actually achieved. Ideas come quickly, but the real work comes in deciding whether any of them are appropriate for the project.

A few resources to learn more about sketchboarding:

Site Map Diagrams

charts and graphs

A visual site map13 is quick to make, fairly expressive and easy to change. People have all sorts of methods for building site map diagrams. Whatever your tool, the diagram is a useful way to demonstrate hierarchy. It clearly shows the relationships between pages and tells you where your website is too shallow or deep.

  • What’s it for?
    To visually explain the relationships between pages on your website.
  • What’s good about it?
    Nothing better illustrates the hierarchy of a website than a diagram with lines and arrows indicating the relationships between pages. Clients naturally understand it.
  • What’s bad about it?
    The actual relationships between pages can be hard to grasp. What looks good on a chart might not work well on a website. And a site map diagram is not really useful during the development phase, quickly becoming a dead documents.
  • In sum
    A site map diagram is a quick way to sketch navigation and hierarchy. Don’t try to cram in other bits of information that just don’t fit.

A few resources to learn more about site maps and diagrams:

Which to Choose?

There is no one right way to plan the architecture for a website. Depending on the size of the website, you might use all of these techniques. They’re not opposed or mutually exclusive—just different means to similar ends.

When picking your method of architecture planning, consider these things:

  • How big is the website?
    The sheer size of some websites makes some of these methods cumbersome or impossible.
  • What type of website is it?
    The card-sorting method, for example, is perfect for e-commerce websites but overkill for blogs.
  • Who is your client?
    The less Web-savvy the client, the more elaborate your descriptions and plans will have to be. If your client understands websites, then you can be a bit more brief (but not too brief!).
  • Consider your workflow.
    Try out all of the ideas, and then pick a lightweight, simple process that you and your clients can understand. If you find yourself filling in information that isn’t useful or illustrative, then you’ve gone off track. Adopting a process that allows you to do the bare minimum is good in this case.

A few tips on architecture planning:

  • Organize content according to user needs, not an organizational chart or how the client structures their company.
  • Give pages clear and succinct names.
  • Be sympathetic. Think of your typical users, called personas16, and imagine them navigating the website. What would they be looking for?
  • Consider creating auxiliary way-finding pages. These pages would lie beyond the main navigation of your website and structure various pages according to specific user needs.
  • If you can’t succinctly explain why a page would be useful to someone, omit it.
  • Plan the architecture around the content. Don’t write content to fit the architecture.
  • When dealing with clients, especially clients at large companies with many departments, keeping egos in check can be tough. Keep everyone on point with constant reminders of the true goals of the website.
  • Not everything has to be a page. Use your hierarchy of content as a guide. Some items might work better as an FAQ entry or as sidebar content. Make sure your architecture-planning method does not blind you to this.

The Architecture Is The Home, Not The Content Itself

Like the website itself, each of your pages has a structure and hierarchy as well. The architecture helps users find the right page. The hierarchy and semantics help users find the right content on that page. Too often, copywriting is an afterthought in Web development. No matter how attractive, clever or interactive a website is, its main purpose is to convey information. A great website is designed around the content.

Most of the tools that are great for planning architecture are not so good for planning content. This causes many people to skip the process of content planning, to abandon their copywriters and to use their CMS as a content organizer (i.e. leaving it as an afterthought).

HTML Wireframes

your own wireframes

Making your own wireframe17 is a smart way to demonstrate your plans to collaborators. It’s a great visual tool and very expressive. The drawback of using manual wireframes is that they are… well, manual. You’ll end up spending time on the front-end getting everything just so and more time on every revision. While manual wireframes are the perfect tool for many DIY coders, keep things simple! If you over-design your wireframes, your client will focus more on cosmetics than substance.

  • What’s it for?
    HTML wireframes are a natural extension of other architecture-planning methods. They fill in the architecture by showing the content and markup on the pages.
  • What’s good about it?
    They’re illustrative and easy to understand. Clients immediately grasp them and how they translate to the next step.
  • What’s bad about it?
    Getting a structure that works can be tricky. You have to manually mark up content. And they’re not a great way to work with multiple collaborators.
  • In sum
    HTML wireframes are a great way to envision and plan website content. If you’re a freelancer or on a small team, they’re a great option.

A few tips on manual wireframes:

  • Once you get a good style sheet and structure, leave the wireframe alone. It’s not supposed to be elegant or beautiful. In fact, the fewer the distractions and the simpler, the better. The point is for people to concentrate on the content.
  • Work on naturally transitioning from wireframe to development. A simple script or some find-and-replace magic can put all that useful markup into your working product.
  • For simple websites, use wireframes in the first stage in development. If you mark up your content properly, you may only need CSS after that.

Plain Old Text

TextEditors

Many copywriters reach for MS Word or Apple Pages when starting to write website content. The simple tools are often the most useful and powerful. In this case, that’s only partly true. While text editors are a great way to quickly organize text, they have their drawbacks in website planning.

  • What’s it for?
    Text editors are a quick and easy way to organize text for a website.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their ubiquity and revision-tracking features make them great for collaboration.
  • What’s bad about it?
    The mark-up created by text editors doesn’t translate well into the Web world. Clients often don’t understand how a linear document translates into a free-form website architecture. Embedding images and attaching files to pages can make the document cumbersome and not great for migrating to the development stage.
  • In sum
    Text editors are useful for planning the actual text of a website. What’s missing is the navigation and how the attached files will be organized. Don’t prevent collaborators who are comfortable with text editors from working this way, but move the content into a more workable format quickly.

A few tips on using text editors for website planning:

  • If you’re using a text editor to organize website content, use RTF format instead of the proprietary file format of the editor. It will make a lot of things easier for you later.
  • Create a simple numbering system that makes the pages in your document correspond to the more visual architecture you have created separately.

Slides

Powerpoint

As with text editors, many people already own a tool that creates slides, such as PowerPoint or Keynote. In fact, for many office professionals, it’s the only layout tool they own. Thus, many websites are planned in PowerPoint. Its availability and relative ease of use make it a good option for some workflows.

  • What’s it good for?
    Slideshow creators are used to easily sketch the structure and to link pages.
  • What’s good about it?
    They’re readily available, and almost anyone can use them. Their basic layout features liberate many people who would otherwise struggle to convey their thoughts.
  • What’s bad about it?
    Slideshow creators are great at getting information in but poor at getting it back out. Their graphic creation abilities often complicate the goal of the process. (Plus, a lot of cute icons will suddenly start to appear in your content!)
  • In sum
    Slideshow tools are a great makeshift wireframe creator. They use a familiar process in a new way. But you’ll face a trade-off when you begin building the website.

A few tips on using slideshow creators for website planning:

  • Don’t get too creative with “designing” your pages. Avoid color, graphics and anything else that does not specifically illustrate the hierarchy of content.
  • Keep your system very simple. The goal is to make it illustrative and quick. The more complicated it is for you to drag pages and update links, the more reluctant you will be to explore new options for the layout.

Jumpchart

jumpchart

Jumpchart18 lets you make simple and quick HTML wireframes. Whatever planning method that works for you is a good one. But in our studio, we find that no tool gives us as much flexibility or momentum as Jumpchart, and that’s why it’s our tool of choice. It simply organizes content hierarchically, compiles feedback and exports to the next stage of the development process.

  • What’s it good for?
    Jumpchart is a natural extension of manual HTML wireframes.
  • What’s good about it?
    It automates some of the most important parts of the manual HTML wireframing process, with the collaboration and formatting options that many people want. It also exports.
  • What’s bad about it?
    Jumpchart requires a paid subscription to plan larger websites.
  • In sum
    Jumpchart is a great way for small teams and remote collaborators to visually organize content. The ability to export to XHTML and WordPress (WXR) makes for a rapid transition between the planning and development stages.

A few tips on using Jumpchart for website planning:

  • Use Jumpchart as a single spot for all the deliverables in your website project. Images and documents can be attached to individual pages.
  • Use the permission system to control who can see and who can edit.
  • For those who plan the content before the architecture (like us!), Jumpchart is a great way to ease into the site map.

Putting It All Together

Finding the right combination of tools and processes is an important part of planning a website. A lot of thought should go into even the smallest website. This can be daunting for even the best developer, but we’ve yet to cover one of the biggest obstacles to the development process: the client.

Calling the client an obstacle is not fair, of course, but it feels that way occasionally. Clients can throw a wrench in the cogs of the best process. Take pity on them, though. They have jobs and lives like the rest of us. This “website” thing is usually just another line on their long list of action items. To create a planning process that embraces the human component, consider how you can better accommodate their needs.

The Inevitable Revisions: Being Fleet of Foot

Fleet of foot

Clients change their minds. It’s in their genes to be indecisive and difficult. If they knew what the heck they were doing, they wouldn’t need us. Our job is to turn their mess into perfection. Despite the mess, budget and timeline, your work will be judged on its own merit. You either got it right or you didn’t, and there’s no passing the buck.

This Scylla and Charybdis are no reason to stop trying. What you need is a workflow that embraces change rather than resists it.

  • Make sure your planning method is not tedious. If updating a simple page title in PowerPoint takes you 10 minutes, rethink your method.
  • Follow the order of the steps. Starting on later steps before previous steps are approved is tempting. Don’t!
  • Bundle revisions. You’ll kill your budget if you make individual changes as they come.
  • Encourage your client to take time in the planning stage. No matter how close the deadline, this is the one part you shouldn’t skimp on.
  • Make sure your contract specifies consequences for revisions. Be explicit.

Collaboration: Bring Stakeholders Together or Die Trying

If you plan in a vacuum, you’ll only end up with a pile of lint. The secret to efficient planning is to include those with authority in the process. If you spring architecture and content on stakeholders late in the game, expect far-reaching changes that require backtracking.

Get architecture, content and deliverables approved before moving on to the next steps. Modern CMS’ have templates that can accommodate a wide variety of content, and this might make it seem as though content organization and architecture aren’t your problem, but they are! If you write the CSS and programming without understanding what exactly you’re building, you will be forced either to backtrack or to fit content into a template that isn’t ready for it. Content comes first.

  • If you’re planning online, email everyone when you can. If you plan on paper, print multiple copies in the hopes that more stakeholders will see the plan before you move on.
  • Get clear, direct approval of major steps in writing. If your client is hesitant, they may be hiding that they’ve failed to get approval from higher-ups. Asking for an email or signature forces the issue. It may sound confrontational, but most clients will understand and appreciate your thoroughness.
  • Ask for meetings. Most creative people hate them, but a successful project requires collaboration. You would be surprised what comes out of a 10-minute phone call.

Explaining: Heel Meet Arrow

Achilles

You may be a great designer, programmer, architect or manager, but if you can’t show progress and convey ideas to clients, you will fail. Clients need feedback. They need to see where you are heading with the project. Telling them is one thing; show them another. Many potentially great websites were derailed because the designer did not effectively explain what was happening to the client.

  • Show, don’t tell. No matter how much head-nodding you see, if you only tell your clients what you will do, they’ll be confused later. Either poor memory or communication will sink your ship every time.
  • Don’t format content too much. Keep it simple. Some people start pushing pixels right after planning. Others start working on interface wireframes. Whatever you do, empower yourself or your designers to make primary decisions about font, color and layout. If your content wireframe or diagram is too elaborate, it will impinge on the design. Let the decision-makers focus on the content, navigation and what-goes-where, rather than muddying the process with filler graphics.

Moving On: The Button That Launches a Thousand Ships

So you’ve dodged all potential problems so far. The die is cast, and the plan is laid. It’s time to start designing and building the website. Do you have to start over now, or will your plans accelerate the process? It’s been said before, but a plan that has no momentum is wasted19. If you have to retype, reorganize or re-explain your plan in order to start the next step, you’ve been wasting time.

A great design process builds on the website’s content. A great process allows you to build on the last step. To be cost-effective and efficient, the process should include only the critical steps. An awkward transition from planning to building a website is a common roadblock. Frequently, the people who plan a website and communicate with the client aren’t the people who actually build the website. This means that the planning documents have to be expressive and comprehensive in conveying the process that has been followed to date.

Avoid costly revisions and staff frustration by having a process that slingshots you into development rather than requires backtracking and further investigation. Sure, the process should be fluid, but a good plan ensures momentum.

A Few Parting Practical Tips

  • Be specific about your wants with clients. Ask for digital text, Web-sized images, etc.
  • Keep all deliverables in one place, and put them there as soon as you get them!
  • Ask for written changes, preferably via email so that they’re time-stamped.
  • Use Google’s advanced site search20 to quickly learn about the current website’s size and shape if your project is a redesign.
  • Ask your client for access to old stats. Learning how people have been accessing content is important if you will be planning a new website.
  • Avoid being too specific in the early stages. Work from general to specific, and don’t get bogged down in details until they become important.

Wrapping Up

As professionals, we need to embrace better planning methods in our projects. Being agile is great, but don’t outrun your client or the goal of the project. True agility is about being adaptable and reacting quickly. Planning a website is a daunting task, but it can be done if you stick to a process that works.

  • Understand the goals of the website.
  • Gather resources.
  • Organize resources at top level and then at page level.
  • Assess your work based on user profiles.
  • Demonstrate your plan.
  • Get approval.
  • Move on.

So many of us design too fast. You need to make so many decisions before working on a visual wireframe or pixel-based mockup. If you start designing before understanding the breadth and depth of the content that your website will contain, you’ll inevitably have to cram stuff into places that it doesn’t fit.

Building a website is like telling a good story. It starts with a cohesive outline and clear plot. No matter how fantastic your website looks or works, eventually someone will read it. Someone will have to navigate it. Truly great websites pay attention to content and organization. There’s no way to fake that late in the game. Greatness comes from a solid plan.

(al)

Footnotes

  1. 1 http://boagworld.com/usability/card-sorting
  2. 2 http://www.boxesandarrows.com/view/card_sorting_a_definitive_guide
  3. 3 http://www.usability.gov/methods/design_site/cardsort.html
  4. 4 http://www.uxmatters.com/mt/archives/2007/09/card-sorting-mistakes-made-and-lessons-learned.php
  5. 5 http://www.useit.com/alertbox/word-matching.html
  6. 6 http://www.adaptivepath.com/ideas/essays/archives/000040.php
  7. 7 http://www.usability.gov/methods/design_site/inventory.html
  8. 8 http://www.boxesandarrows.com/view/content-analysis
  9. 9 http://wireframes.linowski.ca/2009/05/sketchboarding/
  10. 10 http://www.adaptivepath.com/ideas/essays/archives/000863.php
  11. 11 http://www.slideshare.net/ugleah/sketchboards-prototypes-presentation
  12. 12 http://www.brandonschauer.com/blog/?p=123
  13. 13 http://www.jjg.net/ia/visvocab/
  14. 14 http://www.jjg.net/ia/visvocab/
  15. 15 http://boxesandarrows.com/the-lazy-ias-guide-to-making-sitemaps/
  16. 16 http://www.steptwo.com.au/papers/kmc_personas
  17. 17 http://www.boxesandarrows.com/view/html_wireframes_and_prototypes_all_gain_and_no_pain
  18. 18 http://jumpchart.com
  19. 19 http://37signals.com/svn/archives/001050.php
  20. 20 http://www.google.com/advanced_search

↑ Back to topShare on Twitter

Paste Interactive is a web app development studio with team members in the United States and Brazil. Paste works to create cool, smart tools to make the next generation worker better, faster. Their apps include Jumpchart and Staction. Jumpchart is an innovative content wireframing app, and Staction is a project/people management app. You can learn more about the team at Paste from their blog.

Advertising
  1. 1

    I have another one: Show me how you start a project and I’ll tell you how it will end.
    :-)

    1
  2. 2

    I think the best way to create a site architecture is to try and gather all the relevant information from the client at the very beginning of a project and then break open your sketch book and let your pen do all the hard work: Drawing flow charts and hierarchy diagrams. This method is much quicker and allows for much more freedom than using some online wizard.

    2
  3. 3

    Design By Cyberware

    March 17, 2010 6:15 am

    Great article! You can’t underestimate the importance of getting organised early in the project!

    0
  4. 4

    Markus Hartmann

    March 17, 2010 6:25 am

    Thank you very much!!!!

    1
  5. 5

    Amazing!

    0
  6. 6

    Couldn’t agree more!!

    0
  7. 7

    wooo… how lucky iam, this post come to me right when i need it. thx guys

    0
  8. 8

    Wow! Great post! Will definitely use this advices. Thanks

    0
  9. 9

    Very interesting! I translated a little part of it on my blog :)
    mlangella.com

    0
  10. 10

    This is great stuff. Staying organized is not only a matter of being able to stay on top of things, but also as necessary as writing organized code. It takes discipline and it shows that you take your work seriously.

    This is one of the reasons Smashing Magazine is doing so well, that is, high quality content!

    -1
  11. 11

    AWESOME ARTICLE! Very true from the get go.

    -1
  12. 12

    While I really appreciate the effort you have put in to explain something people don’t usually touch upon, I personally did not find it very useful.

    I do a lot of content writing for websites myself and the only technique I find useful is the content inventory technique you pointed out. I typically make one of these on GDocs, share it with everyone involved, prioritize it so that I know which pages can I spend more time and then start work on the content.

    Also, there is a lot of different types of content to be written for every website (though I might be going to a level deeper than what you have touched) — there are headings, the 1-2 line description right at the top of the pages, the paragraph that is highlighted and then the main content of the page. For this part, the wireframes come in handy.

    So I would really like to know more examples of where the other techniques come in handy, and how practical are they.

    0
  13. 13

    Taina Barrionuevo

    March 17, 2010 8:50 am

    Thanks for the post Kristen! I’ve just got a new gig and was wondering where to start working on its briefing. I will definitely try the card sorting and jumpstart tips.

    0
  14. 14

    I would add that Google sites work well for small project prototyping – fast and easy. And free!

    0
  15. 15

    Wow!!
    Very good…
    I was searching for such article..

    Thanks for help
    SV

    0
  16. 16

    It all sounds good, but staying profitable is the ultimate goal. 1 or 2 steps is really all you need

    -1
  17. 17

    Vera Kovačević

    March 17, 2010 10:55 am

    What a great article! Been looking for something like this for ages!

    0
  18. 18

    For those of you that like scribbling your site map diagrams before commiting digitally, ran across this resource the other day to facilitate the process and put it immediately to use. https://bubbl.us/beta/

    It’s as easy to use as a whiteboard and exports/prints a lot easier then our sketchpads.

    0
  19. 20

    Wow! Just this morning, we were discussing possible changes to work flow to reduce delivery time. This article will be a guideline to finding the solution. Thank you so much!!

    0
  20. 21

    Michael Bergmann

    March 17, 2010 11:33 am

    Site Map Diagrams

    Could you please tell, from which tool the screen shot is.
    The diagram looks very cool.

    Thanx and bye

    Michael

    0
  21. 24

    Martiniano Sienra

    March 17, 2010 11:33 am

    Great article, thanks a lot! Very useful……………….

    0
  22. 25

    Good article, but next time you might want to disclose up front the author’s vested interest (i.e. employment) in one of the recommended solutions. I couldn’t figure out why Jumpchart was so enthusiastically plugged when no other commercial solutions were put forth until I read Kristin’s bio.

    Don’t get me wrong: I’m not implying there’s a conflict of interest or that the article is unfairly biased. It would just look better to mention the relationship more clearly next time.

    4
    • 26

      I gotta agree here.

      0
    • 27

      Larry Kokoszka

      May 11, 2013 6:26 pm

      I agree. I did not even need to read the bio. It was obvious that the author was involved with Jumpchart as soon as I got to that section. The formula of listing many different options that have such strong disadvantages then suddenly listing Jumpchart with no functional disadvantages completely ruined the credibility of this article. There are so many solutions and processes other than Jumpchart that can save you time over using Jumpchart but of course, those naturally won’t be explored in this article. I DO think this is biased and I am very disappointed in Smashing for letting this happen.

      0
  23. 28

    I’m lucky to get any of that by day 5…

    0
  24. 29

    Good article. Lots of tips in here.

    People who work in agencies: who manages site copy at your company? What does this person use (MS Word, Google Docs, other)?

    It’d be very helpful to have some kind of document system that not only has versioning but can track changes and show differences between versions. It’d also be helpful to find something that could translate apostrophes and quotes into clean text, too. Copy + paste from Word into HTML editors or rich text editors doesn’t always work well.

    I realize that Subversion does this, but it seems more suited to code than Word docs.

    0
  25. 30

    Craig M. Rosenblum

    March 17, 2010 12:56 pm

    Solid article, I really love the tips on organizing web projects…

    Especially as the company I work for will soon start redoing the whole site from scratch, and we are not a web-shop, so it is hard to find good plans/systems for this task..

    Thanks

    0
  26. 31

    Thanks for the excellent article. It’s all too easy to just jump right in without a plan. And I’m always surprised how many clients want to do just that. I’m going to send them this article.

    0
  27. 32

    This is a great write up. It applies all the steps of good project management to web design.

    Has anyone used something similar to Jumpchart with great results?

    0
    • 33

      Honestly, I’ve looked at a ton of solutions and I love JumpChart. Sure it’s pricey, but it saves me money and time so $25 bucks a month or whatever is a wash. What are you worth an hour? How much time does the service save you? If it saves you time, it’s worth it. I don’t mind paying for something that saves me money. We’re all so dang cheap though aren’t we haha! For reference, check out this short little ‘intro to JumpChart’ video I made on my site for my own clients: http://vectyr.com/client-tools/video-intro-to-jumpchart/

      -3
  28. 34

    Wow! Very nice, thank you for recommending JumpChart. Signed up and already creating some wire frames, certainly saves me a lot of time!

    0
  29. 35

    anyone know what application in the image of the Site Map Diagrams section ?

    0
  30. 36

    You guys really write great articles… keep up the good work!
    …..Fresh Web Developer

    0
  31. 37

    Thanks a lot. It an great Article. Even am searching for this type of articles

    0
  32. 38

    Yes, yes, we’re all very sad for your loss. Seriously, who actually falls for this spam anyway?!?

    Also, thank you for a very timely article. Short enough to be easily digested but with lots of jumping-off points. I have been wrestling with this issue a lot lately, so this piece has been quite helpful!

    0
  33. 39

    Very useful article
    Thanks

    0
  34. 40

    It’s funny because it’s true :)

    TIFF logo, half empty DOC, etc…

    0
  35. 41

    Fantastic article!

    I will use this text, move it to a text file and read it from time to time, especially before starting new websites.

    I just have one new to start and although I always somehow thought this would be a good approach (plan first, based on content), so far I’ve been working with people who are neglecting that so I kinda just went with the flow.

    Enough with the flow, content is the king and we have to treat it that way. First things first, right?

    0
  36. 42

    nice article, but – it doesn’t cover more than basics. the shown tools may work for small projects, but not for complexe / big projects. the easier the tools are in use, the less you can use them – they are just too simple.

    writing concepts for websites is much more than having a nice sitemap or wireframes – it’s defining the character of a very powerful communication- / sales-tool. it’s like architecture – first you define what needs your building has to fulfull – afterwards you go find the right materials (code) and fittings(design) to cover the needs you defined.

    0
  37. 43

    Alex Yuzefovitch

    March 18, 2010 12:54 am

    Great idea about using cards while planning the site navigation! Thanks for it.

    -1
  38. 44

    /me like – Thanks!

    -1
  39. 45

    10+ years in the publishing industry. 6 years in the online publishing industry. And I have never seen such worthless advice ever before.

    This is for someone working with 20+ sites, editorial work and writing.

    I’m sorry, but this was worthless.

    -3
  40. 46

    Andrew Griffiths

    March 18, 2010 5:00 am

    Of course they use Jumpchart the authors company owns it (so it appears)

    0
  41. 47

    This is fantastic. It’s not often you see an article talk about the planning stages of building sites. This gets overlooked so often. In fact, I’ve had disputes with colleagues over the importance of this stage. Thanks for putting this out there for the world to see. It will be a great reference when I’m planning out my next project with clients.

    0
  42. 48

    Great article, and JumpChart looks very interesting although the author is affiliated with the company :)

    0
  43. 50

    A great read, many thanks :-)

    0
  44. 51

    Excellent article! I’m in the beginning stage of resigning a website. This will be really handy!
    Thanks!!!

    0
  45. 52

    Great article need to focus on points mentioned here. Thanks for sharing

    0
  46. 53

    sebastian green

    March 18, 2010 1:34 pm

    great article. Could not agree more, but i also think the client needs to understand two things:
    putting off writing, organizing the content will slow the who project down but also if they are pedantic and spend 4 days on a task that could be done in 2 hours will also slow the project and probably raise their blood pressure unnecessarily.

    0
  47. 54

    Awesome Thanks man!

    0
  48. 55

    very nice article.. surely great for beginners..

    0
  49. 56

    I think all too often we don’t stress to clients enough the importance of delivering everything in an organized way. The situation explained above where assets come in separate waves of emails wastes not only the developer / designers time – but pushes back the timeline on getting the product delivered to the client. Once everything is in – the pencil and sketchbook are a vital step for me. While tools play different roles in everyones workflow – and I won’t argue that the only way to design is by using a pencil…but it’s the step that is most invaluable to me. Something about sketching on paper releases me of the pressure to get everything right on the first try. Drawing everything out on paper helps give me a clearer view of how everything needs to be layed out. There are some amazing graphing / flow-chart programs out there – which depending on what you need can prove to be invaluable. The pencil for me – is all I need. By the time I’ve hit my photoshop mockups – I’ve already got a good idea of how the content is going to flow – which speeds up development time once I’m coding as well. But really, the most important step is getting your client to deliver a well organized package of content. It will make everyone that much happier in the end.

    0
  50. 57

    Thanks Kristin for your article.

    However I wouldn’t blame clients for disorganization. It’s not their problem how you are going to work. They pay money. And it’s enough. There is only one person responsible for organization. And it’s not a customer. You should think how to make your collaboration easier and more organized. I would like to share my experience and give my colleges some advise.
    In my opinion the most convenient way to gather information is a questionnaire. It should contain the most important questions from a target audience and design preferences to specifications. Thus you can receive all necessary information. But there are also some features. The questions should be very clear for customers to avoid misunderstandings. And the list of questions shouldn’t scare clients away. So try to make the list as short as possible. You may also utilize questionnaire as a part of a contract to eliminate any disputes.

    As for structuring a site layout I don’t know a better program than MS Visio. It is easy to manage and it has a lot of advantages. It enables you not only to built a site map and illustrate a hierarchy and relationships between pages. But it also enables you to sketch a layout of each page and describe each block on this page. It is the best way to show your client what his/her site will look like. You may discuss each block, its functionality and design issues. MS Visio documents often are utilized as an appendix in specifications in many web developing companies.

    One more thing I would like to advice is to compose a term-plan. This is a document where you specify all types of work and their terms and deadlines. The most arguing issue between customers and web developing companies and freelancers are terms. So it is also reasonable to attach such a plan to a contract.

    -1
  51. 58

    This is the best post i have read this month. Thank you! A lot!

    -1
  52. 59

    This article is great … but the author is biased. Kristen Wemmer works for Paste Interactive, the creators of Jumpchart (which is mentioned in the article as only having one downside — the fact that it costs money.)

    0
    • 60

      I don’t think costing money is necessarily a downside, unless it is a waste of money to begin with. There are very few online services that I pay for and the ones that I do are worth it. JumpChart is one of them. I REALLY wish it was free and it probably could be, but you know what, for me it works perfectly. I develop in WordPress for most of my sites, and I like the WordPress export feature. I don’t like that they only give it to the $25 a month tier, but it saves me at least 15 or more minutes. For what I charge for my work, that is more than worth it.

      Even without the WordPress export, I like how it’s a good solid place to collaborate with clients, I get an email whenever they make a comment and the client themselves can upload their own content and play with the navigation structure before you take the site live. This is extremely valuable. The client knows what they are getting and it helps avoid scope creep!

      0
  53. 61

    “It never occurred to you that cleaning up your client’s disorganization would be a part of the gig.”

    Cleaning up your client’s disorganization seems to be ALWAYS part of the gig. I am a small – sole proprietor – studio, so my client base is almost entirely small business folk. They very seldom have thought out their content much beyond “we need a website! OMG!” So usually the first stage of all projects focuses on organizing and gathering clients.

    Just YESTERDAY, I had a discussion with a client with a vague notion about adding some trendy web 2.0 interactivity feature to her site. Which I immediately sent her off to do her “homework” about precisely what she had in mind before I start shoving pixels and code around.

    1
  54. 62

    Michael Bergmann

    March 19, 2010 12:06 pm

    Thanx a lot Kristin,

    it´s Omnigraffle … really nice style …

    Bye

    Michael

    0
  55. 63

    Great article!

    I have one client that “couldn’t” even send me the information this article mentions in the “How It Goes All Too Often” section. I basically got a domain, the logo and a very brief company overview. That was it. I then proceeded to struggle with their PR people for the next 2 months and was not able to wrangle much out of them.

    I plan to send them a link to this article and maybe that will help them better understand how the web development process should work.

    -GD-

    0
  56. 64

    After reading through these comments, I see there have been a couple concerns about the motive behind this article. Although I do work for Paste, and while we do wholeheartedly love the apps we create, we wrote this piece because we think the topic is something that gets skipped over quite often- and is definitely worth talking about. In our opinion, Jumpchart is a part of the organization/architectural process of building a website, and we thought it might have been somewhat of an injustice to not mention it from our point of view.

    1
  57. 65

    Good quote Kurt
    “Cleaning up your client’s disorganization seems to be ALWAYS part of the gig.”
    I also run a small studio. We give any new client a list of milestones or signing off points i.e. PSD design – First Draft or All Content Approved. We ask for 50% upfront. We give timelines and post it all up on Basecamp (other project management software is available) and we give them an estimated time for delivery. If the delays are from their end they get billed the full amount anyway 7 days after the final estimated completion date. It gets their mind very focussed. And it works. No more clients taking six months to decide whether their logo should be Pantone 371 or 372. Be firm but professional with them and they’ll respect you more …. oh and don’t be afraid of walking away. I dropped a client because they insisted on “revoving 3D pepples” to navigate with. If they’re that stupid to begin with they ‘aint gonna change.

    0
  58. 66

    Great Article!

    It always takes time to be organized, but it worth it.

    0
  59. 67

    Carl - Web Courses Bangkok

    March 21, 2010 12:32 am

    This a lovely post. I used a lot of what you are talking about when consulting for Restaurantsofbangkok.com, plus lots of wireframing!

    great post!

    0
  60. 68

    Perfect timing for this article for me and a great “Get Going!” tool to boot.

    Thanks.

    0
  61. 69

    bé March 18th, 2010 12:34 am said ” … nice article, but – it doesn’t cover more than basics.”
    ~~~~
    I realize that Smashing is directed mostly to professional designers, but, there are some beginners that read here and as one, I am delighted to see some “Beginner Content”.

    After all, we are all beginners at some point.

    0
  62. 70

    Good intro article

    0
  63. 71

    Great article, interesting breakdown, and certainly something I think all designers have experienced – especially freelance designers.

    I’m curious to know how you’d go about the next step in the process, finalising designs, usability testing, that kind of thing. It’s always interesting to learn about other peoples approach, and see how it differs from our own.

    I think early in the design process it’s really important to consider the end users of the site, and think how about how the site my be used – remember the ‘What is a browser?’ video from Google?

    We also do usability testing really early in the process to ensure we are developing a strong design – you can check out the tool we use at http://intuitionhq.com

    Other than that, my only comment is the wireframing can be done more easily, and there are a million and one tools out there on the net to try and help in this process – it’s just hard to sort through all the clutter!

    Thank for the article :-)

    0
  64. 72

    I am going to try some of these techniques on my new project.

    Thank you.

    0
  65. 73

    Complete support this idea.

    “You can’t prepare for everything, but preparation is a necessity.”

    You can prepare for most things, and with it you stay constant, and always have a view of “the big picture”.

    0
  66. 74

    Very good overview. I’ve used just about all of the techniques you mention, and each has its place. If a client hasn’t thought about content, I will do that for them (or with them) by clarifying audiences/objectives, brainstorming content ideas, and visualising structure using a site plan or wireframes.

    Information architecture (IA) is a crucial stage of the process, and should be built into the costs of a project. In fact I can’t see how you could even approach website development without having a clear content outline. How can clients prepare content if they don’t know what’s needed or where it goes? Planning content and structure properly saves time, money and aggravation.

    0
  67. 75

    Great article! I think the best find in this was JumpChart.com. I’d never heard of them before and I think this will really help our clients provide their content deliverables for our projects.

    0
  68. 76

    This post has helped me so much to be organised.
    Got me on track.
    Thanx Smashing,
    D.

    0
  69. 77

    Good article, a few key tips. Looking into JumpChart as a content management system, anyone have any better alternatives that they know about?

    -1
  70. 78

    Good article. Proves one more time to those who think a good website can be done by anyone that this is in fact quite an undertaking that requires a lot of different skills and time and therefore does not cost $500. JumpChart wireframing tool mentioned in the article is something we at webloftdesigns.com have been using for a couple of years now in addition to MindJet Mind Manager (which we use for more complex projects), and here is a couple of other tools that we can’t see our daily operations without: Basecamp by 37 Signals (project management) and Jing and Camtasia by TechSmith screen and audio capture). They save us hours and hours on project communication. Hope you will find them helpful and fun to work with, too.

    1
  71. 79

    I think you should publish a book on how to do website the right way, I will buy it I’m a expert and you still bring forth new ideas that I wouldn’t even think of.

    0
  72. 80

    its realllyyyyyy amazzziing to let u not just start even till the full stop……gud1.:))

    0
  73. 81

    I am making a web and this might be helpful compared to the other 76 places I’ve looked at with this kind of info.

    0
  74. 82

    This article is a great resource, thanks! I noticed a dead link in the “Content Inventory” section –
    Cheers!

    0
  75. 84

    Agree with Jerry – so many straightforward but crucial points laid out in a really digestible format. Will be coming back to this time and time again… Thanks for sharing!

    0
  76. 85

    Although may or may not the author of this piece works for a commercial website related company, I find her story very helpful. I also know the frustrations and sometimes irritations which comes with working with an not so website savvy client. Luckily for us website builders there are enough clients who don´t know how website design works or we would be out of work.

    A great in depth article you wrote, always like to read these articles and it always helps to make my work style better.

    -1
  77. 86

    Great article! You have helped me so much, I am new to this whole thing i.e. a designer starting to swim in technology waters!

    0
  78. 87

    An old article, but definitely a comprehensive one and maybe the best I’ve read. Thanks.

    0
  79. 88

    Thank you for the geat article Kristin! I would like to know if you could recommend me a software to make visual site maps. I use Axure at the moment but I’m not fully satisfied, I don’t think it is easy to move things around when a change is needed. But, so far, I have not found anything better.

    Looking forward to know which tool you use!

    0
  80. 89

↑ Back to top