Your site is ranking, now let’s make it pretty!
As a internet marketing company, it’s our main goal to help companies rank their websites higher in the SERPs. That’s what we’re good at and that’s what we do. But it’s my job as a designer to make the pages look good; an equally important proposition. A well designed page gives your company and your product more credibility. If your website is ranking high and features a great product yet looks like it was made in the late 90s by a neighborhood kid, chances are todays web consumer won’t be thrilled.
So with that in mind, and this being my first blog post in the holiday season, I have decided to share with all the readers of this blog some helpful tools and tricks to make your site look better.
1) Color scheme. This is one of the most important things to focus on for the design of your site. Granted, many sites are colored based on the corporate color scheme, but there are always ways to to spruce it up with complementary and secondary colors. My go to tool for finding color schemes is the fantastic Color Scheme Designer by Petr Stanicek. This is a great tool where you can enter a color hex code and automatically generate a color scheme. Another great tool is Adobe Kuler, a newish tool that I feel I have yet to even scratch the surface of.
2) Standards. If web 2.0 was centered around rounded corners and shiny buttons (I’m sort of kidding), then web 3.0 will surely be about standards. It’s no longer only important that your page looks good, it has to be coded correctly as well. And this isn’t just to satisfy people that care about code. Properly coded web pages save bandwidth, function (for the most part) well in multiple browsers, and are easier to have function in mobile browsers. The best resource for standards web design and development is A List Apart by Jeffrey Zeldman. His new edition of “Designing with Web Standards” was released a few weeks ago and is an extremely helpful book.
3) Firebug. Want to see what that form would look like just a smmmmidge to the right? Want to know why that image is overlapping your text. Firebug is the thing to get! Firebug is a free plug in for Firefox (you are using firefox aren’t you?) and allows you to edit elements of your css code in real time without actually changing any of the code. If you don’t have it…get it! A necessary plug in.
4) Fonts. As anyone who has developed websites will tell you, the variety of fonts you can choose from on the web is very limited. Do you want Arial or Georgia? Yeah. That was a problem I have run into for a long time and have finally found a solution. It’s called “Cufon” and allows you to upload a font that is then converted to a javascript file and is placed in the header of your website. Then it replaces text in various css tags to be displayed in that font. It is very cool and does not change your css coding of words inside tags. You can check it out here… http://cufon.shoqolate.com/generate/.
Well there are some little tips and tricks to use to spruce up your website. I hope you found them useful and your website has a happy holiday season. If you have any suggestions or questions, the comment area below is a good place to put them.
November 21st, 2009 at 9:07 am
The color scheme sites seem to make it easy for a non-designer type like myself to generate color themes for customizing Wordpress themes. I tend to find a theme I like and use it across multiple sites, but I don’t want the same colors on each site. Thanks.
November 25th, 2009 at 9:32 am
Color Scheme tools def. look cool - shoot, I would use it for redecorating a room, not just for digital stuff.
And Firebug is the perfect tool for anyone without much coding experience…however, I will say I miss the old version. For some reason the most updated version is pissing me off…it doesn’t seem as easy to use. Maybe I just need to play around more.
December 15th, 2009 at 2:44 pm
Good article Adam, and the timing is just right. I happen to be in the exact position of having a sight that’s ranking well for my main keywords, but the design sucks.