In its most simple form the rule of thirds refers to a 3 by 3 grid that fits on top of any image. There are no specific sizes to the blocks – only that they are equally shaped. The grid works horizontally or vertically and helps you determine how the eye follows an image or group of images (such as a website).

The rule of thirds has been around for several hundred years, with the first written reference by John Thomas Smith in “Remarks on Rural Scenery” (1797). He wrote about the philosophy and how it pertained to painting and art, giving it the name “rule of thirds,” a phrase that is now used commonly among artists, photographers and designers.

While the rule of thirds can be used intentionally in art, photography or design, it is also an ever-present concept. Even when you don’t plan or accommodate for it, the rule of thirds exists. Your job is to use it to your design advantage.

How it Works

The grid-shaped rule of thirds concept helps you understand the places on an image where a person is naturally drawn when viewing an image or even your webpage. In theory, the most eye-catching points are where the grid lines intersect.

Understanding where these key points fall can help you better compose a piece of artwork or photo, determine a more appealing crop and even determine placement of elements on your website’s landing page. Generally, the area that will first attract attention is the top left grid intersection, followed by the intersection below it and then the top right and bottom right cross-sections.

The biggest lesson to come from the rule of thirds is that perfect 2-part symmetry may not be the most appealing configuration. You will get more impact with images and design without it. (And remember, even if your design is created with perfect symmetry from the center out, the rule of thirds will still apply.)

You can work with or against the rule of thirds, but you can’t eliminate it.

Photography and Images

Following the rule of thirds philosophy, images that fall into “thirds” regions are the most pleasing and are associated with balance and harmony. Where the focus of an image falls in the imaginary grid can create associations as well. For example, the placement of an object in one third of the photo can imply motion, such as with the bird above. (You can almost sense that he has just flown in from the left and landed on the branch.)

There are a few rule of thirds guidelines to keep in mind when working with and cropping images.

Watch the horizon: In photos with a horizon line (especially landscapes), try to place that line in the top third of the image. It will help better focus the rest of the image and add the proper feeling of where the sky is located.

Watch the eyes: This can be rather difficult at times, but in portraits think about lining up the subject’s eyes on two of the interesting gridlines. These are areas that first draw attention and your viewer will immediately connect with the person in the photo because you have created a feeling of looking into their eyes.

Watch dead space: Be aware of pieces of objects in the corners of images and crop. Pull the part of the image you really want to be showcased forward and near one of the primary gridlines.

Overall Design

Think about placement of elements on your website in relation to the rule of thirds. At a common screen resolution of 1,024 pixels wide by 786 pixels deep, each third would be about 341 pixels wide by 262 deep.

Think about the composition of your site. It is likely the banner falls side the left-most top third. Much of your content probably begins around the location of the top third gridline, with navigation above it.

Consider where banner ads are placed on many news websites. They strip across the top third gridline, such as the ad and content on the Rolling Stone website.

On homepages, apply the rule of thirds when determining placement of key elements – banners, social media or interactivity icons, advertising and even key parts of your content. On subsequent or content pages, use the rule of thirds to help you determine where to place images or help readers focus when visiting your site. Think about how many sites are structured as well; sites with sidebars on both sides often allow for main content to fall within the center “third” of the site.

Design Considerations

While the rule of thirds can be a very useful tool, it is not necessary to plan your website design around it. Use the philosophy as a guideline or a tool to tweak your design during the finalizing process. Toss an imaginary grid on a new site design and consider making placement changes to items that are close to key spaces on the rule of thirds grid.

More importantly, the rule of thirds can be applied to working with images on your site. Use it to help you better crop and scale images. Remember to keep in mind where the object of each photo falls and what kind of movement or feel it creates.

Successful use of the rule of thirds can create a feel of natural balance, which is often asymmetrical. It can help designers who tend to design with perfect symmetry break out of their comfort zone and try something new, while still maintaining a sense of design order.

Play with using the rule of thirds in different way to bring focus to your site. Consider only vertical (such as Twenty8Twelve) or horizontal thirds. Pick a “third” and use at as a focus throughout your site. Design your homepage by grouping thirds such as Google Ventures, which grouped the first two horizontal thirds for the main image and has a grouping of three images in each third below.

Images courtesy of Alan Cleaver, katerha, photojenni and Illusive Photography.

Not every design starts with a strong image. Sometimes a piece of type serves as the dominant art for your design project.

The best text-driven design uses a minimal set of effects to create a word image with impact. Take a look at novelty typefaces, set a clean and limited font palette, play with bold or sharp color choices, make the letters big (or small), make type art and use strong words or catch phrases.

Most text-driven designs are not limited to a single effect, although one effect may be dominant. Designers often use a variety of tools to complete successful projects. Here is a look at each of these design concepts as a dominant effect and websites that are doing it well.

Novelty typefaces

When using type to drive a design project, using an uncommon or novelty typeface can add a lot of visual interest. Think about the purpose the words serve when selecting one of these fonts because readability is always a concern with these often-elaborate typefaces.

Choose something that matches to mood of your site — lighthearted, dark, fun, somber, chaotic – and actually looks good using your words. That’s right, enter your type before settling on a novelty font; sometimes the effect is very different than expected once the words are in place.

