A Look Back 10 Years pt1

Created on Friday, 20 May 2011 15:45

I thought it’d be fun to look at a few popular sites now, and see how they’ve changed in the last 10 years. I picked several websites that have steadily increased in usability and popularity; Sites that have become a huge part of consumer and popular culture. Here they are as they looked exactly 10 years ago in 2001 and also how they look today.

Apple

What’s interesting to see is they haven’t really changed the layout of the site at all. The menu is obviously more sleek, and looks less like an old 90’s Windows interface. But the menu still stretches across the top, followed by a large, crisp image of their latest product. The current Apple site has continued below the fold and given itself some breathing room. The old site seems a bit compact. (Monitor size was a lot smaller back then, so obviously we’ll see an increase in the space utilized for current sites.) What’s also stayed the same is the latest news on top of the 4 buckets of featured products. Apple knows what works best for their users when navigating through their site. I think they are one of the few companies who’ve kept this same layout, while really just updating the graphic elements themselves.

Yahoo

Ah yes. We all remember Yahoo’s home page. Completely cluttered and yet graphically sparse at the same time. Like so many old sites, Yahoo 2001 was very text-heavy, in contrast to the current, balance of image and text in the 2011 site. Yahoo’s old look has more of a directory feel to it. The new design has really expanded what it offers it’s users. Look at the left column. It’s filled with everything from sports, weather, and movies. The old site was a great breakdown of categories, but it bit hard to navigate. They’ve kept the current news feature and added a scrolling banner for headlines. And as we’ll see for other sites, more room for ad space that wasn’t found in the original 2001 designs. 2011 Yahoo is still pretty busy, but a little easier to find what you’re looking for than the old look.

IMDB

It seems IMDB may have wanted to simplify their home page in 2011, rather than overload the user with film and television knowledge like the old site does. 2001 had the top movies of the week and new films that were coming out in the left column. Now, they’ve seen this is more important for their users and have made this the first thing you see when entering the site. Also, they’ve moved away from the “web-safe” colors of blue and yellow, to subtle black gradients and more gold coloring. The logo really stands out and makes it easier to read through the rest of the site. I think everything blended together in the 2001 design making it less legible.

McDonalds

I was shocked when I saw how different McDonald’s looked compared to today’s smart, clean design. 2001 looked like a directory for finding their restaurant instead of a showcase for the company’s latest offerings. The blinding red of of 2001 is replaced with a crisp red menu that broke away from the standard top navigation. I love how they’ve kept the branding in place without assaulting your eyes like the old site did. Lots of off-white and greys are used so the new products itself are the focus. McDonald’s of 2001 relied on text updates for their company. Now, they have clever, crisp, scrolling images for their consumers.

I loved going through these old sites and seeing how far some of them had come. I’ll wrap up my thoughts on the images seen here and include more sites and their redesigns in the next post.

5 Current Web Design Techniques

Created on Monday, 16 May 2011 16:10

In a previous post, I highlighted 6 Web Design Trends. I wanted to talk about some techniques that are also showing up lately. Here are some specific design elements currently being used in Web Design.

1.960 Layout

The 960 Grid System is a set of guidelines for designers. The guides are set to either a 12-column or 16-column grid layout. It allows designers to be meticulous without having to compromise the original look when it enters the development stage. This framework provides consistencies between the design and the code. The grid is also great since it lends itself to mobile web design. 960 pixels is the safe zone for devices like Android, iPhone and other tablet devices so this is a great parameter to work in.

2. Pixel Perfect

Designing your site with blurred drop shadows and pixelated lines are beginning to look dated. Now, the use of pixel perfect design has every detail carefully planned so you don’t see any blurry or pixelated areas. Rounded corners are crisp, along with the shadows that surround them. Pixel Perfect buttons and buckets work beautifully on clean websites. Like the highly detailed icons, this practice demands an attention to detail; Detail that wasn’t present in web design in the last few years.

3. Shadows

