Last Chance for a Free Design Review

Posted on March 8th in General — 5 Comments so far. Got something to say?

Your final opportunity to get a totally free design review here is upon us. This weekend will mark the last days I will accept new sites, so if you want an in depth look from a designer’s perspective, now is the time.

I think by now I’m ready to start going back to my regular posting, but with a little bit of a different focus. I might write 3 or so articles a week, but the time will reflect upon the detail, length and overall value to those reading. I’d like to thank the three readers who have participated so far in having me poke at every detail in there site. You can find their sites and reviews here:

• PushStandards, Tom Ross’ blog, reviewed here.
• Micade, a flash game site, reviewed here.
• Zach Kollegger’s blog, reviewed here.

For something of a similar matter to your own site, head over to the contact page and send me an email. As usual, you must pass the idiot/spam filter.

I have had to turn down some sites because they just don’t relate. Any blog is pretty much fair game, a site about SEO, design, or anything web development is good, but please no web hosts, corporate sites, etc… This is more for people looking for an opinion, things to improve upon and if you want to know what I think. Not so much just for a few hits.

If you’re in it for the traffic, you’re in the wrong place. I get quite modest levels myself

Posted in General with 5 Comments.

Simple Elements to Great Blog Design

Posted on March 5th in Design — 6 Comments so far. Got something to say?

The saying goes, “you must eat an Elephant one bite a time.” I may not have any hands on experience in the matter, but it sure does apply to designing websites. More specifically, weblogs. Designing for a blog specifically usually pins you into some certain aspects that are more or less expected of you. They key is to identify these aspects and make them work together.

You know, like a team or something.

In the Left Corner, The Elements

So, lets get on with this supposed revelation. Team sports may not be your forté, but you can be sure your new blog designs will be picked first for dodgeball this time around. In order of importance:

• The header. Usually at the top, but who knows. Conditionally will contain important information that must be seen immediately. Logos, site name, a subscription box perhaps, maybe some form of navigation.
• The content area. This is where you’re going to make your sales. You’ll want this to be some sort of focal point.
• The sidebar. No one’s saying this aspect is mandatory, but you’ll definitely be the “different kid”. This vertical melting pot for virtually useless information can make or break the design… kind of like any other part.
• The footer. You may be jumping on the extended footer bandwagon, or just sporting a simple notice to terminate your pages.In any case, you’ll want to at least have one.

Hey, but you knew that. Now to prove the worth of you actually reading this (you’ve gotten this far, right?) I’ll share my designer’s perspective full of generalizations.

Making a Good First Impression

Being a predominantly top left to bottom right reading society, it only makes sense that the first place we’re looking upon arrival is… the top left. Which is convenient, because that’s where your logo is.

This isn’t to say you’re wrong for having it in the center or the right, but you’re not getting 110% out of your first impression if you don’t.

The main thing in the back of my mind when designing this first part of any site is balance. I know there is likely going to be logo or title in the left side, so then I have to come to terms with it’s counterpart.

Assuming you’ve got your logo to the left, you could use the empty space for an advert (for maximum uglification), a search box, navigation links, some design aspect, some important information (your picture, some text, subscription info) or even some sort of quote. The only way to know it’s balanced, is when it looks… balanced. Think teeter-totter.

Making the Sale

This is the personality of your site. Where people can see you, for who you really are. Whether or not that’s a good thing, you want people to want to go right to the main content area right after having a looking around the header. This usually goes on the left. Just because it leads the eye properly, and a lot of people like that. If you say a two column blog with a left sidebar, no doubt it wouldn’t look “right”.

I like the setup the content so that it will sit on a flat colour and the actual posts and their details will do the talking. You can set up all the formatting options you’d like to try and make it look good on a day to day basis with new content, but it’s always a good idea to put some time and effort into the buns of your post.

Buns? 

Think of your core content like a hamburger (or any other sandwiched delight). You have the top bun, which will hold the title and any information you’d like. You have the meat (or 100% no meat processed meat food for vegetarians) which is your post, and finally you conclude with the final bun, containing summary information.

The buns are likely referred to as “post meta” more commonly. Make them work for you.

A Side Order of Fries

While beating the dead horse that is my fast food metaphor, it makes sense that your sidebar would be just that - a side order. Something to compliment, but not steal the show.

Let me put it this way: You want a backup dancer on the side of your page. Looks good, but not that good. People won’t be thinking about the sidebar. You want all the attention for your star - the content.

Make sense? Just blend in, while subtly adding something unique. No one cares about your stupid blog categories anyway. They don’t need to jump of the page.

Beginning of the End

Some people decide that they want a seriously big footer nowadays. This is a bad idea. If something is significant enough to put it on the site, why put it where no one will see it. Maybe that’s what you want. If so, very well played, sir. If not, think about another column.

