Follow these visual design principles to keep it interesting

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

Use a lot of well-designed text

Text reflows well regardless of the width of the screen. You should use a lot of text in your design. With that extra text comes extra need for it to look good. Typography is your friend.

Horizontal movement is good

If everything in your single column website is the same width it will look boring. Vary where elements sit horizontally to make the website more interesting. This might mean you align text blocks—not the text itself— to the left, middle, and right, for example.

Layering and depth are good

HTML and CSS make it easy to stack items. Use this depth to your advantage. Put colours behind elements. Give something an interesting background.

Make some elements bigger

Variety of scale is also interesting. Pick some elements that could stand to be bigger. Make them bigger. This contrast in size will give your viewer something to focus on. Bold headlines go a long way, as do large images—as long as they’re relevant.

Add visual interest

Techniques to polish your design become more important when you can’t rely on layout as much. Take a look at Better UI Design to see the techniques I have noticed over the years.

Next chapter →

← Previous chapter

Back to the table of contents