Doing it well:

Denise Chandler promotes her design projects with fun typefaces (each word also serves as a link to other pages). The novelty fonts here are her own and really are an effective way to promote her design work and serve as an engine for font sales.

The typeface used on the G’Nosh site works so well because it has the chalkboard feel employed by many small restaurants to showcase daily specials. The typeface is fun, readable at the large size and fits the theme of the site.

Novelty fonts can also be elegant and simple, such as the Viewport Industries Digest. Lettering is clean and interesting. The ligature between the “s” and “t” is quite elegant.

Limited number of fonts

In almost any design project, using too many fonts can be a little overwhelming. This is especially true when dealing with a text-driven design.

Keep your palette simple. Use one or two typeface families to get the most impact in your design. Add emphasis with bolding, italics, sizing and color.

Doing it well:

The highlighter effect on a simple phrase works beautifully for Undercurrent. Right away you know what the company is about and the high-importance words and emphasized. Font choices are simple and consistent.

Jonathan Snook’s clean blog-style design uses a pair of complementary typefaces for each new post. The alternating bold headers and lighter serif body font pair nicely and create a distinct sense of order and hierarchy.

The website of Nicola Potts also uses a type of text highlighting to create emphasis and visual tracking. Again, the site is created using two typefaces allowing size and color to create visual appeal and serve as navigational tools.

Bold, sharp color choices

Color can really bring typography to life. Bright, sharp color choices create contrast and can focus the attention of website visitors. Colors also evoke emotional associations and help a word have additional meanings or feelings when paired with different hues.

Plan color, word and font choices carefully and with awareness of any hidden associations the combinations might infer. Also look for color with pop. Beige is all over the Internet, go bolder for more impact.

Doing it well:

The motto for Miiks, “I create visual beauty,” is evident. The bright green and white combo is striking and immediately grabs your attention (so much so that you find the catch phrase almost by accident). The color is also soothing; image how you would feel if the green were another color, such as red or black.

Happy Cog also uses color as a tool that pairs well with the words on the screen. The bright colors and word “happy” mesh seamlessly. The color choices also draw you in.

Trent Walton’s monochromatic color scheme helps bring attention to the words on the site. The color may get you to pause but then it falls into the background as you move through the words, which have a very distinct sense of hierarchy.

Often color is also used for the words themselves. The bright magenta/purple used by Phase 2 Design Studio adds emphasis to the words they want you to read first – beautiful and passion.

Big (or very small) letters

Using lettering to create contrast can also be beautiful. Super-sized or super-shrunk text can create a high-drama effect.

Large letters make you feel like the words are important. They also create a sense of fullness, by filling much of the space on the site. Small lettering can cause you to zero in on certain words or phrases and create a sense of simplicity. Using small text as your design “catch” also creates a great deal of open space and you must be able to use it effectively in combination with your words.

Doing it well:

Darren Ansley’s site is “Fueled by Design.” The large typography draws you to the center of the landing page and gives you an immediate idea of what the site is about.

Daniele Codega’s site is the definition of minimalistic. But all of the white space leads they eye directly to the small type. Simple, different and efficient.

Hello is an almost-overused website catch phrase. But here the small “header” on Kenneth Cachia’s site works neatly. Because of its size, you read “hello” and it falls into the background as you skim the navigation bar and get into the main text on the page.

Make type art

Sometimes type is more than just letters. Typography can create a visual and piece of art all of its own. There are no real rules for making this work; it is a matter of taste. They key thing to keep in mind when playing with typographic art is readability. Stay away from “over-designing” text that needs to be clearly understood.

Doing it well:

Design Zoom uses circles, the rounding of letters and color to create an overall floating bubble effect. The simple shapes and colors are fun and vibrant. Note that navigational tools and text blocks are left to stand on their own and are easy to read.

Karb Digital Fireworks creates a fireworks effect with type. The fun colors and fonts create an overall effect that really mirrors the word “fireworks.” Some of the words are not super-easy to read but are decipherable and also serve as links.

You almost have to play with this site some to see the beauty in “Sadness.” Mouse over the letters and the dots vanish creating a stunning effect for Web Typography for the Lonely. The word and effect combine to create a feeling of absolute desolation, but you can’t look away.

Strong words or catch phrase

One of the most effective typography tools is the words on the page. Say something with meaning to grab your audience. Catch their attention with fun or interesting words. The No. 1 reason to use type is to communicate a message. Make visitors to your site want to read it.

Doing it well:

Viljami Salminen’s “Responsive Design” grabs you with big text. The words alone are almost enough to reel you in because it is such a big topic. The site design also makes it big with the super-sized novelty font on a bright colored background.

The Barrelhouse Flat used a phrase that can make you feel a variety of emotions. “Torrid affair” draws you in and is an unexpected way for the restaurant to advertise its food special.

Sean Baker uses a lot of high-impact phrases to get your attention. “Winner” and “I make things look good” draw you in because the site showcases what it says in its design. Typefaces are combined and contrasted for emphasis in the right places — how can you miss the “My resume” link?

