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?

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.

Almost any website or design project will include the use of type. From a few words to a page filled with text the font choices you make in the early planning phases will carry through the project. Fonts can help create and establish a mood and set the tone for how your work is received.

Do you want a modern look and feel? Or is the desired effect more classical? Is text being used primarily as art or in logo design or does it need to meet readability standards? All of these are questions you should answer before selecting typefaces for a project.

Keep in mind that each typeface on its own can say almost as much about the project as actual words on the page (or screen). Carefully evaluate typefaces so that each represents projects in the proper way.

Project Goals

The first step with any design project is to determine what you expect as a final outcome. Think about how type will be used. You would not use the same font on a wedding invitation as for a wanted poster, right?

Stick to simple typefaces that are highly readable for projects with large blocks of text. In web design the trend is to use a sans serif body font – think Arial, Tahoma and Verdana. Using a simple choice will take the emphasis off the look of the text so that it is easy to read, such as the simple sans serif font used on this website. Look for a font with average width strokes and lines – stay away from super thin or thick letter forms – to ensure readability.

Consider the impact of type on images as well. If the image is driving the design, keep type simple so the image stands out. Caravan Restaurant & Bar does this with a striking image of its interior on the landing page while using simple type to direct you to other parts of the website.

More engaging font choices often work best when used sparingly and when they can stand on their own. Use a funkier font for items that will be used as artistic elements or that do not rely on readability. Old style, cursive, script and display typefaces can quickly establish a mood and work best when used at large sizes.

For example, “Good Design” establishes a light mood for this site. The same goes for the company name, Indubitablee, in the top left corner. The typefaces have curvy, loose styles and look fun. Now imagine either of those typefaces while trying to read this article. It would be a lot less fun and would be difficult to read.

Moods

Although there are many factors that contribute to the overall feel of a website, some type choices alone can set the mood. (Although some fonts, such as Helvetica, are considered “moodless.” This means these letter forms take on the feel of other typefaces.)
Font selections can feel formal or informal, light or dramatic, modern or traditional and warm or cool. Fonts are not limited to a single mood and combinations of typefaces can create different mood associations.

The Team Fannypack website combines traditional and dramatic typefaces for a very old-style feel but with hints of modernism (not the icon in the top left corner).

AdPacks.com uses scripts and sans serif typefaces to create a page with a look that mirrors the theme “classy” the site is pushing. The old-style image and background in combination with the type creates a harmony in what the page says and its visual identity.

WakWAW takes a completely different approach. It uses a very dramatic typeface to catch your attention and the font is used throughout for headers and as a navigational tool. It combines with a “moodless” font that is easy to read but does not take away from the chaotic feel of the site.

Consider Established Themes

Keep in mind that establishing mood and feeling is pretty complex and can come across differently based on each person’s experiences. While there are some pretty universally accepted moods – think back to that “Wanted” poster – others are not so clearly defined.
Developing a mood based on distinct type selections from certain time periods can help. Using a typeface with an established identity can create an instant mood.

Font Diner uses a 50’s theme, with the main title having the look of the logo from a classic Chevrolet. This visual association is quick. With just a glance you are instantly taken back in time. And the site name, Font Diner, further expands on that theme.

Script and cursive type choices instantly create a feminine mood and are commonly used on websites targets at women. (Think of how many wedding and party invitations use this brand of typography.) Cake Sweet Cake and Addy Meira each use a collection of cursive and italics to create a lights and delightful moods on sites with woman-appeal.

Trends

With the number of items competing for your attention on websites, font choices are becoming increasingly dramatic. But at the same time, type driven sites are opting for more traditional sans serif choices to set them apart.

High impact, high drama fonts are not always readable and can create a sense of intrigue or chaos. These type selections can do one of two things: Bring in new people to the site because of interest, or confuse and turn them away. Make sure to use “super moody,” bold choices with strong images that help convey a message if the type falls short.

“Greetings Earthlings” is a great example of a moody choice paired with a strong image and nice supporting type. It immediately sets a space odyssey feel with an image and typeface on the landing page but the rest of the site uses an easy to read typeface. Site developers merged impact and readability.

Adding Color

Mood can sometimes be about more than just a font. Think about color choices and how just a simple hue change can alter how you feel. Traditional color mood rules still apply and should be considered to avoid an inadvertent emotional association.

