Join Janine Warner for an in-depth discussion in this video Working with information architects and wireframes, part of Creating an Effective Content Strategy for Your Website.
Information architects organize information and develop the structure of websites. Similar to content strategists, the role of an information architect is still a relatively new concept, and job descriptions can vary dramatically. But as the name implies, the job is similar to that of architects who design buildings. Information architects and content strategists often work very closely together, and I have seen a number of job descriptions for content strategists that include tasks like creating wireframes and sitemaps, which are more often assigned to information architects. So what do information architects actually do? Well, one of the most common job responsibilities is to create diagrams of how pages in a website link together, kind of like this one.
Often called flowcharts or sitemaps, these are visual representations of the sections and pages of a website. Think of them as the blueprints, designed to help everyone working on a website to visualize how the various pages and sections will be organized, and how visitors will move from one place to another around the site. Notice how the arrows, even in a simple diagram, show how pages can be linked in multiple ways. Also notice that using different shapes-- squares and circles--can be a useful way to distinguish between different kinds of content.
It also makes your flowchart look cool. A good flowchart or sitemap is like a floor plan for a big building. Just as you wouldn't want to design long hallways that lead people to dead ends, information architects don't want to create a content path that leads users to a page with nowhere else to go. As a content strategist you may find that a flowchart or a sitemap is a handy reference for studying how your content works throughout the site, and it's a fresh way to recognize if you have too much information in one section or not enough in another, or if there should be more links among related types of content.
Some information architects prefer to create text outlines, often called site structure listings, which are usually just lists of text with indenting to indicate sections and subsections. Like many things in this course, whether you need a flowchart or sitemap or just a structure listing depends on how big and complex your project is. Sometimes I start planning the structure of a website with a few sticky notes I can move around a table. In addition to sitemaps, most information architects create wireframes. Wireframes, which are sometimes called schematics, are guides to where content should be placed within a web page.
You don't usually create a wireframe for every page in a website, but it's good practice to create one for each of the main sections, and for each of the templates you'll need in a site. Wireframes are often used to make sure the client is happy with the overall structure of a site before you start building it. They're also used to inform designers and to help the production staff to put all of the pieces together when they build a site. I created this wireframe using Adobe Proto, which makes it possible to create interactive prototypes with links as well as basic wireframe pages.
Notice that this page includes a list of all of the pages in the wireframe along the right-hand side, and Proto enables you to set links from one page to another. I like Adobe Proto for multiple reasons. It's intuitive and I can use it while I'm reclining on the couch. Although Proto is not as robust as some of the other wireframe programs in the market, it's more than powerful enough to mock up basic pages and even create interactive prototypes. But what I love most about Proto is that it gets me away from my computer.
I find that especially helpful when it comes to prototyping, because the hardest thing about creating wireframes is not the technical stuff; it's the thinking part and I definitely think better when I'm curled up on the couch. Although you can draw wireframes and sitemaps yourself with the pencil and paper, there are a number of software programs that make it easier. On the low end, some people use the SmartArt functions in Microsoft Word to create simple flowcharts. You can also use Microsoft PowerPoint and Adobe Fireworks. If you want to get more elaborate and you have a bigger budget, consider Microsoft Visio and for Mac users, by far the most popular program is OmniGraffle.
For more on that popular tool, consider Jason Osder's course on Creating Web Sitemaps and Wireframes with OmniGraffle, here at lynda.com. You will also find a growing number of online tools and services that can help with creating flowcharts, wireframes and prototypes, including Gliffy, Axure, and Balsamiq.
- What is content strategy?
- Setting clear goals and managing expectations
- Creating a content inventory
- Identifying content needs with a gap analysis
- Managing development with a content matrix
- Creating a style guide and editorial calendar
- Developing wireframes and sitemaps
- Choosing the best medium for your message
- Testing and gathering feedback from users