Designing around large blocks of type can be tough and more designers are taking the “fewer-is-better” approach when working with columns and large blocks of text. When using a mass of type, such as in a book, text-laden website or print project, much of the emphasis is more on the readability than the actual look of the type.

Typefaces are important but even more important can be the number of columns used in combination with the words. The number of columns you use in a project can vary depending on a number of factors such as typeface and style used, type of project, font size and gutter width and proportion of other elements.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Typeface and Style

The first thing to take into consideration when considering how many columns to use is font selection and how much type the project includes. Think about extras that you want to use, such as drop caps, indents and line and paragraph spacing.

The type style is also a factor. Serif and sans serif fonts are the most commonly used in blocks of type because of their excellent readability at varying sizes. Projects using Old English, script or novelty typefaces seldom used multiple column layouts or large blocks of text.

Many print and web designs you see today employ a simple, single column design for the main text element. Most printed books use one column of text per page, although this was not always the trend. Many older hardcover books featured two columns of text per page; multiple column formats are still commonly used for books such as dictionaries and almanacs. Using a single column for type on websites is preferred so that type is easy to read as you scroll down the page.

Multiple column layouts are best reserved for applications that can be viewed all at once, such as in print projects or for e-readers. Multiple column layouts are most commonly used by newspaper and magazine publishers and in newsletters.

Type of Project

Use of columns in print projects can vary widely and how you use columns can convey a certain feel. Single column designs tend to feel more open and inviting, such as this 1970s advertisement from Caterpillar. Note that most of the space is used for an image and not the text itself.

Using multiple skinny columns can feel overwhelming and crowded, such as a page from a dictionary but has a distinct purpose. The text is not intended to read as a whole and is used for skimming short pieces of information.

Newspaper and magazine layouts also use multi-column layouts with lots of text. The Wall Street Journal has used the same six-column layout for decades with only slight tweaks to the layout, such as the addition of color and photos. The columns keep small type (typically only 9 to 11 points) organized in a way that is easy to read and adds order to a page with lots of text elements that may not relate to one another.

Magazines also use multiple column layouts but tend to use larger column widths and type sizes, such as this layout from The Irish Times Magazine.

In web projects, think about the space available for text. Many web layouts are divided into two or three columns before you even bring text into the mix. The largest of these columns is reserved for the body of the website and this the space you have to actually work with. Think about the elements below the banner: Is there a column of ads that run down one side of the page? Did you include navigation elements in a column as well?

Once the norm, the three column template has been set aside by many websites that are now using a two-column model, including here at Design Shack and ESPN. This model allows for a wider column for the main column of text but leaves little room for multiple column text layouts, which are reserved for even wider spaces.

Font Size and Gutter Width

Although most modern book publishers opt for a single column format, note though that the size of the type tends to vary widely between hardcover, paperback and e-edition books. This variance in type size accommodates the one-column style because the text is proportionate to the column width. The most notable exception is in dictionaries and almanacs, where very small font sizes are used with massive blocks of text in multiple columns per page.

Columns that are too wide can strain the eye, making text hard to read. Columns that are too thin can cause odd breaks and excessive hyphenation of text. The Kindle application for Apple’s iPad has solved this issue by switching from a single column format when used vertically but uses two columns when the iPad is turned for easier reading.

As a rule of thumb in print projects, the width of each column (in picas) should be as wide or wider than the font’s point size. In large blocks of text, the font size should not exceed the column width.

There is not as clear cut of a rule for web design. Many designers opt for 12 or 14 points for body copy regardless of column width. If you have a narrow column for copy (500 pixels or less), opt for the smaller size. Wider columns can handle 14-point type nicely, without too many awkward line breaks. If you’re looking for something more concrete, check out Pearsonified’s Golden Ratio Typography.

The space between each column can determine the readability of text. Note the emphasis on gutters in the advertisement from Eico Stereo above. The wide spaces between columns containing large amount of text make the columns less intimidating to the eye and easier to read. On a standard newspaper page, columns of text are between 10 and 13 picas wide and have a 1 pica gutter. Magazines also use similar specifications. This space separates columns so that it is easy to read across each line to the end and then and down to the next without jumping across to the next column, causing confusion. Larger font sizes and larger column widths require larger gutter widths. As with columns, a consistent gutter width should be used throughout a project.

Proportion of Other Elements

When deciding how many columns work best for a project, think about more than just text. Non-text elements surrounding the copy can be just as important.

Think about the other items that will touch each column of text. Do you plan to add in small photos or text breakouts? Consider the size and weight of other objects as well. In print projects, the size, weight and color of other text surrounding each column can impact your text. In web projects, the same is true of items on either side of the main copy, plus take animated effects into consideration. The more that you have going on around each column of type corresponds to the importance of using streamlined and simple type in each column. The extra effects in the workspace can also dictate the font size used. So that body text maintains its own identity, set it in a size and font that contrasts with other elements.

With any project, pick a width for columns and stick to it. Setting type in varying column widths within a single document can be jarring. Try to avoid wrapping text around too many large objects that change the visual size of the columns; this can make text difficult to read, causing bad breaks and excessive hyphenation.

Conclusion

Print designers are taking a lesson from the web and beginning to work with fewer, but wider columns in their layouts. This is apparent in book publishing, magazines and even some newspapers. Opt for using a single column on more vertical projects width is a concern or in most web applications with large blocks of text.

Multi-column layouts work best for smaller typefaces in design situations where an entire project or block of text can be seen at a glance, making multi-column layouts less common in web design because of the scroll. Keep in mind your audience, how type will be read and font size when planning a layout that uses a multiple-column format.

Image Sources: nesster, nesster, quinn.anya, cliff1066 and fearghalonuallain.

If you’re a front end designer, presenting clients with mockups can be tricky. Emailing files can be cumbersome and lead to unwanted questions about how to view the image properly, and many image sharing services aren’t ideal for viewing full-size website mockups in their proper context.

Today we’re going to take a look at QwikVu, a web app that’s specifically built for designers who want to share web design mockups with clients. Is it the tool you’ve been looking for to make client presentations easier? Read on to find out.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Meet QwikVu

The QwikVu homepage above sums up the service in a nutshell. Here you can sign up to try the service free for 30 days. This is a great way to kick the tires and test it out with a few clients to gauge its effectiveness.

Sign up for the service is quick and painless, you just need a name, email address and password and you’re up and running. Let’s take a look at what happens after you’ve signed up for an account and log on for the first time.

We’ll be going through the Pro plan today but there’s also a basic free service that allows you to upload and share individual images. Obviously, some of the more advanced features such as checking in to see if a client has viewed the mockup are reserved for the Pro service.

Setting Up a Gallery

When you sign into QwikVu, you’re greeted with a simple dashboard. Here you can view your client list, adjust your account information and access your galleries. I haven’t set any galleries up yet so there’s a brief message inviting me to do so.

Like pretty much everything in QwikVu, setting up a new gallery is a really simple task that will only take you a few seconds. There’s a lovely form that walks you through the process, asking for basic information like your client details and the title of the gallery.

As you can see, there are some really great advanced features here as well. You can choose a custom URL for the gallery, password protect it, assign a custom background color and choose how the images are aligned in the browser window.

Adding Images

Once you’ve set up a gallery, it’s time to add in some images. You can toss them in one at a time or grab them all in one upload. Once you’re finished uploading, the screen below allows you to rearrange, preview and edit each image.

Sharing a Gallery With a Client

Once you’re ready to share a gallery, click the “Finished” button in the screen above to go back to the gallery view. Here you’ll see a list of all of the galleries that you’ve created. On the right side of this list, there’s a strip of buttons and information. You can check to see if the client has viewed the gallery, see it for yourself, edit the images, etc.

The button we’re looking for right now is the “share” command, represented by a little envelope icon.

Clicking this image will bring up what is essentially an email window. Most of the contents is filled in for you automatically but you can customize all of it to your liking.

Once you’re finished, click the “Share” button and the email will be sent off to your client. Your work is done, now all you have to do is wait for the feedback!

Client Reviews

Once you’ve sent out the invite, the client will receive a simple, text-only email that contains your custom message along with a link to view the gallery. You don’t have to worry about whether or not they know how to properly view the file, it’s a fool-proof process where a single click gets them what they want to see.

The invite link opens up the gallery in a browser. Your settings before have defined the display behavior here. For instance, my image is shown centered on a pure white background. It looks and feels just like a website: I can scroll up and down and the image stays centered as I resize my browser window. You can see my example gallery here.

To make sure there’s no confusion with your clients, there’s a little information box that pops up when you click on the image that informs you about the nature of the mockup. You are told that the image merely represents a design so the buttons and links will not function.

The bar that you see at the bottom allows you to scroll through the images in the gallery, share it with someone else, and download the files.

You can also view the images in a thumbnail strip for easy navigation. Just click the little grid on the left side of the toolbar and you’ll get something like the window below.

Viewing On The Go

Odds are your client is going to receive that email and want to check it right away. If he/she is out of the office and on a mobile device, the viewing experience is optimized and shown in an online image viewer with a quick message to explain that it’s a non-functioning mockup.

The above image shows what the gallery looks like on my iPad. You can swipe back and forth between the pictures or view an automatic slideshow.

Worth a Look?

When the good folks at QwikVu asked us to take a look at their service, we were happy to oblige. It’s a great app that serves a clear purpose and works like a dream. The interface is quite attractive, the UX flow is so simple that anyone can manage it and everything works exactly as advertised.

QwikVu really is a great way to show off your flat mockups to clients. I love having the ability to display work centered in the browser at full size, just like I want it to be. Your clients will definitely appreciate the privacy side, password protected mockups are sure to give them a warm fuzzy feeling knowing that their secrets are safe from prying eyes.

Pricing

QwikVu is $9.99 per month or $99 for a year. To be honest, this is where things get a bit rocky for me. It’s a great app, but a hundred bucks a year for what amounts to slightly modified image hosting is going to be hard for a lot of web designers to justify, especially when they likely already have personal web hosting where they can upload their images.

Fortunately, there is a free component so if you do in fact get some great functionality for nothing. However, I would recommend augmenting the $9.99 plan with some awesome additional features such as the ability to define portions of the uploaded images as clickable links to make the mockups functioning wireframes.

Further, I think with a system like this you simply have to have means for client feedback (another great option that could be only on the premium plan). When a client views a mockup, it would be great if there were some sort of sticky notes feature that allowed for specific portions of the mockup to be targeted and discussed. I know the point here is to keep it simple and fight feature bloat, but simple and direct change requests could be implemented without adding too much complexity. There’s even an example page that unintentionally showcases how this system might look!

Conclusion

If you’re currently on the lookout for a better way to show off your non-functioning mockups to clients, QwikVu is a great solution. The result is far better than emailing a JPG, you really feel like you’re looking at the beginnings of a website in your browser. I highly recommend that you stop by the site and give the free trial a test run.

Have you tried QwikVu or any other service? Let us know your thoughts in the comment area below.

Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

What Is a Masonry Layout?

When you float objects in CSS, the browser arranges elements first horizontally then vertically. When we fill a container with a bunch of equally sized objects and float them left, we get a nice grid of images.

However, if the objects have variable heights, the results are much more difficult to predict. Instead of a nice tight grid, we get something that tends to be fairly scattered.

The obvious quandary here is how to pull off a nice tight grid that with items that have variable heights. It’s a pretty interesting topic and various developers have come up with several ways to go about it. Let’s take a look at three of the current best solutions.

To go one step further, we’re going to make sure that all three solutions are responsive, meaning the grid will reflow as the window size changes.

jQuery Masonry

jQuery Masonry is the most popular solution to pull off this type of layout. It utilizes some pretty fancy JavaScript to reflow a series of divs.

Putting Masonry into practice is pretty easy, all you need is a container that holds a series of divs that you want to arrange masonry style. You can place anything you want inside the divs, in this case I threw in some placeholder images.

Once you have that in order, toss in jQuery and jQuery Masonry. Then you need to create a simple function that identifies your container and targets the class that we used for our Masonry images divs. Here’s a basic example:

