Designing for the Unknown

​What happens if you could detach your design from the content. What if you had the confidence to know that whatever content is provided (at a later point) the site will always look good. Wouldn’t that be amazing?

I gave a speech at the WDC 2014 about Designing for the Unknown; building themes when you do not know what content will be. I wanted to share a few point.

If you have built a site for someone else (client, family member with a business), then it is more than likely, you would not have all the content during the design phase. You would have essentially been Designing for the Unknown.

At BaseKit, this is a topic that we hold close to our hearts.

For those that don't know, BaseKit is online website builder. We’ve been live with our product for about 5 years. Currently we are running over 1.5 million websites worldwide. We have over 100 web hosting & telco providers using our software to offer a website building service to their customers.

There have been 2 major releases of BaseKit. Version 6 and Version 7 but there was a fundamental difference between to 2 versions.

V6 is a freeform tool that allowed you to drag and drop anything anywhere geared to Designers who want to use a visual editor over HTML. If you wanted your logo in your footer buried deep in the deeps of your content, you could. Within the the Editor we give you complete control of content, positioning and styling.

The V7 editor is completely different. It’s targeted at the small business owner that wants to get the online presence. All the templates are created by our template team and a user of the editor has limited control over style and layout. The product limits a user to adding content to one section of the page and templates are populated with data collected from the user; logo, company name, social links, etc. This allows the Template designer make all the right styling choices whilst the user can get on and add content easily in the confidence that it will always look great.

We (and other content management systems) have a unique design problem to solve; Every month, thousands for people build their sites on top of one of our templates. When we build themes, we need them to consider whole range of content, business types and cultures will be placing contenting into our editors. We need to build themes that look good with minimal content and that can organically grow as the site expands.

We are essentially designing for the unknown.

To help you visualise this problem. Think about your latest site design. Think about reusing it 10,000 times. You give it to 10,000 different people, of different cultures that want to use it in their various different ways. Their business; as a front of their online presence to their restaurant, or a blog template…. or to promote their plumbing service? How would your design fare?

Across our network we see 10,000s of sites created every single month. Themes that we create get repurposed literally 1,000’s times. The range of content we see generated from users in profound. With a wide variety of content; sizes, shapes, languages.

How much content are we dealing with?

When we are designing themes, we have to consider that the range of content that could end up in it is endless.

How does this affect you?

As web designers we are obsessed with Content First. You’ve been in the situation where this where you feel you can’t continue with a design because of the lack of content. Which comes first! The design or the content?

My Key Point

YOU DON’T HAVE KNOW WHAT THE CONTENT WILL BE TO START THE DESIGN OF A SITE.

Thinking about the unknown will give you a lot of these benefits:

If you take these tips onboard, content will be less of an an issue. Whatever the client gives you, it will fit into the design. A design will be one with the content and grow into a beautiful, usable website.

Top Tips for Designing for the Unknown

I’m going to talk to you about images, text and a few bad design patterns that I think suck and we need to change. I’m also going to show you a few tools we use to help us solve certain design problems.

I've got a ton of demos to support this article, so check them out at healy.rocks

First things first. Let’s talk about the user

What a user / client brings to the table

A good place to start is looking at what content the user brings to the table at various points at the project. The quantity and quality of the content varies through the site’s life.

The most basic assumption you can make with someone starting a website is, most likely, they are starting with minimal content. These days, we can’t say no content; they have Facebook pages, a load of photos, and a few scrappy pieces of text.

Ultimately:

So my first tip is, design with minimum content in mind.

About Minimum Content

You need to design your sites with minimum content in mind. The home page is a special case, by the end of project its usually pretty full but even that is hard to get the right content for. The internal pages of a site are usually the place that suffers from no thought to minimum content. Website designs NEED to work with minimal content. Especially for all of you out there looking at designs on your massive 27 inch iMacs. Nothing worse that seeing the footer floating in the middle of the screen.

Beware the One-Pager Design

And what is all with these one page designs?! You seriously have to wade your way through a theme marketplace before you find actually find non one-page design. It’s like they’re breeding!  

There’s one thing that annoys me about one-page designs, is that they look amazing with a load of content but bad with minimum content. This is a prime example of a Designer running away with themselves with a design without any real thought of how it will be used in the wild.

Loads of times you see Designers making up content so they can fill the `content holes` properly to get that awesome gauge / animated graph working in the theme they’ve bought.

About Text

The way that Designers are using Lorem ipsum is an anti-pattern. It doesn’t represent real life content. What Lorem Ipsum ends up being is a tool that lulls you into a false sense of design security. When you try and put real content in its place and the design breaks or becomes uneven. We've seen designers try and manipulate the content to match you design, making sure theres the exact amount of lines of text in each column so that they line up properly! 

Get out of that mind set. It sucks. As you all know, customers find it hard to write text, full stop. If you’re going to use Lorem Ipsum, vary the length of the amount of lines that you use; because this represents real life.

And try stop relying on Lorem Ipsum so much. This practice is futile because it promotes using content to strengthen a design, when we should be designing to strengthen the content.

About imagery

With nearly 2 billion photos taken a day worldwide, underexposed images with people blinking are here to stay. There’s no substitute for good imagery but it’s really rare to come by.

Making Bad Images better

We use a little trick to make bad images look better. Transparent overlays. It dims the effect of bad looking images and makes them more of a background pattern / texture. Placing text over these makes the images look awesome too (see slides for examples).

Statistics on images

Of the 4 million images we’ve had uploaded to BaseKit here: 

Consider in your design. For example, when making your gallery layouts that show the images in a square format. Doing so will mean that you will most likely be cropping 90% of the images uploaded. Instead opt in for a layout that promotes the landscape image.

About Logos & Headers

Looking at a thin slice of logo data from BaseKit database:

So the chances of a logo wider than 500px, higher than 250px or include text is a staggering 82%

Therefore if you want a create a header to cater for most logos, place the logo in the middle of the header with a fair amount of space around it. No need to include the company name as text as a wide proportion of logos come with them as part of it. And for those don’t, it can fit nicely under the centralised logo.

Horizontal Navigation is hard to layout over time

Navigation is always contentious. Because it can ruin everything! It starts off small with is always awkward to position initially, then as it grows… its original position usually isn’t fitting anymore… so it should be moved. How can you design for the organic growth of nav?

If your answer is Folders then you are Wrong!

Our research indicates that users tend to hate folders for sites under 10+ pages. There mostly top level pages.

A good solution for Header Layouts

To cater for most logos, most site name strings and navigation you need to create a layout like so:

null

As most of the content is centralised, then it doesn't matter for the text and imagery within the logo is aligned differently or if you have a lot of navigation or hardly any, the content within this layout configuration will always look good. 

I want more!

If we stuck to this one layout, then every design would look the same, right? Surely there must be a way that content can configure itself into a better layout based on the what the user provides. At BaseKit, we've been experimenting with some amazing technologies. Mainly Flexbox and elementQuery.js to achieve dynamic configurations.

Awesome Header Layout Demo - in your Browser's Developer tool, change image sizes, title length and navigation element amounts to see the affect.

In the above demo, every time the content changes, the layout responds to organise the content into a better configuration. Setting minimum widths on the logo, site title and navigation makes use of Flexbox's drop-and-organise layout (a basic demo lives here - resize the screen and see the theory in action). Also, elementQuery.js helps align the site title when it's container gets bigger than 768px. Cool! As this is not a Flexbox or elementQuery article, I skip the details, but check out the links to find out more! 

If you want see my slides from the WDC, I've placed my slides up on Slideshare.



blog comments powered by Disqus