The divine proportion is a mathematical concept dating to ancient times that is used as a principle in almost all types of design from architecture to art to websites. Although the exact origins of the formula and shape are not known, examples of its use can be found through history – Egyptians used the shape in the design of the great pyramids and Greeks used it for the Parthenon (note the shape below).

Print designers have been using the concept for newspaper and magazine design for more than 100 years and the basis for many websites starts with the divine proportion. But is this a “magic” formula and does it have a place in today’s web design toolbox?

Identification

The divine proportion goes by a handful of names that all refer to the same rectangular shape. Golden rectangle, golden ratio, mean ratio and Phi all refer to the shape that is considered the most pleasing and harmonious to the eye.

The golden rectangle is defined by a shape that has a proportion of 1.618; this is sometimes referred to as the magic number. Although the mathematical equation is quite precise, the use of this theory for design is not. Many opt to round numbers to two decimals and whole numbers to make creating the formula less complex.

But the golden rectangle is used for more than just an overall aesthetic. The shape can be found in navigation bars, the shapes of photographs and in the grouping of parts on a page. Because the shape is so common, many designers create golden rectangles throughout their work without even knowing it.

Perhaps one of the most famous examples of the golden rectangle appears as a Leonardo Da Vinci’s “Vitruvian Man” drawing, which was first published in “De Divina Proportione.” Parts of the shape, in particular the spiral, can also be found in nature; this shape is exemplified by the shell of the nautilus.

Create

To get this shape for your website, measure the width of your available content area and divide that by 1.618. The resulting number would be the width of your content area and the remaining with would be the space you use for the site’s sidebar.

Using a little math, you can create a simple golden ratio outline for your website. Start with your content area. (We will use 1,024 pixels, the width for most laptop and flat-screen monitors.)

1,024 px/1.618 = 632.88 px (which we will round to 633 px)
This number, 633 pixels, will be the width of the main content area.

1,024 px – 633 px = 391 px
This number, 391 pixels, is the width for the sidebar.

The perfect golden rectangle maintains the aspect ratio of the original square and adds the extra with to it. So the optimal height in this formula would also be 1,024 pixels.

You can also use an online calculator to figure this equation. Golden Ratio Calculator is a good tool that allows you to enter a width and get an instant calculation that breaks a width into a golden rectangle, such as the 1,024 pixels we used above. Further it uses that number as the width of the larger portion of the golden rectangle and provides the width of the small section and overall shape.

Uses

Twitter, which launched a redesign late in 2011, used the golden rectangle for the outline of its site. The feed and sidebar combined mirror the golden rectangle. The use of the magic formula was quite intentional according to Doug Bowman, the site’s creative director, in a post on Flickr: “We didn’t leave those ratios to chance. This, of course, only applies to the narrowest version of the UI. If your browser window is wider, your details pane will expand to provide greater utility, throwing off these proportions. But the narrowest width shows where we started, ratio-wise.”

It’s Numbered uses the idea of the golden ratio to pair images and text. The idea of the golden rectangle can be used for more than just the overall site design; it can also be used to group items within the site outline.

MmDesign uses the principle of the golden rectangle for the dominant image on its site. Not only is the image striking, it has the perfect harmonic shape. The golden rectangle is not just for site design but can be used to create balanced parts throughout a site.

Pros and cons

Using the golden rectangle will not ensure that your site design works. There are a host of other factors that contribute to a successful design. The formula, though, can help you create harmony and balance and provide a basis for how to formulate a design concept. Many beautifully designed sites do not use this principle, but you are likely to find examples of the golden rectangle within the site structure. Photos, text blocks and sidebars can also showcase this “perfect” shape.

Use the golden rectangle in projects where you want to create a feeling of natural balance and harmony. The structure created by using the shape is naturally pleasing and mimics some of the most well-known images of all time and even nature. Without knowing it, visitors to your site will feel comfortable with the look you have created.

But not all designers agree with the concept. Trying to design around a mathematical formula can be complicated, time consuming and won’t guarantee a nice site layout.

Analysis

Using the theory of the divine proportion is not for everyone. I think using the theory can get all-consuming when planning a site outline. Moreover because of the depth of each web page, it is almost impossible to maintain the true ratio and then you get stuck trying to fit a golden rectangle above the scroll or stacking multiple golden rectangles in the page design. (Neither option is very efficient.)

When designing with the golden rectangle in mind, try to not get too caught up in the numbers (although some math purists will disagree). Go for the basic shape and idea but don’t force it on your design. Play with variations as well. Create a golden rectangle and forget using the perfect height. (This can work for creating a sidebar for the full depth of your site.) Use the golden rectangle for the shape of images throughout your site or for colored frames.

The golden rectangle works best in web design when used for parts of the site rather than the whole. The shape will help you create beautifully arranged groups of images or text blocks of mirroring size. It can also be used to pair photos without that overly symmetric look. (Size one photo, then size the other using the 1.618 proportion and pair them side by side.)

Look at the grouping of multiple images on the Irving & Co page. The landing page features six images. The group uses the outline of the golden rectangle, but the photos are cropped and put together in an interesting way. The shape is not mathematically perfect, but creates a sense of balance and harmony that goes hand-in-hand with the principles of the formula. When using the golden rectangle, plan your design to mirror the shape but not fit into perfectly, pre-shaped boxes. Look past the numbers and think about the overall effect.

