Content or design?

What comes first and why designers should help create content for websites.

Starting a new web design project is as exciting as it is frightening. There are many unknowns, usually very little time and client expectations are piling up. Sometimes there is no brief, contact with the client is done by a middleman and information is scarce. You have an idea for the design but you still have too little information about the product to come up with something substantial. Stalemate.

Can a designer work without a brief? Well… he shouldn’t. A brief becomes a point of reference — it’s your first contact with the project. It has the basic outline of what the website should be about, what the target audience is and what are the goals. If your client doesn’t provide you with something like this, it’s in your best interest to meet, talk about it and ask questions.

What is the product? Washing powder. What does it do? It washes. How well does it work? The best. Why is it the best? Because it’s unique technology.What can I do with this washing powder? Clean whites and colors.

Getting these basic pieces of information gives you enough knowledge to come up with ideas for information architecture, graphic elements and a basic narrative for the website. Don’t be afraid of asking questions, they will help you to avoid mistakes and come up with a better design.

Information is king. It’s the core of your website — without it, it would just be a pretty shell, awesome looking but lacking practical application. As a designer, you create a design system that combines “ah that looks awesome” and “oh, that’s interesting information”, with “just two clicks and I can purchase this thing!” That’s good design — pixel perfect, informative, intuitive and obstacle free.

Web design is about solving problems and the main problem is how we tell the story of a product, so people want to use it. That’s why typography, colors, illustrations and all the beautiful stuff is not providing answers to the problem; it is the means in which we present the outcome. Let’s focus on content first.

That means content should not be the last stage in design, something to be filled in right before the launch. Content is the backbone of your site, and must be developed together with the visual design.

So hold your horses, sit down, pull out a sheet of paper and think of the website’s architecture. Because if you focus too much on pixel perfect design too early in the process those decisions you make now will later rule the content. We don’t want that, we want our king (content) and queen (design) to gracefully walk down the path of success ;)

You are the Alpha and architecture is Omega

Not every company has access to a content strategist or information architect, so many times the designer shapes both. Often we create information architecture, user flow, and also help in developing content strategy with the marketing department. It’s not a chore, it’s part of our job, and as designers we cannot forget about the bigger picture — a website is not just an aesthetic form, it’s a system where content and design come together and influence each other.

First, content framework can be established while we work on the basic website architecture. At this point, we set a basic navigation structure and an outline of the content of the pages. We make decisions on what order the links should be placed in and that sets the priority of the content because based on the gathered information we decided that the “technology” subpage is more important than “services.”

Should a designer write content? It’s not your job, right? Well, not entirely. You, as a designer, have the responsibility to take risks and set your project on a course. You obviously will do this with the visual aspect in mind and you should do this with content as well. It’s enough that you just set a general direction for the content and the copywriter will take care of the rest. It might take some time but it will be worth the effort.

Another solution is to wait for the content draft, which might take a long time and might not be what you had expected. Despite the quality of the content draft, it should be enough of a point of reference for you. At least you have something that you can work with as it gives you an idea about what the client thinks is important. The most common mistake is to just copy and paste this content into your design, adjusting your layout to fit those 5 paragraphs about how the product will disrupt the tech world while providing holistic solutions…. Nope, use that content to your advantage, it should be an inspiration for you; tweak it, suggest changes, use it as your proto-copy.

Don’t just wait for the email with the final_final_www_COPY_07.doc as an attachment. It will come too late and it won’t be what you think it should be. Be engaged in content creation, see how it “fits” in your design, get feedback and implement. Designing a website and content is a process that requires both parties to be engaged and goal-oriented. This kind of engagement protects you from ending up with a generic, template-like website. Each project is different and you should treat it with custom care.

Good UX takes the content and communication of the website to the next level. When content supports design and vice versa, it’s the effect of the collaboration of the designer and content creator. That is why the creation of content and design is a somewhat organic process, and not the waterfallmodel; it’s many iterations until you finally arrive at the one that is ready for launch.

Is content more important than design, or the opposite? Maybe it’s great content that drives and inspires great design or maybe it’s the design vision that drives awesome content? Well, I would guess it’s both at the same time because only when the two (content and design) work together can you achieve balance in your project. Yes, the design draws attention and it lets users decide in a split second whether to stay or leave, but it’s the content along with the design that drives user engagement and conversion rate. One cannot exist without the other. Thou shalt remember!

