Part 1: Your template as your visual foundation

Fred Deutsch emailed me with a Help, help, help me subject line:

Hi, I really enjoy your site and am learning a lot. I’m wondering if you
might provide me some feedback or suggestions? I started my blog for two purposes — first to communicate with constituents and educational people, and second as a sort of reference area for me to list all my favorite sites (the side bars). But now that I’ve been blogging a few months, the blog page seems congested to me — or at least not as visually inviting as I would like it to be. Do you have any suggestions?

When I started looking at Fred’s site, I noticed a couple of things. But in order to really explain it, I need a couple of posts to do it. So I hope Fred can hang on while I talk about some of the visual basics under what is going on in his blog. When we select a template, we are choosing the foundation visuals of our blogs. I’m going to talk about the template Fred has chosen in this post, and write another post on the choices he has made that affect it.

How do people read on the web?

Eye tracking studies have shown people tend to read in an F shaped pattern online. These are heatmaps, where the areas that are most looked at are red, then yellow, then blue, with the grey areas being places that the eye skips over.

Looking at these charts you can see there is a general overall pattern (the F pattern) but you can also see how there are visual elements that also pull the eye. For example, in the middle heatmap, there are arrows that point to a box on the right side.

So when design elements fall into this F pattern, it’s pretty easy for the eye to follow. If you want the eye to go in another pattern, you have to do something to get its attention.

The template underneath Fred’s blog

Fred uses a customized version of Stardust. It’s a black and white template with red accents. Red against the black and white provides a lot of contrast and the red strongly attracts the eye. There is a decorative spray of leaves that also acts to deflect the eye back toward the post.

You can see, if you remove the spray (see template below), there is nothing to stop the eye from being pulled off the right side. The links create tracks for our eyes to follow that lead our attention off the blog to the right. Now if you have a short post so there is another red calendar or a strong image inserted on the left, you may be able to pull the eye back. But how often do you write your posts to satisfy the visual need of your blog? (OK, so I might.)

What can you do to change the way the eye moves?

In this case, you can darken the color of the links on the right. That will help the brighter reds move the eye back to the post.

In order to do this you need to get into the code and change a color number on the stylesheet. It isn’t terribly difficult, but you do have to pay attention and not modify the code in any other ways. There are several steps:

1. Determine the color number of the current links so you can find it in the code
2. Determine the color number you want to change them to
3. Find the place in the CSS on the stylesheet that controls those links
4. Change the color number

Finding colors

There are many ways to do this depending on the software you have access to. I’m showing the color picker in Photoshop, since that is the image program I use. First I took the screen shot of the template I show above, then open the image in Photoshop. I used the eyedropper tool to find the red used in the template, then selected a darker version of that color. The hexidecimal color number I need for the code is in the box at the bottom of the color picker.

Changing the Stylesheet in a WordPress blog

I installed this template on a testblog that has been updated to version 2.5.1. If you are using another version, the admin interface may look different, but the basic process is the same. Open the admin, go to the Design (used to be called Presentation) tab. Select Theme Editor, then Stylesheet. Scroll down until you find the code for the links (click on the image to see it larger and clearer type). Make the change and click update.

Doing things in unconventional ways

Now, I am certainly one to break rules, especially in design. However, I do think about when it serves me and when it doesn’t. In a blog, we have many elements competing for attention. If we can use some elements that are familiar to the general user, those elements basically stop competing. We see them, recognize them, and move on.

This blog template chooses not to use the orange RSS symbol to subscribe to the feed. Instead it uses a link labeled RSS.

Usability expert Jacob Nielson has this to say:

The first, and strongest, guideline about news feeds is to stop calling them RSS. In our study, 82% of users had no idea what this term meant. Using implementation-oriented terminology is generally a bad idea, because most users don’t understand (or care about) the underlying technology. It’s better to use terms that indicate what the concept does for users. In this case, “news feed” does this far better than “RSS.”

How do you deal with a visually noisy blog?

OK, I’ve given you my perspective, now tell me yours. What do you think about this template and the visual flow? What do you do to increase the readability of your blog from a visual perspective?

Next up: suggestions for Fred’s blog

I’ll be putting up a second post on how to de-noize (I’m going to copyright this word, so don’t steal it) a blog, using Fred’s as an example. Some of the things we’ll be looking at are the unintentional consequences of changing the template and what are people looking for when they come to your blog.