Reds and blacks, especially when paired with dramatic typefaces, can create a sense of passion or anger. Blues and greens are more peaceful, with blue also sometimes establishing a sense of melancholy and greens linking to nature. Yellow can be cheerful or comforting and oranges are also exciting or energetic. White emphasizes emptiness or space.

View demoDownload source

Today I am going to show you how to use some neat CSS3 properties to beautify your tables. With so many new selectors we can address specific table cells and rows in order to create a unique style without adding classes to the markup.

We will be applying the -webkit and -moz gradients for creating a great look without images and learn how to insert content into elements with a specific class.

Let’s start with the markup.

The Markup

The following will be our basic table structure:

<table class="table1">
	<thead>
		<tr>
			<th></th>
			<th scope="col" abbr="Starter">Smart Starter</th>
			<th scope="col" abbr="Medium">Smart Medium</th>
			<th scope="col" abbr="Business">Smart Business</th>
			<th scope="col" abbr="Deluxe">Smart Deluxe</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th scope="row">Price per month</th>
			<td>$ 2.90</td>
			<td>$ 5.90</td>
			<td>$ 9.90</td>
			<td>$ 14.90</td>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<th scope="row">Storage Space</th>
			<td>512 MB</td>
			<td>1 GB</td>
			<td>2 GB</td>
			<td>4 GB</td>
		</tr>
		<tr>
			<th scope="row">Bandwidth</th>
			<td>50 GB</td>
			<td>100 GB</td>
			<td>150 GB</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">MySQL Databases</th>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
			<td>Unlimited</td>
		</tr>
		<tr>
			<th scope="row">Setup</th>
			<td>19.90 $</td>
			<td>12.90 $</td>
			<td>free</td>
			<td>free</td>
		</tr>
		<tr>
			<th scope="row">PHP 5</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
		<tr>
			<th scope="row">Ruby on Rails</th>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
			<td><span class="check"></span></td>
		</tr>
	</tbody>
</table

We have all the elements a table needs, a header, a body and a footer. In this tutorial we will use a hosting plan comparison table as example. The three following styles can be applied to this table by changing the class to table1, table2 or table3.

CSS Table 1

The first table will be in green tones with some gradients for the descriptive cells, the “th” elements. Let’s start with the general style for the table:

table.table1{
    font-family: "Trebuchet MS", sans-serif;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4em;
    font-style: normal;
    border-collapse:separate;
}

We want to have some space between the table cells, so we will make the border-collapse separate.

I usually take the style for the font from Typechart, a really useful site with nice font examples and the CSS code ready for copy.

The th elements of the head will have the following style:

.table1 thead th{
    padding:15px;
    color:#fff;
    text-shadow:1px 1px 1px #568F23;
    border:1px solid #93CE37;
    border-bottom:3px solid #9ED929;
    background-color:#9DD929;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.02, rgb(123,192,67)),
        color-stop(0.51, rgb(139,198,66)),
        color-stop(0.87, rgb(158,217,41))
        );
    background: -moz-linear-gradient(
        center bottom,
        rgb(123,192,67) 2%,
        rgb(139,198,66) 51%,
        rgb(158,217,41) 87%
        );
    -webkit-border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius:5px 5px 0px 0px;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
}

We use the gradient property for Firefox and for Webkit browsers (Safari and Chrome) to create a beautiful gradient with three colors. The border-radius property rounds the top left and top right border of the cells.

Now, we need to take care of that on th that is empty. With CSS3 selectors we can do some incredible things, and this is one of them: select the th that is empty. And this is how:

.table1 thead th:empty{
    background:transparent;
    border:none;
}

The footer of the table will have the following style:

.table1 tfoot td{
    color: #9CD009;
    font-size:32px;
    text-align:center;
    padding:10px 0px;
    text-shadow:1px 1px 1px #444;
}
.table1 tfoot th{
    color:#666;
}

Nothing special about that, just some text shadow to enhance the font.

The inner table cells will have a light green background and a white text shadow for an engraved effect:

.table1 tbody td{
    padding:10px;
    text-align:center;
    background-color:#DEF3CA;
    border: 2px solid #E7EFE0;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    color:#666;
    text-shadow:1px 1px 1px #fff;
}

We also add some very subtle border and border radius to the cells. This will invoke a slight glowing effect. We could also use some box shadow to create a similar effect.

Now, we want to add an icon to all the cells that have a span with the class “check”. With the following CSS with can achieve that:

.table1 tbody span.check::before{
    content : url(../images/check0.png)
}

This property allows us to add some specific content (in this case it is an image) inside of the element. We could have also added some text here. We can say “::before” or “::after” which would insert it after the content.