Design system

Paragraphs, headlines and bullet points are not only text placeholders but they are important elements of design; their length, visual arrangement, hierarchy and meaning are part of a design system that you create for every project.

Designing is understanding your subject (client, product, service) so you simply must know a lot about it — ask questions, analyze competitors, talk to product owners. Knowledge is the base of good design and will help you choose the right path for the visual aspect of your project. No doubt it will help you come up with guidelines for website content.

Microcopy becomes part of UI

A website is a sale/informative entity, therefore information and how it is presented is the goal of our work. Text with illustrative elements helps create or sustain product awareness. It also conveys information about the core values of a product. Website content is a broad term; it spans from general website narrative to headlines and informative paragraphs, but it is also those little words which make a difference. Never forget about paying attention to micro copy. It helps break the barrier between the website and user. It makes a website more human, direct and accessible.

Lorem ipsum

For internal purposes lorem ipsum serves as text placeholders. I personally use it just to see how a 4 line paragraph will look next to that icon I was drawing for a couple hours. But what I have to know is, what is this icon illustrating? If I know that we are showing “payment security” and the client told me it’s state of the art encryption i don’t have to wait for the paragraph copy, I just have to make sure to leave maximum 4 lines plus a two-word headline.

Your clients should never see Lorem Ipsum. It’s better to draft copy than meaningless gibberish. Remember that your clients sometimes are not able to “imagine” the intention of text.

Lorem ipsum is just a helpful tool in web design; it should never be a substitute for creative content. Design with content in mind. Use lorem ipsum with low fidelity mockups, it will simply tell you that here you are giving some space for text.

Stages of creating content — the most universal way

1Kickoff meeting. Your first opportunity to hear out your client’s expectations. First and foremost you learn about the subject of the project and it is your time to ask all your questions.

2Information architecture. It allows us to create a tree-like structure of a website where each page covers a different subject of our website, allowing us to block out sections of content. It gives us a rough look at what we want to talk about — nothing too specific but it is an important first outline of content — just like deciding on how many rooms your house will have.

With each step your content and design should become more detailed.

3Draft content. Once you have the architecture information it’s time to clarify the goals of your website and how the content of each subpage relates to one another. This part is crucial because it has to answer questions that users might have. Remember that you are helping design content for the user and their comprehension of the copy is a priority here. You can draw a simple wireframe of a website on a piece of paper and describe what content could go in individual sections, like here we should write about features because earlier we introduced the product. This can be used as a basic guideline for content.

4Design fitting. Once we know the basic narrative of the website we can move from sketch to low fidelity design, which allows us to place ideas for content in the right position, e.g. designing sections, paragraphs, header, sub-headers, foreseeing places for icons and other elements. This is the time to experiment with ideas, decide on technological solutions and possible interactions (sliders, panels, animations, infographics etc.). For this stage you can use a wireframe tool like UX Pin or Balsamiq.

5Design iteration. So you presented your current design ideas, you talked about interactive solutions, ideas for illustrations and so on. Now is the time to tweak the content, add micro-adjustments, scratch redundant elements, simplify text, add missing titles and so on.

6High fidelity design. Time to pull up your sleeves and design the hell out of that website. At this stage the content is almost done; you and your team know exactly what the message is of your website, which allows you to come up with relevant design solutions and illustrations!

7Final touches. Time to move stuff a pixel to the left and make the logo bigger.

8Launch. The project is out there, free as a bird.

9Gather data. Evaluate the content and design based on data and tests — the conclusions of this audit will lead you to the next step.

10Design iteration. Incorporate what you have learned from your audit and optimize the website to achieve better engagement and conversion. But that’s a topic for another article…

Like I mentioned earlier, designing a website is an organic process and the best way to move it forward is to engage the client in the process, ask lots of questions, and bounce many ideas off of them. The simplest way to do that is to organize workshops where you work together exchanging ideas, inspirations, quick wireframes and user stories. It’s faster and far more productive than sending a bunch of emails.

I have gathered a few interesting articles on the subject of copywriting in the designing process that might be useful for further research. Hope you enjoy!

Search This Blog

GMK HUSSAIN - BLOGS