<div id="container">
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/200/food/1" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/150/food/10" alt="" />
	</div>
 
	<div class="masonryImage">
		<img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/250/food/3" alt="" />
	</div>
 
	. . .
 
</div>
 
<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.masonry.min.js"></script>
<script>
  $(function(){
 
    var $container = $('#container');
 
    $container.imagesLoaded( function(){
      $container.masonry({
        itemSelector : '.masonryImage'
      });
    });
 
  });
</script>

</ br>

CSS

As long as we have a width set on our container div, the code above performs the magic we need it to and reflows the elements. If you set the div width to a percent, jQuery Masonry even automatically reflows the items as the page resizes.

Even though this is the case, things can get messy if you want to keep your container centered. I found it easier to apply a static width to my container, then use media queries to reflow the columns as the page size decreases past the container size.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
/*Media Queries*/
@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#container {
		width: 400px;
	}
}
 
@media only screen and (max-width : 399px),
only screen and (max-device-width : 399px){
	#container {
		width: 200px;
	}
}

</ br>

See It In Action

This gives us a nice tight image gallery that perfectly responds to various browser window sizes. I’ve taken all the spacing out to illustrate just how tight you can get your images, but feel free to build in some margins so your images are spaced out a bit more.

Demo: Click here to launch demo

Wookmark

Another popular JavaScript solution for achieving the same type of layout is Wookmark.js, which is the driving plugin behind the Pinterest-like Wookmark.com.

Wookmark.js is in my opinion a little trickier to implement than jQuery Masonry because of the lack of documentation, but it’s still pretty basic stuff. All we need to do to start is toss a bunch of images into an unordered list. The catch with this plugin is that we have to declare inline height values for each of the images.

<ul id="myContent"> 			
	<li style="height: 206px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/animals/1" alt="" /></li>
	<li style="height: 256px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/animals/2" alt="" /></li>
	<li style="height: 216px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/animals/3" alt="" /></li>
	<li style="height: 276px;"><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/animals/4" alt="" /></li> 
	. . .
</ul>

</ br>

Once you’ve got that set up, then you insert the JavaScript at the bottom of the body just like last time. Insert both jQuery and Wookmark.js, then set up the simple function below, which targets the list items in our #myContent unordered list.

I tossed in another simple function here which essentially reloads the script as the window changes size. This will ensure that the columns automatically reflow and provide that responsive functionality. This time around we’ll ditch the media queries and let the JavaScript handle all of the layout.

<script src="jquery-1.7.1.min.js"></script>
<script src="jquery.wookmark.js"></script>
 
   <script>
		$('#myContent li').wookmark({offset: 2});
 
		window.onresize = function(event) {
		    $('#myContent li').wookmark({offset: 2});
		}
   </script>

</ br>

CSS

The CSS for this version is super minimal. All we need to do is set our ul width with a percentage and use position:relative. Then we set a specific width for each list item. That’s it!

#myContent {
	width: 80%;
	position: relative;
}
 
#myContent li {
	width: 200px;
}

</ br>

See It In Action

Just like last time, the result is a tight grid of images. However, even though spacing options are adjustable with Wookmark.js, I couldn’t get it to work at zero so we have a little bit of spacing in between the images.

Demo: Click here to launch demo

Pure CSS

The JavaScript solutions are probably the safest and most widely compatible ways to go about a masonry layout, but the CSS nerd in me knew there had to be a way to pull it off without JavaScript.

It turns out, it’s actually pretty easy using some fancy CSS3. This technique was pioneered by Radu Chelariu at SickDesigner and though it’s definitely not as powerful, flexible, or cross-browser-compatible as the previous options, it’s still extremely impressive given that it’s all CSS.

To start off, let’s use the same unordered list that we did last time (no inline styles necessary), thrown into a container div.

<div id="container">
	<ul id="myContent"> 			
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/206/nature/1" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/256/nature/2" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/216/nature/3" alt="" /></li>
		<li><img src="http://designshack.co.uk/wp-content/uploads/http://lorempixum.com/200/276/nature/4" alt="" /></li>
		. . .
	</ul> 
</div>

</ br>

CSS

Here’s where the voodoo happens. To start, apply a width to the container and center it. Then use the new CSS columns functionality to lay out the content into six columns with zero gap. Finally, target the images directly and set the display to inline-block with a width of 100%. Inline-block allows us to flow elements inline without floats while maintaining block level functionality.

#container {
	width: 1200px;
	margin: 0 auto;
}
 
#myContent {
	-moz-column-count: 6;
	-moz-column-gap: 0px;
	-webkit-column-count: 6;
	-webkit-column-gap: 0px;
	column-count: 6;
	column-gap: 0px;
	width: 1200px;
}
 
#myContent img{
	display: inline-block;
	margin-bottom: 0px;
	width: 100%;
}

</ br>

That’s all we need for the masonry layout, but we still have the responsive bit to go. We’ll basically use the same trick that we used for the first layout, only this time we’ll change the column count and container width when the window size gets too narrow.

@media only screen and (max-width : 1199px),
only screen and (max-device-width : 1199px){
	#myContent {
		-moz-column-count: 5;
		-moz-column-gap: 0px;
		-webkit-column-count: 5;
		-webkit-column-gap: 0px;
		column-count: 5;
		column-gap: 0px;
		width: 1000px;
	}
 
	#container {
		width: 1000px;
	}
}
 
 
@media only screen and (max-width : 999px),
only screen and (max-device-width : 999px){
	#myContent {
		-moz-column-count: 4;
		-moz-column-gap: 0px;
		-webkit-column-count: 4;
		-webkit-column-gap: 0px;
		column-count: 4;
		column-gap: 0px;
		width: 800px;
	}
 
	#container {
		width: 800px;
	}
}
 
@media only screen and (max-width : 799px),
only screen and (max-device-width : 799px){
	#myContent {
		-moz-column-count: 3;
		-moz-column-gap: 0px;
		-webkit-column-count: 3;
		-webkit-column-gap: 0px;
		column-count: 34;
		column-gap: 0px;
		width: 600px;
	}
 
	#container {
		width: 600px;
	}
}
 
@media only screen and (max-width : 599px),
only screen and (max-device-width : 599px){
	#myContent {
		-moz-column-count: 2;
		-moz-column-gap: 0px;
		-webkit-column-count: 2;
		-webkit-column-gap: 0px;
		column-count: 2;
		column-gap: 0px;
		width: 400px;
	}
 
	#container {
		width: 400px;
	}
}

</ br>

Compatibility

The big problem here is that IE doesn’t have support for CSS columns until IE10. This means that you’ll have to use jQuery Masonry as a backup for IE users if you want to implement this technique in a real world scenario.

See It In Action

Here’s our third and final masonry layout demo. At a glance, the effect is exactly like we saw with jQuery Masonry. Not bad for plain old CSS!

Demo: Click here to launch demo

Conclusion

In a recent article on Pinterest, I discussed just how powerful masonry layouts can be from a UX perspective, especially when combined with infinite scrolling.

You can definitely expect this budding trend to increase in popularity and before you know it you’ll have clients asking for a layout like the one they see on Pinterest. When this happens, you’ll now be prepared with not one but three possible solutions!

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Original Design

The design of our pricing tables is super minimal. They’re basically just a rounded corner rectangle with some text and buttons. Download the original PSD here for a closer look (we’re scrapping the Best Value banner).

As you can see, the primary task here will merely be shuffling elements into place. The top bar may seem like it’ll be tricky, but in reality it’s a cinch. More interesting from my perspective is how to style that thin dividing line and pulling off a superscript in the text.

Also of interest is the fact that the center pricing table is a little larger than the others and overlaps them. This could mean styling two unique versions of the table, but we’ll use a nice little trick that takes all the effort out of this. Let’s jump in and get started.

Basic Shape

To begin, we’ll focus on creating one pricing table. Once we have that one built, we can expand it into three fairly easily. Our first step is to create the basic shape of a single table: a vertical rectangle with rounded corners.

We’ll start with a div that will hold all the code for one pricing table. Assign the class of “pricingtable” so that we can easily reuse this element again later.

<div class="pricingtable">
</div>

</ br>

Now let’s add some style. Our pricing tables will be white so I set a gray background color to help them stand out. Then I applied some sizing to our class, rounded the corners and added a shadow.