And that’s all the style for the first table! Let’s take a look at the second one.

CSS Table 2

The second table will be more of the elegant type, with a black header and footer.

This table will not have any space in between the cells, so we collapse it:

table.table2{
    font-family: Georgia, serif;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    letter-spacing: -1px;
    line-height: 1.2em;
    border-collapse:collapse;
    text-align:center;
}

The footer and the header are going to have a similar style, so we can define the common properties as follows:

.table2 thead th, .table2 tfoot td{
    padding:20px 10px 40px 10px;
    color:#fff;
    font-size: 26px;
    background-color:#222;
    font-weight:normal;
    border-right:1px dotted #666;
    border-top:3px solid #666;
    -moz-box-shadow:0px -1px 4px #000;
    -webkit-box-shadow:0px -1px 4px #000;
    box-shadow:0px -1px 4px #000;
    text-shadow:0px 0px 1px #fff;
    text-shadow:1px 1px 1px #000;
}

The th of the footer will have this style:

.table2 tfoot th{
    padding:10px;
    font-size:18px;
    text-transform:uppercase;
    color:#888;
}

The footer cells which we already defined together with the header cells, will need a different box shadow. The header box shadow points to the top and the footer one should point to the bottom. We also want to change the color of the text:

.table2 tfoot td{
    font-size:36px;
    color:#EF870E;
    border-top:none;
    border-bottom:3px solid #666;
    -moz-box-shadow:0px 1px 4px #000;
    -webkit-box-shadow:0px 1px 4px #000;
    box-shadow:0px 1px 4px #000;
}

Let’s get back to the header where we still need to define that the empty cell should not have any style:

.table2 thead th:empty{
    background:transparent;
    -moz-box-shadow:none;
    -webkit-box-shadow:none;
    box-shadow:none;
}

We also need to remove the box shadow that we defined for the header elements before.

With the :nth-last-child selector we can select the last cell element in our header and say that it should not have a right border, like the other ones:

.table2 thead :nth-last-child(1){
    border-right:none;
}

With the :first-child selector we can address the first cell in the header, which is empty and we don’t want it to have a border. We also want to remove the border from the last td elements in our table body:

.table2 thead :first-child,
.table2 tbody :nth-last-child(1){
    border:none;
}

Now, lets add some style to the outer left descriptions, the th elements of the table body:

.table2 tbody th{
    text-align:right;
    padding:10px;
    color:#333;
    text-shadow:1px 1px 1px #ccc;
    background-color:#f9f9f9;
}

And the following style will be applied to the other cells:

.table2 tbody td{
    padding:10px;
    background-color:#f0f0f0;
    border-right:1px dotted #999;
    text-shadow:-1px 1px 1px #fff;
    text-transform:uppercase;
    color:#333;
}

Now we just need to insert an icon for the check spans:

.table2 tbody span.check::before{
    content : url(../images/check1.png)
}

CSS Table 3

The third table will have a few more CSS properties since we want all the column headers to have a different color. I will show you how to do that by using selectors only.

The general table style will be the following:

table.table3{
    font-family:Arial;
    font-size: 18px;
    font-style: normal;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: -1px;
    line-height: 1.7em;
    text-align:center;
    border-collapse:collapse;
}

The common style for all th cells in the header will be:

.table3 thead th{
    padding:6px 10px;
    text-transform:uppercase;
    color:#444;
    font-weight:bold;
    text-shadow:1px 1px 1px #fff;
    border-bottom:5px solid #444;
}

The empty cell will be treated as follows:

.table3 thead th:empty{
    background:transparent;
    border:none;
}

Now we want to select specific th cells in the header and td cells in the footer to give them a unique color. With the :nth-child(number) we can select the exact child:

.table3 thead :nth-child(2),
.table3 tfoot :nth-child(2){
    background-color: #7FD2FF;
}
.table3 tfoot :nth-child(2){
    -moz-border-radius:0px 0px 0px 5px;
    -webkit-border-bottom-left-radius:5px;
    border-bottom-left-radius:5px;
}
.table3 thead :nth-child(2){
    -moz-border-radius:5px 0px 0px 0px;
    -webkit-border-top-left-radius:5px;
    border-top-left-radius:5px;
}
.table3 thead :nth-child(3),
.table3 tfoot :nth-child(3){
    background-color: #45A8DF;
}
.table3 thead :nth-child(4),
.table3 tfoot :nth-child(4){
    background-color: #2388BF;
}
.table3 thead :nth-child(5),
.table3 tfoot :nth-child(5){
    background-color: #096A9F;
}
.table3 thead :nth-child(5){
    -moz-border-radius:0px 5px 0px 0px;
    -webkit-border-top-right-radius:5px;
    border-top-right-radius:5px;
}
.table3 tfoot :nth-child(5){
    -moz-border-radius:0px 0px 5px 0px;
    -webkit-border-bottom-right-radius:5px;
    border-bottom-right-radius:5px;
}

