Even designers are often guilty of this – we jump in and start the creative process without really building the foundation. Sure, it’s the “fun” part – but so often leads to project failure, or just not a great and intuitive result.  It might look fantastic – - but has no real sense of wholeness – - is only skin-(or pixel)-deep.

I’ve come up with the metaphor (not groundbreaking, I know) that can maybe help explain the process to clients, and why it is so important to start with the big picture in mind (content), and then build on the details (design.)

1. Build your foundation.

Before any design work can begin, structure must be considered. Sure, structure can change later – - you can always add-on to a house after it’s been built – - but you must establish a general foundation for your house to be built. Structure/navigation (i.e. the big picture) can help you frame and give a sturdy base for any piece of content, and any piece of design you build on top of it.

Start with a site-map – nothing fancy – and a general idea of how your navigation system will work.

2. Now comes the most important part – your pillars, i.e. your content.

Primary Content – before any design work can begin, you must have a good plan for your primary content. Primary content is “you-to-user” content – for example, an about us page, or product pages, or an area detailing your services. This is content that changes infrequently, and is editorial in nature.

No, you don’t have to have every word written, but you must have a good idea of the “buckets” you would like to present your user.

Secondary Content – This is where it gets really interesting and exciting. Secondary content is content that either changes often – i.e. news – or even better, user-generated content. Community can form a solid content stream for your site keeping users interested and coming back for more. Community can consist of blogs, forums, media, polls, video, commenting systems, idea systems – - any content giving your user the ability to interact with you or others.

And finally, Actionable Content – Actionable Content can consist of contact forms, newsletter sign-ups, prompts to join your site, or a path to purchase your product or service. These are the “final actions” a user usually takes, and they should be BIG ones. This is your final chance to grab them – to capture their information – to accomplish your goal.

This is where it gets tricky. To build a completely immersive experience that will always lead to and support the various content pillars, each and every page of your site needs to incorporate content from ALL three pillars. For example, while in your blog (secondary content) make sure the reader knows what you are all about (primary content) and has a way to get in touch with you (actionable content.)  While selling a product (actionable content), provide a way for the user to see what others thought of the product (secondary content) and why this product is important to them (primary content).

Building your site to always incorporate the three pillars will ensure a consistent experience throughout with multiple paths leading to important pieces of content.

3. Design and User Experience

Am I saying design and user experience are the least important aspects of your site? Absolutely not – and would argue in many cases it is more important.  But, what I am saying is that this crucial stage cannot be embarked upon until you have a well thought-out solid foundation of structure and content in place.

This is important for several reasons …

A good idea of content will help a designer shape the experience to compliment that content (and content is KING!)

A good idea of the scope of content will help a designer organize pages in a clear and insightful manner

A good idea of the structure will allow the designer to freely place content where it makes the most sense within that structure

And, after years of experience, helps the design and creative process go much faster, with much more intuitive results.

This probably sounds basic to many experienced designers and architects out there, but could help you explain process a little better to your clients and colleagues.

Here is a sneak peek …

<div class="captionleft"><img src="path/to/image.jpg" alt="alt text" /><p>Caption goes here</p></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dui nisl, volutpat sed, commodo a, condimentum vel, nibh. Proin hendrerit egestas purus. Praesent in lectus. Fusce quis ligula eu justo pellentesque rutrum. Mauris lectus tortor, bibendum eu, consectetur nec, scelerisque vestibulum, purus. Pellentesque varius. Donec et ligula. Aliquam porta convallis augue. Suspendisse et enim. Suspendisse varius erat sit amet tortor. Cras tristique ornare tortor. Pellentesque aliquet arcu sed velit.

Proin vulputate hendrerit odio. Integer luctus ante vel pede. Quisque vel ligula interdum lectus semper rhoncus. Proin tempor ipsum vitae sapien. Donec quis mi viverra dui pellentesque tempor. Nunc ut libero sit amet pede dictum suscipit. Vestibulum quam. Quisque pede lacus, malesuada vel, blandit et, hendrerit eu, urna. Donec aliquam, massa in tristique cursus, arcu ligula consectetur arcu, sodales elementum nulla ligula ac sem. Morbi sit amet risus. Morbi eros ipsum, viverra quis, cursus a, mollis nec, quam. Nam vel quam. Nam lobortis.

Duis bibendum diam in pede. Vestibulum fringilla convallis diam. Duis a libero a mauris aliquet feugiat. Duis consectetur tortor ac enim. Aenean eget nisi. Aliquam erat volutpat. Maecenas pulvinar tempor enim. Donec in nunc. Duis eu ipsum. Quisque eleifend risus a turpis. Etiam quis tellus.

Aenean egestas justo sit amet purus. Pellentesque ultricies velit et diam. Morbi ut nibh nec turpis rhoncus dapibus. Maecenas massa diam, auctor a, condimentum a, aliquet in, felis. Cras sit amet nisi nec orci sollicitudin ornare. Aliquam rutrum nunc. Vivamus nec velit nec dolor commodo commodo. Proin eu magna. Suspendisse potenti. Sed imperdiet lectus id orci. Phasellus orci nisi, iaculis a, laoreet ac, porttitor in, tortor.

Ut sit amet ipsum at lorem volutpat fringilla. Vivamus tincidunt nibh vitae eros. Suspendisse fringilla arcu in eros. Mauris ultrices, turpis pellentesque vestibulum tempor, eros eros luctus nisl, at pharetra elit erat sed neque. In nisl est, iaculis a, porttitor vitae, aliquam sit amet, elit. Quisque hendrerit lacinia felis. Nam nunc diam, molestie ac, iaculis vitae, suscipit ac, elit. Aliquam laoreet dui id diam. Maecenas sed ante. Cras porttitor, ligula in vulputate sagittis, turpis turpis mollis ligula, vel feugiat ligula eros vulputate odio. Sed rhoncus ligula sed urna. Integer euismod gravida tortor. Fusce laoreet quam sed leo mattis varius. Vestibulum cursus. Aenean facilisis metus ut tellus. Donec vitae lacus. Sed molestie faucibus libero. Pellentesque non ipsum id lacus mattis dignissim. Proin suscipit gravida diam.