Tag Archives: Design

Background Images and Subsites

Lately, I’ve been noticing websites that make use of varying background images for sections within the sites. Unfortunately, I’m having a little trouble thinking of many good examples right now. I’ve assembled a few below, but let me know if you have any to add.

The general idea, though, is the sites have a “main design,” but the background image assigned to the body tag changes throughout the site. For example, you have the Lego.com design. When you go to the Lego Indiana Jones page, the body tag’s background-image changes. It adds a bit more visual interest, and makes the images and Flash animations blend-in with the main layout more.

Here are a few examples of such behavior. Send me some links if you know of some others.

Continue reading →

Design Spotlight: Snook.ca

The blog of web designer and developer Jonathan Snook, Snook.ca has one of the most interesting designs I’ve seen in the past couple of months.

The design is clean and simple, yet no space is wasted. My 1024×768 pixels of screen resolution are filled, leaving no extra space around the design’s edges. I can only speculate what it looks like on a bigger monitor, as it doesn’t appear to be a liquid layout. However, if I resize my browser window to 800×600 the header looks a little odd (see below image).

Continue reading →

Amazon Debuts New Design, Pulls it Next Day

Yesterday, Amazon changed their design. Oddly, though, it had been replaced with the original by this morning. Even more strangely, this isn’t the first time this has happened. About a month ago, an earlier version of this design was put online, only to be removed the next day. Are they testing a new design, but they’re not quite ready to make it permanent?

Luckily, I was smart enough to snag a screenshot of the new design:

Continue reading →

7 Cool RSS Buttons

As cool as that orange RSS icon looks, it won’t necessarily fit-in with your blog’s design. It’s orange! Sure, you could just use a different color, but why not get a little creative? You don’t have to use the same style as everyone else. You can make it a different shape, use different gradient styles, or something completely different.

If you do decide to customize your icon a bit, be sure to keep the same symbol on it. The “antenna” depicted on the “standard” icon means “this is an RSS icon!” If you leave it out, people won’t necessarily notice that the button is for an RSS feed.

Here’s a little inspiration:

Continue reading →

Is it Time to Redesign Your Blog?

What is the current state of your blog’s design? Is it looking a bit old? Is your template full of junk you’ve added over the months? No matter how good a design is, it will age over time and possibly become stuffed full of cool widgets you found. That’s when redesigning comes in, whether it’s a drastic revamp or a simple clean-up of your existing design.

It might be time for a redesign if:

Continue reading →

The Coolest Web Designs On The Planet

After soliciting submissions, haunting design galleries, and looking through my bookmarks, I have put together this collection of cool web designs. I may not have all of the coolest web designs on the plane Earth, but I’ve collected all the coolest ones on my planet. :D

Without further ado, here are The Coolest Web Designs On The Planet.

Continue reading →

Design Spotlight: Smashing Magazine Gets a New Layout

Well, it looks like Smashing Magazine launched a new layout without telling us. :D They’ve retained the clean look from the previous design, though the main content area isn’t nearly as wide as it had been previously.

Continue reading →

The Art of The Fold

The term “above the fold,” carried-over from the print world, refers to everything seen before the fold in the newspaper. In web design, its meaning is virtually the same, referring to the first screen of content. Basically, if you can see it without scrolling, it’s above the fold.

Why should you care about this? For the same reason newspapers care, you want people to buy your newspaper read your entire blog post. When a user lands on your website (whether they’re coming from a search engine, social bookmarking site, etc) they see what’s above the fold. If something doesn’t grab their attention, what’s to stop them from leaving immediately? Nothing. In fact, it happens quite frequently. When the average web user loads your site, they see the first screenful and decide whether or not they want to stay in less than one second. Based off your design, your logo, headlines, photos, etc. they decide quickly whether your site fits their needs. Yeah, that sucks.

Continue reading →

Design Spotlight: FeedIcons.com

FeedIcons.com, the easiest way to grab a copy of the standard RSS icon, has recently received a redesign.

The light-on-dark design, like the old version, makes the orange feed icons stand out. The other colors don’t look bad either.

The design is made-up from two colors, mainly. Black and a dark gray. Three buttons to the right of the logo take you to the three parts of the site, “Get the Icon,” “Code Snippets,” and “Guidelines.” The prior incarnation of the site only had one page, where you could download a ZIP archive of all of the icon types. Now there are three options. You have the “Standard Icon” pack which contains 28×28 and 14×14 versions of the orange RSS icon. The “Colour Pack” contains 12×12 versions of various colors. My favorite, the “Developer Kit,” is the original option from the old site. It has everything. 12×12 to 128×128 variations in numerous colors and formats (including JPG, GIF, PNG, and PSD).

The new design is pretty good for a white-on-black layout (which normally is hard on the eyes), and the content has increased. Take a look, and download the Developer Pack if you haven’t already. It’s indispensable for bloggers.

Cool and Creative Business Cards

Whether you’re designing a business card for yourself, or for your website, you have an opportunity to be creative. Don’t settle for a plain card with basic information.

I’ve basically assembled a list of lists (doesn’t that sound cheesy?). I’ve looked around the web for collections of cool business cards, and I’m putting them here in one place. Before we get to the fun part, however, I’m going to take this opportunity to plug a tutorial I wrote awhile back. Did you know that you can make your own business cards cheaply? You don’t need to pay a printer for 250 cards if you only need 30 at the time. With just a printer, Photoshop, and a paper cutter, you can make your own business cards. Okay, now that I’m done with that, here’s the list:

Continue reading →