Tell a clear story with your design.
Hi bloggers! My name’s Kjell Reigstad, and I’m a designer at Automattic. I’m happy to introduce the first post in a new monthly series on “The Principles of Design.” In this series, I’ll share some of the basic tenets of design, and we’ll explore how to apply them to your blog.
This week, we start out with a simple design concept: telling a clear story.
The main goal of any design is to get a message across. It may be a straightforward message (“Buy this product!”), or it may be a complicated one, but in all cases, there’s a story to be told. In an excellent design, every shape, color, photograph, and font choice works together to create a strong, clear message. Great designers add elements that contribute, and (just as importantly!), they weed out elements that distract.
The classic Joseph Müller-Brockmann poster below is a great example of design elements that work together to tell a story. The shapes flow like a symphony, while the simple, organized typography fills in the details.
What’s your message?
On your blog, your main goal is also to get your message across. That message could be a favorite recipe, a personal experience, or an amazing idea you’ve had. Whatever the case is, you have something to share.
Every image, block of text, and button on your blog tells a piece of the story. Sometimes, elements unrelated to your message can distract your visitors and obscure what you’re really trying to say.
Take these two screenshots for example:
Keep in mind that there isn’t necessarily a right or wrong way when it comes to design — the goal is just to tell the story that you’d like to be telling. Explore and see what works best for your blog!
On this blog, the story is about the author’s travel photos. On the left, some page elements get in the way of that story. The backgrounds are busy, and some of the widgets battle for attention. It takes some effort to focus on the real hero of the story: the photos.
On the right, the author has made a few changes that help clarify. The photos jump out right away to lead the story. The background is less overbearing, and the illustration in the sidebar helps reinforce the story rather than distract from it. Although the actual blog post is identical on both versions, the one on the right appears much more clear and concise.
Working toward clarity
We tend to build up our blogs over time, so it’s a good idea to take a step back from the screen every now and then and look at your whole design. What’s the main story you’re trying to get across? Does everything on your page work together? Or are there items that distract? If there are, it’s a good idea to start clearing them out. Even small things can have a big impact! Here are a few suggestions to get you started:
- Is your background a little too distracting? We have some tips on making backgrounds a little quieter.
- Are all of your widgets necessary? If not, it’s easy to remove widgets that you don’t need anymore.
- Sometimes the small things can really add up! Do you have a few too many share buttons? Try to trim down to the ones your audience is most likely to use.
- If you have WordPress.com Premium or Business, you can use custom CSS to hide unnecessary elements by using the
visibility: hidden;property. You can learn more about CSS in our Intro to CSS.
Interested in trying out some customizations, but don’t want to risk messing up your blog? Try experimenting on a test site.
Whenever you work on design, it’s good to experiment. Don’t be afraid to try things out and see how they look! It’s also a good idea to get feedback from friends, or in the Community Pool. Outside perspective can spark great new ideas.
Do you have other ideas on how to make your designs more clear? Feel free to share in the comments.