Appendix B
Episode 057 -

Why Content Comes Before Design

Text reads: Appendix B. A Bravery Podcast. It's on top of a generative AI render of a room with a desk in the corner. The tall ceilings have hundreds of written pages hanging from them.

Joel Goodman and Kristin Van Dorn discuss key insights into content-first design, especially within the context of higher education websites. They delve into the importance of designing around content needs rather than trying to fit content into pre-made designs. Kristin emphasizes the necessity of creating a design system that accommodates varied content types and structures to ensure consistent user experience. The conversation sheds light on how using a content-focused approach can lead to more functional, effective websites that meet both user and business goals.


Joel Goodman
From Bravery Media, this is Appendix B. My name is Joel Goodman. With me is Kristin Van Dorn. Hi, Kristin.

Kristi Van Dorn
Hi, Joel.

How’s it going?

Pretty good.

It’s conference season. Well, summer conference season or coming up to it, as we’re recording. And you and I are headed out to the Texas Association of Community College Marketers conference in Austin, where I’m going to be leading a pre-conference workshop on CRO and SEO and UX and all kinds of fun stuff.

And you are giving a presentation on the second day of the conference on content first design and why that is something that is important. And, I really like explaining what we mean as an agency by content first design because I think it comes up a lot, but then when you get into projects, sometimes people don’t understand what it actually means.

So, let’s give a little preview of that and talk a little bit about what we mean when we’re actually talking about content-first design.

Yeah, so I think oftentimes when we’re thinking about the content for our website, we involve lots of subject matter experts. We involve lots of departments, and people who normally don’t engage in ongoing marketing efforts are suddenly brought in to speak for their department or speak for their program and give some authority to it or give some backing.

We’re looking for them to sign off and determine whether or not they feel comfortable with what we’re trying to position their program for. And so all that extra involvement from different stakeholder groups usually draws up a lot of emotions and feelings about your website content. And sometimes you have people that are not typically in a marketing writing role take a stab at creating some content.

And, more often than not, they kind of want to see the specs of the design first.

Yeah. I think higher ed is kind of old school in how they do design processes anyway. A web design tends to be this process of we’re going to see Photoshop files and we’re going to review them, and we need to see them for a bunch of different breakpoints, and the design process for the web especially has moved on from that.

I mean, I haven’t used Photoshop for web design in a while. probably close to 10 years. I mean, it was Sketch at one point, and then it moved into Figma, and it’s all Figma all the time, and it provides these tools for doing actual responsive design with traditional design tools and gives us ways to prototype.

And so we’re not thinking in terms of this old school take a look at a picture, you know, do some revisions, and then cram all your content into the picture that you have approved. we can use smarter, smarter ways to go about this stuff. Right?

Yeah, so, you know, I don’t think that it’s necessarily bad when people want to see like the visual direction of the site. But I find that’s difficult to convey why designers want to see the content first because I think the fundamental understanding of websites is that the design is the foundation, you know as everything else goes into the design. So, the design has to be right. And then we’ll worry about what fits inside of it.

But we like to reverse engineer that and say what needs to go inside of it and what we want our audiences to think, feel, and do. And how do we create a design that’s supportive of that functionality? So, in the presentation I’m going to give in Austin, I’m going to talk a little bit about like the difference between art and design, that art is art for its own sake.

So it can look and feel and accomplish its own goals, but like it doesn’t even have to have a goal. It is about an object existing of its own accord. Whereas design has to fit a function. We judge the quality of a designed object on how well it functions in achieving its goals. Right. And so web design is really similar to that.

And the design is not the function itself. We don’t want people to engage with the design for their health, you know, or as a fun activity for them to go through our design. What we want is for them to consume the content. We want them to learn certain things about our institutions. We want to engage in conversation with them.

We want them to feel certain things when they visit our websites, when they see our statistics and our social proof and all of these pictures that we’re adding to each webpage. We want them to feel things, and ultimately, we want them to take action. So that is the function or the goal of this design process, which puts the goal at the center of content.

So I wonder if there’s maybe a too minimal of a view on how design is defined. Like maybe there’s a little bit of a mismatch between what agencies view as design and what people within the institutions, people on the client side, understand design to be right. And I think a lot of times on the client side.

It is that mix of maybe a little bit too far on the art side because design and art are, they overlap, and they are connected in ways that the creative visual side of it is that, overlap. But as you said, design has to function. It has to have a goal. It has to have a business purpose.

