What is content-first design?
Content-first design is exactly what it sounds like: thinking about what content will be required and how it will be structured before launching into visual design. Content, in this case, means copy, images, videos, etc. basically, all of the textual, aural and video components that will be on the page of whatever you’re designing.
Despite the general agreement that Lorum Ipsum is now obsolete, copy is often the part of ‘content’ that usually doesn’t get the love and attention it needs early on, causing major problems further down the track.
Dangers of not putting copy first:
1. Your message will get lost
People only read around 20% of the text on a webpage. If you haven’t thought about copy before you start wireframing, you won’t be clear about what the key messages are or their order of importance. By considering this early on, the key messages will dictate the hierarchy and are more likely to get seen and absorbed by the user.
2. Voice and tone won’t be consistent
Even though the brand voice should always be the same, the tone must adapt to the context. By leaving copy until later in the design process, you stand a good chance of misjudging the tone of the design. At best this leaves the user with a vaguely weird, disjointed experience, at worst it can lead to offense and misunderstandings.
3. Just because changes can be made, doesn’t mean they should
How many times have you heard or said, “don’t worry about the text, the developers can change that later.”? This is usually said when referring to CTA’s, button text and other microcopy. It is just a good excuse to not think about something at that moment and often ends up either being forgotten or left to a developer to figure out.
4. Translation will be difficult
Visual design can cross language barriers, words often cannot. Leaving copy until late in the day can lead to issues with formatting and context. This will cause low-level issues for users who have the same first language but will be a nightmare for people who need to translate the copy themselves or use translation software/apps.
5. Content will hold up delivery
Leaving copy until later in the design process will slow things down. Agreeing on the key messages and the order of importance at the outset of a project gets everyone aligned and leaves less room for disagreement later down the track. This means that the focus can be on UI, branding, functionality, usability, visual design and all the other good stuff when it should be.
6. User testing will be less accurate
Copy provides context, direction and tone. You can’t expect accurate results when user testing with placeholder copy as a huge part of the experience is missing.
How to put copy first
Major caveat: this is still very much a work in progress at Envato and we do not claim to have all the answers (yet). However, here are some things we have found to be useful in the quest for content-first design perfection.
How we put content first at Envato
- Have a content brief that is quick and easy to fill in collaboratively with your key stakeholders.
- Get wider stakeholder agreement on the brief before proceeding.
- Instead of launching straight into wireframes and prototypes, we start with a very basic spreadsheet which lists the page functionality, user flows and first pass at the copy. This lo-fi approach keeps the focus on the copy and the functionality in the early stages.
- Move on to early-stage visual design, e.g. wireframing/prototyping.
- The copy is user tested and updated based on feedback (hopefully, just small changes).