I like the classical feel of pages that employ the principle of the golden triangle. Nothing tops a good feel when you land on a new site. Using this theory, you can create that feel and sense of balance using a time-tested theory. But as with any design concept, use the golden rectangle in moderation. Too many perfect shapes stacked on top of each other can end up looking flat, repetitious and uninviting.

You have probably heard people refer to warm and cool colors when making choices about how to paint a room or what shade of makeup a woman selects. But did you know that color can mean so much more than that?

The colors you use on your website can elicit different emotional reactions from people. Years of research has proven that each color has associations with certain feelings and can create a mood. Understanding color choices and implied perceptions can help you create a more effective design without unintended color miscues.

Warm and cool colors

Warm and cool hues refer to the feeling a color scheme implies. Warm colors include reds, yellows and oranges and are often used to paint the walls of living spaces in homes and used as accents to pop out neutral shades. Cool colors, such as blues, greens and purples, are popular choices for bedrooms and more relaxed home spaces because of their versatility. In the same way these colors are used to create certain feelings in a room, they can be used to elicit emotion for your website.

Warm colors are inviting, happy and cozy. These colors can make spaces appear smaller because warm tones seem to advance, creating a cozy feel. Warm colors can create an active response in the brain and bring feelings of excitement, passion and sometimes aggression. In extremely large spaces, an abundance of warm color can get overwhelming and is best matched with neutral tones.

Cool color choices, considered calming and soothing, are somewhat recessive and can make spaces feel a little more open than they are. Some argue that a cool color scheme can make a physical space actually feel cooler than it is and should be matched with open spaces (such as white space or neutrals on your website). Cool hues bring about a more passive reaction in the brain and can make a person feel pleased, relaxed or even subdued.

Red

Red, one of three primary hues, is one of the most powerful and emotion-evoking colors. Reds can feel sweet and innocent when mixed with white to create pink tones or bring about sharp responses when used in the pure form. With the addition of black, reds can create a darker emotional response, such as anger or convey passion.

While reds can be used as the primary color behind your design, the hue is often best as an accent with other colors or used in more subdued ways. Know what kind of response reds can draw – passion, stimulation, excitement, power and growth – and use that to your advantage when considering the color.

Quick color associations: Light red for joy and love; dark red for rage and anger, but also leadership and courage; pink for romance and feminine qualities; and rusty reds for fall and change.

Green

Green, another primary color, is one of the most calming and neutral of shades. Green represents balance and harmony and is often used to depict nature and hope. Lighter shades of green (with a bit of yellow) are a bit more cheery and light and can even have some warm associations. Darker greens represent stability, safety and affluence – think money; American bills are dark green in color. With the addition of blue, greens become more teal and take on cooler tones.

Greens work in many situations, as base colors and accents. This hue is one of the most pleasing to the eye. Be aware of sometimes unintended emotional consequences associated with greens, such as inexperience or sickness.

Quick color associations: Yellow-greens for sickness and discord; dark green for ambition and prosperity; teal for emotional health and stability; and olive green for peace and harmony.

Blue

Blues are the hues of serenity, peace and security. The last of the three primary colors that create the RGB color base we use for digital design is used in a variety of design combinations. Blue, because it also creates a sense of calm and friendliness, is the primary color used by popular social networking sites Facebook and Twitter.

Blue works well as both a background and accent color and is a shade that most people can relate to, although it can have masculine properties. Darker blues are also text friendly. Darker hues are often used in the color schemes of corporate websites, while lighter hues are more commonly showcased in lighter applications. Blue, which has associations with water and the sky, can also help add a natural feel to your site. In contrast, blues are seldom used in combination with food or in food packaging because some studies have shown that the calming effect from the color can actually suppress a person’s appetite.

Quick color associations: Light blue for heath, depth, stability and faith; dark blue for knowledge, power, trust and integrity.

Purple

Purple mixes some of the warm and cool, and passionate and tranquil qualities of red and blue. Purple has long represented royalty, power and wealth. Purples also promote a sense of creativity and imagination, because the color is not dominant in nature.

Purples can have a variety of practical uses. Lighter shades, which are soft and feminine, can create a light or romantic mood. Darker shades have a heavier, moodier feel and can sometimes cause a sense of instability or uneasiness.

Quick color associations: Light purple for softness, nostalgia and romance; dark purple for moodiness, including unease, gloom or frustration or the much different sense of power and control.

Yellow

Yellow is simply happy. It has long been associated with energy and encouragement. The hue is stimulating and makes everything feel light and sunny. On the flip side, yellow is also associated with caution.

Yellow is a great highlight or accent color but can be difficult to use in broad-based design. Pair and match yellow with contrasting colors to ensure that your message is clear. Yellow easily “washes out” and can lose luster when used in lighter forms.

Quick color associations: Light yellow for caution and trepidation; dark yellow for happiness, joy and freshness.

Orange

Orange is the harmonic marriage between red and yellow. It combines the passion and energy from the primary color with the sunniness and freshness of yellow. Orange hues tend to be balanced, energetic and inviting.

