Content First, Design Second

Content informs design. Design wants to work within the constraints of the task (what I need to do to get what I want). Design works best when it caters to a predefined expectation that is shared by its user, namely you. You are the sum of all your parts: your inner thoughts and emotions with your bodily abilities and constraints. Your body plays a major role in this because it is the instrument by which you interact with the environment. So the design will serve as a bridge between the body and in the information.

There are lots of great website templates that will show you what is possible with it’s predetermined layouts, animations, and navigation. Were I’ve seen a breakdown constantly with each project is that the content later gets informed by the design of what can be created to satisfy the structure or the interaction features (animations that happen when you engage with an image or with a link). Who says that you even have to do that!?

Content informs the design in this way.

If you have a story, you want to tell it well. And presentation is part of it. Only when you don’t know where to start, fitting within the constraints of a design is feasible. You get the job done faster.

However, this is where the imagination starts to take off and as, “What if we did this?” or “I originally wanted to do that and now I can’t”. These are important factors to consider in the beginning stages of a design phase. Therefore, what is the content we have on hand that we want to use to tell the story of the brand we are expressing?

Start with content!

Content is informed by branding, which has it’s own structure. It asks the right questions so you can be prepared to make a powerful presentation. Content are your media assets, your brand story, your answers to the people you are serving. This goes for the individual who is a career-oriented professional to business entity that is making a case to the industry about how they are of service and what they are showcasing in-order to sell themselves. This includes a site that revolves around a product or a hub of products for consumption (ie. eCommerce).

Layout before all parties involved of what you have that represents you: your past experience as a professional, your body of work, your mission as a business, or your products that you want to sell.

Once these are laid out, you can then talk about WHO WE ARE DESIGNING THIS SITE FOR. You can design around the behavior of that one person (or two specific people) who will see your content and evaluate what to do next.

Now let’s talk about structure!

Structure is “Design phase 0.1”. Like the skeleton of a body, structure will tell the content where to go, how to behave, and how it relates to everything else. It’s not absent from design and may seem like this is a catch-22 where you can’t start with one without the other. What structure will do is provide a baseline for content and design to evolve. Your presentation will never be perfect and therefore will never be finished. Structure will at lease give an agreeable scope to what is the first phase and what is the second. It caters to the ultimate objective of how the content will move users forward with engaging your presentation.

Structure can take the shape of an overall sales funnel, where the engagement happens on and off the site but will facilitate an on-going conversation. The content is then informed of where it belongs and the design is informed of how best to bring that to someone’s will to click, tap, scroll, submit, press play, enter sensitive info, etc. In essence, choosing you.

I say all this in-mind with the professional who is building their personal brand to the manager or entrepreneur with an eCommerce store that wants to be the preferred choice by someone purchasing his/her products.

When you don’t start with the big picture in mind, the design can work against you. And the project is aimless and loses its luster from the undertaking.

If I start with a theme and say to a client, “let’s use this theme so the design and development is already 80% complete”, we have to agree that we will cater to this form and “chisle” from there. I’ve done this and it works when I am driving the project and have everyone on-board with the vision. Thing is, whoever is paying and has veto-power, there is always something to add, and then add more…! If there’s something to add, it has to be tabled for another approach to design. Lest we not have a timely launch, to both capitalize on time and then learn from our audience’s feedback what they really need from our design to receive us well.

If we are starting with how our content is connected to each other and how they serve their purpose of informing a user about the brand, then we can ask in advance, what is the design that serves this content best… in other words, the story we are telling.

Thankfully, the trials of internet culture trying to figure itself out has found some tried and true forms that you can apply to almost any scenario. You can shift and mold over the canvas how an asset (or to be very verbose and technical – a cognitive artifact) will position itself for a user to come into contact with, both with when it appears and how someone will treat it.

I find that when I learn about the underlying motive of why someone wants a revamped web presence or why a startup wants what they are doing to make an impact, the design will become more apparent as to what SHOULD be done and what OUGHT to be avoided – for the moment.

Just like writing a report, my high school English class would talk about brainstorming and writing thoughts or phrases on cards that would later take the form of a mind-map and then later the form of an outline.

Now you have information architecture.

You can then make clear choices you know will both serve the end-user well and will make you, the project manager, and your associate who you are working with, a sense of certainty that you are doing the right thing. The questioning goes away and the best questions start to arise, “What if we did this…!” or “What if this opens doors to greater opportunities we didn’t even consider…or knew about…or thought ourselves capable of obtaining!”

Sometimes the best thing is to just start simple where you have a structure, even reference what you have seen from similar website. But don’t build out the design and fill in the spaces next. Write out, draw out, and pull out the ideas that you know would fit in those spaces (an about page, a services page, a portfolio page, a set of articles, a set of products, a finished logo with mood board, colors, font families) and then once they are there on the layout in a very raw form, begin to design and cultivate the style you want as a differentiator from the other sites like yours.

It will be so much more easy and the hard work that is asked of you later will be much more worth it.

And most important of all… you’ll know when you are finished – for now 🙂

Scroll to Top