Writing

On Content Design

Content designers are my favourite type of designers, that you may not have heard of.

If you’re now asking a question like – what do you mean by content designers? – you’re likely not alone. It’s a role that whilst easy to describe can be difficult to fully understand – especially if it’s a new concept to you or your colleagues – that’s one of the reasons I’m writing this.

Content design can simply be described as: 

Designing content through a user centred process.

That seems clear enough, right? Except, it normally leads to a number of follow up questions. Is this a copywriter? Not really. So, it’s another name for a UX designer? It’s similar but they’re different roles. Ok, so what do you mean by designing content? Ok stop, let me explain.

It helps to understand that content designers rarely work in isolation. They’ll usually be part of a larger team working in collaboration with one or more other designers – likely UX or product designers.

Whilst it’s true that content designers will often end up creating written content, that may not always be the case. The user needs should determine the form of content. This is often informed by:

  • Using research and data to understand users needs and motivations and make informed decisions

  • Empathising with user to understand their state of mind and use an appropriate tone of voice

  • Considering the user journey as a whole to deliver information in an efficient and understandable way; What information is important for users right now; What have users been told previously; What will they need to know later on;

If a lot of this sounds familiar it should do. There is a huge amount of overlap between content designers and other user centred design roles. They are complementary and work together to create better user experiences. Whereas a UX designer might be focused on the overall user journey, the interface and interactions, a content designer will be looking to shape the content to guide and help users smoothly throughout the entire flow.

Content design done well should be almost invisible. It presents the most relevant information at the right time, and in the right tone, so that users feel comfortable and can achieve what they need at each step of their journey.

It’s not about creating content to impress or get eyeballs. Content design is the art of crafting content that you don’t notice you are reading and that can only be achieved by starting with user needs.

Note: When I started writing this I started questioning my own understanding, so I stopped and read this book to make sure I wasn’t writing nonsense – I recommend it if you want to get a more in depth understanding of content design

I created an app

A web app for testing multiple colour contrasts quickly.

When setting up the foundations for design systems I’ve found that I regularly need to check colour contrasts against multiple background colours. This could be time consuming and frustrating in the early stages of defining colours in system, therefore I decided to create a web app to do this.

https://colorcontrastapp.vercel.app/

I built this for my specific use case, so this initial version is far from perfect. The usability is a bit clunky – that’s more to do with my React skills than anything else. I’d like to add some finessing when I have time including the ability to save and import colours. One day I’ll maybe even bundle this into a Figma plugin so I could keep the whole workflow in one place … one day.

How to use Figma Embeds

Figma's ability to live embed designs or prototypes into webpages is a really powerful and somewhat overlooked feature. You can do some quite creative things with these embeds. As an example, I've used this to embed previews within design system documentation to show interactive components with states and variants.

When copying a share url from Figma you can modify the way the embed appears. It does this by the attributes appended to the share url's query string. However you can modify this yourself by modifying these values.

Hide Figma UI

show-ui=0

Hide Hotspot Hints

hotspot-hints=0

Scaling

// Show at the actual size (100%)
scaling=min-zoom

// Fill screen 
scaling=contain

// Fit width
scaling=scale-down-width

// Fit screen
scaling=scale-down
Page 1 of 3
Next