We also added a border radius to the selected corner cells.

The common style for all the td cells in the footer will be:

.table3 tfoot td{
    font-size:38px;
    font-weight:bold;
    padding:15px 0px;
    text-shadow:1px 1px 1px #fff;
}

Let’s add some padding to the cells:

.table3 tbody td{
    padding:10px;
}

We want the row of the prices for the setup to have a stronger font:

.table3 tbody tr:nth-child(4) td{
    font-size:26px;
    font-weight:bold;
}

The columns of the body of the table should have altering styles, so we will use again the :nth-child selector but this time with the values “even” and “odd”:

.table3 tbody td:nth-child(even){
    background-color:#444;
    color:#444;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(189,189,189)),
        color-stop(0.7, rgb(224,224,224))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(189,189,189) 39%,
        rgb(224,224,224) 70%
        );
    text-shadow:1px 1px 1px #fff;
}
.table3 tbody td:nth-child(odd){
    background-color:#555;
    color:#f0f0f0;
    border-bottom:1px solid #444;
    background:-webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.39, rgb(85,85,85)),
        color-stop(0.7, rgb(105,105,105))
        );
    background:-moz-linear-gradient(
        center bottom,
        rgb(85,85,85) 39%,
        rgb(105,105,105) 70%
        );
    text-shadow:1px 1px 1px #000;
}

We also add a right border to the last tds in a row:

.table3 tbody td:nth-last-child(1){
    border-right:1px solid #222;
}

The left description is going to have the following style:

.table3 tbody th{
    color:#696969;
    text-align:right;
    padding:0px 10px;
    border-right:1px solid #aaa;
}

Just the check icon is left:

.table3 tbody span.check::before{
    content : url(../images/check2.png)
}

And that’s it! Three differently styled tables with pure CSS!

I hope you enjoyed the tutorial!

Here are some very useful related links:

Create CSS3 Gradients: http://gradients.glrzad.com/

W3C Selectors Level 3: http://www.w3.org/TR/css3-selectors/

View demoDownload source

When it comes to blogging, WordPress is the 1st word which comes in my mind. And I have reasons for that: WordPress is the most flexible easy to use and customize CMS platform among all.

Premium WordPress Themes are the first solution when building a blog. Are fully supported, fully featured, perfectly coded and way too visual appealing, so choosing a premium wordpress theme is a no-brainer for the majority of bloggers.

Take a look at these 35 fresh Premium WordPress Themes. If your website needs a facelift, you probably don’t want to miss this showcase.

Source

http://www.ourtuts.com/35-amazing-premium-wordpress-themes-of-april-2010/

It is interesting to explore the design of websites associated to a certain category. There are many collections out there that showcase websites from certain areas, and today I want to share a couple of designs of websites from the interior design category.

As one might assume, the level of design might be pretty interesting since there should be a tight connection between the sense of design applied in interior design or architecture and web design. The fundamental design principles that come with the knowledge of an interior designer can only be helpful when used in designing a page (or letting a page be designed).

I was curious to which extend designers of real objects and interior designers let their skill be reflected in their websites. One would expect that especially in this category, designs would be expressive and unique.

Unfortunately, not many designers seem to recognize the importance of an intriguing web presence. Most of the websites of interior designers seem outdated and don’t show much of a design spirit. But there are also some that show a reflection of style and do that in a quite fashionable and interesting way.

This collection consists of some furniture store websites, portfolios and interior design blogs. Take a look:

http://www.moderndigsfurniture.com/

A beautiful example of a contemporary and uncluttered look with the focus on the design elements with an elegant product catalogue.

http://www.atelierid.com/

Atelier expresses it’s design direction beautifully with it’s website. Note, how the soft green complements the warm colors of the photos that represent the design choices. Also, a lot of black element are used which get’s reflected in the main color choice of the website. And check out that smooth fade in effect of the menu.

http://www.bentheim.co.uk/

The website of Bentheim is a nice example of a minimalistic style that focuses on representing the design direction by it’s images.

