Design Instruct

Design Instruct is a regularly updated web magazine for designers and digital artists where you can find and learn design tips and tricks.

Twitter – RSS Feed

UX Booth

The UX Booth is a blog by and for the user experience community. Our readership consists mostly of beginning-to-intermediate user experience and interaction designers, but anyone interested in making the web a better place to be is welcome.

Twitter – RSS Feed

Vandelay Design Blog

Vandelay Design Blog is a blog which showcases the best in design and resources, it also runs regular giveaways.

Twitter – RSS Feed

The Web Design Blog

The Web Design Blog was setup in 2009 by freelance web designer Phil Matthews with the intention of providing web design news, articles, tutorials and interviews for everyone to enjoy!

Twitter – RSS Feed

Just Creative Design

Just Creative Design is the personal portfolio of Jacob Cass, the blog includes graphic design tips, articles and resources on most subjects of design.

Twitter – RSS Feed

Six Revisions

Six Revisions is a blog ran by Jacob Gube that publishes practical and useful articles for designers and web developers.

Twitter – RSS Feed

Line25

Line25 is a blog ran by Chris Spooner, the site is based around web design and includes a wide range of posts to help feed your creativity.

Twitter – RSS Feed

Tutorial9

Tutorial9 is a collection of teachers, experts, and caring folk from around the world, all gathered in one place to pass along our knowledge to absolutely anyone interested in learning.

Twitter – RSS Feed

Onextrapixel

Onextrapixel is a blog dedicated to delivering useful, comprehensive and innovative information for designers and web developers.

Twitter – RSS Feed

Webdesigner Depot

Webdesigner Depot is an exciting blog designed to explore different web and graphic design techniques, great examples and best practices.

Twitter – RSS Feed

Design Heaven

Design Heaven is a new design blog which posts inspirational articles showcasing the best in design from around the web to help inspire designers.

Twitter – RSS Feed

Speckyboy

Speckyboy Design Magazine was originally the personal portfolio for Paul Andrew but is soon grew into a blog. They cover a large variety of web design and development based topics.

Twitter – RSS Feed

Hongkiat

Hongkiat is a technology and design blog that constantly showcase some of the best materials, resources from the Internet to inspire their readers.

Twitter – RSS Feed

DesignM.ag

DesignM.ag is a community-based website for web designers and developers. The site includes a popular blog, a user-submitted news section, a design gallery, and a design job board.

Twitter – RSS Feed

Design Shack

Design Shack showcases inspiring web design, alongside resources and tutorials for you to succeed in the same way.

Twitter – RSS Feed

Colorburned

Colorburned is a design blog featuring some of the best design news, resources, and tutorials from around the web.

Twitter – RSS Feed

PelFusion

PelFusion is a design blog, which covers a large area of web design and development as well as running regular industry related giveaways.

Twitter – RSS Feed

[Re]Encoded

[Re]Encoded is a resource both for active web designers/developers and for people who simply enjoy good design and want to learn more, see more and do more than they already do.

Twitter – RSS Feed

Tutorialzine

Tutorialzine provides you with high-quality tutorials, freebies and resources that will help you with your day-to-day development needs.

Twitter – RSS Feed

Abduzeedo

Abduzeedo is a blog about design. There are all sorts of articles for those who want to look for inspiration. They also include tutorials on Photoshop and Illustrator.

Twitter – RSS Feed

A Practical Guide to Designing for the Web

A Practical Guide to Designing for the Web aims to teach you techniques for designing your website using the principles of graphic design. Featuring five sections, each covering a core aspect of graphic design: Getting Started, Research, Typography, Colour, and Layout.

Getting Real

Getting Real is the business, design, programming, and marketing philosophies of 37signals — a developer of web-based software used by over 1 million people and businesses in 70 countries.

The Elements of Typographic Style Applied to the Web

