Archive for April, 2009

So you have a website, but it’s looking a little sad. You know it needs a makeover, but like most folks, you are absolutely squeezed on time.

Then there is the question of what to do – what changes should you make so your website will look better? Unless you are an internet fashion maven, you may not know what is ‘in’ and what is ‘out’. Worse yet, if you’ve been hanging around the internet awhile, you may not realize what screams “I’m from the previous millenium!”. Which is, for most websites, a bad thing.

The new Web 2.0 look has become a de-facto standard. What is Web 2.0? We’ll cover that another day. For now, it’s enough to know that the following changes will make your website look like you’ve got the 2.0 thing going on. And making over your website will subliminally tell website visitors that your website is from this millenium. Which is a good thing.

Sample website before makeover

Website before makeover - click to enlarge

So here are six easy changes that will update your website and give it some of that much-vaunted Web 2.0 look. We even have a before-and-after: Terry Jepson has been kind enough to let me to use his Wisco Survey Power website as an example.

  1. Confine and center

    Our sample website (above) goes all the way across the page. That worked better when most monitors were the same size, and small. Now, though, you don’t know what size monitor your potential customer will have – but you know it will be large. And probably wide, like my monitor. So in order to increase readability and make your website look good, you should confine your webpage to a uniform width (around 900-960 pixels is average), and then center it on the page. Take a look at some of the more popular websites today, and you will see that confining and centering the webpage is standard. And standards are good. Standards help sell, too.

    Confined and centered - click to enlarge

    Confined and centered - click to enlarge

  2. Drop the top

    Another little trick you might notice is that the confined, centered webpages are often dropped a little from the top of the browser. This is a popular Web 2.0 look, and sends a subliminal message that your website was designed in the last few years. The dropped top is not required, but take some time to notice website designs next time you cruise the web. How many cool, up-to-date websites have dropped tops? Quite a few. I like the look. Oh, and I pulled off the top black bar with the 4 menu items in it – those menu items didn’t need to be in the header. (The sitemap & privacy links could go elsewhere, and the other two could just go.)

    Dropped top - click to enlarge

    Dropped top - click to enlarge

  3. Round the corners

    Oh, baby. Current design, not just in websites, is all about curves. Things used to have corners, now the corners are rounded. Take a look at your new printer. Your new notebook PC. Your new Microsoft box. Other packaging, too. Corners have become curved, and curves are cool. And curves are definitely part of the Web 2.0 look. Again, looking at popular, hip websites, note the round corners. Most popular websites will have curves somewhere. So add a few curves to your website – rounding out your header corners, and maybe a content box or two, is a great way to add some cool curves.

    Rounded header and left menu corners

    Rounded header and left menu corners

  4. Get some glass

    Glass is in. Whether you’re a Mac or a Windows person, the latest coolest graphics often have a glassy look. An easy way to update your website is to get some glass in there. It’s simple to add glassy-looking buttons (do a search and you’ll find websites that make them for free). If you have a horizontal navigation bar, using a glassy-looking background image can give your website an immediate pop. I took it a step further in our sample website and gave the previously plain header a slightly glassy look, too.

    Get some glass - click to enlarge

    Get some glass - click to enlarge

  5. Not quite normal

    Not quite normal in graphics placement and selective fonts can be a good thing, in limited amounts. Try having your header graphic (or some other graphic) break outside the box – have an edge stick out or stick up. (Color outside the lines!) This is a cool, hip look in graphic design, and definitely a Web 2.0 thing. I’ve added a little more glass here in the form of an iconic logo image, and the top of the image sticks up above the header a bit. Cool, huh? And fontography is making a come-back, too. (But only in limited quantities. Too much weird fontography makes things hard to read, and looks amatuerish.) So I’ve put the site name into a cool font. (BTW, if you like that green glassy icon image, you can get it and 684 more like it for just $9.99, below).

    Not quite normal - click to enlarge

    Not quite normal - click to enlarge

  6. Bust out backgrounds

    Last but not least, and most often ignored, are backgrounds – and the striking difference they can make. Bust out of boring by adding a subtle background color here and there. If you’re brave, make the colors bolder, or add background images (careful there, don’t go too crazy unless crazy will sell to your customers). Definitely, add a background color for the entire webpage, so that your confined, centered content stands out. Then try adding backgrounds to any extra menus, columns, and blocked text, and see how it looks. Good use of backgrounds can take your webpage from blah to brilliant.

    Backgrounds added - click to enlarge

    Backgrounds added - click to enlarge

If you can implement only a few of these ideas, I recommend trying numbers 1, 3 or 4, and 6. Center and confine your webpage, add a curve or glass somewhere, and make sure you use backgrounds to define the separate areas. If you do just that, your website should look better. You can always address the other makeover items later.

80% Discount on website icons for blog readers

Glasso Icons Sample

Glasso Icon Images Sample

If you want some nice glassy-looking icon images for your website (or for anything else), I’ll give you an extra-special discount as a reader of this new blog. Only $9.99 instead of $49.95 for the Glasso Icon Set.

Use the coupon code GETGLASS on the Glasso Icons final order page to get the discount. (It goes on the same page as your credit card number; don’t forget to click on the “update coupon” link to change the price.)