Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
    
This feels like an opinion-survey question; could you make it a little more concrete? (SE calls for answerable questions.) –  Monica Cellio Sep 13 '11 at 14:58
1  
This might be a good book to read: contentstrategy.com –  DA01 Sep 13 '11 at 15:23

12 Answers 12

up vote 30 down vote accepted

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.

share|improve this answer
1  
@Roger thanks for the block quote edit, believe or not I never thought to do that, even though the little quote icon was staring me in the face. It's amazing what you can miss sometimes! :) Now off to update my other block quote answers... –  Matt Rockwell Sep 13 '11 at 18:09

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

share|improve this answer
1  
exactly, design is a method to deliver the content! Question is silly. –  colmcq Sep 13 '11 at 15:03
5  
question is NOT silly! –  heltonbiker Sep 13 '11 at 18:52
    
@heltonbiker: question is not silly, but expecting a different answer is silly –  Lie Ryan Sep 14 '11 at 6:01
    
@Nikita Prokopov - Good refrence –  Jitendra Vyas Sep 22 '11 at 9:58

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.

share|improve this answer

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.)

share|improve this answer

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.

share|improve this answer
    
Agreed. The 'concept' comes first (ie what its supposed to do). Design and content then follow from this. –  PhillipW Sep 22 '11 at 10:54

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.

share|improve this answer

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.
share|improve this answer

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.

share|improve this answer

We're looking for long answers that provide some explanation and context. Don't just give a one-line answer; explain why your answer is right, ideally with citations. Answers that don't include explanations may be removed.

    
Can you motivate why you do things this way? –  Rahul Mar 1 '12 at 12:28
    
@Rahul, the reason we work this way is that, in my opinion, a website is a frame for the content. For a site to work well, it needs to match itself to the content, and not vice versa. Think about it - when you visit a site, are you there to admire the design, or to find information or read content (unless you're looking for design inspiration of course)? –  Miriam Schwab Mar 22 '12 at 13:04

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer
    
Nice first answer, welcome to UX.SE! Its good to see someone putting some thought into their first answer here. The idea of getting the copywriter and designer working together is a nice idea I'd like to see more of in the real world. However people sadly get a bit siloed, and often content and designers aren't working on the same project at the same time which makes co-ordinating this process tricky. Still, ideal world and all that! –  JonW Jun 22 '12 at 10:31

This one is great. Helped me understand steps

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

share|improve this answer
3  
Linking to another site doesn't qualify as an answer, it's just a link. As per the how to answer guide: "Provide context for links A link to a potential solution is always welcome, but please add context around the link so your fellow users will have some idea what it is and why it’s there . Always quote the most relevant part of an important link, in case the target site is unreachable or goes permanently offline." –  JonW Jul 11 '12 at 11:16

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.