In order to allay some of the myths surrounding typography on the web, is structured to step through the principles found in Robert Bringhurst’s The Elements of Typographic Style, explaining how to accomplish each using techniques available in HTML and CSS.

jQuery Fundamentals

jQuery Fundamentals was written to help you understand the fundamentals of this JavaScript library and teach you how to complete basic tasks with jQuery.

Web Style Guide, 3rd Edition

Consistently praised as the best volume on classic elements of web site design, Web Style Guide, now in its third edition, maintains an emphasis on fundamentals while bringing every chapter topic up-to-date.

Access by Design

Access by Design offers guidelines for universal usability, and the online version includes examples and links to related articles and tutorials.

Web Designer’s Success Guide

Web Designer’s Success Guide is the definitive guide to starting your own freelance Web design business. This book gives you step-by-step instructions on how to do things like transition from full-time to self-employment and how to price your services appropriately.

The Web Book

The Web Book contains all the information you need to create a Web site from scratch. It covers everything from registering a domain name and renting some hosting space, to creating your first HTML page, to building full online database applications with PHP and MySQL. It also tells you how to market and promote your site, and how to make money from it.

Dive Into HTML 5

This book seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards.

http://www.uiaccess.com/accessucd/index.html

This book will help you understand and apply principles to make your products more accessible.

Contrast is the difference between two or more elements. With contrast, a designer can create visual interest and direct the attention of the user. But imagine if all of the elements on a web page were the same in style and appearance. There would be no organization, no flow, and definitely no hierarchy. Content would be nearly impossible to digest. This makes contrast an essential part of effective web design.

In this article, we’re going to see how contrast can be achieved by creating differences in three aspects of design: color, size, and alignment.

Contrast in Color

When most people hear the word contrast, they think of color. Even though the principle of contrast is not limited to color, it can go a long way in helping the user differentiate page elements from one another.

It’s a given that almost all web designs have a header, a content area, and a footer. These are three completely different areas that should have a clear visual separation. Using contrast in background color is an excellent way to achieve this.

Here you will see that the Church Media Group’s website is an excellent example. The header and footer have dark background colors, while the content area is white. This clearly establishes the content as being different and even more important than the other areas. If we look a little further there is another level of background contrast within the content area. The “Featured Project” area has a light blue background. Since the amount of contrast between this area and the rest of the content is minimal, it tells us that the two are related.

Phil Renaud’s portfolio has a unique layout and an incredible color scheme. He uses a gold-yellow color to create contrast between the vertical navigation and the rest of the predominantly brown design.

Color can also be used within text to create contrast. Billy Tamplin does an excellent job of creating separation and hierarchy by giving the headings, subheadings, and paragraph text all different colors. For a blog style layout, establishing contrast between post headings and body text is critical. It helps the user easily see where articles begin and end as they scroll down the page.

Contrast in Size

Another way to create contrast in web design is to use size differences between elements. In other words, make some things bigger than others.

Creating contrast through size becomes very important when you can’t rely on color. Taxi has a lot going on within it’s layout and has a minimal color scheme. So in order to establish a hierarchy among the three columns, the designer used a much larger width on the middle column – over two times that of the left and right columns. This makes it apparent to the user that the middle column is the most important area of the page.

Just as color can be applied to typographic headings to create contrast, so can size. Big headings are a great way to establish hierarchy within the content of a website. The website of Imaginaria Creative, uses big headings to catch the visitor’s attention and draw them in so that they read more of the smaller paragraphs below.

Contrast in Alignment

Good alignment plays a big part in creating a quality web design. Things just look better when they line up. This is why I think using different alignments to create contrast is tricky and should be used sparingly. However, when done well it can be very effective in creating separation.

LegiStyles uses a large left margin on the content blocks below each heading. Along with the the large size of the headings, this creates a good amount of contrast. If you are going to use this kind of difference in alignment, be sure to make it a big difference. Otherwise it will end looking like a mistake of poor design.