Most sites used the standard Photoshop settings for adding a drop shadow to an image. Recently, we’ve seen more designers add a three dimensional effect, by simply moving the shadow around and off of the object itself. You can create a rich look to your images by playing with the angle and perspective of the shadows. Tilting the shadow creates a more realistic look. And it really makes your graphics stand out. This a subtle, yet powerful effect.

4. Ribbon Banners

This is a nice, organic element that’s been used lately. I think it’s a response to the high gloss, shiny look we’ve seen with sites in the last decade. Ribbon banners and sewn badges are growing in popularity the way glossy buttons permeated web design in recent years. The simplicity of the design and the change from squared to rounded formats might be the reason behind their boom. While I'm not sue of the longevity of this technique, it is definitely being used a lot.

5. Inlay

Much like the use of banners mentioned above, the inlay effect is even more popular. (I use it all the time!) Creating a punched look to your text or images by playing with the drop shadow and inner shadow creates a great effect. When your site makes use of a noise-filtered background, applying this technique to your objects looks fantastic. And like shadows, this can give your site a three dimensional feel.

As always, web design techniques fluctuate over time. What may be popular at the time of this post may not last in a few months. Part of a web designer's job is to stay current on the trends and techniques like the ones discussed here. As we move through the year, I’ll keep looking for new ways web design is changing and keep you informed!

Six Current Web Trends

Created on Sunday, 15 May 2011 15:43

The Web is constantly changing. This is most evident in the look and design of websites. As the web continues to evolve, there’s a deliberate attempt to merge beautiful design with the most efficient functionality for the user. The design of a site is important since you want to keep your audience’s interest. But having a nice looking site that functions poorly won’t keep them there for long. Confusing your targeted audience is as negative as an out-dated design. Let’s look at 6 specific web design trends that have become increasingly popular in 2011. I feel these trends successfully merge good design and functionality together.

1. Clean Design

The move away from cluttered, hard to read sites is a practice I see sticking around for awhile. Giving the user the ability to find exactly what they are looking for without having to dig through your homepage is smart. If you’re spending more than 10 seconds trying to find something obvious like a phone number, you’re going to leave. Clean design forces you to present the most important information to your user, and leave irrelevant elements out.

2. Large Typeface

At one time, type was confined to the body copy within your site. It’s importance was only for displaying information. While this is still true, we are seeing larger typefaces used to grab your attention the way images normally would.This falls in line with clean design; you’re getting your site down to the most basic elements. And this kind of billboard technique with your type lets your user know exactly what you do as soon as they enter your site.

3.Textured Backgrounds

In the past couple years, subtle colors and simple gradients were the norm for your site’s background. But now we’re seeing a move away from smooth colors and a use of textured patterns instead. Using paper, fabric and noise textures are a nice compliment to a less busy design. Textures add a unique element like the examples below:

4. Sharp Icons

Like textured backgrounds, having sharp, detailed icons really help direct your user to the most important parts of your site. As we’ve seen, most websites are changing their old 24 x 24 pixel icons for much bigger ones. The icon’s size is larger but also the amount of detail within each one has increased greatly. More designers are spending time on these types of icons instead of using pre-made buttons and stickers.

5. Vector Illustrations

Recently, sites stopped utilizing realistic illustrations and large photographs. Now, more designers are implementing vector illustrations to create a lighter feel to their company. Like the icons, creating your own illustrations instead of using stock photography adds a unique element to your website. We’ve all seen sites and recognized the same “talking head” image. Creating your own vector illustrations lets you show how your website is set apart from others.

6. Large Footers

For a long time, footers were used to place disclaimers, detail basic company information or have contact links of the business. They were small and contained minimal information. Footers are now areas where you can place things like social stream boxes, contact forms and tons of information. And as the importance of the information grew, so did the the size of the footer. More and more sites are realizing the importance of this element and continue to pay attention to detail when placing information here.

Closing

These 6 elements aren't the only Web Design trends of 2011. There are more examples I didn’t include here. But I felt the one’s listed above were the most common and the most significant for changes in web design. I’ll highlight specific design techniques that are currently being used in a later post.