Group Created with Sketch.
Article

Designing With the Real Deal

The relationship between content and design is an intricate puzzle for most designers and developers. Should the website be designed around the content, or should we design first using placeholder text? Although working with real content is always ideal for designers and developers, we must consider the unique issues presented by the amount of content, types of content, and project deadlines. Regardless of how we handle content, we can all agree that it becomes a crucial variable in the successful and timely execution of the final website.

Pros:

Accurate Representation

When designers and developers are not at liberty to use real content to create website comps, it becomes a guessing game. Placeholder text can be altered to fit and function in the perfect spaces we create, often leaving us feeling “married” to the design. It becomes a real disadvantage once we begin flowing in the actual content and realize that it does not fit as anticipated. Working with real content prevents a situation where time is spent creating a design that can’t accurately be duplicated down the road.

Time Savings

Designers and developers save a lot of time when working with real content because issues can be detected early and reworked before the project becomes more complex. Eliminating problems in the project’s early stages means more focus on each issue at hand and less reworking after the content is in place.

Opens Focus

When the design becomes the primary force behind the content of the website, the User Experience often begins to unravel. Our job as designers and developers is to make the content easily accessible and engaging. Design should enhance the content, not become a distraction or limitation. Often times, designers, developers, and clients lose sight of the relationship between design and content, resulting in a time-consuming process at the expense of the User Experience.

Re-designing the World Cocoa Foundation’s website opened our eyes to how the end product is affected by the availability of content. For example, we were presented with a heavy amount of content for the Cocoa Value Chain page, which allowed us to approach problem solving in a more thoughtful and efficient manner. Because we had access to the content early on in the design and development process, we were able to present the provided information in an easily accessible, organized, and aesthetically pleasing way.

Planning for the Future

Awareness of the nature and format of the content allows the designers and developers to anticipate for future designs and consider including elements that could be crucial to effective branding and messaging.

Cons:

The Waiting Game

We understand that generating thoughtful, consistent content on a deadline is no easy feat. Waiting for the real content can pose problems in the project’s timeline and cause delays.

Early Input

Clients frequently ask to see the designs before submitting content because they feel it helps them “fit” the content to the design. The design and content should have a symbiotic relationship for the site to function smoothly, and seeing the design will end up giving clients the sense that they are restricted.

Exception to the “Rule”

We can’t view content vs. design as a black and white area. For example, In the case of a content-heavy site, the content should take precedent over the design. The success of a website is about balancing the project’s priorities and goals; not just following guidelines. Remember what’s important: clear, effective messaging delivered in a manner that is easy to access and navigate.

When it comes to web design, content can be a real game-changer. However, it’s clear that when designers and developers receive content early in the design and development process, it’s easier to stay focused and organized, and ultimately allows us to create better products for the client. Designers and developers saving time and money while creating an amazing product…isn’t that every client’s dream?

Check
Copied to clipboard http://...