Centering large paragraphs is a big typography no-no. It makes text very hard to read. However, don’t be afraid to mix left aligned paragraphs with centered headings. It’s another good way to use difference in alignment to create contrast. Combined with a nice serif font, it can also give your typography a classic look.

Simon Collison uses centered headings paired with left aligned paragraphs in each of the content boxes. Since the font size of the headings isn’t much larger than that of the paragraphs, this helps set the headings apart.

A List Apart is another great example of using centered heading with left aligned paragraphs.

Now Go and Be Different

Learning to create the right amount of contrast in your designs is just like mastering any other principle of design – it takes practice. Take time to study the work of talented designers and see how they are using contrast in their designs. Remember that contrast is all about differences. If two elements are very different in nature, be sure to make their visual differences very obvious.

What is Whitespace?

Even though its name seems to suggest otherwise, whitespace doesn’t actually have to be white. It gets its name from the early days of graphic design where most printing was done on white paper. Whitespace is simply the empty space between and around the elements of a design or page layout. This can include: space around graphics and images, margins and gutters, space between columns, and even the space between lines of type. Whitespace is also referred to as “negative space”.

Whitespace is made of nothing, but shouldn’t be treated that way. There are several benefits that a generous dose of whitespace can bring to a design. Simply by increasing the space between elements in a layout, a design can take on a more elegant appearance, and by injecting more whitespace into a web design’s typography, content becomes more legible.

Elegance and Sophistication

In print design, paper is a valuable resource and clients will usually want you to use every square inch of it. After all, it costs them money and they want to get their money’s worth. Similar value is placed on screen real estate in web design. They both have set dimensions and represent limited space in which a message can be presented by displaying text and graphics. This is why being generous with your whitespace will speak volumes about your brand. By using large amounts of it, you’re saying that your content is far more important than the screen real estate that it rests on, and you can afford to sacrifice that space in order to better present your message.

Luxury brands use this concept to convey an image of sophistication and elegance. Let’s take these two furniture companies for example. Pottery Barn, being the more upscale of the two, uses lots of white space between the various elements. Notice even the logo uses large amounts of whitespace between each character.

Rooms To Go, on the other hand, is a lower end furniture store and it shows in their web design. There are several factors that contribute to this, and a lack of whitespace plays a major role. With so little space between elements, I won’t even attempt to insert the little red arrows.

Notice how the list of category links is crammed up against the left border. Things like this can make a design look sloppy and unprofessional.

Lets’s take a look at two other brands that you will probably recognize. Below is a comparison of the Apple home page and the Microsoft home page. You will notice that Apple, being the epitome of elegance and sophistication, uses plenty of whitespace. While the layout of the Microsoft home page is a bit more crowded, resulting in a not-so-elegant feel. This is right in line with each company’s general brand perceptions.

Better Legibility and Usability

On a micro level, whitespace plays a major role in typography and even usability. Text that is cramped with minimal line spacing can be very difficult to read. By adding more whitespace between lines of text, content becomes easier to scan and digest.

Information Highwayman is the portfolio of D Bnonn Tennant, and it’s an excellent example of great use of whitespace within text. The large amount of spacing between lines makes the content a joy to read.

Micro whitespace not only makes text easier to read, but also helps separate blocks of content from one another. This can help a user differentiate where content starts and stops.

Analog is a single page website. So it’s important to create enough separation between the various blocks of content so that they stand out from one another. Here, the Analog team uses varying amounts to create separation and flow within the content. A larger amount of whitespace is used to separate the content blocks, then a smaller amount is used between the paragraphs within each block.

Develop an Eye for Whitespace

Like so many other aspects of design, there is no set guidelines or rules for calculating the right amount of whitespace. All designs are different so the amount you use will vary from project to project. The best way to learn is experiment and study the work of other designs that seem to be getting it right. Eventually you will develop an eye and feel for what is the right amount of whitespace.

UX Magazine

UX Magazine was created to deliver a central place to discuss the critical disciplines that all enhance user experience.