http://www.amok.co.uk/

Flash with nice usage example of pattern and light fonts.

http://www.noraschneider.com/

This one has some interesting navigation animations.

http://www.francelavin.com/

http://www.design4space.com.au/

Flash used very nicely, check out the navigation as part of the room.

http://www.geoform.com.au/

Entirely flash as well. The geoform banner is following the mouse movements vertically.

http://www.acosdesign.com/

Interesting use of round bubbles that keep moving around…

http://berlinrodeo.com/

Slick design with change of color when choosing one from the palette.

http://www.rgrdesignassociates.com/

http://www.jdesigngroup.com/

Another page where the design used seems to reflect the interior design direction. I like the color choice.

http://www.tommasoziffer.it/

Very interesting navigation with focus on the photos. The color choices fit the taste of the designer.

http://www.betterlivingthroughdesign.com/

I really like the clean design of this one.

http://www.wellylai.com/

http://www.amandanisbetdesign.com/

http://www.shawnhenderson.com/

http://www.willeydesign.com/

http://mocoloco.com/

MoCo Loco has a really fresh design and the website is scrolled horizontally. Each area (Design, Art, Fresh) has it’s own complement color.

http://www.browndesigninc.com/

http://www.avetexfurniture.com/

Interesting stacking of the menu items. Brown really seems to be their color.

http://www.architonic.com/

I really like the style of the columns in this website. It is very unusual and it makes the site very interesting while keeping functionality and readability.

http://www.kelloggcollection.com/

http://www.ethanallen.com/

Great way of complementing pattern with font, just check out how the big type fits to the patterns. Love the palette  choice.

http://www.orsonandblake.com.au/

http://www.bonluxat.com/

http://www.boconcept.us/

http://www.ozdesignfurniture.com.au/

Very nice color choices here.

http://www.leighharmer.co.uk/

http://www.beyondfurniture.com.au/

http://www.heals.co.uk/

http://www.bebitalia.it/

http://www.galeriedowntown.com/

http://baker.kohlerinteriors.com/

I like how the background pattern changes over time. And it always looks awesome.

http://www.whos-perfect.de/

http://www.sixay.com/

http://www.gabrielabellon.com/

http://www.bestofbauhaus.com/

Very light color choice which actually enhances the products shown. Structures are kept very simple.

http://www.wogg.ch/

The website logo does not always have to be on the top left – it looks pretty nice at the bottom, too.

http://www.proformshop.com/

http://www.domainefurniture.com.cn/

http://www.kmpfurniture.com/

http://www.westelm.com/

http://www.modernfurniture4home.com/

http://www.inmod.com/

http://www.laflat.com/

http://www.broyhillfurniture.com/

http://www.modusfurniture.co.uk/

http://www.conranusa.com/

http://www.moderncollections.com/

http://www.modernlinefurniture.com/

http://www.707.com.au/

http://www.spacify.com/

http://www.dwr.com/

http://www.gomodern.co.uk/

http://www.plushpod.com/

http://www.designpublic.com/

http://www.ikea.com/

I can’t stop hovering over “All departments” – I love the way the menu slides out! I would like to see more contrast in the website in general, though.

http://www.zarahome.com/

If you ever visited a Zara Home store you will notice that their website fits very nicely to the feeling you get in the store: lots of light colors and romantic shapes.

http://www.the-store-designers.com/

http://www.yourhome.de/

Although many furniture websites sell furniture out of wood, you don’t see wood textures on the websites very often. I liked this one because it makes use of this obvious connection.

http://www.fashion4home.de/

Conclusions

Many contemporary furniture websites and interior designer websites make use of light structures and colors. Some websites make use of interesting navigation techniques and color palette choices.

This is not an entirely beautiful collection which is sad since one would expect more of a website of that category. I would expect to see more daring styles and ways to express ones creativity. Website design can conceptually be seen as decorating a room: you have some structure and you want to fill the white room with color and content for a purpose, with personal traces and lots of creative beauty.

What do you think? Do you know some websites in this category that you believe express their designers’ style?

The other day it came to my attention that there are so many beautiful social bookmark icon sets around but no blog seems to use them. Now, that has to do a lot with the fact that many publishing platforms require a certain amount of programming knowledge in order to personalize the sharing buttons.

We use the Sexy Bookmarks WordPress Plugin, simply because it is really nice and it works well. For the Retweet Button we use the Digg Digg Plugin which is easy to integrate but not really stylable.

