Pixlr

This is probably the most advanced and most popular image editing application on the internet. The best part about it is, it’s a 100% free and for simple designs, you can save your money on Adobe Photoshop.

Kuler

This one is a personal favorite: An online application for generating a color theme that looks good together. Whether you are creating a website template or an application UI, Kuler allows you to efficiently experiment with different color variations as well as browse thousands of pre-existing color themes from the Kuler community.

Qvectors

Qvectors is a website that provides free high quality vector graphics for your projects. They even allow you to make money by uploading and selling your own vector designs as a registered user.

Qtextures

Like Qvectors, Qtextures is a fairly new site but it delivers high quality textures and patterns from various designers. Its catalog is updated on a weekly basis.

Qicons

Another great community resource for finding fresh and royalty-free icons for your designs

Gomockingbird

This is an online tool that makes it much easier to create, link together, preview and even share mock-ups of your website or application to your colleagues.

Gliffy

Gliffy is a online diagram software, you can easily create professional-quality flowcharts, diagrams, floor plans, technical drawings, and more – straight from within your browser!

Favicon

This online tool can easily create a favicon for your site – a small 16×16 image that shows in your browser’s address bar and bookmark menu when your site is called up. Definitely, this is the quickest and easiest way to make one.

Green, commonly associated with nature and environmentalism, is actually a very neutral color. As many things in nature are green, the color can represent growth, development and opportunity. Themes of renewal and abundance are also commonly associated with this cover. However, one must be careful when choosing to design with the color green, as it can also represent envy or jealousy, hence the expression “green with envy”.

Like blue, green is a very calming color, however as mentioned above it brings forwards a sense of vibrancy and dynamic energy of yellow. This mixture of blue and yellow in the context of design can have a harmonizing effect and because it is such a neutral color, this balance brings stability and safeness in design choices.

As with other colors, greens come in many hues. Brighter greens are usually more energizing, vibrant and fun. blnk.com is an excellent example of this:

Contrastingly, more subdued greens are less vibrant but as a result, are more stable and representative of affluence. Websites such as mint.com and clearleft.com use lighter more subdued greens that are less colorful, but more professional:

Olive-toned greens express more natural feelings and representative of the natural world. Environmental-activism related sites often use this color scheme along with natural elements in the graphics to create a very down-to-earth message. An example of this is plantwithpurpose.com

However, designing for environmental groups are not only limited to olive greens. The website for Hong Kong Youth Environmental Awareness uses brighter greens to convey a more youthful message whilst maintaining ideas of conservatism and sustainability:

Another example of green in web design is emotionslive.co.uk, a personal portfolio. I particularly like this design for its widespread use of green and light/shading:

Green does not have to be the dominant color of the design. For example, you can pick out particular elements in a web design to accentuate with a vibrant green. In the header of ligonier.org, the designers used a natural bright green to emphasize its main content:

Personally, I think the color green is very appropriate for designs related to wealth, stability, renewal, and nature. Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world. Dark greens are the most stable and representative of affluence. Regardless of your choice of color scheme, it is important to remember that a slight change in hue or shade can completely change the message you are trying to deliver and that significance color theory should never be overlooked.

First off, I would like to make a clear distinction between illustrations and mascots because people often get confused with the two and the terms are used quite interchangeably. Although they both have similar functions for evoking emotion and making the design more lively, they are very different things. Mascots can be animals, people, abstract creatures or even robots! On the other hand, illustrations can be any of these things but are not limited to them – in other words, illustrations are just there to enhance the design and to liven up to mood. What makes a mascot different from other illustrations is that it defines the brand and serves as some sort of corporate identity and in websites, they appear on all or most of the pages. Take a look at Ask.com (formerly Ask Jeeves) – their mascot, Jeeves has been used to guide users and help them with their search queries. It wasn’t until March of this year, that Ask.com has resumed the use of Jeeves since their re-branding in 2007.

Contrastingly, if you look at volll.com, you can see the site uses a lot of comic-like illustrative elements but they are not necessarily used for branding purposes.

The following is a list of websites I have compiled that creatively uses illustrations and mascots to enhance their design and build their brand.

MailChimp

The MailChimp mascot not only effectively represents its company and product, but also depicts the company’s efficiency and competence. The great visual appeal of the mascot makes customers want to use the product and trust the brand. This is easily one of my favorite mascots on the web.

Freelanceswitch

In one form or another, this mascot appears on every single page of this website. Having different variations of the mascot (for example the same character doing a different action or holding a different prop) throughout the site makes it more interactive and fun for the audience.

Joyent

