UI Design

Is it OK to design my UI before content is created?

Which came first, the content or the design?

This chicken-and-egg debate has raged for as long as there have been designers, and content needing design. On both sides you’ll find seemingly sound reasons to do one before the other, but to my eye the balance has shifted greatly, where we all too often see UI design happen before content. The house, in my opinion, is being built before we understand how many rooms it should have or how big it’s supposed to be.

UI design

With the proliferation of fully-designed themes, UI kits and websites such as Wix that make UI design seem instantaneous, the temptation to design in a vacuum becomes very strong.

To illustrate this point, a student asked me this question recently:

From watching your lectures and reading your articles, I understand that I should design for the content, not the other way around. But are there situations where you can design and code first, before writing the content?

For example, I’m designing a website for book reviews. The length and style of the content is calculable before I’ve even written it, the format is similar for each book, and I can just paste it in after I’m done designing.

Is this a bad habit, or do you recommend always creating and finalizing the content first before doing any design?

The reason I don’t believe you should design before content is this: everything about the design has to support, communicate and reinforce the meaning of the content.

Not the format of the content, not the delivery method of the content, not the length or volume of the content.

The meaning.

If you haven’t seen or read the content, you don’t fully understand what needs to get across to the viewer in the UI. That understanding is what should drive every aspect of design, from the amount of content on a given screen to the layers of navigation needed to determining the appropriate way of interacting with it. Throw in colors, images, font styles and everything in between; it all has to help present, communicate, support and reinforce the meaning of the content.

Designing a UI without that understanding isn’t designing — it’s decorating. It looks nice, but it doesn’t do all it could and should be doing to help the user parse, navigate, understand, anticipate and predict the content she’ll find.

So let’s consider the example above: will this approach work from a mechanical standpoint? Of course.

Will it do all it can or should to reinforce, enhance or increase understanding of the content?

Probably not.

Good user experiences happen when people feel like they’re capable of finding what they need or making sense of what the UI exposes to them. When they can’t do either, they don’t visit or read or use what you’ve built.

So when it comes to delivering positive UX, content isn’t just the most important thing; in most cases it’s the only thing.

Question: Do you design the UI before or after content is created? In either case, why? Leave a comment and let me know!

Get My Secrets to UX Success: My New Book, Think First

  • rogercparker

    Joe: I’m enjoying your posts, and learning a lot, but I wonder if there may be times when design ** does ** precede content.

    Such as the number of books that are designed as two-page spreads, often text on the left page, illustrations, glossaries, user stories, quotes, or Q&A on the right-hand page.

    Often, a fixed design may also improve publication quality, because of the limitations it creates. When you only have a fixed amount of space for text, it forces you to write better, I.e. edit to the bone, cut unnecessary words, etc.

    Some of my clients and my best writing were 1-page, 2-sided newsletters which forced an economy of expression.

    By the way, I feel your Ten Commandments ebook, which I frequently recommend to clients, is an excellent example of the fusion of content and design.

    • Hi Roger — I agree with your example here, and you make a good point. There are certainly isolated areas where some degree of design does precede content. Like your example, these are situations where the issues that “design first” approach is solving are mechanical, rather than cognitive or emotional. Even so, that fixed design is still likely based on the type of content that will be displayed, the audience receiving it, the brand message that needs to be communicated.

      Thanks for the insightful comment, and thank you also for the kind words on the eBook :-)

  • EssJ

    I’m not sure I understand your advice in this example. The book reviews themselves, the content, will be likely extremely varied in subject matter. How would he design to enhance the meaning in this context? If you know your content will be book reviews, why is this not enough context to make decisions about how they should be presented?

    • Great question. The reason it’s not enough is because you only have insight into a small, singular piece of the UI — the area where this calculable, finite review content appears. That’s a small, singular piece of the entire UI and additional screens. What you don’t have any insight into is the rest of the interface, the rest of the screens associated with this one. When you have no content yet — and by content I mean everything from navigation and field labels to guidance text and beyond — you can’t really account for all the variations in flow and presentation the UI has to support. You don’t know what other kinds of content you’ll have to support on other screens, so it’s tough to create a UI approach that accounts for both, and is appropriate for both in the minds of a user. You don’t know how many levels of navigation you might need, and subsequently how you’ll differentiate between them via styling. Sound UI design begins with getting answers to questions: how will the site’s information architecture be structured? What organizational model (there are at least a dozen possibilities) makes sense? How many labels do we have for categories and subcategories, and how many characters are those labels? What’s the smartest way to expose those layers, where they all fit and where their relationships are obvious? How many genres will you cover? Is that list finite, or will it expand in the future? How do people expect to navigate through all of this? Good UI design comes from designing the whole along with the parts — designing one without the other almost always results in a lot of rework later, or a UI that frustrates users because they can’t move through it the way they expect. Hope that helps illuminate the point :-)

Blog Categories