But this hue can be tough to make work. Oranges are great for splashes of color and accents but can almost cause a too-busy effect when used as a dominant color. Use orange to represent movement but be wary of the colors’ ability to overpower other design elements.

Quick color associations: Yellow-orange or gold for prestige and wisdom; red-orange for pleasure, energy, health and desire; and dark orange for change or distrust.

Neutrals and browns

Neutrals and browns are the epitome of nature and are used abundantly in design (so much so that many natural tones may go unnoticed). Brown and neutral tones can represent anything from peace and calm to wholesomeness and reliability or even boredom.

Browns work in a variety of functions – for backgrounds, accents and as a text color. The hues blend with almost every other shade to create a pleasing effect.

Quick color associations: Pale browns for calm, purity and elegance; medium to tan for dullness or conservation; and darker browns for stability, comfort and experience.

White and black

White and black are the purest forms of color (or lack thereof). Each represents simplicity and formality. It is almost impossible to create anything without the addition of white or black.

White is often associated with purity, cleanliness and perfection. Black is the color of power, elegance and mystery. It can also be associated with fear and unknowing. Each of the colors can have a stark look when used without accentuation. The combination of black and white, gray, can be calming and dull.

Quick color associations: White for clarity, cleanliness and openness; black for power, elegance and mystery; and gray for calm and conservative.

Color Wheel image by Team Dalog.

If you want your web presence to stand out, creating a beautiful website is the first step to go. In order to make a visit to your website memorable and interesting you can add exciting and fun effects. Here is another collection of websites that do exactly that.

If you are interested in more inspiration you can check out our previous collection Examples of Fresh Effects in Web Design.

Layrr

When you visit Layrr you get a superb scrolling experience. Scrolling will reveal the message of the network that supports creatives in realizing their projects.

Contain.r

Hover over the single project items after they fly in to see a fast-running slideshow. When leaving the item, it will stay with the current image.

Faces of New York Fashion Week

Here we have a great layout with a BW to color hover effect and dynamic loading of the images. Try to zoom the page out and you’ll see how the items will re-arrange!

Subsens

Thierry Alexandre Schmitt makes navigating through his site a smooth “sliding” experience. Click on a project to see the details sliding in from the right or use the filters on the top to see the projects squeezing up like an accordion.

Soleil Noir 2012

Soleil Noir Studio gives us another amazing scrolling experience with some thoughtful messages about believing…

Air Jordan 2012

Visiting Air Jordan 2012 and scrolling will just blow you away: making extensive use of the parallax effect you’ll get the impression that the shoe parts are going to fly right into your face!

3Digital

3Digital is another great example of turning a website into one big slider: everything just slides up and down, to the sides, in and out… An amazing experience because it all just feels “right”.

HERR LEDER

On HERR LEDER (Mr. Leather) you will find another scrolling Easter-egg and don’t forget to refresh the page because the background will change!

TokioLab!

TokioLab! add some spice to the scrolling effect with the help of some subtle parallax effect and scaling the letters.

MENDO

MENDO offers a fresh book browsing experience with a stunning full page image view.

Colorz

Colorz will surprise you with their hover effect on the portfolio items. The image slide direction depends on where you come from with your mouse and to where you are leaving. Make sure to check out the rest of the site since it’s packed with fresh, subtle effects (i.e. their News section).

MahiFX

A smooth scrolling experience with some subtle effects…

CCR – 10 Anos de IPO

This website combines the scrolling effect with a timeline, showing the yearly achievements of the company. Notice the detail of the blurry images, making the “driving” experience appear more real.

g4interactive

Don’t you just love to see some non-straight shapes? G4interactive rotates its website elements 45 degrees and creates a fresh look with some subtle effects.

TAG REACTION

Up for some fun chemistry? On Tag Reaction you can fly (scroll) through some interesting “molecule bindings” and check out the “details” of each reaction. What an amazingly creative concept that will blow you away!

Yuna Kim

Some sweet hover effects here. Check out how the shapes bounce or how the top bar slides in smoothly.

Manual

Manual surprises with a fresh project navigation: just click on projects and choose one of the sort options to see the items slide to their places or fade.

One Darnley Road

Check out the subtle menu effects and see the content sliding into place.

Barcito Chicago

Barcito does not have any fancy scrolling or sliding but simply a very subtle and sweet hover effects. Don’t you just love Pintxo?

Bagigia

Bagigia offers yet another great scrolling experience by showing you their product in detail and from all sides. Hey, a zipper indicates the progress, sweet!

Acuterays

Last, but not least, Acuterays is another scrolling site with some asymmetrical design elements.

And that’s all! We hope you liked this little collection and got inspired!

The first color wheel has been around for more than 300 years and was developed by Sir Isaac Newton, according to ColourLovers. Other color charts, though, existed before that time. The basic design has evolved over time but the concept remains the same – almost any color combination from the wheel will work together.

A basic color wheel features 12 colors that can be combined in a variety of ways to create a number of different effects. Colors can complement one another, or even create chaos. Colors are also divided into categories of warm and cool. Warm colors are vivid and energetic and fall on the wheel from red to blue to green. Cool colors, which range from red to orange and yellow-green, are considered calming and soothing. White, black and gray are neutral and take on the properties of surrounding colors.