It would be really great to have some kind of plugin, that let’s you just add your own buttons, I bet that would increase the creativity of the social bookmarking designs found in blogs.

During my search for some examples of designs, I found this set that I thought, shows some nice ways of engaging the reader to share the post or bookmark it. Although the opinions about in which way the user should be engaged to share a post at all might differ (some blogs don’t offer any social bookmarking options), I think that it is ultimately a very important tool for any blog.

Before I start with the collection, I would like to share one more thing with all of you that use the Digg Digg Plugin for the integration of the TweetMeme Button. It took my some time to find out, why the retweet would contain @tweetmeme instead of our Twitter name “codrops”. Ultimately I found the solution:  in the settings we chose the “Integration Type” to be “none” because we called the PHP function manually. Even if you put your TweetMeme source RT name, this will cause the retweet to contain the @tweetmeme instead of your name. (I actually don’t know if that issue is fixed by now, I just noticed that a lot of blogs seem to have that problem.)

And here comes the collection! Enjoy!

http://www.blog.spoongraphics.co.uk

This is a really nice way to show those quite “ugly” sharing buttons: wrap them in a box so that they look similar and homogeneous.

http://www.hongkiat.com

I really like the big type, fits nicely to the blog.

http://cellphones.org

This one is definitely my favorite, it is very unique and it is completely adapted to the style of the blog.

http://designinformer.com

http://buildinternet.com

http://10steps.sg

Although we are stuck to the designs and “identities” of the sharing buttons, we can make the them interesting by surrounding the buttons with some nice design. This is a good example of how to do it.

http://www.9lessons.info

http://www.minervity.com

http://creativeoverflow.net

http://desizntech.info

http://designora.com

http://www.sitesketch101.com

http://www.hairstylesdesign.com/blog

http://www.tutorialboard.net

http://www.outlawdesignblog.com

http://www.fuelyourcreativity.com

Now, this one is really nice. You have to try it out by hovering, it makes a really nice effect.

http://www.clickonf5.org

http://www.onextrapixel.com

http://www.threestyles.com

http://blogof.francescomugnai.com

http://www.inspiredm.com

Here we have an alternative way of showing the social bookmarking options. It saves space in the blog and it is always accessible.

http://d-lists.co.uk

http://www.littleboxofideas.com

This one is charming, but it also shows the problems many of us face: using different plugins and manual insertions do not let us adapt the style like we would like to.

http://www.designussion.com

http://www.psdeluxe.com

http://designmess.com

I like the approach of integrating the social bookmarking options as part of the post, like the comment section. It looks clean and it gives the sharing buttons a functional appearance.

http://www.dezinerfolio.com

Here we have a really nice and clean sharing “button”. When clicked, a sharing box pops out. This is a good example on how to integrate the social bookmarking option elegantly and discretely.

http://www.tutorial9.net

http://games.venturebeat.com

http://www.geeksucks.com

http://www.webresourcesdepot.com

This one is beautifully integrated under the title of the blog post.

And that’s it!

These were the designs that I found nicely fitting to their blog styles. Although I am not terribly excited about the level of creativity used, I understand why it is so hard to adapt this very crucial part of a post to our design needs.

What do you think? Is it important to bring some attention on the social bookmarking option in a blog? Would you as well like to have some more freedom in adapting the style of sharing buttons? Or do you think it should not be obtrusive in any way? Have you seen some interesting sharing button styles that you would like to add to this list?

I hope you liked it and got inspired!

You might be interested in some sets of social bookmarking icons:
21 Sets of Free Social Bookmarking Icons for Your Blog
72 Sets of Free Social Bookmarking Icons
75 Beautiful Free Social Bookmarking Icon Sets
Social Bookmarking Icons Collection
70 Free Social Media Icon Sets
30 Amazingly Creative Social Bookmarks Icon Sets
108 Free Black Magic Marker Social Bookmarking Icons
40 New and Trendy Free Social Media Bookmark Icon Sets

Dear Design Community,

I don’t really know if I can consider myself a part of you, but I have the strong urge to tell you how I feel about you.

About six month ago, when I first met you, I was completely overwhelmed – your creativity and beauty struck me and I felt that this would be the place where I would finally feel at home! Coming from a place where rationality and the workings of the brain were center of my live, I could ultimately see the holistic functioning of all that inside of you.

