Does my header make my blog look fat?

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

mobileprevious

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.

mobiletech1

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.

mobiletech2

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.

mobileheader3

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.

mobileheader4


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.

mobileheader5

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.

mobileheader6

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.

mobileheader7

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.

mheader8

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

mheader8red

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.

mheader9

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.

Blog Widget by LinkWithin