Expanded color wheels build on this design and add equal variants of color around the wheel. Some wheels also include tints, shades and tones of each color. A tint is a variant of a color made by adding white to lighten it. Shades are a darkening of each hue accomplished by adding black to a color. Adding gray to a color creates a different tone.

Types of Color

The basic principle of the color wheel starts with three primary colors – red, yellow and blue. The colors are placed equidistant on the wheel. Primary colors are the basis for all other color and any color can be made using a combination of primary colors.

Secondary colors are made by mixing two primary colors from the color wheel. The results – orange, green and violet – are centered between the colors mixed to make them on the wheel.

The last group of hues, tertiary colors, is made from mixing a primary and secondary color. Each color has a two word name, such as red-orange, blue-purple or blue-green. Tertiary colors rest between the colors used to form each on the color wheel.

Color schemes are generally created by selecting and combining two, three or four colors in a palette. Each color scheme can be made from a pure hue, tint, shade or tone. Match hue to hue, tint to tint and so on for the best color combinations.

Complementary Color Scheme

Colors from opposite positions on the color wheel are considered to be complementary. Red and green, yellow and violet and blue and yellow-orange are complementary colors.

Using complementary colors creates a high-drama, high-contrast look for your project, especially when the pure hue is used for each; banking giant ING showcases a complementary color scheme. A complementary color scheme is great for small pops of color to make items stand out but can be difficult to use. Avoid using a complementary scheme for large projects or as the basis for your website, also avoid text in complementary colors.

Several other types of complementary color schemes combine this two-color pairing with additional colors for four-hue palettes. The split complementary scheme uses a color, a complement and the two colors adjacent to it. A dual complementary scheme uses two colors side-by-side on the wheel and the pair of opposite colors. Further, the near complementary scheme uses a hue just to the right or left of the complement color on the wheel to form a color pair.

Analogous Color Scheme

Analogous color schemes use adjacent colors from the color wheel. The result is a visually pleasing and calming display of color. One of the colors in an analogous color scheme is used as a dominant hue. Select a second color to support the dominant hue and a third to use as an accent.

One idea behind this use of color comes from nature. Think of a field of grass, it is made up of many variants of green and yellow. This principle is applied on the website for the Yellow Bird Project, which appropriately uses a yellow scheme.

Triadic and Tetradic Color Schemes

Triadic color schemes, which use three colors equidistant from one another on the color wheel, are among the most popular used by designers. Triadic color schemes create a sense of equality and security, because of the use of varying hues.

Triadic color schemes also tend to be quite vibrant and should be used in a way that best uses this feature. Balance color by selecting a dominant hue and use the two other triadic colors as accents. Julie & Co. starts with purple for the borders and right rail and adds green and orange accents for photos and text.

A tetradic (or rectangle) color scheme, which uses a combination of four colors, is similar to the triadic because it is vibrant and should contain one dominant color. The arrangement of colors comes from two sets of complementary colors, meaning the four hues are not equally placed around the color wheel. A rectangular scheme may use a combination of red and green with red-orange and blue-green. Watch how warm and cool colors are used in this scheme to create the desired effect.

Much like the tetradic scheme, a square color scheme uses four colors, but colors are spaced evenly around the color wheel. Again, a single hue should be dominant with the others used as accents. Again, keep an eye on the use of warm and cool colors in this four-hue scheme.

More Color Schemes

In addition to the basic types of color schemes noted above, there are a handful of others that are widely used.

One of the most popular, and modern, color schemes is the monochromatic look, such as that used by Dark Crimson Productions. Each hue used in the palette is a tint, tone or shade of a single color. The look results in an organized and direct feel.

Neutral schemes use shades of only browns and tans. You can “neutralize” any color by mixing it with its complement.

Achromatic schemes are created by using shades of black, white and gray. Achromatic schemes have a stark feel and can benefit from small pops of color.

Color can be tricky

Although it may seem pretty simple, color is about more than just making pairs on the color wheel. Color can create a mood and dictate the identity of your website. Think about how you are using each color — as a background, for accent, for text — and play with different schemes. Think about how tints and shades can add impact and drama in the right places.

Also consider how each color will work in its surroundings. Each hue can take on the properties of its neighbors in certain combinations, almost creating a new hue. Look at the green above, the color is exactly the same in each block but appears different because of the surrounding colors.

Setting type effectively in any project requires a little more thought than just selecting a font and point size. The way the letters relate to each other can be just as important of a consideration.

Type can be manipulated to be shorter or wider, have large gaps or lack thereof between letters, and have lines with varying depths of space between them. Each of these attributes affect the readability of a project and whether certain modifications work for your project or not can hinge on the message you are trying to convey.

Take time to play with various type options before settling on a final selection with each type driven project.

TRACKING AND KERNING

Tracking and kerning refer to the horizontal spacing between letters. Although many people choose to use these terms interchangeably, they are different.