Joyent.com uses characters in a cartoon style although they were not intended to be used as mascots as different characters appear on each page. These illustrations are merely used to embellish the site design.

branded07

Rob Palmer’s represents himself with a cartoon puffin bird as a mascot in his web portfolio. The bird appears throughout the site in different variations – sometimes holding up signs and sometimes burrowed in the sidebar.

Cork’d

Another example of a simple, yet effective mascot. This one depicts a person holding a wine bottle. It is positioned beside the site features to encourage new users to sign up to the site.

volll

I want to conclude with this particular site because not only is it beautifully illustrated, the site layout is so creative and ingenious.

Putting characters and mascots in your designs can effectively change its look and feel. There are no definite rules for implementing mascots/characters in a web design, but keep in mind that you should always design to fit the purpose. If it is a company mascot, it should convey confident expressions and shouldn’t have negative expressions as it must represent the company in a positive way.

Effective Color Schemes

A successful color scheme is key to building the mood and atmosphere for any kind of design. A common mistake that is often made by web designers is that they overlook the importance of a well-planned out color scheme. The choice of color not only affects the aesthetic appeal but also user experience of the target audience.

Many experienced web-designers have learned that colors should be relevant to the purpose of the design and correspond to the mood of the content. For example Feed Stitch uses bright and vivid colors from the spectrum to illustrate a lively and fun mood, which is directly linked to its purpose of combining different syndication feeds into one unified feed.

There are times and situations where there is a need to hold back and put a restraint on using bright and eye-catching colors as it is just not appropriate for the design. There are other ways of achieving quality with less exaggerated color schemes. Ploc Media is a fine example for this – The aqua marine blue emphasizes the product/service on the dark grey design. The designer effectively highlighted the primary focus of the website by creating this contrast.

Deciding on a color scheme can be difficult so designers should constantly experiment and find out which hues go well together, but at the same time making sure the colors are relevant to the product/service the website is promoting.

Spacing and Negative Space

Just because there is an empty area, doesn’t mean it has to be filled. Design elements should be spread out and clear. Even the space between text can make a huge difference to the overall appearance of the website.

White space on a page is often called negative space (and isn’t always white). It balances the overall layout and adds contrast to the page. Magazine adverts for luxury items like expensive cars and watches laid over a 2-page spread often make use of empty space to accentuate the product making it appear more elegant and chic. The Digital Mash website is an example of a well spaced design. The header navigation and the links at the bottom are well spaced, yet the elements are not too far away from each other making it a very practical design also. The main graphic exhibits a lot of empty space which doesn’t appear to be wasteful at all.

Another example of an excellently spaced design is the front page of Cultured Code. At the top you can see a user-friendly navigation bar with each and every item appropriately divided. Then, following a big gap is the heading and the 2 large icons that are also spaced evenly within each other. This creates a very welcoming yet simple front page.

Like color, spacing is really just another thing designers should experiment and play around with. The trial and error method can be used to find out what looks the best. Negative space also forces designers to display only the important content without cramming large amounts of information in a small space. Also, designing with a grid system or css frameworks such as 960 and blueprint gives designers the opportunity to learn more about spacing and understand the importance of it in quality design.

Typography

The appearance of the content is defined by the typographic choices made by the designer. It is up to the designer to make sure the text content is legible and easy to follow. Many people think typography is just about fonts but it is actually much more complicated than that. You also have to consider about the font spacing, the font sizes, and spacing (yes, here comes spacing again).

The Netsetter is a brilliant example of good typography in web design. Its combination of sans-serif and serif typefaces is outstanding. The paragraphs are well structured and each line is clear and readable. A heavy and bold font style used in the headings and titles give emphasis to the article. The spacing between each line and paragraph is optimal and makes the articles very comfortable to read.

Generally, the default values for font styles are not enough. For example the default line spacing is too little and doesn’t make large chunks of text very readable. The technique of changing the line spacing is called leading which originates from the printing press process where they placed lead bars of varying thickness between lines. Keep this in mind as it significantly affects the overall structure and legibility of the content.

Detail and Subtlety

Subtle additions to a web design can make such a big difference to an overall appearance. Web designers often focus on adding small, subtle details such as gradients, shadows, and inset pixel dividers. The following are examples of web designs that use these extra elements to enhance the overall design.

If you take a closer look at the borders and edges in Tutorial 9’s design you can see the designer added a 1 pixel highlight to the edges to make each section stand out on its own. It draws attention to the content inside the box and gives a sense of 3D and realism.

Deaxon and MetaLab Design are also great examples of design with pixel-perfect details. Especially with MetaLab, the user interface feels very interactive and slick.