And if I reach all the way back into my master’s degree and like that first Intro to Media Studies course that I took, we actually tackled this topic pretty early on. Design has a purpose, whereas art can or can’t. It doesn’t have to have a purpose, you know, and oftentimes, it doesn’t have a purpose beyond just the artist creating the thing that they want. And even if it has a purpose, once it starts, you know, kind of veering into that business purpose side of things, that’s when it kind of ceases to be art in some ways. Um, or you could make that argument in any case.

Uh, not here to start a diacritical discussion and argument on what art is or is not. But I think on, you know, on our side. When we talk about design, we’re not strictly talking about visual design. We’re not talking about the look and feel of stuff, which is the terminology that often comes up, right?

It’s we want a new look and feel. Look and feel is also a little bit of a misnomer, too, because a lot of times, the stuff that you are writing, the photos that you are taking and including, in a page, maybe the videos that you’re doing, those also change the feel. It’s not just about colors, typography, and layout.

It’s about the actual content of what someone’s looking at. Right. And so when we talk about doing design, we want to start with written content and move into more of the visual content. And then start putting that into a context of usability, of, visually designed, of, of pretty, of, of surprise and delight, which I don’t, you know, I don’t like that because that’s, it’s a little cliche at this point, uh, but in, we, we want to make sure that design encompasses how the content is crafted because that you have to, you have to kind of design the content like figure out what content you want and then design it in a way so that it’s in the right format. It’s in the right hierarchy. It’s you know, it’s following a narrative that makes sense.

And then you move on to this visual layer of design that encompasses more of user experience and user interface design and your layout and and all of that sort of stuff. and they go hand in hand, but if you don’t know what the content is going to be, you can’t just make a layout.

Because what are you laying out? You’re laying out squares and lines and circles. And that’s not really, that’s not really designing. That’s I don’t know. That’s more on the art side of stuff, I guess. Because there’s no purpose to it.

I think part of the reason that we want to know what your content is, is because design has changed fundamentally so much. Now we talk about building design systems, and then we talk about these patterns that we’re going to be using in our designs so that you’re not getting that Photoshop flat file.

What you’re getting is actually a visual language that complements your written language. And so it’s deciding what header, what typography, what container you want your content to fit in. And so to design for that well, we need a system or, A set of patterns that we identify in our content.

So if you’re just going to take, for example, program pages, and you know, you want every program page to start off with an introduction about what your program is about, you also know that you’re going to have popular class listings. Or you want to include information on internships or career outcomes or, some statistics or some quotes from current students or faculty profiles, you know. So, you have a set of patterns that you’re anticipating using across multiple pages of your site, right? So to get the content first for those means that you can determine, okay, this is at the approximate word count that we’re going to have across each page, or if we’re anticipating that we’ll have a wildly different word count, depending on the program, you know, say you’re going from, a minor page that has a brief program description to a major page with multiple, disciplinary, sets underneath it, right?

Um, you know that they’re going to have different needs, and you need to design a container that can accommodate both. And I think that’s what we’re trying to get at when we’re asking for content first. So what do these different containers and patterns need to illuminate so that someone that’s going from page to page to page can reasonably expect what comes next can skim to get to the information that’s most interesting and relevant to them and their decision-making process that motivates them to take the next step or the next action on a page. Um, Those kinds of content ideas give designers a set of parameters upon which they’re going to lay out these patterns that you can use across your site.

And if we don’t have that, then the pattern winds up being very plain and wide to accommodate as much as possible. And it reduces the likelihood that you’re going to find those patterns to be very effective in creating a meaningful visual language that accompanies your written language,

Or on the flip side, you end up with patterns that are designed for Not enough content or way too much content. we’ve run into this with projects where we haven’t done the design, but we’ve been building it out and helping people try to develop content strategies with it; someone wants to put three paragraphs into a space where there’s only supposed to be one short paragraph with like two sentences.

And it just looks ridiculous. It doesn’t fit, and it looks awkward. Being able to anticipate the needs that you have and the amount of content for these different patterns, I think, one, helps the people who are crafting these pages from a professional standpoint, but then in the future, when you want to maintain the design on your site.

You have that idea already. You can go in and work within those confines or say like, wow, we really don’t have any patterns that are going to fit this amount of content. We need to design something new that’s going to fit within what we’re doing already. And too many times, I think we want to do the reverse. It’s here’s our design; now, let’s try to craft some content that goes into this design. And then you don’t even end up with the necessary content that people want, right? When you lead with that visual and that design, you don’t necessarily fulfill the needs of the audiences that are hitting your site with written descriptive informational content.