When making changes in tracking the horizontal space between each letter increases or decreases for all letters in a block of text. Tracking can be used to slightly tighten a paragraph to remove widows or orphans in text or add very loose spacing to create a more artistic effect. Tracking is measure in plus and minus units. Plus units add spacing while minus units tighten letter spacing.

Kerning is the reduction of space between a pair of letters. Some letter pairs such as AV, will have awkward gaps between the letters when using certain typefaces. A kerning adjustment will close the gap so the spacing looks more like the other letters in the sequence.

Changing the tracking and kerning directly affects the readability of type. For large blocks of type sharp tracking and kerning changes should be avoided. These techniques work best in large blocks of text when letter spacing is altered slightly. In projects where type is used as more of an art element, loose or tight tracking techniques can be effective.

Web designer Josh Hemsley and Kitchen Sink Studios each use tracking techniques to achieve optimal line spacing on their pages. Hemsely uses tighter letter spacing for “TWITTER” but lets the letters breathe more with “DRIBBLE.” Alternating letter spacing adds visual interest when used with just a few words. Kitchen Sink Studios uses the same technique, alternating between tight and loose tracking to add emphasis and draw the eye to certain parts of the page.

LEADING

Leading is the vertical space between lines of type and refers to the distance from one baseline to the next. Leading is measure in points, just like a font, and the distance between baselines directly corresponds to the font being used.

Tight leading refers to any measure where the space between lines is at least two points below the size of the font being used. Normal leading is equal to or within a point size of the font and loose leading is anything greater than that.

Leading also affects readability. Normal leading or somewhat looser leading is used in most applications where large chunks of text must be read. Using slightly looser leading with small text can make it easier to read, such as in book publishing. Leading that is extremely loos or tight can be hard to read and works best when used with only a few words.

Look at the use of tight leading from LeaderBe Consulting. The letters overlap to create an art element while ensuring that text remains readable.The website for the book “What Happens Next?” uses the opposite approach. Using loose leading for the copy makes a large block of text easy to read and less intimidating.

SET WIDTH

Set width is the measure of a letter and the space next to it and changing the set width results in the stretching or squeezing of typefaces. Many type purists disapprove of changing the set width of any font.

Set widths are measured in percentages. A normal set width of 100 percent is how the font was produced and intended for use by the designer. Set widths of less than 100 percent make a font narrower and more condensed. Set widths of more than 100 percent expand and make a font wider.

SUBSCRIPTS AND SUPERSCRIPTS

Subscripts and superscripts are most commonly used in for fractions and in scientific writing applications. Subscripts drop a letter below the baseline, while super scripts appear above it. Characters are 65 percent to 75 percent of actual size and have a slightly increased stroke. Most publishing software will also allow for the vertical movement of subscripts and superscripts.

EXTRA EFFECTS

Some designers also use a variety of other tools to manipulate type, such as word spacing, drop caps and even shadows and embossing.

Word spacing and drop cap techniques can add emphasis to certain parts of a type project and are common type modifications. Word spacing changes can affect readability and tight spacing should be avoided when large blocks of text are used because words can seem to run together. Drop caps are a great tool for adding emphasis and navigation through heavy text.

Shadows and embossing effects added to text are sometimes controversial. Typographers and designers do not always see eye-to-eye on adding effects to type, with the font design camp arguing that each font should stand alone. Designers see these effects as another tool in their repertoire. Regardless of your philosophy, shadows and embossing are most effective when using type as an artistic element and can be difficult to use effectively in applications with many words.

Appvita uses shadow effects on text to create its logo and use it as an art element. The site also uses shadows on small blocks of text for emphasis such as “New & Improved!” The shadows are most effective because they are used sparingly; too many shadows can make text difficult to read.

Featured Image Credit:
Abstract Vector Image By Vectorportal.com

Email ads and newsletters are still big converters mainly because you can directly reach your target audience and keep them informed of new products and services you are offering. However, even though people are smarter, the methods of building and rendering email creatives are not. Tables layouts, catchy subject lines and clear call to actions are still the email creative standards so let’s talk about some ways to design and build better email creatives and campaigns.

I’ve sprinkled great email creative examples throughout the article that demonstrate these principles and hopefully offer some inspiration for your next email design project.

Marketing Campaign Basics

There is a lot of trial and error when it comes to developing a successful email marketing campaign, but there are a few elements that have been proven to work time and time again. Despite whether you are sending out a monthly newsletter to your users or sending out a creative to promote your new product release, these elements will all contribute to a successful campaign.

• Attention-grabbing subject line
• Relevant, useful content
• Beautiful imagery
• Consistent branding
• Strong call to action
• Social icons and/or feeds

The first rule to good email marketing is a strong, attention-grabbing subject line. Email marketing is a two step process: click to open the email and click to your site. If the subject line isn’t compelling or interesting enough, no one will even get past the first click. You know your customers/users best, so make sure your subject line grabs their attention and gets them past the first click.

After the customer/user clicks to open the email because of your awesome, ridiculously interesting subject line — it’s now your job to get them to that all important second click. The first thing to get them there is content, relevant and useful content. Whether it’s a newsletter or ad, the content needs to be relevant to them, it needs to be useful and it also needs to be informative enough (but not too much) so that your users will trust your expertise and want to learn more.