Signal vs. Noise

Signal vs. Noise is the blog of 37signals. Having built popular web apps like Basecamp, they know a thing or two about user experience.

UX Booth

The UX Booth is a blog by and for the User Experience Community. It’s full of useful articles and resources on usability, user experience, and interaction design.

Adaptive Path Blog

Adaptive Path creates user driven products that deliver great experiences. Their blog allows them to share what they’ve learned with others.

UsabilityPost

The Usability Post is a blog about design – not about what it looks like, but about how it works. The aim of The Usability Post is to provide relevant resources, tips and insights into good design in order to help you make great products.

inspireUX

inspireUX is a blog that posts quotes relating to user experience (UX). Every quote on inspireUX focuses on the impact that user experience has on people, business, or the world. You can even download and print them out on 4×6″ index cards.

456 Berea Street

456 Berea Street is the blog of Swedish web professional, Roger Johansson. He writes about web standards, accessibility, usability, and other UX related topics.

Functioning Form

Functioning Form is a blog about interface design. That is to say, it is where art and technology emerge as experience, where message and medium meld, and where interactions are useful, usable, and enjoyable.

A List Apart

A List Apart Magazine is loaded with insightful articles exploring the design, development, and meaning of web content, with a special focus on web standards and best practices.

Boxes and Arrows

Boxes and Arrows is devoted to the practice, innovation, and discussion of design; including graphic design, interaction design, information architecture and the design of business. Since 2001, it’s been a peer-written journal promoting contributors who want to provoke thinking, push limits, and teach a few things along the way.

EverydayUX

EverydayUX is a blog that focuses on the design that we encounter on a day-to-day basis, especially as it relates to interaction design.

Billy Tamplin

Burciaga

The Swish Life

Mission Bicycle Company

Typejockeys

Red Velvet Art

MetaLab

Authentic Jobs

Icon Dock

Morphix Design Studio

Sushi & Robots

Utah.travel

Robert Alan

Hull Digital Live 09

NOSOTROS

Artua Design Studios

Internet Dreams

Strutta

Pirata London

Tapbots

Weightshift

Guifx

Owltastic

inkd

Bohemian Coding

Think Orange

Culinary Culture

Light CMS

Toggle

atebits

Don’t listen to those naysayers who tell you that website visitors only scan headlines and look at cute pictures. It’s a fact that visitors are more interested in what you write than every other aspect on the page. The problem is that most web writing is dreadfully boring, and oddly self-gratifying. Under the premise of helping you, the visitor, the writing is geared more towards establishing the writer as some sort of authority. Most web writing is very didactic, or teacher-student. I’m the first to admit I’m guilty of it, but not anymore. Here are some useful tips in creating words that people will want to read:

1. Be Personal

Stodgy paragraphs written in third person are no longer in fashion. The internet is extremely personal, and getting more personal by the moment. People come to the internet to explore in a relaxed nature, not to feel like they are reading from an encyclopedia. I admit, sometimes Wikipedia is too difficult for me to understand, and that’s okay because I can always find another website that can explain it in simpler terms. You want to have that website where visitors can go to explore without pressure.

Being personal also means revealing your personal side to the visitor. Besides placing your photo on the “About Me” page, your web copy needs to convey your personality. I don’t want to go to your blog or your Twitter page to get a sense of who you are, I’d like to read it directly on your site. Reach users by speaking directly to them. Do you notice how much more invested you are in this article than if I had gone into a third-person point of view?

2. Use Language Yo Mama Would Understand.

Oh, I went there. There’s nothing worst than visiting an authority website as a newbie and not understanding all the different terminology. Accommodate all visitors to your site, and try not to get so academic that you lose potential subscribers.

3. Draw on Common Metaphors or Experiences.

One way that people relate to each other is through shared experiences. For example, when I said earlier that I felt inferior to Wikipedia, I’m sure some of you agree. The point is that by me sharing a painful realization, it creates bonding. Find a way to connect with your readers so that they understand that you are them. You are engaging in a dialogue between friends, and not a lecture.

