Remember when designing a website required nothing more than Notepad? Nowadays, it's gotten more complicated than that with so many tools to choose from. We deal with more than just HTML but also CSS and Javascript.

When I first started designing, I thought I could just do anything that I wanted. I quickly learned that even if creativity is encouraged in this field, there are still boundaries that I had to know if I wanted to be a good designer. Though there are no established "rules" for design, there are still conventions for a functional website.

Let’s see how the design rules have changed over time through classic examples: Microsoft and Apple.

2000

2011

There was a time when people were still using tables and frames. Today, people probably don't even remember frames anymore. Here are 5 other examples of website rules back then compared to web standards now:

1. Web safe colors and fonts vs. Gradients and embedded fonts

2000

2011

Microsoft 2000 looks very flat compared to Microsoft 2011. The designs before had to stick to a web safe color palette because earlier systems could only support 256 colors. Today, color schemes are more adventurous. Gradients have also become a huge design trend.

2. Full cross browser compatibility vs. Limited browser support

Some sites including major ones don't support IE6 anymore. Even the maker of IE6, Microsoft encourages users to upgrade already, redirecting users to an IE8 download page. Here is the same site from above in IE6:

Note the weird floating elements and the lack of transparency in one of the icons. Microsoft sites look better on Google Chrome than on IE!

Other sites like Amazon, Youtube, Twitter and Facebook have stopped fully supporting IE6.

3. Small vs. Large images

Aside from the trend of minimalism, another major design trend right now is using large image backgrounds. This technique is not limited to design and entertainment sites. Most sites today have bigger graphics than before.

4. 800x600 vs. Widescreen

If you look at the screencap for the old Microsoft site, you'll notice the huge empty space to the right. This is because it was designed to fit an 800x600 resolution. Monitors are getting bigger and even smaller with the advent of web for mobile devices. Centered 900+ px width layouts are common now allowing content to breathe. Liquid layouts are still another good option.

5. Multiple pages vs. Multi-tab effect

This is the bottom of the new Microsoft site. Hovering or clicking over the links on the left will change the content on the right without loading a new page. Other big sites like Facebook and Twitter use AJAX to load more posts so you can scroll infinitely instead of going to separate pages. Smaller portfolio sites often use one page that have scrolling JQuery effects.

Less is More

Websites constantly evolve to be even more efficient or for better communication. Although there are rules that are dropped, it seems as though new conventions are being formed for this new decade.

2011

1. Logo and navigation should be clear and easy to find - usually at the top. "Mystery Meat" navigation is discouraged. See examples of Mystery Meat navigation here.

2. Big graphic in the middle and a tagline - Instead of bombarding you with too much cluttered information, websites choose to send one clear message with a bigger impact.

3. Extended navigation in the footer. A website should not be a labyrinth. The faster it takes to go to a certain page, the better.

I used Apple as an example because its design is very influential. You can see how similar websites today really are, but maybe there is a reason for all this. Websites are getting sleeker and less cluttered. The less important elements are removed while more space is given to the parts of the site that really matter. It's stylish but functional. All the focus goes to the content.

Designers do end up using this pattern because it's what works. Users form habits when visiting websites. Since most websites look like this, people expect this and it makes the site more usable. When people surf the Internet, they want information fast. They don't want to spend a lot of time looking for it. Occasionally, there will be a website that won't look like this. Because of new advancements, people are becoming more experimental. Although they might not be mainstream yet, looking at these new sites might allow us a glimpse into what the future conventions of the web will be.

It's not only the designers who change with the technology, the users behavior develops in line with the changing face of the web. Before, people didn't know something was a link unless it was blue and underlined. Today, users have more intuition to know what a link is. Designers now have more freedom to be creative with styling links. It is the designer's role to observe this and use this information in how to form better interfaces.

Conclusion

Will the designs we find nice today be considered bad tomorrow? When you judge old websites with the standards of today, they will be considered ugly. Taking into consideration the limitations of their time, you realize that they just did the best with what they had. Take a look at Apple's old site in 2000:

It actually hasn't changed much structure-wise which means they already got it right back then.

One thing that doesn't change is that usability should still be the top priority. Rules and conventions will come and go but it's more important to look timeless than to be trendy.

Trends are not bad. Don't go out of your way to avoid them because they can actually be good. If you do use them, learn how to make them look unique. Stay updated on the current state of the web. Not doing so will make you miss out on cool stuff like CSS3 and JQuery. Knowing the trends can help you by thinking of what to do next to push the boundaries of web design. It's tough and challenging having to adapt all the time to the changing requirements. But it's also exciting to know what's next, to be able to do the things you didn't think were possible before.