Content first or Design first?

Question

When designing a layout, should we consider content first or design first? I make websites and 99% of the time my client wants the design before they start thinking about the content. In these cases, I use lorem ipsum text as content during the design.

Would it be helpful to get the content before starting the design? I think that having the content would be helpful for making some design desicions, but the client always wants to think about the content after the design, which can lead to disruption in the layout.

Example: In one part of the design, I use a single line heading, which fits the lorem ipsum text. The client decides (after the design) that the content of this heading should be something which is a lot longer, and takes up a couple lines, disrupting the layout.

Is it generally considered better to design a layout first, or to get the content and design the layout based on the content?

Answer 1

Get as much of the content before designing as you can.

LukeW has something to say on this:

I've long believed that real data delivers really effective design. Using actual content, information, and activity throughout the design process to inform and guide decisions results in product designs that scale well and communicate effectively.

This philosophy could be thought of as "death to lorem ipsum". Lorem Ipsum, in case you are wondering, is dummy text originally used in the print industry to lay out page designs. It has since been re-appropriated by Web designers (and worse yet software designers) to lay out Web site and application designs.

Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn't reflect what a living, breathing application must endure. Real data does.

It's also important to note that Lorem Ipsum can cause you to make some awful design decisions if you are relying on a certain volume of content that will not actually be there in the end, whether it be too much or too little.

Answer 2

Well, I believe that to make good design you should know what content is. It’s because design is about how to deliver content the right way.

On the other hand, not only content matters, but also form of delivery, medium (read “design”) could make a competitive advantage, become a key idea of customer’s business.

But, obviously, it’s not about content only, there is user study, context of usage, company possibilities and business interest. All these things should influence design.

Summing it up, I think they should be developed together in parallel, influencing one another.

UPD: I’ve found a good bunch of links about topic at uxmyths.com: http://uxmyths.com/post/718187422/myth-you-dont-need-the-content-to-design-a-website

Answer 3

Neither. They need to work together. (That said, design really needs content to base itself on, so content does need to be the focus...but you can't separate them completely.)

Answer 4

The practicality is that getting content together is often a long process, and so getting on with the site design and build makes sense. Having said that, I think that the earlier that content can be decided on, the better, becasue some of the design decisions can then be taken knowing the date that is to fill them.

The other option is that when design decisions are made - say, the size of a heading - these need to be published and adhered to. So the content then has to be made to fit into the designed size. This would work if designers actually had any say or authority over the content decisions.

I think that they need to be worked on in tandem, and the earlier that some of the content can be delivered the better. It is about everyone understanding the importance getting their work and decisions done and made early, and accepting that when the designers and developers say "we need that by Friday" then this means Friday, even if the provider does not understand why.

Answer 5

Ideally, you get all the content first, but this almost never happens in real life. However, you do need a pretty firm grip on the the scope, depth and type of content the site will serve before you start designing.

If you're working on an existing site, a content inventory or assessment will give you an idea what the site needs to carry. Try to identify all the major content types before you start sketching pages. Look for key detail pages. For example, in a catalog or shop site, the product page would be the key detail page.

If the client is planning to add a lot of new content, draft a sample of each new content type. For example, working on an education site that was planning to add a lot of new articles, I drafted a sample article to work with. This helped me nail down the elements of a key page type and it helped the client think about what would be required to create all these new articles.

Answer 6

I work by the motto "form follows function" Not just for website design, but programming, architecture (systems and buildings)

Take for example when working on code (or website design). The first step is always to dump ideas,content into prototypes to understand what it is you are working with. Once defined, then you abstract (refactor) the code and or design.

Then add the form. Then add more function,which then affects the form in ways you did not forsee.
So you would go in this iterative circle, refactoring the form when the need arise.

I find I use this principle for any design related task.

Answer 7

Broadly speaking, I agree with others that it's hard to produce a good design without knowing what the real content would be. Some designs only work well when all content is of equal length, for example, which creates a site that looks great with lipsum text but poor in real-world scenarios.

However, for the sake of adding more to the thread, I'm going to play Devil's Advocate and suggest why lipsum text might work better, or at least why 'realistic content' can be problematic:

1. If the wireframe is for the sake of stakeholders rather than the design / development team, lorem ipsum text (supposedly) helps keep their attention away from the content and on the layout instead. I'm not convinced by this myself, but you can make your own mind up.
2. Stakeholders do read 'realistic' content, and if it isn't appropriate, they find it hard to ignore, however much they know the content isn't the point of the meeting. This can disrupt things.
3. Even if you design around real content, there's still scope for your design to fail if real-world content varies a lot. Just because your one set of 'realistic' content tells you that, for example, blog post titles will always be four words, doesn't mean your design can fail when a user writes something longer.
4. Don't assume that realistic content from a current or existing site will reflect realistic content in the end-product. Many organizations co-ordinate a new site launch with similarly new content and copywriting policies. Be sure your 'real' content really is just that.
5. (Agile advocate alert) You shouldn't be assuming you can capture the requirements before you send the prototype into the world anyway.

Answer 8

I agree that in the real world, you almost never get the client to give you all the content up front. The only difference is if you a re-designing and existing site. But then, they usually want lots of content changes anyway.

I try to get as much real content as I can up front so that I can use that for a home page and an inside page mockup example. I try to avoid Lorem Ipsum as much as possible but with some clients it becomes unavoidable.

One good thing that Lorem Ipsum does accomplish though is to act as a space filler but also to point out to your client that they have not giving you the content you have been waiting forever for. Sometimes I even mark it in red so that when the client is reviewing their site before go live it really stands out for them.

Answer 9

The answer is that design must always be led by content.

That doesn't mean that lorum ipsem text does not have it's uses, but if a page title is going to be 80 characters maximum use 80 characters of lorum ipsem. Don't be tempted to nice of the design by using less text.

The same goes for body text, if an article going to be 2000 words it needs to be modelled that way.

And don't mistake a design's usability as only being a property of the visual design and layout. Labels are super important to usability as it clear text. Design led designs often fail because what might look pretty in prototype becomes cluttered an unusable when content has to be shoe-horned into it in the delivered product.

One solution the industry could consider is to take an approach like the one commonly used in advertsing where a copywriter and a designer are paired. This would mitigate against one of the most common and damaging information architecture mistakes where the designer is allowed to dictate the navigational labels, and in doing so picks labels that fit the design, but ineffectively communicate function to end users and/or end up dictating an innapropriate information architecture.

Answer 10

During the first stages of our web development projects, we first determine what the content will be. We don't need the exact text, but we need to know what types of content will be in the site and what the topics will be. We also find out what content is meant to get more attention, and what is less important. I can't see how a site can be designed without first knowing what the content structure and strategy will be.

Answer 11

I always try and design for optimal usability first, then model with real content at some point.

When I am demoing wireframes to a client, I can say with confidence that "these wireframes can support your content".

Using ipsum lorem is good too, it draws attention to the layout instead of nitpicking content.

Answer 12

This one is great. Helped me understand steps

http://www.boxesandarrows.com/view/ux-design-planning