* {margin: 0; padding: 0;}
body {background: #ededed;}
 
.pricingtable {
  width: 250px; height: 450px;
  background: #fff;
  margin: 50px;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

</ br>

Progress Update

This step should give you a simple white box. Make sure that your dimensions are correct and that your shadow and rounded corners are functioning properly.

Top Bar

Now that we’ve got our basic shape in place, we’ll start at the top and work our way down. The first thing that we need is obviously that colored bar at the top that holds the name for each of our pricing plans: Basic, Pro and Premium. To pull this off, create another div with the class of “top”. Don’t worry, we’re not going div crazy, this will be the last one that we need for our base pricing table template.

Inside the div, place an h2 (we’ll use the h1 later) with the name of the pricing table. We could simply use this h2 without the div to create the top bar, but structuring it this way makes it easier to add a sub tag or other content here later.

<div class="pricingtable">
  <div class="top">
    <h2>Basic</h2>
  </div>
</div>

</ br>

Turning that div into our top bar is pretty simple. To start, we give it a width of 250px, a height of 50px and sample the PSD to get a background color of #2F2E35. Then we apply the same border-radius that we used before (10px), only this time we apply it to only the top two corners, leaving the bottom corners square.

Next it’s time to target the h2 and give it some styling. I simply changed the color to white, aligned the text to the center and used some fancy font shorthand to set the weight, size, line-height and font-family for our headline.

.top {
  width: 250px; height: 50px;
  background: #2F2E35;
  -webkit-border-radius: 10px 10px 0 0;
     -moz-border-radius: 10px 10px 0 0;
          border-radius: 10px 10px 0 0;
}
 
.top h2 {
  color: #fff;
  text-align: center;
  font: 300 30px/50px Helvetica, Verdana, sans-serif;
}

</ br>

Progress Update

Our plain white box is already starting to look like the pricing table we’re going for. Now we just fill in the center contents and we’ll be ready to go.

Features

Moving down the table, next we find a list of features. Right away that sentence should give you a hint as to how we can mark this section up: with a list. The order isn’t anything specific here so we’ll use an unordered list.

Notice that in our original design, the first word of each feature is bolded. We’ll toss in some strong tags to help us pull this off in our design.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
</div>

</ br>

Styling up this list is quite easy. To start, we want to ditch the bullet points, so set the list-style-type to “none”. After that, I use the same font shorthand as above but this time with a different size and line-height.

Notice that the line-height is set without a unit of measure (2, not 2px). This is a simple multiplier that takes the font-size into account (18px * 2 = 36px line-height). You can read more about this technique here.

To finish off this block of styles, target those strong tags and be sure that they’re set to bold.

.pricingtable ul {
  list-style-type: none;
  font: 300 18px/2 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 45px;
}
 
.pricingtable ul strong {
  font-weight: bold;
}

</ br>

Progress Update

Our feature list is looking perfect! Those bolder styles really help you focus on the important pieces of information.

Dividing Line

In the original design, there’s a subtle line that separates the feature list from the price. This can be accomplished with a simple horizontal rule tag:

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
</div>

</ br>

The default styling for the horizontal line is close to what we want, but not quite there. For instance, notice that it stretches all the way across the pricing table. We actually want it narrower and centered.

Styling an hr can be tricky and frustrating if you don’t know what you’re doing. You’d think that all we would have to do is set the width and color and we’d be good to go, but that’s not the case.

By default, certain browsers apply some weird styles that you have to clear. To be sure we get the look we want, we have to clear the borders, declare both a height and width, and set a background color. Then we center it using basic math: if our table is 250px wide and our line is 190px, that leaves 60px of width left. Using margins, we cut that value in half and assign thirty pixels of space to the left side of the line.

.pricingtable hr {
  border: 0;
  background-color: #BCBEC0;
  color: #BCBEC0;
  height: 1px;
  width: 190px;
  margin: 20px 0 0 30px;
}

</ br>

Progress Update

With that bit of styling, our little line is looking exactly like we want it to. Feel free to experiment with your hr to see what sort of fancy styles you can make. CSS-Tricks has some great examples for inspiration.

Price

Next up is the price tag. This comes in two parts, the big price and the small text underneath that says “per month.” The tricky part is that, in the original design, the dollar sign is superscript.

I wanted to be semantic about this so I went ahead and used the “sup” tag. Some sources seem to think that this is a deprecated tag, but as far as I can tell, that’s not the case. Both sub and sup appear to be valid in HTML5 and have plenty of browser support across the board. I’m open to opposing arguments here, so let me know in the comments if you disagree.

Another potential point for a huge semantic argument here is my use of h1. Some would no doubt reserve h1 for the plan title at the top, but the price point here seemed to be the most important piece of information (importance trumps order), so I thought it was best to utilize it here. Once again, feel free to disagree and go your own way.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
  <h1><sup>$</sup>25</h1>
  <p>per month</p>
 
</div>

</ br>

Now for our CSS we have three different things to target: the h1, the h1 sup and the paragraph. There’s nothing fancy here, just some more font-sizing and a little bit of margins to scoot things into place. Notice that all we need to do for the sup tag is reduce the font size.

.pricingtable h1 {
  text-align: center;
  font: bold 88px/1 Helvetica, Verdana, sans-serif;
  margin: 20px 0 0 0;
}
 
.pricingtable h1 sup {
  font-size: 45px;
}
 
.pricingtable p {
  text-align: center;
  font: 500 14px/1 Helvetica, Verdana, sans-serif;
  color: #BCBEC0;
}

</ br>

Progress Update

Our pricing table is nearly complete! Thus far we’ve conquered the four most difficult pieces of the puzzle, all that’s left is to create a button at the bottom.

The Button

To finish off our pricing table, let’s put a sign up button at the bottom. To accomplish this, just throw an anchor tag into your HTML. This will finish up our reusable pricingtable div.

<div class="pricingtable">
 
  <div class="top">
    <h2>Basic</h2>
  </div>
 
  <ul>
    <li><strong>Full</strong> Email Support</li>
    <li><strong>25GB</strong> of Storage</li>
    <li><strong>5</strong> Domains</li>
    <li><strong>10</strong> Email Addresses</li>
  </ul>
 
  <hr />
 
  <h1><sup>$</sup>25</h1>
  <p>per month</p>
 
  <a href="#">Sign Up</a>
 
</div>

</ br>

To turn this simple text link into a button, set the display to block and define a width and height. Also be sure to fix the default link styling by setting the color and text-decoration. I transformed the text into uppercase as well to match the original design. Finally, apply the same border-radius as before.

To finish off the button, you can use a solid color to keep things simple, but I opted for a basic gradient that gets lighter when you hover over it. It’s a big, scary chunk of CSS but don’t worry, it’s all fairly basic. Use a free tool like this one to save you some trouble if you’re creating your own gradient.

.pricingtable a {
  display: block;
  height: 40px;
  width: 150px;
  color: #fff;
  margin: 25px 0 0 50px;
 
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 500 16px/40px Helvetica, Verdana, sans-serif;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  /*Gradient*/
  background: #9dcc55; /* Old browsers */
  background: -moz-linear-gradient(top,  #9dcc55 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9dcc55), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #9dcc55 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9dcc55', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
}
 
.pricingtable a:hover {
  background: #b2e560; /* Old browsers */
  background: -moz-linear-gradient(top,  #b2e560 0%, #96c23d 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b2e560), color-stop(100%,#96c23d)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* IE10+ */
  background: linear-gradient(top,  #b2e560 0%,#96c23d 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e560', endColorstr='#96c23d',GradientType=0 ); /* IE6-9 */
 
}

</ br>

Progress Update

With that, our first pricing table is complete! If we wanted to go further, we could grab a slab serif web font to make it look just like the PSD, but I like the Helvetica just fine here. Now we have to take this one item and turn it into three!

Making Three Tables

To expand this into three unique tables, copy and paste the HTML that you just created so that you have three pricingtable divs and place them all inside of a container div. Then customize the text on each so that the features and price point are correct. Finally, add a “featured” class to the second table. We’ll us this to pull off the enlarged effect.

<div id="container">
    <div class="pricingtable">
      <div class="top">
        <h2>Basic</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>25GB</strong> of Storage</li>
        <li><strong>5</strong> Domains</li>
        <li><strong>10</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>25</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
</div>
 
    <div class="pricingtable featured">
      <div class="top">
        <h2>Pro</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>50GB</strong> of Storage</li>
        <li><strong>10</strong> Domains</li>
        <li><strong>20</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>49</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
    </div>
 
    <div class="pricingtable">
      <div class="top">
        <h2>Premium</h2>
      </div>
      <ul>
        <li><strong>Full</strong> Email Support</li>
        <li><strong>Unlimited</strong> Storage</li>
        <li><strong>Unlimited</strong> Domains</li>
        <li><strong>50</strong> Email Addresses</li>
      </ul>
 
      <hr />
 
      <h1><sup>$</sup>79</h1>
      <p>per month</p>
 
      <a href="#">Sign Up</a>
    </div>
 
</div>

</ br>

To make the pricing tables appear next to each other, go back to your pricingtable class and float it left. Also apply a width of 780px to your container and center it on the page with auto left and right margins.

#container {
	width: 780px;
	margin: 100px auto;
}
 
.pricingtable {
  width: 250px; height: 450px;
  background: white;
  margin: 5px;
  float: left;
 
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
     -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
          box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

</ br>

Now we have three pricing tables in a row, which is exactly what we want. However, remember that the center one should be larger than the other two, this is not yet the case.

Instead of manually going through and adjusting each little set of dimensions throughout the center pricing table, we can target the unique class that we gave it and apply a CSS transformation to enlarge it. Since all of our content is pure code (no images), the scaled up version should look just fine.

.featured {
	-webkit-transform: scale(1.2, 1.2);
	-moz-transform: scale(1.2, 1.2);
	-o-transform: scale(1.2, 1.2);
	-ms-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

</ br>

All Finished!

With that, our CSS pricing tables are complete. The last transformation gave us exactly the effect that we wanted with the center table larger and floating over the other two. Check out the live demo versions below.

Demo: Click here to launch demo
Code: See and tweak the source code at Dabblet

Conclusion

I hope you enjoyed building these pricing tables and will get some good use out of them. Use them however you wish and be sure to download the PSD and vector versions from Design Curate.

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Before we start coding, it’s always helpful to lay out the rough concept of what you want to achieve so you can wrap your brain around what’s going to be involved. The item we’re building today is a vertical navigation menu that’s in a sort of modified accordion format (get a sneak peek of the finished product here).

As you can see, the sections on the bottom are closed by default and slide open when you over over them. However, to add some nice variation we’ll also include a section that stays open all of the time. In the main section that is always open we’ll include a brief welcome message and in the sections that slide open will be sub-sections of navigation links.

Now that we have a good idea of where we’re going, let’s start outlining the structure in our HTML.

The HTML

The first thing we’re going to do is toss in some nice HTML5 to wrap the menu in. The new nav element provides a beautifully semantic container for our menu.

<nav>
  <!-- all nav code here -->
</nav>

</ br>

Now let’s think about how our menu is going to be structured. We’re not simply going to have a list of links, each bar represents a link with an additional area below it. We’ll wrap these up in a div. Then within each div we’ll need a main link (the colored bar) and a list of sub-links (the white area). Assuming that this item will be thrown into a site that already has some default styling, let’s arbitrarily settle on h4 for the main link and a simple unordered list for the rest.

<nav>
  <div class="menu-item">
    <h4><a href="#">Portfolio</a></h4> <!-- colored bar -->
    <ul> <!-- expanding white area -->
      <li><a href="#">Web</a></li>
      <li><a href="#">Print</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </div>
</nav>

</ br>

We can copy, paste and modify this section of code to make up the various pieces of our navigation menu. Here we have a Portfolio, About, and Contact section, each with three sub-links. Each section is given the same class (menu-item) so we can style them in one go.

<nav> 
    <div class="menu-item">
      <h4><a href="#">Portfolio</a></h4>
      <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">About</a></h4>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

</ br>

I wanted to focus on those areas first because they’re all the same, but remember that the top section is actually different, both in functionality and content. Instead of holding an unordered list, it will hold a paragraph. We’ll also add in a unique class to make it that much easier to target in our CSS.

<nav>
    <div class="menu-item alpha">
      <h4><a href="#">Home</a></h4>
      <p>Lorem ipsum dolor sit...</p>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Portfolio</a></h4>
      <ul>
        <li><a href="#">Web</a></li>
        <li><a href="#">Print</a></li>
        <li><a href="#">Other</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">About</a></h4>
      <ul>
        <li><a href="#">History</a></li>
        <li><a href="#">Meet The Owners</a></li>
        <li><a href="#">Awards</a></li>
      </ul>
    </div>
 
    <div class="menu-item">
      <h4><a href="#">Contact</a></h4>
      <ul>
        <li><a href="#">Phone</a></li>
        <li><a href="#">Email</a></li>
        <li><a href="#">Location</a></li>
      </ul>
    </div>
</nav>

</ br>

With that, we’re already finished with the HTML. Though it’s not styled at all, the live preview perfectly showcases the hierarchy of our navigation menu. Here you can clearly see our menu beginning to take form.

Base Styles

To start off our menu styling, we need to establish a few basics. First, we’ll clear the default margins and padding. We’ll be squishing the divs right up next to each other so any default browser spacing will ruin the layout.

Next, we’ll apply a simple color to the background so the white portions of our menu will stand out. Then we’ll toss in some basic font styles and add a slight shadow to the menu. Note that the margin set in the nav block centers the menu on the page, this is for display purposes only and should be removed when you want to nudge the menu into place.

Finally, we’ll add some dimensions and background color to the nav and menu-item selectors. Here’s the resulting code:

* {
  margin: 0px;
  padding: 0px;
}
 
body {
  background: #e5e5e7;
}
 
nav {
  font-family: Helvetica, Arial, "Lucida Grande", sans-serif;
  line-height: 1.5;
  margin: 50px auto; /*for display only*/
  width: 200px;
  -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
.menu-item {
  background: #fff;
  width: 200px; 
}

</ br>

A this point, the preview is looking like we’ve done more harm than good, but fear not, it’ll start looking spiffy in no time.

Header Styles

Now it’s time to style our h4 tags and turn them into the horizontal bars that we saw in our mockup. To do this, we just need a little padding and a background color. While we’re here we can begin to style the typography as well. We’re inheriting the font-family we set up before so we don’t need to re-type that. Instead we just need to set a size and weight.

/*Menu Header Styles*/
.menu-item h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
  background: #a90329;
}

</ br>

As you can see in the image below, our link styles are still overriding some of the type styles we set here so we’ll need to go in and fix those next.

Header Links

Obviously, the blue link is no good so we need to change that to white. We also want to ditch any text decoration (the underline). Now, we could stop here but the default behavior would be that only the text is clickable and not the whole bar, which is not ideal. To make the entire bar a link, we set the display property to block and the width to the full menu size (200px).

.menu-item h4 a {
  color: white;
  display: block;
  text-decoration: none;
  width: 200px;
}

</ br>

Now our colored bar is looking much better. Here’s the preview:

Making It Pretty

If you want to stick with something simple, you can skip this step, but I’m going to trudge on and add a few more visual tweaks. Go back and modify that header style block to include a gradient and some very subtle borders. You likely won’t even be able to spot the borders until the menu is closed, but combined with the gradients they’ll really help differentiate each section so they don’t all look like one big block.

/*Menu Header Styles*/
.menu-item h4 {
  border-bottom: 1px solid rgba(0,0,0,0.3);
  border-top: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  padding: 7px 12px;
 
  /*Gradient*/
  background: #a90329; /* Old browsers */
  background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

</ br>

Hover Styles

Next we’re going to add a subtle hover style to the bar links. All we’re going to do is tweak the colors on the gradient a little so they get brighter when you hover.

.menu-item h4:hover {  
  background: #cc002c; /* Old browsers */
  background: -moz-linear-gradient(top,  #cc002c 0%, #6d0019 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc002c), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* IE10+ */
  background: linear-gradient(top,  #cc002c 0%,#6d0019 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc002c', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

</ br>

Paragraph Styles

Remember that the first item in our menu holds a paragraph and not an unordered list, so next we’ll attack this to get it looking nice. The lists will take a sizable chunk of code but the paragraph hardly requires anything. Just define the size and color, then toss in some padding.

/*First Item Styles*/
.alpha p {
	font-size: 13px;
	padding: 8px 12px;
	color: #aaa;
}

</ br>

The top section is now looking great! Both the header bar and the paragraph are exactly where we need them to be.

Unordered List Styles

There’s a ton of stuff that we need to do to get these lists straightened out. Let’s switch things up a bit and look at the code first, then I’ll walk you through it.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}
 
.menu-item ul a {
  margin-left: 20px;
  text-decoration: none;
  color: #aaa;
  display: block;
  width: 200px;
}
 
/*li Styles*/
.menu-item li {
  border-bottom: 1px solid #eee;
}
 
.menu-item li:hover {
  background: #eee;
}

</ br>

As you can see, the first block targets the unordered list as a whole unit. Here I set some basic sizing and font styles and removed the bullet point by setting list-style-type to none.

Next I targeted the links specifically. I moved them over, removed the underlines, set the color and performed the same display:block trick that we saw before to make the clickable area larger.

To finish things off, I applied a few custom styles to the list items themselves. The bottom border creates a separation between each item and the hover style changes the background. Here’s the result of our labor, our menu is almost finished!

Collapse And Animate

Up to this point, we’ve kept our menu opened up so that we could see it while we style the elements within. Now that we know that all of our visual styles are exactly like we want them, it’s time to collapse each section and then set them up to pop open on hover.

By default, browsers will set the height of those unordered lists to auto, meaning they’ll be just tall enough to hold all of the content within. To collapse the menu sections so that only the bars show, we can target those unordered lists and set the height to 0. Notice that we’re leaving the paragraph alone, this will ensure that our top section is always open.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px; /*Collapses the menu*/
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
}

</ br>

Now our menu is much shorter and doesn’t eat up so much space. You can also finally see the benefit of those gradients and borders that we implemented before.

Animating the Transition

Next we’ll want to open these menus back up on hover, but before we do that, let’s set up an animation so the transition is nice and gradual. Make sure you insert the various browser extensions and target the height property.

/*ul Styles*/
.menu-item ul {
  background: #fff;
  font-size: 13px;
  line-height: 30px;
  height: 0px;
  list-style-type: none;
  overflow: hidden;
  padding: 0px;
 
  /*Animation*/
  -webkit-transition: height 1s ease;
     -moz-transition: height 1s ease;
       -o-transition: height 1s ease;
      -ms-transition: height 1s ease;
          transition: height 1s ease;
}

</ br>

Expanding on Hover

All that’s left to do now is make it so that when you hover, the ul expands. This is tricky though so be careful. Your instinct may be to do something like “ul:hover” but that’s not what we want. Instead, we want to make it so that you can hover anywhere in that menu item, either in the bar or the unordered list. However, the item that we want expanded is still only the ul. Here’s what our selector looks like:

.menu-item:hover ul {
  height: 93px;
}

</ br>

Sometimes reading a selector backwards is helpful when trying to figure out what it does. This tells our browser to set a height of 93px to our unordered lists when a .menu-item is hovered over.

One important thing to note here is that we can’t just set the height to auto because for some reason this disables the animation. If you don’t want the animation, a height of auto is much more flexible and allows you to vary the number of sub-menu items. If you want to do this with the animation, you’ll have to target the height for each individually.

See It In Action

Our menu is now complete. Be sure to kick the tires in the demo to see how it all works. I’ll also throw in a link to the completed code so you can have a look at it all together.

Demo: Launch Demo
See the Code: Check out the HTML and CSS on Tinkerbin

Conclusion

I hope you enjoyed this walkthrough of building an animated vertical navigation menu. In implementation, it’s very similar to the animated download buttons that we built the other day so you should really be getting the hang of hiding and showing content using pure CSS.

Look out for an even better version of this menu to pop up on our brand new sister site, Design Curate. You’ll find a ton of great freebies there that you can download and implement in your projects today.

Peruse the options below and download your favorites, then feel free to leave a comment to let us know what you think.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Poly – free web font

Accent™ Free Display Typeface

Otama e.p. Typeface

Mosaic Leaf Free Font

Bigmouth Font

Bispo free font

Sketchetik (FREE)

Infinity

Kilogram

Origram Free Font

Adamas Regular – Free font

PLSTK – Free Font

Manteka

Lorena —Free Font

MOLESK font (free)

Five Minutes / Free Font

Glide® Font

Deibi v1.0 – free font

Novecento font family: 32 styles, 12 Opentype features

GRN Burgy [Free Download]

CODE free font

Tetra

Free font VAL™

Hexa (free font)

Urbe – Free Typeface

Tall Boy

Construthinvism – Free Font

Typeface Adec2.0 (free)

Absinthe – Free Font

Dekar free font

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

30 Amazing Free Fonts from Behance: http://goo.gl/ox9dI

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

CSSDesk

I’ll start with CSSDesk because it’s one of the oldest on this list. It’s been around for years now as a quiet and obscure little tool that is extremely helpful for playing with basic web code. CSSDesk is a very simple tool that focuses purely on HTML and CSS.

What I Like About CSSDesk

There are a lot of things that I just love about CSS Desk. There are three main sections: HTML, CSS and live preview, the sizes of which can all be easily tweaked with a click and drag. I like that you can easily see everything you need in one simple view. There’s no effort or setup here, just load the page and start creating.

There’s also basic syntax highlighting just like all of the other tools on this list. However, one fairly unique feature that you don’t often see in these types of tools is line numbers. It’s such a simple addition but I tend to like line numbers so I really appreciate the inclusion.

The toolbar features are pretty cool as well, providing some options that you simply don’t find other places. In addition to the standard sharing feature, you also have the option to download what you just built. Further, there’s a set of default tiling background textures that are applied if you don’t manually override them. These are fun if you’re just building a button or widget of some kind and want something other than the typical plain white background.

What I Don’t Like About CSSDesk

Honestly, there’s not much to dislike about this one. Sure, it’s simple and doesn’t have some of the fancy features the other options have, but that’s also what makes it great. I hardly ever use this one anymore but every time I do it’s so nice I think I should stop by more often.

The biggest downside for hardcore coders is the lack of JavaScript support. If this is a deal breaker for you, try checking out one of the other options.

JS Bin

JS Bin is another popular place to tinker around with your code. The design of this app is quite minimal and really allows you to focus on the code. By default, the page only shows the HTML and live preview panes, but you can easily add JavaScript to that as well.

What I Like About JS Bin

There are quite a few nice features on JS Bin. The first thing that I found myself appreciating is the fact that refreshing the page doesn’t kill your work. The preview updates automatically but for those rare times when you do need a manual refresh, it’s nice that your first instinct (Command-R) doesn’t result in the accidental loss of an hour’s worth of tinkering.

As with CSSDesk, you save, share and download your work. The place where this obviously pulls ahead though is the JavaScript implementation. You can obviously enter your own JS but as a bonus you can choose to include popular libraries like jQuery.

Another cool feature is the ability to control which panes you see by manipulating the URL. For instance, “http://jsbin.com/#javascript,html,live” will get you all three panes while “http://jsbin.com/#html,live” will just get you two.

What I Don’t Like About JS Bin

To be honest, JS Bin is my least favorite option on this list. It’s not bad, but it definitely lacks the charm of the others. One thing that always gets me is that there’s no dedicated place for CSS, forcing you to embed it into your HTML. This works just fine, but it’s not as nice as the intentional separation seen in the other options.

jsFiddle

jsFiddle has completely taken off in the past few months to a year and is probably the most popular option on this list at the moment. And for good reason, this is one amazing app. Let’s face it, once you dig into jsFiddle, you may never look at any of the other options again.

What I Like About jsFiddle

There are a ton of great things to cover in my list of reasons why you should use jsFiddle. First up is the layout. There are four panels (HTML, CSS, JavaScript and preview) so you can see everything you need to at once and resize each area on the fly. The layout system here feels really flexible and is actually sort of fun to play with.

While we’re discussing panels, you can customize the CSS and JavaScript panels to utilize your favorite third party tools. You’ll find support for the Sass SCSS syntax and CoffeeScript.

jsFiddle lets you create a login and view a dashboard of your past saved work. There are a ton of menu options and tools once you’ve saved a fiddle, my favorites are the ability to quickly create a fork and the option to automatically tidy up your messy code structure.

In addition to the panel customization options, the sidebar has a bunch of other great features as well. For instance, you can quickly add both any major libraries that you want to include (jQuery, MooTools, etc.) and your own JavaScript/CSS resources.

One last amazing jsFiddle option that I only just discovered the other day: you can embed fiddles into a webpage. This option is found under the share menu and is a great alternative to other code embedding services.

What I Don’t Like About jsFiddle

My main beef with jsFiddle is the lack of an auto update option for the preview. Once you’ve used all the other options on this list and experienced the joys of auto update, it’s hard to put up with manual refreshes every few seconds in jsFiddle.

As far as other features go, it’s the best on the list but that one annoyance often drives me elsewhere if I just want to bust out a quick test. Keyboard shortcuts help, but they’re still not as nice as something automatic.

Dabblet

Dabblet is a fairly new kid on the block in this genre. Like CSSDesk, it focuses on only HTML and CSS with no JavaScript. However, don’t count it out because it brings some serious innovation to the table that you won’t find in any other editor.

What I Like About Dabblet

By default, Dabblet is split into three tabs: CSS & Result, HTML & Result and Result. This provides flexibility and focus while allowing you to always keep an eye on the result.

You can change things up with the controls shown below. The split can be vertical, horizontal or taken out completely. There’s also an interesting “behind code” mode where your result is simply the background for the coding area. Notice there’s also a message about using prefix-free. I use Dabblet all the time and never noticed this until just now! This means that you don’t have to use crazy vendor prefixes and can code the simple defaults, the hidden JavaScript will make sure your browsers interprets it correctly.

Dabblet has some great saving options as well such as “save anonymously.” It also links to your GitHub account, which coding nerds like will love.

My favorite Dabblet feature is the super slick hover effect integration in the CSS. They’re easier to show that describe. Here two few examples:

As you can see, hovering over certain bits of CSS brings up these little tooltips that are really great. You can get previews for fonts, colors, sizes, and even images.

What I Don’t Like About Dabblet

Dabblet is a bit quirky from a visual perspective, you either love it or hate it. I personally really enjoy using it but really wish that I had more control over the panel size. Having an auto 50/50 split is great, but I should be able to manually adjust that however I choose.

As far as I know, there’s also no way to view your HTML and CSS at the same time, which is a little annoying if you’re used to options like jsFiddle where you can keep an eye on everything at once.

Tinkerbin

Tinkerbin is the closest alternative to jsFiddle that I’ve found. Though it doesn’t have all of the fancy features found in jsFiddle, it has a few tricks of its own that are really nice.

What I Like About Tinkerbin

The default panel layout on Tinkerbin is probably my favorite on this entire list. It’s a very logical layout that puts the code on the left and a nice big auto-updating preview on the right. The HTML, CSS and JavaScript sections are all stacked on top of each other, with optional tabs that allow you to focus on just one of these.

Further, Tinkerbin supports even more alternate syntax options than jsFiddle. You can choose HTML or HAML; CSS, SCSS (with Compass), the old SASS syntax or LESS; and JavaScript or CoffeeScript. Needless to say, if you dig preprocessors, this is the option for you.

Tinkerbin is the only option that allows you to swap out your preview for a nice, extensive “View Source” window.

What I Don’t Like About Tinkerbin

Even more so than Dabblet, the Tinkerbin layout is completely rigid. Sure, I like the default setup the best, but sometimes I want to make that preview wider and I simply don’t have the option here.

Further, the saving options aren’t the best. There’s no account setup, dashboard, GitHub integration, etc. You simply save your experiments to a shortened URL.

Conclusion

By now I’m sure you can see the benefits of having a few of these sites bookmarked. I encourage you to experiment as often as possible with new ideas to keep yourself fresh and these services provide an awesome way to do it.

I hope this review has served as a helpful look into the details of each of these solutions. You should now know not only what makes each option unique but also where each falls short. This will help you make an informed decision about which one or two to primarily focus on.

I personally bounce back and forth with all of them fairly regularly but lately I’ve been hanging out mostly in jsFiddle, Dabblet and Tinkerbin. Which of these is your favorite and why?

Facebook announced Jan. 24 that it will be moving all users to the timeline format in the next few weeks. Although the change will be mandatory soon, you can make it early as some users have been doing since it was launched in September. Timeline is the new Facebook “wall” and highlights your personal information based on when it happened.

The biggest visual change included in Facebook timeline is creation of a cover photo. When someone lands on your page they not only see a small square profile image but also a large photo that you have selected for the top of your page. The shape can a little intimidating and includes a hole where the profile image rests. But you can crop or create your own timeline cover photo in just a few minutes. Follow along as we take a look at some great examples and advice for creating the perfect cover photo.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Select a Cover Image

Technical Specs

The cover photo covers the width of the timeline but does not change size based on browser width. It remains 720 pixels wide. The photo is 265 pixels deep, but gains a little added depth with the addition of the profile photo box. Because of the size requirement, Facebook recommends uploading a high resolution photo for the cover image and acknowledges that all photos, especially those will low resolutions, can be used as a cover photo.

But those numbers might be a little hard to work with. A standard photo print is 6 inches wide by 4 inches high. For comparison, the Facebook timeline cover image aspect ratio is about 4 inches wide and 1.5 inches high. For your cover photo you will crop nearly half of the vertical space out of the image.

You do not have to have a pre-cropped image available in Facebook to create the cover photo. As long as any photo is wide enough to cover the space, Facebook will let you drag the photo within the cover image box for use. But just any old picture is not going to make a striking cover image. For a timeline cover with pop, you need to take the extreme horizontal aspect ratio into consideration.

Crop a Photo

Sort through your digital images to find something that you think represents you well. It can be a large headshot, you and a group of friends or a photo from your travels. When looking at photos, keep that super-horizontal shape in mind and remember that part of the bottom left of the photo will be covered.

Open the image in photo editing software such as Adobe Photoshop and set cropping constraints. With the Constrained Crop Tool, you can see exactly what your photo will look like before cropping. Many find it easier to work using the proper aspect ratio in inches. Select the crop tool and then select 4 inches for the width and 1.5 inches for the height. (You will shave a sliver off the top or bottom of the photo using this method.) Crop using full resolution.

Save your and upload to Facebook. You do not have to shrink the image to 720 pixels before uploading and remember to upload using high resolution. When adding a cover photo for the first time, click “Add a Cover” on your timeline; to change an existing cover photo, select “Change Cover” in the bottom right corner of the cover photo.

Create an Image

You can also create an image for your cover in the same way you would crop. Start with a blank canvas that is about 4 inches wide by 1.5 inches high at a high resolution (300 dpi or higher).

Remember to leave space for the profile photo. It is positioned in the bottom left corner of the cover image and sits near the left corner and mortises into the image.

If you create your own image, you may consider adding a watermark or digital signature, such as a website address somewhere on the image. That way others are less likely to steal your work if you do not intend for it to be available for public distribution and if it is stolen, you will still get credit for the design.

Download an Image

A variety of websites are beginning to post Facebook timeline photos for download.

The Detroit Free Press posted one just for Lions fans on their Facebook page. Designers at the newspaper created the timeline image with fans in mind. Using your profile photo you are almost inserted into the cover photo. They also used it as an opportunity to push branding as well, incorporating their logo into the image.

Several other websites, such as WhataTimeline.com and fbProfileCovers.com have a variety of premade, pre-cropped cover images available for free download.

What Works Well

Look for images that are sharp and crisp when selecting a cover photo. Remember this picture is going to be large and details will show. Facebook founder Mark Zuckerberg uses a tight crop of a dog; Denver Broncos quarterback Tim Tebow uses a photo from a game.

Pick something unique. Although there are a lot of ways to grab timeline cover images, they will not really reflect what you do. If you are not comfortable with a giant photo of yourself, showcase some of your work or create an image just for Facebook. Comedian Dan Cook uses his image to promote his work.

Remember the placement of your profile photo. Select a cover image that uses space well. Opt for something that has the “meat” of the picture to the right or top of the photo so that the square cutout does not cover the image being showcased. TV personality and former model Tyra Banks’ page uses the space well with her face positioned in one side of the cover photo.

For a twist on the cover photo and profile photo combination, try to merge the images in a unique way. Facebook user Enri Pedernera created an image where he was part of the popular game Angry Birds and Mohammad L. Azzam created another fun image linking his profile and cover photos.

A Few Things to Avoid

Avoid images that are pixelated, such as the cover photo from former NFL player and current Fox analyst Michael Strahan. The placement of the cover photo is also distracting and the profile photo ends up in a quite unfortunate part of the cover photo. Strahan’s image is in the top left above this profile picture and the part of the image where the eye is drawn contains no visual information that would suggest the photo is of him.

Stay away from images that might be offensive or showcase you or your work in a negative light. Also, avoid images that are widely distributed such as those shared on current Facebook walls or in mass emails. The profile image is visible to the public, according to Facebook, as are profile images or past profile and cover photos.

Conclusion

Facebook’s new timeline feature is about a lot more than just photos and while the reviews are mixed, you can get ahead of the curve by hopping on board with an impressive image. It only takes a few minutes and a little photo editing.

Remember that the image you choose is a representation of your digital self and should be considered carefully. Even though most of your profile may be limited to friends, the cover image is not. Take a peek at what your friends and groups you like are doing with their cover photos to help spark a little imagination.

Facebook is giving users seven days to preview their own timelines before they go public. So take a couple days to experiment with different photos and find something that works best for you.

This is the third part in our series all about making fun of design related clichés that drive us all crazy. We’ve already picked on designers plenty with 5 Former Design Trends That Aren’t Cool Anymore and 5 Cliché Logo Design Trends to Avoid, now it’s time to turn around and give some attention to all the crazy things that clients say to their designers.

We put out the word on Twitter and asked for some of the worst things that you hear again and again from clients. The following are some of our favorites.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Make It Pop

“Make it pop” has to be the most cliché overused line in design history. I’m not sure who decided that this is the best way to request more emphasis on a given element, but somehow it made its way into the official client handbook.

I swear, some people are convinced that there is a big fat “POP” button in Photoshop just waiting to be pressed. “You mean you didn’t press the pop button? Back to your lab minion!”

One of the biggest problems with this phrase is how most clients want the “pop” to be executed: via a burst, crazy ugly colors or some stock photo that has zero relevance to the communication in question. If you absolutely must tell your designer that you want something to pop, at least consider letting him/her decide how that goal should be accomplished.

Let Your Creative Juices Flow

Seriously, can you think of a more ridiculous thing to say to a designer? I submit that there isn’t one. What are these juices and why are they so… juicy? It’s as if we expect designers to begin secreting some strange, fruity liquid that upon application turns boring old Helvetica into something more exciting like Comic Sans. “Go go gadget creative juices!”

I’d even go a step further and say that discussing someone’s juices sounds more like sexual harassment than creative feedback. Say this a few times to your designer and the only thing that will be flowing is the copious amounts of alcohol he or she has to consume to forget that you ever uttered such an abomination.

Feel Free to Just Be Creative

Designers love it when you tell them to be creative, seriously, do it every chance you get. While you’re at it, the next time you get in a cab, tell the driver to feel free to just… drive.

The assumption here is that you have to give a designer permission to do something creative. Isn’t that what you hired them for? If you neglected to provide this nugget of wisdom would the designer cease all creative juice secretion and provide you with a Word Document set in Times New Roman?

Take It To The Next Level

Feedback like this is as much the fault of designers as it is clients. Too many designers become so emotionally connected to their work that they simply can’t handle criticism without feeling like they’re undergoing a personal attack. As a result, clients have had to resort to “nicer” ways to tell us that our work sucks. “This is great, but let’s take it to the next level.” Translation: “I don’t like it.”

“Take it to the next level” is an empty phrase to designers (plus, it sounds like you’re asking to move in). They’ve given you their best guess at what you want, now it’s time to say exactly what’s not working and why so you can avoid thirty rounds of guessing game artwork changes. Give open, honest and professional feedback that cuts to the heart of the issue. If your designer can’t take it, then it might be time for a new one.

This Project Will Get You Great Exposure

There’s nothing better than a client trying to convince you to take a low or even nonexistent rate because the project will surely earn you some great exposure or provide an awesome portfolio piece. While you’re at it, the next time you go into a restaurant, ask the chef to make you some free food in exchange for you telling all three of your close friends that it was delicious.

There are in fact some projects that are worth it solely for the exposure they provide. The best part is though that those types of clients always have a nice big budget!

This Project Will Lead to Paid Work

Once again, I beg you to go and try this with any other product or service. Perhaps I’ll walk into the Apple Store and ask for a free iPad with the guarantee that if I like it, I’ll actually purchase some Apple products in the future. Somehow I don’t think the folks at the Genius Bar will go for it.

For some reason designers exude some sort of “sucker” hormone that attracts penniless zombies looking for a free meal. The reality here is basically the same as the last time, if you don’t have any money, you can’t hire a professional. It’s simply a matter of respect. If you really stop and think about it you’ll no doubt realize that designers are real people trying to pay their mortgages and put food on the table for their families. Empty client promises don’t buy Happy Meals.

I’ll Send You a Fax

Sorry McFly, I don’t know what time warp you just stepped out of but turn down the Walkman and look around. No one uses a fax machine anymore. In fact, if you’re working with a freelance designer, there’s a good chance that they don’t even have a working phone line in their house.

Email is fast, instant and free. If you need to send signed documents, use a scanner or your computer’s camera. If you refuse to purchase a scanner, then you’ll completely understand when all of the designers that you approach refuse to purchase a fax machine.

We Want It To Look Exactly Like This Website

It’s amazing how poorly this knowledge is disseminated in the general public, but designers aren’t actually supposed to just rip off the work of others. It seems simple enough right? You only have to take the color scheme, layout, buttons and graphics from this website, we can put our own logo on it and it’ll be different!

As Curebit just found out after stealing the Highrise site from 37signals, this strategy doesn’t work out so well in the long run and can lead to some massive PR headaches.

Make The Logo Bigger

This one is so popular that it has spurred countless Internet memes, from Make My Logo Bigger Cream to the Make the Logo Bigger Song.

I’m not going to tell you that there is never a case when your logo needs to be bigger, because such instances do exist, just know that if you request it, your snarky designer is likely to send you back one of the links above.

It Won’t Take Long

For some reason, non-designers often imagine that they are qualified to make accurate time estimates for how long a design project will take. Experienced designers long ago learned to ignore any late night client phone calls because they inevitably lead to a request for a quick fix to a website or brochure. Five hours and nine phone calls later as the sun is rising the “quick fix” is finally wrapped up in time to start a new day of work.

Even worse than the quick changes to existing projects are the judgements received when a designer tells a potential client just how many hours of work to expect on a project. “It’s just a logo! You’re a professional, I don’t see why this should take you more than an hour.” Some clients are convinced that logos just pop out of Adobe Illustrator if you know the right keyboard shortcuts.

What Do Your Clients Say?

It’s always fun to gather around the metaphorical water cooler and jest about the lighter side of our profession. Join in the fun and leave a comment below with some of your client horror stories. Have you heard any of the phrases above lately? What other client clichés can you think of?

Almost. It seems innocent enough right? Surely there’s no evil lurking in those six letters. You might even see this as a positive word. However, as a designer, you should always be on guard when this word can describe certain aspects of your work.

Read on to see why “almost” can be a dirty word and how it just might be bringing down the quality of your work. We’ll also take a look at two underlying foundations of good design that provide ready solutions to solve your “almost” design woes.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Secrets Hidden in Plain Sight

Design is an interesting topic. It’s something that, by definition, has to be innate and intuitive to a certain degree. Effective design is pleasing and logical to the beholder, so in theory, designing for mass appeal should be something that almost anyone can do because it leverages our common ideas towards aesthetics and information organization.

</ br>

The fascinating thing is, finding and identifying those commonalities is a lot more difficult than you’d think. Lots of people know good design when they see it, but they lack the fundamental design education to point out exactly what separates the good from the bad, or even more to replicate the good design practices in their own work.

This type of information, the simple bits of knowledge that are hidden in plain sight, is my absolute favorite topic to explore. This discussion will cover just such a concept. One so simple that absolutely anyone can understand it, yet so secret that I see countless people, from laymen to professional designers, completely miss the mark with this principle on a daily basis.

Almost The Same Is Awkwardly Different

Enough suspense, why in the world, you ask, is “almost” a dirty word in design? It seems harmless enough right? Instead of telling you why it’s dangerous, let me show you.

Alignment & Size

The inspiration for this piece was a website that I was recently asked to critique. The design featured an image with a button below it that looked something like the one shown below:

When I look at this example, I immediately see a case where “almost” is wreaking havoc on the quality of a design. This is more clearly illustrated if we add in some guides:

As you can now clearly see, the button is “almost” the same size as the image, but not quite. This causes some conceptual dissonance and can even be a distraction:

“Did the designer intentionally make the two objects different sizes? It’s difficult to tell. Maybe this is a mistake! Surely the two are meant be the same size.”

Your user has now been thrown off course and instead of focusing on your content is now wondering whether or not you screwed up. Now, some might disagree and say that the above example is an alignment issue and not a size issue, the button should simply be aligned to the center:

Admittedly, this helps. When size discrepancies are present between two simple objects, a center alignment can prove useful. However, I still see the same problem. The two objects are too close in size.

The key to solving this problem is to ask yourself why you made the two objects a different size to begin with. If it’s an accident, then you’re simply being sloppy with your dimensions. However, if it’s an intentional decision meant to add differentiation, then attack this goal with new fervor and actually make the two objects look different:

There’s no doubt when I see this example that the button is actually supposed to be smaller than the image. Similarly, if you don’t really have a need for the difference, then just make the two objects the same width:

My point is, it’s up to you to decide whether or not the objects merit differentiation. Just make sure that if they do, you don’t wuss out and make them slightly different. Go big!

Typography

There are several places where this principle proves true in typography. The first that comes to mind is once again a size issue. The most common place that I see this arise is when a headline and paragraph look something like this:

Here again we run into the trouble that “almost” brings us. The body copy is “almost” the same size as the headline. Sure, you can tell that they’re different but it’s not something strong enough to really help present a clear informational hierarchy. When we drop “almost” and go big, the result is much better:

This image illustrates that there are other factors to consider as well, such as boldness. Consider the following example, which compares a minor difference with a major one:

Notice how the word “Big” is bolded in the first example, but the result is still so subtle that it’s ineffective. “Big” is almost the same as the rest of the sentence. By now we know that if this statement can be said, we need to be a little more extreme. In the second example, I made the typeface even bolder, then use all caps on the word and enlarged the font.

The same goes for the style of typefaces that you select. In this next example, I’ve implemented two different typefaces in an attempt to add some variation to my headline: Garamond and Trajan.

As you can see, these typefaces are so similar that they’re difficult to differentiate between. Do you think a non-designer will spot the difference between the two? I made the example and I can barely spot it!

This example is probably a little extreme, I’m sure you wouldn’t choose two fonts this similar. However, it drives home a point that is constantly missed by real world designers. Make sure your typefaces are never “almost” the same. Try varying the serif choice, boldness, etc. Take something simple and mix it with something more complex. The result is much more aesthetically pleasing:

The Underlying Principles

I could go on and on, but I’m sure you get the point. You can apply this idea to any area of design you choose. The basic idea is that “almost” is dangerous. Any time you find yourself approaching “almost,” just remember that it typically leads to average results. No designer should want to produce average work!

By now, faithful Design Shack readers have realized that I’ve tricked you into reading yet another post on contrast. Yep, this whole concept can be boiled down to that one magical word. Contrast is one of the main pillars of good design and learning to wield it properly will make you an infinitely better Designer.

The information here simply frames the idea of contrast in a different way that might or might not make the topic clearer for you: Different is good, almost different is bad.

</ br>

This goes even deeper than that as well. Notice that the first example with the button presented an alternative that suggested making the two objects exactly the same width. This is of course the principal of repetition. When contrast doesn’t seem appropriate, repetition is your best bet.

Conclusion: Be Careful with Almost

Keep in mind that there are in fact plenty of legitimate uses for close similarities in design. For instance, subtle variations of a color can provide a nice and simple color scheme. However, even in this scenario you don’t want the two to be so close that no one can tell them apart.

The message here is not to completely avoid the “almost syndrome” all the time but merely to take caution when designing anything that approaches it and to ask yourself whether the result you’re going for can be better achieved with contrast or repetition.

Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

As we go, I’ll discuss why some techniques that you might think to use should be avoided. Transitions are tricky to work with and are quite prone to refuse to work with certain properties. Read on to find out more.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Concept

Loosely based on this idea, I wanted to create a download button with a cool sliding drawer effect where originally hidden information pops out when the user begins a hover event. To put my own spin on it, I decided to double the effect and create a drawer on both the top and bottom of the button (click here for a sneak peek of the finished result).

Here’s how it will work: using a combination of HTML and CSS, we’ll create three separate pieces. These include the main button and two smaller info panels. The smaller panels will initially hide under the larger button, then when the user hovers, one will slide upward and the other downward.

As you can see, this will be a pretty easy project that is perfect for beginners that are looking to up their CSS skills. Especially worth learning is how we’ll utilize absolute positioning and stacking via z-index.

What Won’t Work

As I planned out this project, I came up with a couple of ways to make my concept work. Given that I’ve been on a pseudo element kick lately, the way that I chose to structure the project initially was through the use of :before and :after.

With these pseudo elements, we can code only the download button in our HTML and then add in the wings using pure CSS. It seems like an optimal solution and indeed it worked great… until I tried to animate the transition. No matter what I tried, I simply couldn’t get the transition to work.

After a little research I discovered that that only Firefox supports CSS transitions on pseudo elements. This is a real bummer that really limits the fun we can have with :before and :after, but on the upside I learned a valuable lesson that will save me a lot of time and trouble in the future.

In tutorials like this one you don’t often get to hear about where the author failed, but I think it’s important to communicate these failures so you can learn from them as I have. Now the next time you want to animate a pseudo element you’ll remember that it won’t work in most browsers!

Failures aside, let’s jump into a method that will work.

The Button

To begin, we’ll create and style our button. Once we have this in place, it’ll be easier to form the other elements. All we need in the HTML department is a single div containing a link. We could simply use the link for the button but we’ll need to group multiple objects together so a div is necessary.

<div class="button">
  <a href="#">Download</a>
</div>

</ br>

Button Shape & Size

The HTML above should simply provide you with a plain text link. We’re going to transform this into a button with a set background shape and size. To do this, we start with some dimensions, add some color and set the display value to block.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
}

</ br>

Here’s a look at what your button should look like after this step. It doesn’t look like much yet, but it’ll be a fancy looking button before you know it.

Type Styles

The first ugly thing about the button above that we’ll need to fix is the type, it’s currently a mess. Fortunately, this is easy to address. All we need to do is set the color to white, declare a font, and center it.

.button a {
  display: block;
  height: 50px;
  width: 200px;
  background: #00b7ea;
 
  /*TYPE*/
  color: white;
  font: 17px/50px Helvetica, Verdana, sans-serif;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
}

</ br>

There are a couple of interesting things to note here. First, notice that I’m using the “font” shorthand rather than running through reach font property individually. This is a great way to save space and keep your type styles nice and succinct. The order here is as follows:

Here’s another nifty trick: I set the line-height to 50px to center it vertically in the button. Also notice that I removed the text underline and transformed the type to be uppercase. Why didn’t I just type it out in all caps in HTML? Because this is really a style choice and could change with a future redesign.

Now our button is looking much better!

CSS3 Magic

At this point our button is still looking a little plain. If you’re cool with the minimal look, you can skip ahead. Otherwise, let’s make it a little more interesting. The first thing we’ll do is round off the corners. Make sure you add all three browser prefixes:

-webkit-border-radius: 10px;
   -moz-border-radius: 10px;
        border-radius: 10px;

</ br>

Next up, we’ll toss in a box-shadow. Once again, we’ll need three versions to cover the various browsers. The shorthand value order here is horizontal offset, vertical offset, blur and color.

-webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
   -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
        box-shadow: 2px 2px 8px rgba(0,0,0,0.2);

</ br>

Finally, we’ll toss in a gradient. Unfortunately, this requires a whole mess of code. The way gradients work recently change so not only do we need multiple prefixes, we also need multiple syntaxes to make sure we support everything. I’m going to be honest, I rarely code this stuff by hand. Instead, I use the Ultimate Gradient Generator and paste in the generated code. Here’s the result:

background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */

</ br>

Now our button is completely styled and looking fine. Here’s the result:

Adding The Drawers

Now that our primary button is done, it’s time to add the little drawers that will slide out from the top and bottom (perhaps “wings” is the appropriate term). To do this, we’ll start by adding a little bit to our HTML:

<div class="button">
  <a href="#">Download</a>
  <p class="top">click to begin</p>
  <p class="bottom">1.2MB .zip</p>
</div>

</ br>

As you can see, I basically tossed in two paragraphs, each with a unique class that makes them easy to target (you could use some pseudo selectors instead if you really want to get fancy).

Default Paragraph Styling

Now jump over to your CSS and we’ll style the paragraphs. To start, we want to focus on the styles that both paragraphs will share. Styling both at once where possible helps keep our code clean and less redundant. Here’s a big chunk of code to think over:

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
}

</ br>

Now, this is a lot to throw at you all at once so I’ll walk through it step by step. The first thing we do is give the paragraphs shape, color and type styles exactly like we did on the button. The main difference is that these are smaller and use some margins to push them into place.

Next are the positioning styles. These are very important so be sure you understand them clearly. In order to make the wings appear behind the button, we need to apply z-index, which affects the stacking order of the elements. Think of this as a “send to back” sort of command. To make this work, we need to apply absolute positioning.

Finally, we added the same border-radius and gradient styles that we did before. I’ve kept these separated from the previous styles to keep things simple and clear, but to make things DRYer, you would probably want to rewrite your shared CSS3 styles to something like this:

.button a, p {
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);      
}

</ br>

Basically, any time you find yourself repeating or pasting styles multiple times, you’re making your code unnecessarily complex and should attempt to simplify.

At the end of this step, you’ll strangely see no change in your preview from last time. This is because we’ve hidden these elements behind the button. They’re there, you just can’t see them yet!

Hover and Active Styles

What we want to do next is take the wings that we just created and move them outward when the user hovers over the button. To accomplish this, we simply need to adjust the margins on each paragraph. Here we target each of the classes that we created, then move the .top one up and the .bottom one down. The .top class also required a slight line-height adjustment to look right.

.button:hover .top {
  margin: -80px 0 0 10px;
  line-height: 35px;
}
 
.button:hover .bottom {
  margin: -10px 0 0 10px;
}

</ br>

While we’re here, we might as well throw some active styles on as well. These will take effect during a mouse down event.

/*Adjust Gradient*/
.button a:active {
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top,  #00b7ea 36%, #009ec3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(36%,#00b7ea), color-stop(100%,#009ec3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* IE10+ */
background: linear-gradient(top,  #00b7ea 36%,#009ec3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00b7ea', endColorstr='#009ec3',GradientType=0 ); /* IE6-9 */
 
}
 
/*Pulls in Wings*/
.button:active .bottom {
  margin: -20px 0 0 10px;
}
 
.button:active .top {
  margin: -70px 0 0 10px;
}

</ br>

As you can see, what I’ve done here is adjust the gradient so that the top color stretches a little farther, then I brought the wings back in a little bit so that there’s a contracting effect when you click.

Now our button is looking awesome. All three of our states are working. When you’re not hovering, it looks like a plain old button. When you are hovering, the wings or drawers pop out. When you click, the wings come in a little and the gradient changes ever so slightly.

Final Step: Add The Transition

At this point, everything appears to be working just fine. The only problem is that the hover effect takes place instantly and of course we’d like it to be a little more gradual. To accomplish this, go back to your paragraph block and add in a basic 0.5 second transition using all of the required prefixes.

p {
  background: #222;
  display: block;
  height: 40px;
  width: 180px; 
  margin: -50px 0 0 10px;
 
  /*TYPE*/
  text-align: center;
  font: 12px/45px Helvetica, Verdana, sans-serif;
  color: #fff;
 
  /*POSITION*/
  position: absolute;
  z-index: -1;
 
  /*CSS3*/
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
 
  -webkit-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
     -moz-box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
          box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
 
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

</ br>

With this addition, the button will transition very nicely between the three different states.

See It In Action

We’re all finished! You should now have an awesome animated CSS download button that is sure to impress. Check out the live demo below or check out the code on Tinkerbin.

Demo: Click Here to Launch

Want an even better version of the button with six different versions to choose from? Check out the awesome free download at our new sister site Design Curate.

Conclusion

Thanks for reading and following along. If you made it all the way through, pat yourself on the back for a job well done.

I hope you learned a thing or two about z-index or cool CSS3 tricks. If not, at least you got an awesome button out of the deal! Leave a comment below and let us know if you enjoyed the tutorial.

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is Income Diary, a blog that offers simple, practical advice for how to earn money online. Let’s jump in and see what we think!

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Income Diary

“I launched IncomeDiary back in 2009 after a conference I attended in Washington DC in March that year. Before this, I had been running websites successfully for around 4 years and one of the major things I took away from meeting like minded entrepreneurs was, you got to give back! This is what this website is all about, educating and helping internet entrepreneurs, no matter what level they are.”

Here is a screenshot of the homepage:

First Impression

Income diary isn’t breaking any barriers in blog design. It’s a very straightforward design that utilizes a layout seen on a million other blogs around the web. Is this a negative thing? Not in the least. In the same way that newspapers eventually all fell into a similar and predictable format, it’s perfectly natural that blogs would land on a few standard layouts that work well.

The benefit is that new visitors are immediately comfortable with the format and know how to get around from the second the site loads. Innovative layouts are great too, but there’s a common misconception in design that something that isn’t innovative isn’t good, and that’s simply not a true statement.

That being said, there are a lot of solid design choices made on this site. Aesthetically, it doesn’t blow me away, but it is fairly attractive and functionally solid. The primary question that I always ask for any design critique is, “Does the design accomplish its purpose?” In this case, think the answer is yes if the purpose is to successfully educate people on how to make money online. Let’s explore why this is true.

Color Scheme

If you’re familiar with our design critiques, you should already know what I’m going to say about this color scheme. It uses the simple color scheme trick that you almost can’t go wrong with:

First, the designer chose a main color, in this case green. Green is a solid choice, not because of anything aesthetic but because of the psychological correlation that we inevitably make: green = money. This site is about making money so there’s no color more appropriate!

Next up, a few different shades of this color were chosen. This provides a decent way to have subtle variation throughout the design: gradients, different header bars, etc. Finally, one color was chosen that complements but stands out from the main color. This technique provides an incredibly safe route to choose a color scheme that is neither monotonous nor overly busy.

Logo

Like everything else, the logo takes a very safe and predictable route. This is something important that is worth discussing. Is this a boring, generic logo? Yep. Is it better than a non-designer attempting to create a complex logo? Absolutely. The bottom line is that not everyone who creates a website is a professional designer. If this is the case with you, don’t feel bad about typing out your website name in a simple manner and calling it a day. One day when you have the budget (though arguably this site should right?), you can hire a professional to create a unique identity for you.

One thing that I think this site needs to rework is the tagline on the logo. It’s simply too thin and tiny and doesn’t read well. A simple solution might just be to increase the size of this line so that it has the same horizontal width as the line above it.

Navigation

The navigation area is a classic CSS nav format with big blocks defining each link. One thing that I’m constantly criticizing designers for in these critiques is link hover effects that are so subtle that you can barely tell that one exists, especially if you happen to be a color blind user. Fortunately, that’s not the case here.

As you can see, the difference between the hover and non-hover states is quite dramatic and can clearly be seen by all users. This may seem small, but small mistakes can ruin a design so it’s important to get this stuff right.

Information Hierarchy

Creating a solid informational hierarchy cuts to the very core of what your goals are in a web design. If you write down all the things that you want to accomplish with a web design, this should always be near the top of the list.

One of the most solid aspects of this design is how all of the information on the page is structured. For instance, notice that the most recent post in the home feed is given more visual importance than the other posts in the form of a larger preview image.

We use this same trick on the Design Shack homepage to an even greater degree. It’s a bit subtle on Income diary and I would even suggest that the designer find an additional way to make it stand out even more (different background color, larger headline, etc.).

There’s yet another level of differentiation as well. As you scroll down the post list, there’s a section with a few products that you can purchase. This is where that other color comes in that we discussed before:

This content is thrown into a nice minimal box with solid text and image layout and plenty of whitespace. It’s a great way to set this content apart from the main feed.

Now, though I like the design of this little box area, I’m a perfectionist so there’s one thing that drives me crazy:

The button below the product preview is almost the same width as the image above it, but not quite. It’s literally a manner of a few pixels but I can’t help but be distracted by it. Either make it the same width or make it much narrower, anything else looks like a mistake.

Footer

We’ll end this critique off with a quick look at the footer, simply because I like the way it looks. I love how the content breaks the footer line, the transition from gray to white when you hover over a link, the clean, minimal presentation of the social icons, and the oh so subtle hint of texture behind the logo. In my opinion, this is the best looking part of the site. A strange conclusion to be sure, but I’m just a big fan anyone that doesn’t slack off and toss on an ugly footer as the last step of a design.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.

Business cards are an awesome creative outlet where designers tend to push themselves to come up with unique and interesting solutions. If you’re a newbie to business card design though it can be difficult to break out of the cliché unoriginal layouts that will no doubt pop into your head. This post of over 15 free layered business card templates should help you out.

As a bonus, we’ve included not only layered business card templates, but a few editable 3D mockup files as well so that once you start creating your own awesome designs, you can show them off in style.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Templates

Creative Business Card Vol 3

Seextwood business card by hertzz

Page Curl Business Card

Industrial Business Card Vol 1

Free Modern Business Card II

Business Card Template 2 by An1ken

Free Business Card PSD by robbythedesigner

Free Modern Business Card I

Technix business card by hertzz

Bokeh Card by anderworks

Business Card

Che Guevara Business Card by robbythedesigner

Corporate Business Card Vol 2

3D Mockups

Psd Business Card Mock-Up Vol 1

Free letterpress business card mockup

Free Business Card Mock Up

Love it? Share It!

If you enjoyed this week’s collection of freebies, share the love and send out a link on your favorite sites. Here’s a convenient snippet for you to copy and paste as you please!

15 Free Business Card Templates That Don’t Suck: http://goo.gl/blBga

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Origins of Type

The modern Roman alphabet, which is the basis for type as we know it was developed somewhere around the year 300, according to “A Typographic Workbook: A Primer to History, Techniques and Artistry” by Kate Clair and Cynthia Busic-Snyder. Lettering, even though it was all done by hand or chisel, featured some of the same characteristics we see in modern type styles and fonts, such as detailed capitals (modern serifs) and script writing. Producing letters was considered an art form and specialized skill and many of the pen strokes used to create the first alphabets are the same as those used in popular fonts.

It would be hundreds of years, and with the development of printing presses, before sans serif fonts came to life. William Caslon IV developed the first printed type of this style in 1816, according to “A Typographic Workbook.” A font family bears the Caslon name, a family that included several type pioneers.

Technology is also a factor and helped contribute to the millions of fonts on the market today. With digital typesetting, almost anyone can develop and sell a font. But some of the most popular, as well known fonts bear the names of the fathers of modern type – John Baskerville, Giambattista Bodoni, Adrian Frutiger and Hermann Zapf, among many others.

A Lesson in Type Styles

Of the thousands of font choices out there all fall into one of five basic typeface categories – Fraktur, serif (which contains several subcategories), sans serif, script or cursive and novelty, according to “Typography and Design for Newspapers,” by Rolf E. Rehe, who earned a Lifetime Achievement Award for his contributions to typography by the Society for News Design. All of the fonts in each of these categories share a set of characteristics that make them distinguishable. The way fonts are mixed within categories can set the tone for a project.

Fraktur type

Fraktur typefaces are also categorized as those with names containing “Old English” or “Black Letter.” These typefaces contain letters that were originally made using multiple strokes with pen and paper. Today, these typefaces are not widely used but are still often seen in the nameplates of newspapers such as the Detroit Free Press. Fraktur typefaces can be difficult to read in multiple lines of text or at smaller sizes. They are best used for short, large phrases.

Serifs

Serif fonts are some of the most commonly used typefaces in print publishing. Most books and newspapers use serif fonts as the primary body copy. There are four distinct types of serif fonts – old style, modern, transitional and square serif. Old style serifs are the least commonly used in text-heavy projects; the letters tend to be quite round and letters do not connect between strokes. Letters also have rather pointed serifs. Garamond is a popular example.

Modern serifs are used commonly in big type. The letters are distinguished by contrasting thick and thin strokes in letter elements. Fonts in the Bodoni family exemplify this style.

The transitional serif subcategory combines attributes of the old style and modern groups. Fonts have some contrast between thick and thin strokes and feature the more rounded shape with pointed serifs that are common with old style typefaces. Times New Roman is a common example of this type style.

Finally, square serifs have a uniform shape and stroke weight; fonts can be rounded or feature a tall, condensed shape. Each serif has a square edge that closes in 90-degree angles. Rockwell is a common square serif font.

Sans serifs

The independent film “Helvetica” brought one of the most popular sans serif fonts into the eye of the non-graphic design public in a major way as a winner at several film festivals in 2007. For the first time people outside the graphic design community were looking at and really talking about a font. This is an example of a sans serif typeface, which features uniform stroke width and weight in each letter, and no serifs. This typeface style is one of the most widely used in web design for body copy and is becoming more common in print publishing.

Scripts, Cursive and Novelty

Script or cursive and novelty font types all fall into the for-seldom-use category. The script or cursive styles are based on handwriting and feature lots of extras with each letter. These fonts also tend to have a very distinct left or right slant. Script type styles also allow for each letter to connect to others; cursive does not. Novelty fonts are all those that fall outside the traditional categories and sometimes feature cartoonish or artistic elements. All of these font styles are best used in projects without mass blocks of text.

Mix Fonts Successfully

Mixing fonts can be an essential part of any project. Using just one font exclusively can work for some projects but much of your work likely requires emphasis that is best achieved through the use of varying type styles.

Start With the Body

Choose your main body font first and select other complementary typefaces. You don’t want to build an entire project around a headline. Determine the size of your primary font and whether you prefer serif or sans serif. Try to select one or two fonts that add punch but be sure to limit your palette.

Mixing Serifs

It is acceptable to mix serif and sans serif fonts and can actually give your project a sleeker feel. Using fonts that have very different styles and weights can put a great deal of emphasis on the less-used font. If you go with a serif for the body copy, add emphasis with sans serif headers or subheads. For smaller projects, such as a business card, experiment with using a novelty font for your name or company name and use a simple sans serif font for everything else. Douglas Bonneville, author of “The Big Book of Font Combinations” developed a chart featuring 19 font combinations, pairing a serif and sans serif styles. The chart includes common fonts and is a great starting point in developing a font palette for almost any project. Type designer Alessandro Segalini has a similar cheat sheet that goes one step further, and ranks fonts based on compatibility.

Be Cautious

Add pop without going overboard and be careful when using multiple fonts. Take a step back from your project and watch where the eye goes. Watch the curvature and slant of letters to ensure harmony between type styles. It can cause an unintentional chaos when you mix fonts that slant in different directions. Also take width into consideration; combine fonts with similar strokes, such as a palette of thin fonts with a headline style that uses a strong solid serif.

Watch Your X-Heights

When mixing fonts, opt for font families where the letters have similar x-heights, ascender and descender lengths and overall letter width. Ensuring similar letter attributes will help create harmony among the fonts and make it easier to use less complicated leading formulas and keeps allows different typefaces to sill work with your hyphenation and justification rules within certain set widths. The similar letter attributes also allow readers to move through copy without “noticing” a distinct font change.

Think About Scale

Size and scale can make or break your font choices. Serif and sans serif fonts work well at almost any size and can carry large blocks of text. Headers and headlines should be larger than body fonts, but be careful not to overpower the main copy. Color adds emphasis as well; adding just a pop of a bright or unusual color can make a font look larger than it is, while grays and muted tones can make fonts appear smaller.

Be Wary of Certain Combinations

Avoid selecting similar fonts; using two typefaces that mirror each seldom works and can create visual imbalance. Note the combinations of Time New Roman paired with Garamond and Trebuchet and Verdana above. The slight differences between the fonts can be confusing to the eye and distract from your design. For slight variances, opt to use items such as bold, italics and underlines within a font family to achieve subtle differences.

Keep It Readable

Keep text readable. Avoid mixing fonts within the body copy or using too many fonts. When selecting a font palette, determine what each font should do and stick to those rules. Don’t replicate the font from your nameplate in the body copy; keep that font unique. Use the body font for only body copy and not for headlines and subheads. When working with web-based projects ensure that fonts are web-safe and will render properly using different Internet browsers.

Watch Those Specialty Fonts

Use specialty fonts sparingly. Gimmicks only work in small quantities. Fraktur, script and novelty type styles can get lost and become unreadable if used too small or for chunks of text. These font styles also work best when they stand alone or are serving as art objects.

Conclusion

Selecting a font palette for any project can be both challenging and rewarding. Remember to keep the basics in mind when choosing typefaces – serif and sans serif fonts work well for most applications and in a variety of sizes, other type styles should be used for specific and small bits of type only.

The key is for your print or web project to have pop and be easy to read and understand. Experiment with a variety of font options and listen to your instincts when making a final selection. Sometimes the simple choice is the best one. More is not always better when selecting a set of fonts.

Image Sources: jimnista, cliff1006 and gromgull.

Today we’re going to examine a very specific example of good design and discuss what makes it so successful. Along the way we’ll discover the importance of good design and how to structure experiences that turn users into addicts.

We’ll hone our sights in on Pinterest and perform a seriously in-depth analysis to see why this seemingly generic idea seems to stand so far out from the competition. The ultimate conclusions will equip you to design experiences that your users will absolute love.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

A Lame Idea

Imagine that I came to you in 2010 with what I thought was a brilliant idea. I was confident that I could make it work and needed only some investors to help get things off the ground.

Being the cautious spender that you are, you ask about my idea. What is it? How does it work? My answer: a social bookmarking site. I’m going to create a website where people can sign up and save links. Cue patronizing letdown. You would no doubt inform me that this idea is anything but unique and is sure to flop. How could I possibly take on Delicious and the other bookmarking giants?

I’ve got a big idea though: I’m going to use images. Users will be able to grab any image from any webpage, save it to their account and share it with others.

Once again, in your best slightly derogatory tone you would inform me to do a Google search for “image bookmarking” and take note of the countless sites such as FFFFOUND! and Ember that already populate this market. You might even direct my attention to a list of 10 popular image bookmarking services, published in 2010, as further proof that my idea was completely unoriginal.

The Not So Lame Success Story

At its core, Pinterest is nearly identical to the concept of the sites in the list above: a simple visual bookmarking service with a strong emphasis on sharing. I can’t help but look at the climate of competition under which Pinterest was born and marvel at how it came to stand out as a clear leader in the category.

So why has Pinterest caught fire lately? If it’s one of countless image bookmarking services, how in the world did it draw over 1.5 million users during a “private” beta? How could it possibly be snagging tens of millions of page views per week and have an estimated company worth of around $200 million?

Why Did It Work?

The secret to Pinterest’s success is incredibly important. In a time where social media is a multibillion dollar industry, a truly successful formula is the holy grail.

There are no doubt several pieces to the Pinterest success puzzle but the one we’re going to focus on today is design. How did Pinterest not only set itself apart with design, but actually surpass what everyone else was doing and create something that engaged users on an entirely new level?

Solving Layout With Diverse Image Sizes

One of the primary aspects that set Pinterest apart from other social image bookmarking services is that they completely rethought how the images should be presented to the user.

The goal is a simple one, you ideally want your users to be able to browse through hundreds or even thousands of images with relative ease. If this action requires too much effort on the user’s part, you lose their interest. If it’s effortless, you keep their attention focused on the content.

One important step in this battle was “masonry” style layout, a fairly recent trend in web development named after the jQuery Masonry plugin. Pinterest uses its own scripts for this, but the concept is the same.

Basically, masonry style layout creates the most efficient utilization of space possible given varying image heights. It overcomes past layout hurdles and takes vertical height into account when laying out the images, thereby creating a super tight, puzzle piece flow of images on the page.

Pinterest wasn’t the only image bookmarking service to try this layout though. Competitors such as Image Spark had also integrated masonry layouts. Obviously, there has to be more to this puzzle.

The Pagination Conundrum

In addition to maximizing layout efficiency without sacrificing image quality from uniform cropping, the Pinterest team was able to identify another underlying problem with existing image gallery formats: pagination is a pain.

Websites love pagination because it increases their page views (more views = more money), but as a user it sucks: scroll down, click the “next” button, wait for new page to load, scroll down and click the button again… then at some point you realize you want to go back and find a specific image or page and you’re left hitting that back button a million times until you find it.

To solve this problem, the Pinterest team looked to infinite scrolling, a neat little trick that automatically loads more content as the user hits this bottom of the page, thus allowing for a fairly uninterrupted browsing process.

Way back in 2008, Paul Irish was creating and distributing infinite scroll plugins. The advice on that site says to use infinite scrolling when:

• Retaining the user is important and clicking “Next Page” is a usability barrier.
• The full content available is too large to show on initial load.
• The content is available in paged chunks: search results, blog posts, product listings and portfolio features.

This perfectly describes the circumstances of a social image bookmarking service, making Pinterest prime territory to implement this technique.

Masonry + Infinite Scrolling = Magic

Masonry style layout and infinite scrolling have melded into a single idea in our head, but they started as two separate technologies. Putting them together, it turns out, creates a truly addicting experience.

If you doubt this for a second, stop by Pinterest and start scrolling. What follows is some strange form of time travel where you stop by the site for a quick peek and out of no where a solid hour has gone by. In this time you forget about user interfaces and controls, you simply absorb the content as thousands of beautiful pictures slide by, controlled by a single flick of your finger.

It’s a truly engaging experience that simply blows away many past user interaction models. It’s interesting to note that the Facebook News Feed, the epitome of website addiction, uses infinite scrolling. Further, the new Timeline pages now combine this technique with a two column masonry style layout. It’s catching on folks, expect to see a lot more of these two techniques in the next year.

Unbeatable Content

Fancy interaction models don’t mean a thing unless you have the content to back them up. In order for Pinterest to really take off, two conditions had to be met: the content had to be great, and there had to be a ton of it.

These two goals are actually conflicting. The best way to get lots of content is to open your site to the public, which is also the best way to ensure that your site is full of crap.

Pinterest chose to stay in private beta for quite an extended period of time, carefully controlling invites. I honestly have no idea how they pulled it off, but the core group of early adopter pinners really set the stage for Pinterest’s identity and quality expectations.

In the early days especially, you couldn’t deny the strong, unique personality that the Pinterest community seemed to have. It seemed that every image on the site was oozing with style. Instead of sifting through piles of garbage to find the gems, you were presented with wave after wave of gorgeous interior design ideas, DIY projects and the like. Which brings me to my next point: a targeted user base.

A Woman’s Touch

Social bookmarking services, for whatever reason, have traditionally been quite nerdy. The visual nature of the service attracts two kinds of people: designers and guys who want to save images of girls that tend to be of a particular variety. Consequently, these services are typically filled with an odd mix of beautiful examples of design and erotic photography. Don’t believe me? Spend twenty minutes on FFFFOUND! and you’ll be a believer.

Pinterest on the other hand, has actually found an audience largely with females. As the user base expands at a rapid pace, people of all types are flocking to Pinterest and “pinning” all manner of content, but the initial base of content was largely Etsy-style material that exuded a feminine style simply not found in other similar services.

Women found Pinterest and used it to save recipes, collect outfits ideas and create lists of home decor products. Pinterest targeted and leveraged this vast potential user base and used it as a foundation for its personality. I talked to a non-techy friend yesterday who is admittedly still “creeped out” when a male user follows her on Pinterest because she sees it as a largely female network.

In the end, this proved to be a very powerful strategy that has paid off with content that no one else can come close to matching. Again though, the folks at Pinterest will have to keep a close watch on their audience and evolve with their user base. Their growth is already taking them from a very specific offering to one that is more general and broad reaching.

A Solid Metaphor That Encourages Sharing

The final thing I want to discuss regarding Pinterest’s success is a little deeper into the interaction model than the surface layout and scrolling techniques. The way that they’ve structured the service’s collection process and social layer is yet another stroke of genius that helps make the service strong.

The metaphor behind Pinterest is instantly understandable and quite catchy to discuss. The idea is that Pinterest is your “virtual pinboard.” You create various “boards” and assign them categories, then use a bookmarklet or the main feed to “pin” items to your boards. Other users can then follow boards from users they like and receive a custom stream of content tailored to their specific tastes.

What people pin has become a hot discussion topic that promises new insight even into the minds of those you already know well. For example, I used my wife’s Pinterest account for gift ideas at Christmas time. It also helps with those you’d like to know better. When inviting another couple over for dinner, my wife checks the other girl’s Pinterest account to see what types of food the couple enjoys.

Making It Easy

We already discussed how Pinterest has created an awesome source for finding inspiration, but in order to get people to actually use your digital content collection service, you have to make the act of collecting and sharing content a nearly effortless task.

One of the ways that they’ve done this (in addition to the bookmarklet) is to pick up the “Retweet” idea from Twitter. Every item in a given stream of pins can be liked, commented on, and most importantly, repinned.

This creates a system where collection is super easy and encourages lots and lots of pinning. There’s even a page describing Pin Etiquette so everyone can learn to play nicely together.

Conclusion

Looking around the web, we encounter countless examples of fantastic ideas that are ruined by poor execution. Pinterest turns this on its head by presenting a fairly generic idea that works extremely well because of its amazing execution.

Pinterest succeeds on several layers of interaction. First, they maximize their content presentation with a masonry like layout and keep you interested for hours on end with infinite scrolling. Next, they carefully targeted and crafted a very specific user base that was both a huge potential source of users and a fairly untapped market in this space. This led to a solid foundation of daily content that defined Pinterest’s very identity. Finally, underneath it all is an instantly understandable metaphor and sharing platform that is wickedly viral and incredibly easy to pick up and use.

All of these factors together create a winning formula for an undeniably addictive user experience. Whether you personally love it or hate it is irrelevant, the truth is that Pinterest is turning heads and dramatically increasing in corporate value. It therefore serves as an important lesson that you as a designer simply shouldn’t ignore.