Designing without content
Making sure your design works
I was recently working on the redesign of Screen Yorkshire with We are Telescopic and started to design the “Other Projects” section on the case study page. This would live at the bottom of each case study page and cross-link users to other case studies.
My first pass of this area looked like so -
After I designed this I then stopped to think if there was a way to bring in the overlapping text element into this area (on the homepage we had large text which overlapped an image against a plain coloured background which helped to break the page up and make it feel less rigid).
So I explored a little and ended up with this -
Then I stopped and sighed as I realised that this was not a viable design pattern for this component.
As film titles could be long or short I couldn’t restrict them to such a small amount of horizontal space. A title is a title. If it was shortened too much the user would have no idea what the film was about.
Really long title lengths could also cause the text to wrap onto multiple lines which would look odd and unbalanced when used against other titles of varying lengths side by side.
I had previously seen this same issue a few weeks earlier on the otherwise beautiful Sainte-Justine Foundation site.
Now you could argue that long titles are an edge case but another concern would be the reuse of this component.
There was no reason why the “other projects” component couldn’t be used on a page about, say, locations or offices or news and so forth and the project called for a lot of these components to be reused wherever possible.
And therein lies the problem with a lot of site design. The need to design components to be reused without any idea of the content that’s going to go into them.
Back in the day
I’ve been designing sites now for over 15 years and can vaguely remember the days of designing them in Flash.
Back then we still had components in a way, a header or a footer is a component that you can use across every page of a site for example, but I’m pretty sure I designed the sites with some idea of the content that was going into them.
I was mostly working in advertising at the time so a lot of the sites I designed were small sites for products, like a new pair of trainers or a car, and copywriters would agonise for weeks on end about the copy that needed to go into the page. The design would change, not just based on client feedback, but on the copy that was actually going into the design.
If I look back at some of my older work most of my designs had real copy in them. If I look over some of my more recent work most of the copy is lorem ipsum.
The nature of my design work has changed from designing an experience for users to learn about a product or service to designing a set of building blocks that a client can “do something with”.
On the one hand, this lets clients have much greater flexibility on reusing components across their site and gives them more control over the way in which they present information. If they need an image carousel on a news article they can add one in. If they need a social feed added to a press release they can add one in.
On the other hand it means that designers have a trickier job in designing something which is both “unique, bold, fresh and exciting” (which all clients want) but at the same time will work for variable content types and lengths, can fit besides other components on a page, in any order, can pass accessibility guidelines and is also fully responsive.
And people wonder why all sites look the same these days.
Pitches
I also find this is a problem in a lot of agencies who will win pitch work with amazing designs full of made up, narrative-driven, content or huge amounts of lorem ipsum that fits the design perfectly.
As soon as you get around to actually designing and building a real site the amazing design starts to slowly erode as you discover that the client doesn’t have X or actually needs Y or wants to do Z.
There is nothing more disheartening than having to explain to a Creative Director, for the fifth time, why you’ve changed something that “looked cool” because it doesn’t, in fact, work.
Erring on the side of caution
For this reason, I find a lot of my design work starts off safe and scalable, as I have to consider all these variables. Then I try and push the design out a bit which can end up with some interesting patterns (like the Screen Yorkshire homepage for example) but equally some patterns which just don’t work on a site where you have no idea where or how it’s going to be used.
We can ignore some of these considerations and hope it all works out but in my experience, we end up with situations like the previously mentioned Sainte-Justine Foundation site (which is generally beautiful) where now and then things just break due to long copy lengths or missing assets or the reuse of components for different content types.
Final thoughts
It’s good to experiment and try things out but we need to always consider the end result here. If you have real content for a site which isn’t going to change a lot go crazy, push those layouts out as you know exactly what you have to work with.
If you don’t have content and need to work on a site which the client will manage and add to, make sure you consider all the variables that your design needs to cater for and give the client as much flexibility as possible without overly restricting the site, both in terms of scalability and design.
