What’s the first thing you see when you go to a site? What’s the second? Ever thought about it much?
It’s usually the first thing we do when coming up with a concept for a clients’ site so we thought a brief overview of the thought process could help you guys improve your spaces if a new design isn’t in the budget.
Ideally you want the order of visual emphasis to go something like this:
- Header/Site Branding or Logo
- The thing you want your visitor to do upon arriving at your site – your call to action. This is different for everyone and we will cover that more below.
- A picture or graphical element, ideally associated to the content on your site, which then leads the eye too…
- Your post title
By designing your site effectively, you can lead your readers down a visual path and encourage them to act upon the items you highlight with your design.
Fear not graphic design noob, you don’t have to be a Photoshop wizard to do this for your site and you don’t have to pay someone (gasp!) to do it for you if you don’t have that in your budget. You can make small changes yourself that have a big impact. Here’s how…
Evaluate Your Site
What are your strongest visual elements? Are you emphasizing the most important things first? The easiest way to do this for your own site since you see it constantly is to stand back and look at it. Like get out of your chair and walk across the room sort of thing. You can see what pops out from your page and what fads away.
If you feel like you just can’t be objective ask a friend to number the top 4 elements when they land on your page. It’s pretty easy for friends to be objective on this one since you’re not asking if you site sucks, you’re just asking for an order and that doesn’t make things awkward. Now you have in hand what you need to change and improve. You’re halfway to fixing it!
The MOST important element on your site, hands down. This is your online identity, your brand and it should be the strongest element on the site. Strongest element doesn’t mean gaudy rainbow, it means strongest, first to be seen and has the greatest impact. It should also tell your visitor something about you or the site as well but for now we’ll go with strongest visual element.
This is fairly easy to achieve because the header is the largest element on most web pages. This emphasis is naturally built in due to the sheer size of most headers.
If you’re looking to spend a little money on your blog, getting a nice header or logo is always my first recommendation. Your site header tells the world what your site is about and that image can do triple duty on your blog, twitter background and facebook page without spending anything extra.
Do it yourself-ers can take advantage of Gimp, an open source graphic editing program or even download Adobe Photoshop for the free 30 day trial to make you own. One point with making it yourself – if it looks tragic, don’t use it! A terrible header can do more harm that a plain one so be objective, look at headers you like and echo elements or colors to help you get the creativity flowing.
Your Call to Action
You want a visitor to do something when they arrive on your site. Now just take a moment to figure out what that is: subscribe to your rss feed? sign up for your newsletter? like you on facebook? Think of the single most important action you want someone to take and put the visual emphasis on that area next.
The area will be smaller than your header so it has less “weight” on the page therefore you need to ensure it stands out while still fitting with the overall design of your blog.
There’s a lot of visual clutter on some blogs, so much so that the eye gets overwhelmed and can’t settle on something. If your eye can’t focus, your brain can’t commit to take action. Part of emphasizing areas of your blog means clearing some of the visual clutter so that you aren’t just making something brighter when the whole site is bright.
That’s just trying to yell louder when everyone around you is already screaming, it just adds more noise and no one gets heard. Emphasis can often be achieved by removing images from around the thing you’re trying to draw attention too. White space can be a good thing.
If you’re having trouble deciding on what your call to action is, think of it like this: a visitor is just that, a one time fly by, what action would help you continue the engagement with them past the original visit? That should be your call to action.
It’s different for everyone depending on your goals but think of how to prolong and continue the engagement, think in terms of creating a relationship. That will help grow your blog and brand so that should where your visual emphasis lies.
Word of caution. People hate pop ups and flashing gifs, sure they increase the liklihood of conversions but you want your readers to like you. Maybe not annoying them into doing your call to action would be more awesome.
No graphical wizardry here, just photos. Great engaging photos would be a bonus but we all start somewhere. Ideally place these above the fold (so no scrolling is necessary) and put a caption with it to intrigue the person about the post. Captions are one of the most read portions of blog posts so don’t waste the opportunity to pull in your new visitor and make them a new reader.
Depending on your site you may need to be creative with this. Many sites these days have magazine layouts with a lot of photos or are brochure sites (think businesses with a static homepage) where you land on a page that is more “about us” than blog. The concepts remain constant though, engaging photos pull people to engaging content.
With a blog, your images will always be changing so this gives you fresh opportunity to add some spark to your space as often as you post. Be sure to put the most beautiful, funny, shocking or crazy picture at the top!
This isn’t about writing a great headline, this is more about the visual emphasis of that great headline. It’s very easy to play around with your CSS stylesheet to increase the size of your headline font, change the weight (such as make it bold) or other subtle changes that make it more visible.
Here’s a quick tutorial on how to change your font size and weight:
Under Appearance–>Editor in you main admin panel you will have access to your stylesheets and php files for the blog. Your style sheet comes up by default. You will see a whole bunch of things that may look really confusing but you can totally do this!
Below is a snipet of the css from this site. The #content tells you that this portion refers to the content section of the blog, and not the sidebar, footer, navigation menu, etc. The h4 tells you that this controls the Heading 4 in your blog. The widget-area h4 tells you that it also controls the headings in your sidebars as well so what you do to one is done to the other.
Underneath that is a series of values that tell your blog how to display the heading 4 everywhere on the site. Increasing the font size and changing font weight to bold can help give you the emphasis you want. When changing sizes it’s important to double check that you don’t have lines of text overlapping but you can play around with the number until you get it just right.
Stylesheets are arranged differently depending on who wrote them so yours won’t look like mine. Just look for similar elements and you can find your way around just about any of them.
One last note about headlines. Crazy fonts that match your header are cool, but what’s even cooler is being able to read your headline. The main offender of hard to read headlines are script type fonts with the swirly bits all over. No matter how cool your blog looks, if it’s not easy to navigate and easy to read, it’s hard to turn visitors into followers.