After I had spend some cozy moments with you, I began to hear some criticism about you. Some of your members started to impose on you! They claimed that you became shallow and lost your old charm, that your discussions and post were becoming dull. You became greedy, they said, and you transformed into a business oriented capitalist who just wanted to grow to increase profit, no … I mean traffic.

Your critics blamed the list makers and wannabe designers of destroying you and seducing you to become a tool for their foolery. I was shocked at first, but then I started to see their points. I must admit, I became one of the critics. My heart broke that moment because I saw your ugly sides, your repetitive behavior, your boring arguments, your endless lists…

After I fell into a hole of grief and anger, I decided to give you another chance. I felt that I would just need to look at your beautiful sides and ignore your ugly ones in order to fall in love with you again. So I began to turn to your talented, well established members, their fruitful posts and discussions, their oh-so in-depth analysis of design processes and incredible helpful tips on how to get creative.

After a while, I got completely confused: where was the so proclaimed value and where were the insightful elaborations on web design and design theory? Where were the unique and different stories and inventions that everybody was hailing so much? Where were the design bloggers that don’t care about traffic, money and spreading their wisdom instead of just their words (and lists… and thoughtful comments)? Was your modest and decorous side full of shit after all?

And then it hit me.

I don’t love you because of your beauty, your intelligence and merit. I don’t love you because of your fruitful discussions and in-depth analysis of design processes and tips on getting inspired. I don’t love you because of your wit, your arrogance and your pride.

I love you for being a shelter to so many different opinions and strong, creative and passionate minds.

I love you for being a cultural and social tool, a capitalist opportunity and a tool for hearing tiny voices.

I love you for having so many facets and sides, so many wannabes and so many geeks.

I love you for making it difficult to discover the gems, but once they are found, you make them timeless.

I love you for giving me incredible inspiration each single day from all across the globe in so many languages.

I love you unconditionally, design community!

Dive into the community:

• How to Kill the Design Community
• Understanding the Value of Constructive Discussion in the Design Community
• On Giving Back to the Design Community
• Killing The List Post
• Should you write “List posts” on your blog?
• Some People Actually Read: Sparing a Thought for ‘Readers’ in the Design Community
• Smashing Magazine Killed The Community (Or Maybe It Was Me)
• A “Bystander’s Perspective” on the Design Community
• Valuing Your Design Community

The blue boxes and the blue button link units in the header that formed the upper row of a 3 (!) row navigation have disappeared. In fact, the only blue thing (slightly darker than before) that is left, are the links.

Here is an old screenshot of the site back in 2007:

And here is the new design:

Nothing was changed dramatically, but the impact of just changing details can be enormous. It is toned down in clutter and it looks more functional, and they  actually gave it a touch of glamor and “Oscar’s” which really fits well.

Unfortunately, they did not change the registration form… which has a good side to it: I don’t need to update my previous post on Famous Login and Registration Forms ;-)

What do you think about the new style?

Enjoy!

For your design, what would you do better? Do you think being a top site gives you trend setter status? Or should some sites rather be ashamed of their poor design skills?

Share your opinion and maybe you have some interesting showcases to add?

I hope you enjoy it!

1. Google

http://www.google.com

Well, Google is Google, so fancy design is never a really big topic. It definitely follows major usability guidelines which is also shown here: http://www.boxesandarrows.com/view/getting-a-forms98

2. Facebook

http://www.facebook.com

Flawless in functionality, I would say. I don’t know about the positioning of some elements, like the “Remember me” checkbox…

3. Youtube

http://www.youtube.com

Now, what I don’t really get, are these changes of style within Google. YouTube belongs to Google and the design of this registration form clearly shows this. But why not use the same style through all the pages?

4. Twitter

http://www.twitter.com

Although Twitter is one of my personal favorites, it could still need some more consistency. Using rounded input boxes in one place, and then plain old inputs in another place, makes it look a little bit inconsitent.

5. Wikipedia

http://www.wikipedia.org

The strong focus on content is also reflected in the design of Wikipedia’s login and registration form: it is plain and simple.

6. Windows Live

http://www.live.com

Again, an example of inconsistent design. Why not use the same kind of buttons and the same sizes for inputs?

7. MySpace

http://www.myspace.com

A clean design, that I would tweak only in the alignment of the labels in the registration…

8. WordPress

http://www.wordpress.com

It might seem, that there is a lot of different styling happening here, but actually it all somehow fits together: the color choices, the sizes and the “special effects”.

9. Ebay

http://www.ebay.com

