Need to transform design to code? Don't hardcode it, Avocode it!
See how
GET A FREE MONTH
Stories
·
LAST UPDATED
August 31, 2016

Who is a Content Designer and how can he help?

Content Marketing Manager at Avocode.

"I write for those who want to be seen..."

John Moore Williams, Head of Content Strategy at Webflow and ex-Director of Content at inVision, reveals his methods about translating text to design and explains the role of content in the design-to-code workflow in this extensive interview.

Hi John, thanks for making time for us. Let's jump right to it. What is the one thing you never wanted to be?

People often told me I would make a good lawyer, however I'm not into the enforcement of rules.

Yet persuasive tactics are a big part of your job...

Yes, that's a funny thing. However, I don't have the power to enforce things. My job is pretty much about spreading the word as understandable as possible to the right people and then work with their reactions. While at work I deal with super direct communication I also create visual poetry in my free time as an internal calibration mechanism. That stuff is more for me than for anyone else.

When our Google docs becomes a bit messy yet used by many people, I just turn it into a website. It's nice to know that if I really want a website I can just spend my Sunday building it.”

So what made you a writer?

I took a few influential courses in college. I learned that translation doesn't have to be only from a language to another language, but that I can rework my own or other people's writing into something new and more accessible. And I also found out that a book store assistant can make more than a professor [chuckles].

Do you apply any of that to your work these days?

Absolutely. When I run into content written by designers and engineers I always think – how can I strip this down, how can I translate it into a kind of language that people use on everyday basis. People should recognize you without all the other visual aspects of your brand. In some areas the visual part cannot enter or support your brand anymore. Your written content will spread way further than your designer content will  – or at least has the potential to.

We met with John at The Creamery in San Francisco.

So would you say you're a translator?

These days we think about accessibility of a product like 'how intuitive it is, how easy to use it is'. While everything is constantly focused on the interface and all the tangible interactions – we often overlook the language is a big aspect of the interface. I believe that the accessibility of things is deeply influenced by language. So I try to listen very closely to the way people speak on daily basis and particularly how they talk about the products that they encounter.

How do you do that?

There is all this jargon in the design industry, that makes perfect sense to the designers, but there is a lack of consent in the industry about what we call things. Every time I see a marketing sentence in the product I try to estrange myself from my own perspective of it and think about the sublime way that might present it better to somebody without jargon in our user interface.

Can you translate text to design?

I spend some of my free time with creating and exploring visual poetry. It takes greater advantage of typography to reinforce the message of the poem itself. So it's about finding the perfect way for the visual to reinforce the message.

An example of visual poetry art work: Wind by Eugen Gomringer.

At Webflow we do a thing that I call “brain write”. It's scientifically proven that brainstorming is not really efficient, so instead of just talking around, every month I sit down with the founders and we write down all of our ideas. Then they will send me their ideas and I'll paste them into my Google doc and then we'll talk about it. When our Google docs becomes a bit messy, but used by many people, I just turn it into a website. It's nice to know that if I really want a website I can just spend my Sunday building it.

We typically start with an outline, the rough structure and then throw a lot of edits at the headlines and continually iterate and flesh it out until we get to a point where we feel confident about bringing in a designer. Then we start talking about expanding the story visually and try illustrate the points that we're trying to explain with text.

I love to give individuals freedom to explore ideas and then turn them into conversations. In a lot of cases these conversations become a litmus test for what eventual audience reaction might be.”

Our designers then start working it out in Sketch first – just because it's easier to explore ideas there. Once we feel committed to our ideas, we start getting more concrete and this is the time to start with mockups. Once that is ready I'll hand it to other designers and discuss with them more hows: How can we polish this thing? How can we make it more our brand? In most cases we want the visual to do the work of text – and then we'll just pull the text out. We often look for ways of text to be only a commentary of the visual that might provide an interesting opportunity how to expand the message.”

I've heard that you consider yourself more of a Content Designer than a Content Strategist. Could you explain that?

My work is more about how to use visuals and piece them together in an efficient way than a doing high level grand scale strategy. I'm always thinking how can design reinforce or manifest the thing I'm trying to communicate. Any writer is doing design work no matter what they're writing. Design is about finding a way to present an idea or some information to people in the most effective way possible – we have our own design forms like essays or blogposts – and we have these patterns that we follow to break creatively, to make points.

Content always changes. Say there is an update or a bug fix, how do you proceed?

I'd usualy like to have the design changed first. However, if something needs to be done quickly, I'll have more written content added to the site (with links leading to more content) which will temporarily resolve the issue, but it should not be the final solution.

Webflow is the all-in-one web design platform.
An easy fix is not a final fix. You cannot think of bug fixing as adding more stuff. That's called complicating things, not improving them.”

At my first writing job at Motorola I learned CSS and HTML because they used a proprietary visual design tool that they had developed in house and I just learned over time that certain things – like the visual site – can only go so far. Some stuff would be much easier to fix if you could just jumped in to code and adjust one line. Also, the reason I've started using sweet tools like Sketch was that I wanted to update the content without disrupting the designers' workflow as much as possible.

So how would you describe your role at Webflow?

At Webflow our mission is to empower designers, creative professionals, and entrepreneurs to create for the web – to empower people who don't necessarily have all that knowledge in design and coding. My job is to spread awareness. I always try to show our expertise and then let people challenge us. If their reactions are clever or accurate I start a deeper discussion.

And finally, what advice would you like to give to our readers?

I'd like people to recognize, that the main reason anyone goes to any website – period – is the content. People don't come experience an amazing interaction or animation or whatever – they just need to know when a restaurant is open. Or if it's a thing like Facebook, people go there to experience the content that their friend generates. So it doesn't have to be content first but at least a commitment to content.

Tip: You can follow John here.

Do you consider yourselves a Content Designer?

Or do you have an experience with working with one? What is it like and what are you best practises? Share it with us in the comments below.

get guacamole
Free 3-in-1 UI kit
Are you a modern designer with taste? Get Guacamole
- a free UI kit  for Adobe Xd, Photoshop and Sketch.
Get a free UI kit
Available for: