Content: atomic design’s forgotten neutron

Effortless user experience depends on three things working together: content, design, and tech. Removing any of these will significantly hamper your digital product.

It’s natural that over time, design leaders have looked to implement systems to assist with build speed, whilst also ensuring consistency and quality across their brands and websites. It makes sense in so many ways. Modular components that can be brought together to enable flexibility and scale.

It’s a great way to ensure build quality too. But we shouldn’t forget the content in this process. Let me explain.

Copy-first

As a Content Designer, it’s not unusual for me to start designing by writing a word document, and thinking about the conversation I’d want to have with the user.

It’s also the process Jef Raskin took when he designed the UI for the Apple II. He held the belief that design should start with the copy.

It’s a belief echoed by Jason Zimdars at Basecamp, who says “It makes me treat UI as a conversation. How would I tell a friend what they can do here and now?”

This approach also means that moving into prototyping with Design and UX you have realistic copy to design and test with.

I think designers are now starting to understand why it’s so much more efficient to use the actual content when prototyping (not to mention more user-centred) and not the dreaded Lorem Ipsum. After all, how can you test the viability of a digital product if the ‘conversation’ is missing?

But what does all this have to do with modular design principles?

It’s broken

Designing components with placement text presents issues.

Imagine building a house without the right room measurements. You could end up with a cupboard-sized lounge and a dining room-sized bathroom. It would be all out of proportion.

The same can be true when modules and components aren’t designed using realistic content.

When moving into high fi design I’ve often been told my copy is ‘breaking the design.’

Character limits, format constraints and even having the right templates can present big issues to a Content Designer. We are often even asked to create copy to fill a space, for copy’s sake.

Let’s remind ourselves for a moment of the fact that starting with the copy focuses you on the customer’s experience. A point that shouldn’t forgotten by a desire to focus purely on aesthetics.

Collaborate

For design systems to work, it’s essential to work alongside Content Designers who can help to ensure components are fit for purpose.

It’s also important not to forget your end user won’t see components or templates, they’ll see a web page and a journey flow.

For your content team there’s nothing more important than context and the conversation with the customer, so help them to understand how your components should work together.

Here are some practical steps you can take to facilitate this process:

• Talk your Content Designer through your system and bring them onboard early — they may be able to come up with elements you hadn’t even thought of.
• Before applying character limits, look at some real-life examples of how this component will be used. Content Designers can provide real copy and help you define the restrictions (if they’re absolutely necessary).
• Before applying placeholder copy how the element would work if no copy was needed. Consider an alternative option so Content Designers don’t have to create copy when it’s unecessary.
• Using block text such as Lorem Ipsum gives a false impression of formatting as well as the wording. Often writers want to use bullet points, offset quotations or a diagram instead of words. Find out how the module you’re designing will be used and consider the variations of content that could work in your module.
• Button labels and headers won’t always be clear-cut. Sometimes they need to be longer than intended — do the designs still work when text wraps?
• Content teams often have their own design guidelines — are their guidelines aligned to your atomic system? Can the two sit side by side and work in harmony?

When Content and Design teams really work well together, amazing things can happen. As Jean-Luc Godard said “…style is the outside of content, and content the inside of style.”