4. Use Pictures That Compliment Your Composition.

Reiterating what I said earlier, your words are the most important part of your article or blog post, but that’s not to say that pictures are unnecessary. To the contrary, pictures make a big difference in how people will connect to what you write. Think of pictures as a way of conveying a tone to your words. Because words are flat, pictures add an emotional component that’s much needed, and helps move the story along.

5. Read It Out Loud.

This can’t be stressed enough. Reading your words out loud helps you become more personal in your writing. If your writing does not sound like your natural speech, it is way too stodgy for web writing. Even if you prefer a more professional type of writing, your words should always match the rhythm of speech.

6. Don’t Edit Until The End.

A common mistake many writers make is to edit as they go along. Editing before finishing is like cutting hair without looking at the entire head. Only until you see the whole picture should you start removing undesired elements from it. Cut from the whole. By stopping to edit, you potentially sever your tie to creativity.

7. Remember That Sarcasm is Hard to Pull Off.

I know you’re funny, but it’s hard to read sarcasm or humor into web copy. At best, people will think that you’re not funny (which is probably what you’re thinking about me). At worst, people will think that English is not your first language. Only infuse humor when it’s unmistakable. You can still be personal without it.

8. Tidy Up Your Speech.

I know that the internet is free of all sorts of traditional boundaries, and that tip #1 told you to be personal, but there is such a thing as “getting carried away.” Getting too colloquial, or using foul language, only hurts your brand. There is a portion of your visitors who will, without a doubt, be offended at your use of distasteful words.

9. SEO is King.

Keywords are a stupid little brother, but they are a necessary evil. If you want to draw a crowd, you need to enrich your writing with keywords that will draw the right web surfers to your site. Keywords are not difficult. It goes back to being personal. If you were trying to find your site or an article on your site, what words would you use to search online? Perfect, those are the words you need to cram into your article.

10. Be Scannable.

Humans love headings in bold black. We love short bursts of text and a balance of white space. Your web copy should be all of these things so that if a reader is in a pinch, they can scan your information easily. Hopefully, they will encounter a headline that makes them stop and read and maybe double back. To add to the scannability of your text, be sure to bold important points in your article. It is another “stop sign” and compels users to read it.

What do you think of this list? Do you have any other tips to include?

About the Author

Jacqueline is an artist and a writer who spends an inordinate amount of time playing Super Nintendo and watching Star Trek. You can find out more about Jacqueline on her website, and follow her updates on Twitter.

Why? According to a report by the Danish Center for Accessibility, as many as 25% of the world’s Internet users have some sort of visual, auditory or mobility disability.

Fail to take into the consideration the needs of these people and you are depriving your client the opportunity to connect with a huge audience. Not only doesn’t that make good business sense, but also you could end up breaking the law. For example, if you’re working for an organization that is hoping to do business with the U.S. government, you’re going to run up against the “508 Act”.

This regulation requires all Federal agencies that “develop, procure, maintain, or use electronic and information technology”, to provide access to disabled users that is comparable to access available to everyone else.

How To Meet Accessibility Requirements

In order to provide for the access needs of the disabled, it’s important to understand the technology challenges these users face everyday.

• Use of non-standard browsers, earlier versions of mainstream browsers, or specially designed text-to-speech and text-to-brail readers that do not function in the way we normally understand browsers to function.
• Lower screen resolutions, the need for larger fonts, and reduced screen size.
• Colorblind users who cannot easily “Click the red button to cancel your order.”
• Users with motor impairment may use non-standard pointing devices and keywords.

Fortunately, The Guesswork Has Been Eliminated

The World Wide Web Consortium (W3C) maintains accessibility standards and best practices on their All Standards and Drafts page; of particular interest are the Web Content Accessibility Guidelines (WCAG) 2.0.