A simple notice will do. Though cliche, throw in a © and the current year. Nothing special. The footer notice is usually also a credits of sorts.

But, the one thing that drives me mad is imagery in an extended footer, John Chow style. You learned the feather tool and opacity control, good job. Best leave that out of your website. Not to mention these images are almost always off topic and out of context. I digress…

What’s it all About?

For those non-lemmings, this is quite simply about one thing, and one thing only:

Use the elements of a site to your creative advantage.

You’ll notice the best blog designs out there don’t break the mold. They set out to put their mark on the world in their own way, restricted by their market. This is why John Chow doesn’t have an artsy portfolio design (or a… Hmm, better not say that) and why Flash developers don’t host forums on their front pages.

Just imagine you’re a gambler: “Know your limits, play within them“.

Posted in Design with 6 Comments.

How to Setup Gravatars for your Blog - Plugin Free!

Posted on March 2nd in WordPress — 203 Comments so far. Got something to say?

Recently I’ve added Gravatars to the comments portion of the site. This is extremely easy to as long as you’re not totally useless in terms of copying and pasting. Fear not of messing your blog’s important code up, for this plan is fool proof.

What is a Gravatar?

To start, an avatar is a small image associated with a user, found a lot on forums and are beginning to appear more and more on blogs. Gravatar is a service which allows for “Globally Recognized Avatars“. Basically, you can sign up for the service and your email will be associated with an image you upload. After that, it could’t matter less if you ever visit their site again!

From that point in time, every time you leave a comment at a blog with your valid email address, your image will appear next to your name, providing the owner has added a few simple lines of code.

Their site puts it like this:

Gravatar aims to put a face behind the name. This is the beginning of trust. In the future, Gravatar will be a way to establish trust between producers and consumers on the internet. It will be the next best thing to meeting in person.

- About Gravatar

That might be reaching a little, but by now you should have a brief understanding.

What are the Benefits?

Draw attention to yourself. Most people comment on a website hoping for a little bit of traffic, so it makes sense that using any means within your arm’s reach is beneficial to you. A minute long process of signing up for a service and you get that attention.

People have been known to include scantily clad women, which certainly warrant a few clicks from weary lurkers in the depths of your archives. In short, a Gravatar can do a few things for you:

• Personalize. Add a picture of yourself and people will see the face behind the name and the words you write.
• Capture attention. As mentioned above, if you want clicks over a response or any shred of respect, go for shock or surprise value.
• Get recognized. Comment a lot? Authors and readers like will recognize the avatar of a commenter who consistently posts insightful musings.

In the end, you spend two minutes or so signing up and uploading a picture, and you will see the results soon after.

How to do it

This is a guide custom tailored for WordPress users, but will work on any PHP driven system. Open up comments.php and follow these steps:

1. Setup your variables. To generate the image you need to send some simple information.<?
$email = $comment->comment_author_email;
$default = “”; // link to your default avatar
$size = 40; // size in pixels squared
$grav_url = “http://www.gravatar.com/avatar.php?gravatar_id=
” . md5($email) . “&default=” . urlencode($default) . “&size=” . $size;
?>

   There isn’t much in there to understand. Set the $email variable to whatever works with your system. The one in place works with WordPress. After that, upload an image you want to serve when the user doesn’t have a Gravatar, input a size and you’re good to go.

2. The HTML code. Next, just insert this code where you want the image to appear:<img src="<?=$grav_url ?>" height="<?=$size ?>" width="<?=$size ?>" alt="User Gravatar" />

   That will display the user’s image.

That’s it! As you can see it won’t take long. You can do this simply and without a WordPress plugin.

What now?

You can now style the image to match your site. You can view a single post on this site to see what it looks like. I have mine setup to give every user 70*70 image that floats to the left of their comment. I think it looks pretty nice, considering the benefits it allows my readers and time it took.

So if you’re reading this, or leave comments on any Gravatar enabled site, I implore you to sign up and get your own image.

Posted in WordPress with 203 Comments.

PushStandards Free Design Review

Posted on February 29th in Design — 13 Comments so far. Got something to say?

PushStandards is a design blog, which also kind of functions as the portfolio of Tom Ross. For a like minded review of your own website, drop me an email with the site and your name, as well as some key points on both.

Graphically Speaking

I went into more depth with accent colours in the first review.

The first impression this design makes is a pretty good one. There are many designs that have this effect but disappoint when you actually focus on one part, but that is yet to be seen. Overall, the colours look good in practice and in theory, but it goes back the use of the accent colour. The navigation has the bright green, which would be the accent. Is that really where you want the reader’s eye to go?

Personally, I would make the navigation area a blue (darker than the background, and dark enough to support white text) and have the “Standards” in the name some sort of green. More splashes of the accent throughout, maybe in headings or in the sidebar and it’s a whole new design.

