Visual design ideas

Here are some visual design ideas to keep in mind as you design something with only one column.

The more text, the better

Without a doubt the type of content that benefits most from a single column is text. We naturally read text in single columns most of the time. Other types of content feel natural in many other layouts as well, so those types of content are restricted more when forced into a single column.

All of this is to say that if you plan to use a single column for a website, a text-heavy visual design is better.

Horizontal movement is good

What suffers most from having only a single column is the horizontal movement of elements on the page. I do not mean movement in the sense of animation, but whether the elements of the page take up more or less horizontal space. As much as possible when designing in just one column, you should look for opportunities to use different alignments and element widths. This will make the design more interesting.

Layering/depth is good

There’s nothing wrong with using depth, even if you don’t use much width. HTML and CSS are very good at, and make it very easy to use, depth. Put elements on top of other elements, play with interesting backgrounds, layer multiple elements together.

Make elements bigger to take up more space

One of the easiest ways to take up more horizontal space, especially with elements that naturally reflow like text, is to simply make them bigger. A large bold headline goes a long way to both take up space and make the overall design feel more dynamic. This is also a chance to make your content speak for itself by stripping back containers and decoration, and making images and other primary content bigger.

Visual design techniques that might help

I maintain a catalogue of visual design techniques that I’ve come across in the wild. Most of these techniques will help to make a website look better, and that’s especially important when you use only a single column and can’t rely on layout to do it for you. Take a look at Better UI Design now.

Examples in the wild → ← What are the problems? Back to the table of contents