Ebay’s form design is a nice example of optimizing design for usability. Elements are used consistently throughout the site. Here is a really great article on the main changes that happened and why: http://www.digital-web.com/articles/redesigning_ebay_registration/

10. Amazon

http://www.amazon.com

A very clean design. What I never liked though, was this “let’s spare” login form that also serves as an entry for a new user to register. I mean, if I want to login, I am a registered user and have a password, right?

11. AOL

http://www.aol.com

Sometimes, I feel like, I am back in 1999… That “Forgot Password” seems like the designer went “oh, damn, I forgot to add Forgot Password to the login” …

12. LinkedIn

http://www.linkedin.com

Functional, clean but definitely not an award winning design.

13. Yahoo

http://www.yahoo.com

Old school form but functional and clean.

14. HI5

http://hi5.com

Another example of completely inconsistent design: the colors, the buttons, the framing…

15. Craigslist

http://www.craigslist.com

Very strange (almost styleless) form design, but it somehow fits to Craigslist.

16. International Movie Database

http://www.imdb.com

Besides fitting to the 1994 style of the whole page, it really is a disaster! For God’s sake, get a web designer…

17. Photobucket

http://www.photobucket.com

Not the creme de la creme: colors, sizes, hello?

18. CNET

http://www.cnet.com

This is what I call consistency! A pair that goes along and reflects the overall design of the page.

19. Adobe

http://www.adobe.com

Good that most members are indeed returning.  It’s clean and the user has a good overview…it’s Adobe that did Photoshop right? :-O

20. ESPN

http://www.espn.com

Ok, I know the error messages have to appear somewhere, but is it necessary to have such huge spaces between the inputs? I mean, the spaces are bigger than the inputs! And I really think this combination of “select with one style” and “normal input with another” doesn’t go together… Why not having the same border for all of them?

21. Skyrock

http://www.skyrock.com

Nice registration form. Just the login looks like from another site (planet)…

22. Tumblr

http://www.tumblr.com

Now, this is fun: big form, simple input and beautiful design. I just wanna sign up!

23. LiveJournal

http://www.livejournal.com

Clean, yes. Functional, yes. Ehm, what happened to the password field? Is it always “shorter” than the username or is it just another case of “damn, I knew I forgot something in this from”…the LOGIN BUTTON!

24. deviantART

http://www.deviantart.com

It’s a nice set of colors although it could use a little bit more contrast. And if it’s just allowed to put 20 characters in the input, e.g. for the name, why giving it double the size then? Oh, and by the way, the email can be 255 characters long!

25. Tagged

http://www.tagged.com

Pure CSS! But there is a lot more you can do with CSS, you know…like creating nice shadows on the buttons with borders…

26. NETLOG

http://www.netlog.com

Nice one, but the position of the register buttons seems weird…

27. Digg

http://www.digg.com

I like Digg’s forms, I really do. But you know guys, at least for Firefox you could give the select the same style like to the input: “border: 1px solid #ccc”… looks sooo much better!

28. The New York Times

http://www.nytimes.com

Old fashioned but fitting. But why not adapting the other inputs to the select?

29. Ning

http://www.ning.com

Now, I must admit: this is definitely my personal favorite – almost impecable. Just, you know, Firefox, select, borders…

30. Answers

http://www.answers.com/

Compact and consistent. Really nice job.

31. Maktoob

http://www.maktoob.com

Nice one.

32. Metacafe

http://www.metacafe.com

A lot of blue going on here, but it still fits.

33. Sourceforge

http://sourceforge.net/

Not really consistent and I would suggest using “display: block” in the registration, gives a less “stairs” like effect…

34. eHow

http://www.ehow.com

I love this registration form, it’s beautiful, but the login doesn’t really look finished. What’s with that “SIGN IN” position?

35. StumbleUpon

http://www.stumbleupon.com

I think, it needs some more development.

36. Reddit

http://www.reddit.com

Simple and really neat… fit’s perfectly.

37. delicious

http://www.delicious.com

Very nice one, too.

38. Technorati

http://technorati.com

Very elaborated and stylish… but still functional and user friendly.

39. Habbo

http://www.habbo.com

Habbo-like!

40. Friendster

http://www.friendster.com

So, “Keep me logged in” is like what? Compulsory? Ah no, after all it’s not recommended for shared computers… But a nice registration form.

41. Flixter

http://www.flixter.com

Clean and consistent. But 8 captcha letters? Come on!

42. Paypal

http://www.paypal.com

Not really a nice login. What’s with that “I am a tube” background anyway?

Enjoy!