That is the document that provides accessibility recommendations and guidelines designed to accommodate people with a wide range of disabilities.

You Can Take Advantage Of Web Accessibility Design Tools

Recognizing the need to provide support for the world’s disabled Internet users, a number of companies have developed free and low cost tools to help designers comply with accessibility guidelines. Here are a few of the available tools that will turn you into an accessibility expert.

WAVE

For those of you that hate reading reports, and believe a picture really is worth 1,000 words, WAVE is an excellent tool for you. Rather than produce reports, WAVE displays the actual web page with embedded icons and other visual indicators that point out where potential accessible issues exist.

WAVE provides an amazing number of ways you can use this tool. In addition to actually embedding WAVE validation code into your designs, you can use any of these options:

• Enter the URL of the page to be checked into a form on WAVE’s site.
• Copy and paste the code to be checked into a form on WAVE’s site.
• Install the Firefox Toolbar.

Color Oracle

Color Oracle is a colorblindness simulator for Window, Mac and Linux. It takes the guesswork out of designing for color blindness by showing you in real time what people with common color vision impairments will see.

Image Analyser

This service examines all images found on a web page to check for any accessibility issues. Simply enter the URL of any website, and it does the rest. The width, height, alt, and longdesc attributes are examined for appropriate values.

Colour Blindness Simulator

Colour Blindness Simulator is a web based tool that reveals how your images may appear to users with a variety of color blindness conditions.

Readability Testing

This online tool will perform tests on your text to determine it’s level of readability. Your text will be penalized for polysyllabic words and long, complex sentences. Your writing will score better when you use simpler diction and write short sentences.

Don’t Overlook Web Accessibility Evaluation Tools

In addition to the accessibility design tools, there area number of free and low-cost accessibility evaluation tools that perform in-depth evaluations of Web pages and generate extensive reports pertaining to accessibility issues.

Some of the tools are highly specialized and focus on specific disabilities, such as blindness, while others provide information on accessibility issues in general.

The W3C maintains a complete list of most commonly used accessibility evaluation tools.

Is Accessibility Design In Your Future?

It should be, if it isn’t already. In addition to the UK’s legal requirements, many other countries and local governments are becoming more involved in ensuring equal Internet access to everyone regardless of physical disabilities. The W3C maintains a regularly updated list of new legal requirements worldwide.

In addition to simply staying legal, discussing accessibility with your clients could be a great way to set you apart from your competitors who may not be as knowledgeable about the subject as you now are.

Here’s How To Really Understand How Important Your Job Is

If you really want to see firsthand how much a difference you can make in the lives of disabled people by designing Web sites that are accessible, spend a few hours sitting next to a blind or physically challenged user.

Once you witness for yourself how difficult the Internet can be when designers ignore 25% of the Internet user population, you’ll keep accessibility top-of-mind whenever you sit down to design.

About the Author

Sandy Butler is a research analyst at Accredited Supplier, where she researches website design companies and their practices and trends. Sandy’s research has been featured on top websites including TechCrunch, Brand Republic and SitePoint.

1. A Solid Layout

The importance of having a good foundation applies to just about everything in life. If the foundation is wrong, everything that is put on top of it will probably fail. In web design, the foundation is your layout. Laying out a web design involves placing all the content and navigational elements. You want to establish a hierarchy in these elements that gives the most important ones prominence, and this should be determined by how you think your audience will use the site.

Use Wireframes

A common practice by web designers to nail down a layout is to create a wireframe, which is basically a bare-bones representation of the various elements that will appear on the page. Wireframes are typically made up of gray scale boxes and blocks of placeholder text. The key is to keep things simple and not get caught up in color and design elements.

Jesse Bennett-Chamberlain of 31Three is great about posting his design processes on his blog. Here is an example wireframe he created for the Embrace Pet Community project.

Be generous with whitespace

