Website Design (How to start thinking about it)

Back in 2008 a renowned web designer called Jeffrey Zeldman tweeted this statement:

“Design in the absence of content is not design, it’s decoration”.

Without any content there can only be fancy decoration waiting for content. And this is a simple lesson, you would not design a website without knowing the type of content that it will carry and neither would you write content without an understanding of what the site layout will be.

Okay so if the website is for a coffee shop then you might formulate a basic idea that it will be blog driven and therefore you can go ahead and write as many posts about coffee as you wish before any thought about the design aspects that will present it. To an extent this may be true that you can write a lot of the content in a similar style. A similar situation would be to already having hundreds of posts that need to remain or a site that you intend to upgrade.

The point is, that there will inevitably be some editing necessary to tailor the existing posts into a new blog style. With the former example, it would aid development if you knew how the post will fit in rather than write it and then fit it. For example you write fifty posts of varying length and then decide that the site will contain posts with an average 500 word length, or that your text size is 16 but your design calls for a tex size of 18.

You can see the obvious benefits of knowing as much about the design and the content before you commit heavily into design or finding content. Zeldman was fair that design without content is decoration but that doesn’t mean design comes after content or is a less important factor. They are not the same thing, but neither are they separate.

Before you start actively designing a website, you need an understanding of what the content will be before you start designing around it. Think of the content as part and parcel of the design. Ultimately there will be trade offs. You may want a funky font in a larger than normal size and therefore titles and descriptions will have to be short so as not to overflow the funky container you want for it. There are always trade offs when pairing the content and design.

So the design process starts with time to think about the project. This is where your main ideas will come from, those initial thoughts. When the website is complete, it will likely look nothing like you envisaged, but you will be surprised at one or two things that you carried through from beginning to end. That large flag that you thought to use as the main banner is now in the form of a little icon that highlights things, or that nice image you came across turned out to be a banner.

What Is the purpose of the website

You must establish the absolute purpose of the website you are working on. What is the point of the site. If the site is purely to sell coffee then all the posts about coffee history and coffee production may not be ideal whereas concentrating on special offers and money off vouchers and coffee tastings and events may be better suited.

The point here is not to go off and make the site your own baby. Don’t say, well look I think a blog iwth hundreds of interesting articles would be great, when informing an audience about coffee in general is not the purpose of the site. So another question you might ask is ‘What is the website trying to achieve’.

Also think about how you might measure the site’s success. It’s not always foremost in mind but for our coffee shop example there may be a promotion for one month where customers are invited to try a new coffee and they will receive 25% discount if they mention the code NEW25.

If customers are asking to try the new coffee and offering the code then it’s a confirmation that people are going to the website. Similarly if the site address is printed on coffee mats or till receipts, then that’s is better promotion. One way to build this link between the business and the website is to ask for feedback, such that a customer can go to the website and input their comments or give a satisfaction rating.

Look at the back of a McDonald’s recept and there’s a website invitation. If you complete a quick survey you get a code at the end to purchase any meal (without drink) for the discounted price of £1.99. At the Coop their till recipt invites you to comment on a member of staff that you might think deserves a mention. 

So when setting out to marry the content and design, also leave some space for thinking about the ways in which the website ultimately can link back to the business. There’s nothing worse than putting up a website and not knowing if it’s doing it’s job or just taking up a lot of valuable time.  

WHAT IS THE architecture

Frame architecture
Next, define the precise framework for the project. What pages are you looking to refresh, what new pages might you want to create, and how do each of these pages fit within the overall website?

Laying down the foundations is critical, as is understanding the core architecture of the site. The writer, strategist, and designer must work lockstep on this element.

Develop topics
Topic development is a key aspect of any content-led project. You need a clear grasp on your core topics in order to properly understand your website. A lack of clarity around topics produces a poor on-site experience for users.

A great way to define topics is to get yourself into the shoes of the people you wish to attract to your website. What topics interest them and what topics will not only draw them into your site but get them to stick around?

For example, a company that sells logistical services to data centres will want to create content around data centre management and everything that involves, from backup generators to storage technologies. But their target audience is also interested in broader topics such as the Internet of Things (IoT), artificial intelligence (AI), edge computing, and other such elements that form the backdrop of where their industry is headed. Cast your net wide.

Once you have researched and refined your topics, go heavy on assessing how the current website and those of your competitors stack up in these areas. Where are the content opportunities?

Content deployment
Next you need to understand how existing content is distributed across your website. Some companies skew towards a heavier concentration on products and services, while others tilt towards editorial content that does not directly reference the business.

Whereas a company website that never talks about its products and services is missing a trick, the more a business is willing to push in the direction of editorial content, the more successful it will be in building and nurturing an audience over time.

That said, the actual deployment of content across a website requires management.

For example, an organisation that skews in favour of editorial content does not need to bring that preference to its home page. Indeed, it may decide to treat its home page minimalistically, with snappy copy, a few striking images, and a bold call-to-action. A book cover isn’t supposed to tell the whole story.

Or, as is often the case with consumer electronic firms, it may want to use its home page to showcase new technologies on the market, even if the rest of the site reads more like a magazine than a catalogue.

In fact, the layout and composition of your home page is one of the later things you will want to consider within the project. After all, you don’t start building a house by hanging the front door.

Brand elements
So you have articulated your strategic purpose, the core architecture is drawn up, your content themes are decided, you have a basic sense as to the balance between editorial and commercial content, and content creation is underway. You may even be pushing fresh content to a staging site, or publishing to quiet corners of the live website, to get a feel for how things look at first pass.

Now it’s time to get heavy on the visual component. How should the copy be laid out, what images should you be using, what kind of branded elements can you bring to bear on the content?

What about the readability of the text? Are you creating a sufficient distinction between font sizes? Does the typography convey brand character? What is your colour palette? What guidelines should you put in place for headline length and brand voice? Does the logo need reworking?

It is tempting to tackle these questions at the top of the project, but resist the urge. Concentrate first on core architecture and key themes, before moving to the visual elements.

Implementation and upkeep
Be hard headed and rigorous in the implementation of your brand design. Consistent application of your design will make the difference between a site that has lots of promise but feels heavy and lopsided, and a site that is dynamic and exciting to browse.

Rich in content but light touch in feel is where you want to be. Design is not a cosmetic operation, unless you allow it to be.

User testing
So far, so good. Your internal team has been going great guns, with high levels of commitment and collaboration.

Now it’s time to bring it back to the user. Let’s see what people outside of your organisation actually think. How does your target audience experience your handiwork once on the site? It’s time to embrace data.

Review your web analytics to determine visitor behaviour. Look at entrance and exit pages, as well as bounce rates. What different user flows are common to your site? Are your call-to-actions working on a page-by-page basis?

Conduct surveys with clients and prospective customers, and request honest feedback. How does it feel to be in your visitors’ shoes?

Make changes to key pages and A/B test them rigorously. Always be tweaking, always be refreshing content, and always assume that your website can be many times better than it is right now.

Design and content are central to your website’s core architecture. Empower your designers and your content creators as the custodians of your site’s success, now and into the future.