Along with relevant content, images are an excellent way to communicate your message and an easy way for your customers to engage with the email quickly. It’s a myth that images in emails are worthless because “most” people have images turned off or that “most” email boxes don’t render images properly. We’ll discuss this more below in the design section, but “most” people I know don’t even know you can turn images off in the first place. Don’t be afraid to use images, cool fonts or anything that will catch the user’s/costumer’s eye.

Branding is the best way to tie your site, service or product into your email creative so make sure your name is all over the thing. Consider the email creative as a mini website. Brand the header with your logo and/or name, brand the footer with your logo and/or name and use your color scheme throughout the email to stay consistent.

Without a clear call to action the email creative is worthless, despite your attention grabbing subject line, informative content, its beautiful imagery and clear branding. Use contrasting buttons to guide the user to the next step. Take advantage of visual hierarchy methods to guide the user to where you want them to go. Any design methods you use to entice the user will be worthless if they don’t know what the next step is or where they need to go.

Another thing to consider is building trust with your new customer/user. People don’t buy into scammy pitches and cheesy testimonials anymore. The best way to build trust is to show them that other people use your product or service — hopefully their friends. Add your social icons or even feeds to your email creatives so that they can see you’re not just some sneaky snake oil salesman. Social feeds and social proofs show to your future customer/user that you care about your product or service. Give them a chance to see what others are saying about you.

Email Design Best Practices

Designing and building an email creative can be a beast — and you thought it was hard to build a website browser compliant. Try email boxes that don’t even render CSS. The first rule of email creative design is just to make things simple and the second rule is to keep things simple. But we all know creating simplicity is the hardest thing to do.

HTML Only

So, forget everything you know about modern web design layout and stay away from using any CSS if possible. If you do use CSS it should be inline. I know, it goes against everything you stand for as a web designer. But with so many email rendering agents out there, it’s impossible to know whether any of your floats or display properties will render correctly. Don’t guess, just fall back to your old table layout, HTML only design layouts — even if it breaks your heart.

Grids/Columns

Since CSS layouts aren’t cool anymore and table layouts are back in now, stick to grids and columns so that your creative will be presented in the way you designed it — no matter what email box your user is using. Plus, grids are all the rage in web design these days so average users won’t know that you’re using tables to lay it out.

Besides making it easier for you to render your email creatives, grids also offer a better way to present your content and layout your information and images in a clean and methodical way. Columns and grids separate and present content in an easy to read and easy to scan way, so that your user doesn’t have to work hard to pull your message out.

Don’t Skimp on the Images

Like we talked about above, images are awesome elements for email creatives, so don’t be afraid to use them. As long as your images are hosted on a good public URL and are embedded via the HTML img tag, you’re safe, so go ahead and use them. Keep in mind, email creatives are kind of an older beast so there’s really no need to have live text unless where necessary. It’s totally cool to use embedded text in images so take advantage of this and be as creative as you want.

Because CSS can be hard to work with in emails and because tables are also hard to work with, try to avoid background images. Usually, you’re safe to use a body background or table background, but beyond that try to use inline images so you don’t run into more bugs.

Don’t forget to optimize your images also. Despite the fact that your images are most likely gonna be hosted on your public server somewhere, don’t make the images so large that they take a second to load. Once your user opens that email make sure they see those beautiful images and not just the dreaded “x” mark where the image should be. Stick with JPGs and GIFs instead of PNGs — some viewers still don’t like PNGs… I know, pretty lame.

600px

That is the max width your email should be. Don’t go any wider than that. Unlike the flu browser, most email clients don’t have the luxury of wide screens. Typically, most clients use up to about 600-700px of their real estate to the email viewing window so avoid going too wide. Also, consider designing your table layout to be flexible (if you can) so that when someone shrinks their email client they will still be able to view your entire email.

Quicker the Better

Beyond optimizing you images and content so that your email creative loads quickly, design you email to be scanned quickly by the reader. Take advantage of visual hierarchy to guide the user through your email, use bullet points and headers, use infographic style imagery or other visual cues to present you message and always design a clear call to action.

Basically, you want your user to scan down your email in a few seconds and still understand the overall message you’re presenting. If you can grab their attention in those few seconds, they may stick around to read the email in further detail and hopefully click through.

Test, Test, Test

The last thing you want to do with your email creative is to test it to death. Load it up and hit it in as many email clients as humanly possible. Although it may not be possible to test it in every inbox, the more the better. Even if you think you have everything covered and you’re confident that everything will work beautifully, you’re guaranteed to find a bug or two in a few clients. If you just don’t have time to test a bunch of inboxes, make sure you hit the major web clients like Gmail, Yahoo and Hotmail — then make sure you hit the major desktop clients, Outlook and Apple Mail.

Consider Mobile

Okay, I didn’t forget about mobile email boxes — well, I sort of did. Mobile inboxes are just an entire beast all by themselves so they may actually require a whole new article to tackle them. But just consider how your email will be presented on a mobile phone. Make sure you are using proper alt and title tags for your images if you embedded important text into them. Like I said, mobile email creative best practices probably deserve an entire article to themselves so stayed tuned for that.