Graphically, this site is simple, yet not literally simple. It’s definitely a good balance. The symbol in the logo looks like a Photoshop custom shape, and doesn’t seem to reflect the name or the cause in any way. Besides that I like the logo. I do have a bias of loving Rockwell though, so keep that in mind

There’s only one real flaw I see in the design, and it’s a little bit of a continuity error. The bit of tape on the top right corner is most definitely out of place. I can understand if you were going for the taped down paper effect, but it’s just tape for the sake of showing you can do it. I can see the font you used for the RSS box text in combination with the tape effect sort of give the illusion of that aforementioned feel, but when everything else is orderly and professional it doesn’t fly (for me).

Sidebarally Speaking

I like the sidebar a lot. Not many people really put too much consideration into their sidebars and sometimes it can take away. The subtle shadow on the left side is an effect I like to use myself, as well as the bottom links standing out (”Learn More”, etc…).

Using the pale blue next to the white on the blue background really keeps the focus on the content, which is always a good thing. I’d like to see that background gradient stretched out more, so it’s not so sudden, and I think that would give the overall feel some more flow.

The small headings work, and seem to be the right colour. Although, with that background it makes it hard to work in any of your accent colour without horribly clashing. The ads look good and everything helps to maintain order, but there are a little bit of consistency problems. The categories and blogroll lists are all unstyled (ie no bullet points/images) but the recent posts list has bullets, and is on a darker background.

To maintain the highest consistency, either alternate backgrounds, or if you want separation you can always make some sort of line.

That is of course only someone who was looking for it would see, but I think for your portfolio site it’s something you’d want the utmost attention payed to detail.

Displaying Content

There’s no doubt it’s a pretty bright design. The colours are nice, the green at the top is quite vivid, yet when it comes to the content, everything is subtle, understated and grey. Don’t be afraid to put your post meta in a nice contrasting box and get a little fancy with the way you display your content.

The way the date box is setup is alright, but seems out of place when everything else hasn’t had the same treatment.

As a sidenote, I’d put more posts on a page. You seem to have a pretty steady rate of posting at about 2 posts per day, and it would be easier for a reader to see at least 3 days of content on the front page.

All in All…

It’s a good design. As with any design, if you look hard enough there will be some imperfections. Also, if you gave the PSD to any other designer, they would do some things different. Also, I know this is a design review, but for better blogging success, here’s a few things I’ve found to work:

• Show full posts on the front pages, and also make sure to offer a full RSS feed.
• When doing a list post (like this), try to write a really good introduction instead of just jumping into things.
• If you keep up at this rate you should have no problem with success in the future.

Oh, and throw some padding on those lists!

Posted in Design with 13 Comments.

Write Pretty Content for a Simple Design

Posted on February 27th in Design — 4 Comments so far. Got something to say?

With the absence of my formerly dark pattern background, I’ve reverted the same design to something wonderfully simple. With this now whitespace driven design, I’ve come to terms with how I’ll keep the design looking great: great looking content.

There’s no doubt the content is the focus of this design. There aren’t many obstacles for your eye to hurdle before reaching the top post. So now through elements in posts, I’m going to go the extra mile to making my posts not only more enjoyable to read, but all the while keeping the design interesting.

Content for the Web

We’ve all seen the posts that have been written a million times about how to use images, lists and shorter paragraphs to make your website read like a website, not a book. I’m not going to rewrite that (I’m sure I have in the past). Those basic ideas will help you when trying to write a pretty post.

It’s not just about having things in lists with strong and emphasized text, but more of how they tie into your design. For example, my blockquotes are a faded orange colour that comes right out of my logo.

Winning isn’t everything, it’s the only thing.

- Vince Lombardi

When you’re picking colours from a premade pallet, it’s quite hard to go wrong. Just tweak it until you have a colour that satisfies both you and your design.

Padding on Elements

One of the key points to having a seamless design is the padding of all the elements in the content area. This means your paragraphs, lists, blockquotes, images, you name it. Everything needs to be padded and put in a position where no one will even care to notice to time you spent shifting them pixel by pixel into place.

Seamless flow is what you should aim for. It’s not as easy as it sounds, especially when you have to go in and tweak your CSS because you have a different combination of elements. Don’t forget to preview your posts before posting!

In the End, it’s the Eye

For me, a nice big font, nicely spaced with some extra images and a quote where appropriate does the job. If you’re one to include tons of images and extra flash, then be my guest (your guest, rather). Also, most of the time I find when floating images and quotes in a paragraph that it’s best done off to the right. Again, it’s a personal call.

When applying these methods to a simple design you can really enhance the feel of your site, and when working with a more complex and graphical site, it can only get better.

Posted in Design with 4 Comments.