Suggestions for a visually noisy blog

Sue Waters has been cleaning up her blog again. She wasn’t happy with her former header image.

I assume this is the skyline of the Australian city she lives in? I don’t know for sure, and many of her other international readers may not know either. Is that a problem? Maybe, maybe not. But let’s look to see what she might be trying to convey for her blog.

What’s the blog about?

The title is Mobile Technology in TAFE. From her About page, we learn TAFE stands for Tertiary and Further Education. She is an aquaculture lecturer. But it doesn’t take reading very far to learn she is passionate about all kinds of technology. Not just a little, she lives and breathes it. And it’s not just using it, it’s about helping people all over the world learn how to use it.

The old image is busy. Lots of buildings, and the image is cropped so there is no space above the buildings. When she first started using this header, the busy visual quality reflected the posting frequency and how the blog was chock full of information.

The blog went on a diet

Now Sue didn’t stop her constant output of information, rather she added other outlets. She found Twitter early on, and it was a perfect medium for her. I still don’t get twitter, but I know everytime I log in, Sue will have posted something interesting to look at.

She also started writing for The Edublogger to help people using the Edublogs system. What I know is when any new thing comes out, if Sue hasn’t already written not only about how it works, but how to actually apply it in educational practice, she will very soon.

So if you follow Sue in various places, you know she has increased her output. If you only look at her personal blog, the quantity of information is lower. Not in quality, just quantity. So, I think her instinct to reduce the clutter in the visuals better reflects the new overall feel of her blog.

A new header image

Sue put up this new image.

And she got this comment from Christy Tucker

Does it seem like the header image leads your image off the right side of the page though? Look at the line of the rocks and the direction the person is facing–it seems to all be pointing off to the right. I wonder if you flipped the image horizontally if it would work better. You’d have to move the text somewhere else, perhaps, but with the image flipped it would draw your eye right down to the content.

Just a thought–you might want to check with Christine Martell or someone else more visually inclined. It’s possible I’m simply imagining things!

Well, Christy, you are not imaging things. The header does lead the eye to the right. But lets’ look at why.

At first glance, you might think it’s just the direction the boy is facing. This certainly contributes, but it’s aggravated by the type which is anchored visually by being right up against the left edge and visually pushes into the back of the boy.

Now, there aren’t any right answers for how to deal with this. Just some options to consider. First, you can move the type over so it leads the eye to circle back around the rocks.

If you have more image software skills, there are some other things you can do. You could shorten the tag line so it fits in the rocks, and flip the boy so he is looking back the other way. This shifts the eye to lead strongly down along the back of the boy. In order to really see if this works, you would need to look at it in the template to see how this lines up with the rest of the template.

You could also remove the boy entirely, and allow the header to lead the eye down the space between the rocks, but in a softer way.

Moving the type to the top balances the image standing along better, but once again, you would want to test it in the actual template to see how it works with the rest of the elements around it.

The same would be true for darker type. You would want to look at it in context, and pay particular attention to how it related to the title of the blog.

What do you want to say with your image?

We’ve made the isolated header work better visually, but does it say what Sue is trying to convey? She said:

the idea was the lonely person staring out into the vastness of the ocean wondering what to do and where to get help.

To make this work, we probably need to bring the boy back. However, when we face him toward the pile of rocks, he isn’t really looking out into the vastness. So, I moved him to the right and adjusted the type to visually relate the the framing of the rocks on the left and the boy on the right.

This leads the eye to circle back and focus on the tagline.

The type feels a bit crowded still, so I also try the shorter tag line and change the type color to relate to the lichen on the rocks below it. The water where I removed the boy also needed a bit more touch-up, and I could spend even more time improving it.

But what’s the right answer?

In design there isn’t a right answer. It’s a balance between what you are wanting to convey and the limitations of what you have to work with combined with the opinions and desires of the person who gets to decide. For a blog header, you are also affected by the template you are using and all of the other elements that surround the header.

Any of these headers can work. Let’s send it back to Sue and see what she thinks. And have her try some of them in her template to see how they work in context.

Design is a process of trial and error for many of us. It might look like we can just pull these things out of the air, but I think for most of us it is iterative. Some people can visualize exactly what they want in their heads then just create it, but I think there are many more of us that try lots of variations to see what will work.