One key aspect of a great layout is more about what’s in between (or rather not in between) your various page elements. I’m talking about whitespace or negative space. Many designers make the mistake of over crowding their web designs. Don’t be afraid to let your pages breathe. Adding larger amounts of whitespace will actually give your design a more sophisticated look.

With so much going on in the layout of The Swish Life, Liam McKay realized how important it was to use wide margins around the content to give this design an open and airy feel while making it easy to skim over all of the text. Notice how much empty space is around the blocks of content. This makes it easier for the user to focus in on what’s important.

Mutant Labs is another great example of good use of whitespace. It gives this dark design an open feel and lets the subtle chalk board texture and doodles room to show through.

Learn more about layout and wireframes

Wireframes Magazine is a blog written by information architects and interaction designers that has lots of info and examples of layouts and wireframing.

2. Effective Typography

Just like layout, typography plays an important role in how a user digests the content of a website. It’s important for a web design’s typography to be easy to read and follow while establishing structure and hierarchy within the content.

Big = important

31Three uses all caps and a large font size for the titles and subtitles. This establishes a clear hierarchy that distinguishes the headings as having more importance than the paragraph below.

Make it legible

By using high contrast between the text and the background, Dan Cederholm made the text on Simple Bits very easy to read. Also notice the amount of line spacing used in the paragraphs. Always make sure to use enough to make a body of text easy to read. This normally requires some experimentation, but a good rule of thumb is to set the line height to 1.5em, which is 1.5 times greater than the font size.

Learn more about typography

If you want to learn more about typography, we’ve compiled a list of great sites about the subject, and we’ve also go a list of tools to help you with typography on the web.

3. The Right Color Scheme

Choosing the right color scheme is extremely important, because it will set the mood of your design more so than any other component. Don’t let your own personal taste determine what colors you use. That should be based on what’s trying to be achieved with the site and what you know about it’s audience.

Dare to be different

The Gap Medics site features a bold choice of colors that goes against everything we are used to seeing on medical related sites. It’s appropriate since the site is trying to attract young medical students. The colors help give the site a young hip feel that softens seriousness of the subject matter.

Sometimes little color is the right color

Carsonified basically only uses two colors. The dark brown and a creamy white compliment the vintage poster style and design elements. Sometimes a minimal color palette is all you need.

Need help choosing the right color scheme?

Adobe’s Kuler is a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders. There are also other tools to help you choose the right colors.

4. Appropriate Design Elements

This is where you can have a lot of fun with a design. Your creativity can go wild here with texture, icons, patterns, etc. However, keep in mind that design elements also play a big role in setting the mood of the design. So keep things consistent with the goals of the website and it’s audience. Also keep the design elements consistent with the other three components we’ve already mentioned.

Consistency in action

The designer of Red Velvet Art did an excellent job of utilizing the same hand drawn style throughout the various design elements. Notice how the icons, background pattern and doodles all work together. The consistency also flows through to the typography and retro color scheme.

Attention to detail

The Squarespace blog has a typical blog layout and an overall clean design, but notice the pixel perfect tick marks that line the left and right borders of the content area. It’s such a minimal design element, but it serves it’s purpose in establishing focus on the content while staying consistent with the rest of the design.

Less really is more

This design could have worked well on a white background, but Elliot Jay Stocks loves using texture. To stay consistent with the open feel of the site, he went with a light and subtle grunge texture. It works because it doesn’t take away from the minimalism of the layout and still adds another layer of interest to the design.

In this article, we’re going to travel back in time and see how some of the most popular websites today looked in their beginning, and how their design has evolved through the years.

Click on the images for a larger view.

CNN

2000

2003

2008

2009

Apple

1998

2003

2008

2009

Digg

2004

2009

Nike

1996

2000

2009

Adobe

1996

2003

2009

Yahoo

2000

2004

2008

2009

ESPN

1999

2009

Amazon

2000

2009

Microsoft

2002

2009

Dell

1999

2003

2009

Starbucks

2001

2009