Does my header make my blog look fat?
by Christine Martell on April 27, 2008
in Visuals
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.
Hey, it looks like reading your blog has taught me to look at the lines in images. I’m starting to be more aware of that aspect of design, although I’m not always confident. This is a really helpful post in showing the thought process and options for tweaking an image.
My only problem is that I’ve noticed I spend much more time playing with images for courses I design now than before I started reading your blog. I can’t always just slap a stock photo in and be happy with it anymore.
Thanks for sharing your expertise!
Christine – sorry I’ve taken so long to respond. I did read it this morning but have been suffering from a cold so put it off till tonight. Then got busy organising a Commenting Challenge which kept me really busy.
But the good news is I’m feeling much better tonight.Now onto the important stuff.
You are so totally amazing with what you do with visuals and how you can see what is happening. I think the bottom one with the smaller tag line looking to the left is better. Do I grab the image from here or do I need to get you to email it.Â
I did ask opinions and Laura said she likes the original because she hasn’t been to Perth (she is sacked!). But then agreed the bottom on is really good.Thanks so much I really appreciate it.
Oops sorry your blog doesn’t like HTML links or I did it wrong? Do you want to edit the link to make it look better?
Sue, hi. Notwithstanding Christine’s improvements, the image is not relevant to the blog content or engaging. IMHO the Edublogger header should also be re-thought. It’s text surrounded by text and very distracting. Have a look around istockphoto; there is some fabulous (almost) free content. http://tinyurl.com/6lv4d5 and http://tinyurl.com/5mzfum and http://tinyurl.com/65u96o.
Or, better; since you’re photogenic, use a photo of yourself. Best to get a friend to choose one.
Use something simple and relevant.
Your content is fabulous and that’s the main thing.
Yes I think the mobile and tech devices concept might work but perhaps the devices should alternate with kids’ faces? A line of kids would also work…
@Bret I have minimal control over the header for the Edublogger and it needs to emphasise the connection with Edublogs for branding reasons. But since Edublogs is having a makeover there may be an opportunity to discuss.
@Bret and Christine My core audience is educators and people I’m trying to help. The blog name and URL is a classic of bad choice starting out and too hard to change now. Mobile no longer is appropriate because very little of my content is on mlearning. TAFE’s not that great either. So once we cross out the words that don’t work we are left with almost nothing. My students are late teens to adults but the focus of the site is about helping others.
I’m not at all qualified in the field of design, but I know what I like and I wonder if what I like taps into that universal aesthetic of, "hmm, yeah, that works, looks good and feels right". I’ve appreciated this (comment) conversation and appreciate the endeavour to get the visual ‘right’ and matching the content. My blog still has the default Wordpress banner and I’ve also been wondering about how I can give it a graphical treatment that ’speaks’ to what I’m writing about (along with an appropriate theme). Maybe I’ll go for a ‘compilation’/line of images for the banner or could I have a set of alternatives that cycle through. Hmm, some pondering required…I like the treatment Christine has done in doing the makeover for Sue’s banner – great to hear about line and direction etc. I suppose in the end the ‘logo’ will always be a bit subjective and hopefully will, over time, ‘become’ part of the site/blog.
The trouble with my names is even if people don’t really know what it means they remember it. So it’s so wide spread on the Internet. I think for now, unless Bret convinces me otherwise that I will stay with the one you have done because I like it (and as a reader said a blog is also a bit about you).
What name people associate me with depends on their level of personal connection. If they only read my blog then it’s often my blog title they remember. As they move towards interacting with me it changes to Sue Waters regardless of site. Some people also think of me as aquaculturepda and dswaters. Online identity such a big topic.
One of my commenters wrote:
As a reader of lots of blogs their headers are important to me, not only as a means of reminding myself where I am and whose blog I am reading but also because they give bloggers an opportunity to make an immediate visual connection with their readers. Sounds like there could be the start of another competition here – blog headers, their ‘hidden messages’ and reader reactions.
What sort of blog header images do you prefer?
Gives you more food for thought.
Wow! I really enjoyed going through the intricate thought process of the image. I was wondering if you could take a look at my three blogs and give me some feedback. I am sure you are busy, so I obviously don’t expect you to do all three, or even one for that matter, but I would love a quick run-down on what story you think my images tell. You can find me as number 57 on the comment challenge wiki:
http://commentchallenge.wikispaces.com/
From Shelly Q
Hi, Christine! I am also here via the CommentChallenge, and I’m loving
your play-by-play analysis of the power an image can have. Will save it
with my info-rep (for information representation) Diigo
tag, as I think I may want to refer back to it later. Readers of yours who
consider themselves graphically challenged might enjoy a site I just
stumbled across today: ImageChef.com
@Christy I like your point about the ways in which our elevated visual
literacy may mean that we are less willing to ”settle” when it comes
to images. (Although my blogs are all still pretty much image-free… that
summer ”to do” list just keeps getting longer and longer,
doesn’t it?)
At the moment, I’m spending some time mulling over a different kind of
”image…” How do educators think about managing their online
identity?
Hello!
Very Interesting post! Thank you for such interesting resource!
PS: Sorry for my bad english, I’v just started to learn this language
See you!
Your, Raiul Baztepo
Hi !
My name is Piter Kokoniz. oOnly want to tell, that your blog is really cool
And want to ask you: is this blog your hobby?
Sorry for my bad english:)
Thank you:)
Your Piter Kokoniz, from Latvia
Christy,
That so makes my day. You know I write this stuff here and send it out into the universe hoping it will make a difference to someone, somewhere. It’s nice to know it does
It gets faster over time. You get better at making the assessments, and the technology keeps getting better at helping to make versions and options. Still, I have the same challenge, and there are many days I wish I could get away with a powerpoint template and bullet points. At least we know when we are choosing the shortcut.
This has been a rough year for colds all round, so I’m glad you are feeling better. Another 31-day challenge is a good thing to be distracted by. I love the concept of focusing around commenting.
If you click on the little versions, you will get the full size one to grab for testing in the template.
I thought the plug in I added made it like html, but maybe not? I’ve tried editing, and have the link working, but can’t seen to remove the accented A’s? Very strange.
Bret,
I like the line of books image. And I know from some of the testing I have done that faces are often quite effective. I don’t think Sue has control over the Edublogger header, but I agree, it could be more effective.
Sue’s template takes a long thin header, tough on the faces. It might be interesting to try a line of mobile and technology devices….almost like a train that goes across the top? What else might she use?
Bret,
That’s so interesting. I don’t think about kids with Sue’s site, but that is probably because I train adults, so I’m paying more attention to the tech parts.
Sue,
I know you do a lot with K-12 teachers, how old are your fish students? I always thought of them as young adults.
Who do you think of as your core audience?
Hmm.
I certainly agree with you Sue that HELPING is the primary focus of your blog. I wonder if you could get away with changing the name if you kept the same URL and feed? Maybe “Helping You with Technology” so you keep the technology part? Then the tagline in the image headers could specify the web 2.0, e-learning and m-learning
How about you run a twitter/blog poll for image ideas? Ask people what images they think of when they think of you and your blog. What do they think of when the are looking for help? What do they think of when they are offering help? You may get the perfect idea.
Sue, you are so right. You liking it, and it feeling like “you” is the most important thing for a personal blog.
You also raise an interesting issue with the idea of something being all over the internet. I wonder what people really remember, and it probably varies from person to person. I always think of your name, and am constantly forgetting the name of your blog (clicking on the wrong one in my reader).
I remember the shape of names, so I do know yours has a big M at the beginning, and about how long it is. I suspect that isn’t typical though! The blessing and the curse of having one over developed sense.
Colin,
That hunch is probably your knowing more than you think about what works visually.
You have a great tagline for imagery. Observations, reflections, and adventure. That certainly lends itself to rotating images or a lineup of some kind. And like Sue has been talking about, the ‘logo’ is a compilation of images and names.
I’ll write a post about your headers soon, they are great examples of images that work well.