"How To Create An Informational Website Architecture" Thing
Friday, December 11, 2009 at 3:58PM
Justice Mitchell in DIY, Design, IA, Interactive, Tools, forms, how to, informational architecture, website architecture

How To Create An *Informational Website Architecture (IA)

There are those interactive shops that use IA's as a way price jobs. Some use this information to create wire-frame templates, page scenarios and test prototypes against. There are those who use IA's to figure out how the website will interrelate with complex database structures or legacy applications. There are those that use IA's to qualify and test their usability, informational flow and make assessments about the amount, location and type of content being used. And lastly, there are those who use IA's to simply sell and scope the work to the client. Naturally it's best to understand that they can be used in the "E - All of the above" category. Ergo – engage this post!

Wikipedia describes and IA as:
"Information architecture (IA) is the art of expressing a model or concept of information used in activities that require explicit details of complex systems. Among these activities are library systems, Content Management Systems, web development, user interactions, database development, programming, technical writing, enterprise architecture, and critical system software design. Information architecture has somewhat different meanings in these different branches of IS or IT architecture. Most definitions have common qualities: a structural design of shared environments, methods of organizing and labeling websites, intranets, and online communities, and ways of bringing the principles of design and architecture to the digital landscape."

With all that said the greay area here is MASSIVE of just what truly is an informational architecture. There are so many different types of architectural differentiations that it can get quite confusing.

Just as an example there are architectural documents on:

We're going to be spending our time talking about Website Architectures. More specifically in today's interactive lexicon we call these documents 'informational design documents'. While you as the newbie or senior architect may not require all architectural documents in order to complete your website it's best to construct at least the primary foundation.

Informational design can be used for an amazing array of things including (but are not limited too):

Getting started:

A basic Website list [might] go something like:

You can see in just this quick example that you're starting to crowd up a single page in a hurry. This is why defining your architecture is so important.

From the Top Down & The Left to Right:

There are two typical styles of IA. One is horizontal flowchart (recommended) that shows hierarchal importance from top to bottom, and left to right.

The second is a horizontal IA that has the home page on the left and then delta's out to the left, putting the hierarchal importance to the top. Either style is fine, but I seem to have the most success explaining sites to clients with the first version.

Define your architecture:
Defining your document with top line mandatories such as:

Create a key:

A key is like an map key, it's a set of iconography that allows for you to give detail to an area with just a small succinct image.

Here are a few that I use on my own to detail various parts of the overall structure:

Please see the attached PDF (below) for a larger list.

Define server technology and analytics:
If you're a shop that is specific to a development language, server technology, analytics package or proprietary application please be sure to note it somewhere in the IA for your own protection.

Legal:
Somewhere begin the overly tedious process of protecting your ass with some legal verbiage that says, that this is a copyright protected document and that should you make changes to it after the final approved version that it will be 'client notified.' There's tons of free legal/contractual resources for you on the internet – see my Delicious links for more.

Last couple of thoughts as you embark out on your new education:

Red flags to be mindful of:

*I'm not claiming that any of this information is fact or legally bulletproof, it's worked for me for 15 years, but USE AT YOUR OWN RISK you ungrateful bitches.

Additional Resources:
http://www.adobe.com/products/illustrator/ - For the most visual control, by creating your own 'system' utilizing Adobe Illustrator
http://www.omnigroup.com/applications/OmniGraffle/ - Another great application (with flowchart capabilites) for a MAC
http://office.microsoft.com/en-us/visio - The super hardcore informational development tool for PC (please note this is not a user friendly application)
http://flowchart.com/ - online flowchart software
http://www.gliffy.com/ - online diagram software
http://writemaps.com/  - online site-map software

Great Educational Overiew of the flowchart process:
http://www.jjg.net/ia/visvocab/

Article originally appeared on Social Media Marketing Blog Professional (http://justicemitchell.squarespace.com/).
See website for complete article licensing information.