Typically, the articles that I write on Design Shack are from the perspective of the designer. One topic that comes up regularly is how to deal with clients on various issues. However, today I’d like to flip things around and jump to the aid of the other team.

Designer/client relationships go both ways and just as often as there is a frustrated designer, there’s a disappointed client. Today we’re going to tackle the question of what to do when you hire a designer and just don’t like the work that resulted.

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

Fred Asks for Help

I frequently receive emails from designers asking for advice on various topics from business to design. Recently though I received an email not from a designer but from a concerned client who simply didn’t know what to do.

The situation is extremely common and I’m sure it resonates with most people who have hired professional creatives at some point. The client, Fred, hired a designer to take on a major rebranding project. Step one was to refresh the logo.

Fred said that the designer obviously put forth a good deal of time and effort in this step, delivering ten different versions, each with around eight different slight variations for a total of eighty different logos to choose from! On a side note, I think too many options can be just as bad or worse than not enough, so I don’t really think this was appropriate, but Fred appreciated the dedication.

Now for the kicker, even with all of these options, Fred didn’t really see anything that he “was in love with.” In other words, he hired a designer to do some work, the designer delivered the work as promised, but he didn’t like it. Fred’s question is the same as that from every other design client in this situation: now what?

What’s the appropriate course of action here? Should Fred pay for the work? Should he tell the designer? Should more options be requested?

Structuring a Design Agreement

It’s too late for Fred, but I think the absolute best way to handle these situations is to prevent them altogether. The way to do this is to structure any design agreement clearly and carefully, planning for likely contingencies such as these.

Make It Clear What Is Being Purchased

The first thing that needs to happen before any money changes hands is that the terms of payment should be made crystal clear. People tend to naturally work out the simple stuff like deadlines and dollar amounts, but skip over one of the most critical pieces of the puzzle: what’s being purchased?

There are two ways to approach this discussion. The first is that you’re buying the designer’s time. He or she is an experienced professional, and to use their services in any way, you must compensate them for every hour spent working.

This is similar to hiring a doctor. You go to the office, let the doctor do what he/she thinks is appropriate, hear the diagnosis and treatment, then decide whether or not you agree enough to follow along. Regardless of whether or not you think the prescription the doctor gave you is worth filling, you still have to pay the bill that comes in the mail later because the doctor’s time is valuable and you used some of it up.

The second way to view design work is a product-focused approach. Here you don’t care if the designer spends two or twenty hours on a project, you are paying a flat rate for a given list of “deliverables”. You give the designer a list of your requirements and suggestions and receive a piece of design work in return (or multiple pieces depending on the agreement).

Build In Revision Considerations

From the designer’s perspective, the hourly rate is by far the best way to go. This way the agreement stays fairly balanced: every hour of work is met with an hour’s worth of payment.

From the client’s perspective though, the flat rate piecemeal system can often be desirable because it’s easier to budget for: you know exactly how much you’ll be paying. With this system though, the client needs to be sure that there’s a clear system in place for revisions.

It’s almost never going to be the case that a designer hands over a piece of work that you don’t want to change or tweak in some way. For this reason, it’s often the case that a flat rate will come with something like the following: $X for three logo options, one major revision (significantly change one of the logos) and two minor revisions (tweak colors, fonts, etc.).

In this agreement, clients know up front what happens in the case that they don’t like the work for any reason. With no extra fees, they can get up to three revisions, one major and two minor. Some clients will still need more though so you’ll need to go one step further and decide on pricing for each additional major and minor round of revisions.

Providing Feedback

I’ve written entire articles on providing feedback so I won’t spend too much time on this topic but I it’s worth briefly covering. When anything creative is involved, feedback can become a touchy subject.

Both sides are to blame here. Clients too often choose an extreme of flat out unprofessional, rude criticism or a hesitance to say anything negative whatsoever and tiptoe around the subject of not liking the work. Similarly, designers are too often emotionally tied to their work and forget who is paying the bills. If I like blue but the client insists that the logo should be yellow, I shouldn’t throw a tantrum or let my feelings get hurt, I should make the dang logo yellow and grow up.

The customer is most certainly not always right, but they are paying so that means they get the final say in many matters. If I hire a landscaper for my yard and insist that black gravel be used, the landscaper can by all means tell me that white gravel will look better with my house color but ultimately, I get to choose because it’s my yard.

As a client, you should be open, honest and professional. If your designer can’t take it, it’s time to hire someone else. You should never have to pretend that you like something. If the work is unsatisfactory, say so! It’s an awkward conversation but these are a part of every professional business relationship. As a designer, I greatly prefer clients who clearly let me know what they think and how I can make something more along the lines of what they were looking for.

The Matter of Payment

All of this leads up to where we’re standing with Fred. What should he do? He has eighty logos that he doesn’t like and a designer waiting for the next step!

The most important question here was whether or not the designer did his or her job. This is why I was so insistent earlier on making the terms of the agreement clear. In this case, it sounds like the designer went above and beyond the call of duty and worked hard to make the client happy.

If the logos were plagiarized, delivered in a raster format when the agreement was vector, or otherwise technically and morally insufficient, there would be clear grounds for non-payment. If the client doesn’t get what was promised, neither does the designer.

However, especially where creative work is concerned, there’s this awkward and huge gray area of work that was delivered to technical standards but simply isn’t what the client was looking for. As you’ve noticed already, I love a good metaphor so I’m going to stick with this theme.

Logos Are Like Big Macs

Imagine that I roll into McDonald’s and order my first ever Big Mac. I get my food, sit down at the table and take a bite only to discover that I don’t like it at all. Now, if I took the sandwich apart and found that they forgot to put meat on the bun or put onions all over it when I specifically asked them not to, then I have reason to get a refund or a replacement. However, if I simply find that a Big Mac isn’t necessarily a food that I particularly enjoy, then I really have no ground on which to demand a refund. I took a gamble on something new, whether I like special sauce or not, McDonald’s has kept their part of the bargain and I should as well.

This same logic applies when you’re not necessarily “in love” with the work that your designer does. Ultimately, this person did the work that was agreed upon and you owe them a fair wage. If it turns out that you don’t like the design style, that just means that you picked the wrong designer just like I picked the wrong place to eat lunch with my Big Mac.

Moving Forward

So what happens now? You simply don’t like the work and you’re out of free revisions. There are two courses of action, both of which involve being open and honest with the designer about what you’re feeling.

The first course of action is if you still have trust in the designer to do a better job. At this point, you attempt to structure a new agreement, distinct from the old one where you essentially just try again.

However, it’s understandable if the project has reduced your trust in the designer’s ability to deliver what you want. It’s often the case that you should cancel any further work, pay the agreed upon amount for the work that has been delivered, cut your losses and move on with another designer. Does this suck for you, the client? Absolutely, but you should’ve gone to Chipotle for lunch instead.

If the project is at an awkward point where the amount due is uncertain but you still want to cease activity, it’s time to have an open discussion and maybe even a debate with the designer about the value of the work that has been done so far. Think about how far the project has advanced. Has the designer finished 25% of the total work? Then you owe 25% of the total project fee.

Satisfaction Guaranteed

For the most part, this advice is widely applicable to almost any scenario where you as the client aren’t happy with the work a designer has produced. One important exception is if the designer is crazy enough to have a “satisfaction guaranteed” clause of some kind. Be sure to explore exactly what this entails up front because it just may mean that the designer is willing to do the work over until you’re satisfied.

What Do You Think?

Some of us have been on only one side of the designer/client relationship and therefore tend to see only part of the big picture. If you’ve been on both sides of a project gone wrong, you can see that everyone typically has a good mix of blame and innocence that can be assigned to them. Sometimes certain designers just aren’t a good fit with certain clients and you should always be well prepared when these situations arise.

Now that you’ve heard my advice, I’d like to hear from you. If you were/are a designer, what would you do in this situation? Now imagine that you’re the client. Does that change your perspective? Leave a comment and let us know.

In the vast world of rapid prototyping CSS frameworks and toolkits, there are a ton of different options to choose from, but ever since Twitter’s Bootstrap hit the scene it seems like it has largely gobbled up this market. Is there room or reason for anything else?

The folks at Zurb think so and aren’t about to abandon their widely successful Foundation project. Having written about Bootstrap several times in the past, I’m going to jump into Foundation today and see what I think.

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

Meet Foundation

So what is Foundation? Zurb describes it as “an easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.”

Right from that description you can tell that Zurb is putting a lot of emphasis on the cross-device aspect of its layout grid. Interestingly enough, the word “responsive” doesn’t appear anywhere on the Foundation site (that I can find), but the benefits are definitely similar: design one project that works everywhere.

Is It Like Bootstrap?

These two projects certainly aren’t identical, but they’re about as close to direct competitors as you can get. Basically, they’re similar enough that if you’re using one, you’re almost certainly not using the other.

Both Bootstrap and Foundation seek to give you all of the tools that you need to quickly perform CSS-based layout and prototyping work with some JavaScript goodies thrown in. They’re also both marketed with a heavy emphasis on clean, minimal design, which is a result of the extensive default styling on things like typography. Even their home pages look remarkably similar:

The Grid

The first thing that I turn to with any framework is the grid. The layout system is often the cornerstone that the entire experience is built on so getting this right is a big deal.

With Foundation, you start with a flexible twelve column grid, which responds well to browser resizes and uses media queries to handle the shift to smaller devices. In Bootstrap, you also have a twelve column grid that makes heavy use of media queries. Here you have the option to choose between fluid and static columns, which is nice.

Implementing the Foundation grid should be a snap if you’ve used other grid systems before. Yes, it does involve the use of non-semantic class names so if you hate frameworks for that reason, this won’t be the one that changes your mind.

The system here is easy enough that you can pick it up almost immediately. Each time you want a new row, create a div with the class “row”. From here you have twelve columns to fill. You can split it in half with two six column divs, cut it in thirds with three four column divs, etc. Simply apply a class that corresponds to the number of columns you’d like to fill in addition to the “columns” class.

<!-- Foundation Grid Syntax -->
<div class="row">
  <div class="six columns">
    <p>Lorem ipsum...</p>
  </div>
  <div class="six columns">
    <p>Lorem ipsum...</p>
  </div>
</div>

</ br>

If we recreate this example in Bootstrap, the syntax is extremely similar, though more succinct. Bootstrap doesn’t require the extra “columns” class so you’ll be able to trim back your markup just a bit. Admittedly though, “span6″ sure doesn’t read as nice as “six columns”.

<!-- Bootstrap Grid Syntax -->
<div class="row">
  <div class="span6">
    <p>Lorem ipsum...</p>
  </div>
  <div class="span6">
    <p>Lorem ipsum...</p>
  </div>
</div>

</ br>

Both grid systems have all of the advanced features that you need: nesting, offsets, pushing/pulling, etc. As with the code above, you’ll find that with these features, Foundation’s syntax is a little more straightforward and easy to read while Bootstrap’s is more succinct.

Who Wins the Grid Battle?

I’m a grid fanatic and really love digging around and seeing what makes these things tick. I’ve built pages with both the Bootstrap and Foundation grids and honestly find them both to be excellent. They’re so similar in approach that I don’t think this will be the deciding feature for anyone trying to choose between the two.

If you hate one of them, you’ll probably hate them both and if you like one of them, it won’t be difficult to switch to the other. It used to be the case that Bootstrap would’ve lost this battle without a second thought, but now that Bootstrap 2 has gone responsive, I’m declaring it a draw.

Basic UI Elements

Both of these frameworks contain pre-styled but customizable UI elements so that you can quickly mockup your app or web page without giving too much thought to how you’re going to structure different pieces.

Let’s start by looking at one of the most basic UI pieces, a button. In foundation, all you really need for a button is an anchor tag with the “button” class applied.

<a href="#" class="button">Button Text</a>

</ br>

However, this is going to create an incredibly simple button. If you want to make it more interesting, each additional piece of styling has another associated class. For instance, below I’ve made a small, blue, glossy button with rounded corners.

<a href="#" class="nice small radius blue button">Button Text</a>

</ br>

The story is the same here as with the grid. Foundation’s style is more verbose, but especially in this case, it allows for an easier to tweak experience. Instead of splitting classes off by what they do, Bootstrap assigns different personalities to each class. So you can choose between “btn-info” and “btn-warning” for different style options.

<a class="btn btn-success" href="#">Button Text</a>

</ br>

As far as styling, I personally like the subtle gradient look that Bootstrap uses better than the glossy Foundation look, but this can be easily customized in both frameworks so it’s pretty much a non-issue.

Forms, Tabs, and Labels Oh My

It’s simply not worth going through every UI element and comparing the syntax, you should get the picture by now. Both frameworks stock you up on the most common UI items so that you can implement them with virtually no heavy lifting whatsoever.

Tabs, navigation, breadcrumbs, forms, labels, tables; if you want ‘em, you got ‘em no matter which of these you’re using. That being said, if you’re looking for quantity, Bootstrap really takes the lead here and seems to just pack in a ton of interesting UI elements. Each framework has some unique pieces not in the other, but Bootstrap wins the numbers game.

JavaScript Goodies

Foundation isn’t only a CSS library, it has some great JavaScript features as well. One of my favorite features is the Orbit slideshow, which is really easy to implement and customize.

All you need to set up a slideshow is a div with some images in it (use alt tags for captions). From here you just point your JavaScript at that div and call the “orbit” function. If you want to go further, there are plenty of options to tweak.

There’s also a pretty cool modal window plugin, some tooltips, tab functionality, dropdown menus, alert messages and some nice form validation. Jumping over to Bootstrap we see most of the same types of items implemented in subtly different ways. Once again though we find that the Bootstrap offering is a little more robust.

Preprocessor Support

One area where Foundation and Bootstrap went their separate ways is with their preprocessor support. Foundation went with Sass and Compass while Bootstrap went with LESS. I started as a LESS fan but have since been won over to the power of Sass so I’m inclined to like Foundation better in this regard, especially given the Compass integration.

Compass is a powerhouse of preprocessor goodness and really makes it easy to code up cross-browser CSS3 with little effort. I’ve always been fairly surprised that Bootstrap chose the LESS route instead.

That being said, it’s interesting to note that Bootstrap pretty nearly serves as Compass for LESS. Just like with Compass, Bootstrap comes built in with all sorts of helpful mixins that help you utilize complicated CSS features with very little hand coding.

Whether you’re using Foundation or Bootstrap, taking advantage of the preprocessor support will make it far easier to customize and extend the framework.

Cut The Crap, Who Wins?

It’s difficult to declare a winner here. As I mentioned previously, Bootstrap 1 was easily inferior to Foundation simply because the layout was purely static and non-responsive. With Bootstrap 2 however, Twitter really upped their game and have built an exceptional toolset and Foundation has some work to do if it’s going to match it.

Bootstrap simply has more to offer from a strict feature list perspective. It’s also more succinctly coded, better organized and far more thoroughly documented. This is on top of the fact that the developer community has thoroughly embraced Bootstrap to the point that superb third party themes, plugins and other extras are easy to find.

That being said, there’s an important question here: is bigger better? Just because Bootstrap seems to have more in it doesn’t necessarily mean that it’s superior. In the world of web design and development, less is often more. Foundation has a simpler, less bloated feel to it that I really appreciated. It really is amazingly easy to download it and begin busting out web pages in no time.

Bootstrap users will chime in here and point out that the bloated argument doesn’t apply because there’s a custom Bootstrap download builder that easily lets you decide what you do and don’t want in your framework.

Which Do You Think Is Better?

You should give both frameworks a test drive to see which you gel with better. However, you came here for an opinion and I’ve got one for you. If you only want to download one of these libraries, go with Bootstrap. I’m not a Bootstrap fanboy and to be honest I haven’t even adopted it into my personal workflow. Further, I see Foundation as the underdog and would love to give it the prize here, but I think it’s got some catching up to do before that happens.

But what do I know? You guys are using these types of tools every day and I want to hear what you think. Is Foundation better than Bootstrap? Why or why not? Would you consider using either of these in your workflow if you’re not already?

“The Best 365 Websites Around the World” is a gorgeous, hard cover, full color book that showcases the best sites from around the world as judged by top-notch design professionals like Fabio Sasso.

Today we’ve got ten copies to give away to our awesome readers. Read on to learn more and see how you can win!

The Giveaway

Awwwards has teamed up with us to giveaway 10 digital copies of their latest book “The Best 365 Websites Around the World”, the ultimate guide for trends & styles in website design, so you can find inspiration for layout, color, style and more.

About Awwwards

Awwwards recognize and promote the talent and effort of the best developers, designers and web agencies in the world. An international jury made up of some of the most important designers, bloggers and Internet agencies evaluate each site by means of a strict system of evaluation, scoring it on a scale of 1 to 10 for its Design, Creativity, Usability and Content.

Check out all the latest Website Awwwards.

The goal at Awwwards is to create a meeting point where web developers, designers and agencies across the world can share experiences, inspiration and knowledge: A community that bids for a more accessible, usable and beautiful Internet.

How to Win

All you have to do to have chance to win is comment on this post in the most original way you can think of. The 10 best will receive their very own copy of “The Best 365 Websites Around the World”. We’ll choose the winners a week from today and update this post. Good luck!

The Option key (that’s Alt for you PC folks) is an amazing little helper for the Photoshop user. For the most part, you can probably get along without it but when you learn to wield it well, you open up tons of time saving features.

Why is it so great? What are all these great things you can do with the Option key in Photoshop? 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.

Shortcut Guide

What the heck are all these funny symbols? If you’re not familiar with keyboard shortcuts, then you might be asking yourself this question as you browse this article. Here’s a quick cheat sheet so you can make sense of it all.

Instructions for Windows Users

For simplicity, I’ll stick to the keyboard shortcuts for Mac users. PC users need only convert Command to Control and Option to Alt.

New Layer With/Without Options

When you’re creating a new layer with the default shortcut, Shift+Command+N, you’ll see a window of options pop up. If you add the Option key to this shortcut, Option+Shift+Command+N, you’ll be able to skip that window full of options and create a new layer right away.

When you’re in the Layers Palette, the opposite is true. Clicking the new layer button won’t give you any extra layer options, but holding down Option while you click will bring up the extra window. This also applies when you’re creating a new Layer Group or copying a layer with Command+J.

Deleting Layers

When you delete a layer by clicking on the trash can button in the layers palette, a little window will pop up asking you if you’re sure that you really want to take such a drastic action.

If you’re an experienced user, you need no such warning. Holding down the Option key while clicking the trash can will allow you to skip the warning (or click the box to never see it again). You can also simply hit “V” to select the Move Tool and then press Delete to kill the current layer.

Selecting Tools

Several of the Photoshop tool buttons have hidden options underneath, a few of which can’t be reached by keyboard shortcuts, leaving you to press and hold the button to wait for the flyout menu to pop up.

There’s a quicker and better way though, just use the Option key! By Option clicking on a tool with hidden options, you can cycle through the different tools associated with that button.

Reset Dialog

When you’re in any dialog with a lot of different settings and sliders, it’s easy to screw stuff up, which leaves you wishing that you could just start over. Fortunately, there’s an easy way to do exactly that. Simply hold down the Option key and you’ll see the Cancel button turn into a Reset button.

This little trick works when applying filters, layer effects and a lot more. Be sure to try it in every dialog you see!

Draw From the Center

Typically, when you draw a shape or make a selection, the point where you click and begin your drag represents the top left corner of the shape area. As you know, holding down Shift will keep your proportions in check, but if you add Option to that you can modify the behavior to draw from the center.

Using this method, the point where you click represents the very center of the object. I use this shortcut all the time as I often instinctively click right where I want the shape to be drawn.

Merge Visible To New Layer

There are several different ways to merge your layers in Photoshop. Command+E will merge two or more selected layers and Shift+Command+E will merge all of the visible layers. The problem with this command is that you lose your original layers if you do it.

The route that I take far more often is to add in the Option key and press Option+Shift+Command+E to merge all of the visible layers into a brand new layer while retaining all of my old layers.

Create a Mask Filled with Black

By default, when you click on the “Add layer mask” button in the layers palette, you’ll get a new mask filled with white, meaning that the layer will be 100% visible. It’s often the case though that you’ll want to paint in an effect gradually with a layer mask and so would prefer for the layer mask to start by turning the layer invisible. To accomplish this, simply hold down Option when you click the mask button.

Create Intense Clouds

Photoshop’s clouds filter seems like a silly feature at first, but you can actually use it create some really cool effects and realistic textures. When you render some clouds, there aren’t really any visible options, but a really neat hidden Photoshop feature is the ability to increase the intensity of the filter by holding down the Option key. Try creating clouds with and without the Option key and you’ll see the huge difference this makes!

Multiple Undos

Odds are you learned this one on your first day of Photoshop but I thought I’d include it just in case. If you just hit Command+Z to undo, you’ll toggle between the last two steps in your History Palette. If you want to take multiple steps back, use Option+Command+Z. To go forward multiple steps, use Shift+Command+Z.

View and Edit a Mask

When create a mask, the transparency of the layer is controlled by where you place white and black pixels. To paint in visibility, use white, to paint out details, use black. Typically, we do this while looking at our actual layer preview but sometimes it can be easier to tweak a mask by editing its pixels directly.

To do this, Option+Click on the little mask preview on the layer and your canvas will pop up a grayscale preview of your mask. From here you can edit the mask using many of your favorite tools and filters.

Unlock Background Layer

This one is super quick and super useful. That dang background layer is always locked by default so you can’t do much with it. To fix this, double click it while holding down Option.

Repeat Filter With Options

In Photoshop, you can always easily reapply the last filter that you used with Command+F. However, this applies the filter without any options using exactly the same settings as last time. If you’d like to repeat a filter but tweak the options, use Option+Command+F.

Fill with Foreground Color

Going to Edit>Fill in the menu is a silly way to fill something. Pros usually just hit Command+Delete to quickly fill a selection or the canvas with the background color. Did you know that you can switch this up and use Option+Delete to fill with the foreground color?

Another cool tip is to hold Option when using the eyedropper tool, which will place the sampled color in the non-selected color space (be that foreground or background).

History Eraser

To write this tutorial, I spent a lot of time in Photoshop just trying random things. One of the coolest things that I stumbled onto that I had no idea even existed was the History Eraser Tool.

As you know, the eraser tool destructively eliminates pixels from a layer. However, it turns out that you actually have the ability to bring them back using this tool as well. Hold down the Option key while using the Eraser tool and you can paint in pixels from a previous snapshot or state in the History Palette. Just be sure to set the source by clicking on the icon to the left of the snapshot preview just like you do with the History Brush.

Gradual “Blend If”

Most people don’t even know what the heck the “Blend If” menu does. You can find it inside of the parent “Blending Options” menu in the Layer Effects Menu. Basically, “Blend If” allows you to blend to layers together according to their lightness and darkness values.

A complete tutorial is out of the scope of this article (maybe I’ll cook up one soon), but suffice to say that grabbing an arrow and moving it will change what the point at which pixels get blended. Holding down Option allows you to split the arrow, achieving a more gradual blend.

Launch with Open Dialog

It used to be that launching Photoshop with the Option key held down gave you an alternate splash screen. These days it simply takes you right into an Open dialog window, which isn’t nearly as cool in my opinion but is perhaps far more useful.

Update: I was wrong about the alternate splash screen. Go to “About Photoshop” with the Command key held down to find it. I’m glad it’s still around! Thanks to @jonmfarmer for this tip.

Alternate Tool Behaviors

There are a ton of other alternate behaviors that result from using a tool with the Option key held down. Here are some of my favorites.

• Option dragging with the move tool makes a copy.
• Option dragging with the Polygonal Lasso allows you to temporarily use the normal Lasso Tool.
• Holding Option with most of the selection tools allows you to subtract from a selection.
• Holding Option while using the brush tool gives you a quick Eyedropper. This also works with the Gradient Tool and the Shape Tools.
• Holding down Option while using the Blur Tool Sharpens and holding Down Option while using the Sharpen Tool Blurs.
• Holding down Option while using the Burn Tool Dodges and holding Down Option while using the Dodge Tool Burns.
• Holding down Option while using the Pen Tool allows you to reposition a handle.
• Option click on the canvas with the type tool to set the text box height and width manually.
• Holding down Option while using the Hand Tool changes it to a Zoom Out Tool. This also works with the Zoom Tool.

Other Great Option Shortcuts

Even after all of this, we still haven’t covered all of the great stuff that the Option key can do! There’s just so many great tweaks and functionality changes that you can access with it. Here are some not so hidden shortcuts that you might have missed:

• You know that Command+W closes a window, but did you know that Command+Option+W closes all windows?
• Adding Shift+Option to a Print Command prints a single copy (Option+Shift+Command+P).
• Option+Command+A selects all layers.
• Option+Command+G creates a Clipping Mask.
• Holding Option while clicking on a color swatch or style deletes it.
• Holding Option while dragging text-based value scrubbers like Opacity allows for fine tuning.
• Option+Double Click on a layer brings up the properties dialog.

What Did I Miss?

Well there you have it, more Option key tips than you’ll know what to do with. Hopefully, these weren’t all old news to you and you picked up a trick or two.

I’m sure there are some great ones that I’ve missed so be sure to leave a comment and let me know what cool Option shortcuts and hidden features you use on a regular basis.

A ton of discussion lately has been given to preprocessors. These incredibly useful tools make coding easier, faster and more maintainable, but they’re certainly not for everyone. Whether or not you’ve jumped on the preprocessor bandwagon, you should give a fresh look to an old favorite that helps you dramatically cut your coding time without reinventing your workflow with compilers and other complications: Zen Coding.

With Zen Coding, you can type a little and output a lot, just like with a preprocessor like Jade or Haml, only it expands instantly into the vanilla HTML that you love. For those that are new to the concept, I’ll walk you through how Zen Coding works and show you some of my favorite tricks, then end with a brief tutorial on getting Zen Coding up and running in Sublime Text 2.

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

Zen Coding vs. Preprocessors

Zen Coding has been around for a number of years, so several of you reading this are bound to think that this is too old school to merit a discussion in 2012, but I’m willing to bet that lots of new coders have never given it a shot.

I’ll start by saying what Zen Coding isn’t: it isn’t a preprocessor in the same vein as LESS, Sass, Stylus, Jade, Haml and the like. There are similarities though. Like all of these, Zen Coding has a unique syntax that is aimed at simplifying the process of coding HTML and CSS.

However, unlike those other tools, Zen Coding doesn’t add any special features such as variables or mixins, nor does it require any extra files which have to be run through a compiler. Zen Coding outputs HTML and CSS immediately, no one has any possible way of even knowing that you used it by looking at your code.

Perhaps a closer parallel is TextExpander, an app that “expands” brief text snippets into larger ones. Basically, Zen Coding is like a giant set of prebuilt text expansion macros built specifically for HTML and CSS coders.

How Does It Work?

Enough explanation, let’s jump in and explore the actual syntax behind Zen Coding. If you’re at all familiar with HTML, CSS and the concept of the DOM, I’m sure you’ll pick it up immediately.

Let’s start with the HTML side because I think that’s where almost all of the real benefit lies. As our first basic example, let’s say we wanted to create a simple div with an ID of container, here’s how we would do it:

If you’re familiar with Haml, you’ll immediately see that some of the same conventions are used here. First I typed the name of the element that I wanted, in this case a div, then I used the CSS-like syntax of inserting a hashtag to indicate that I’m referring to an ID. Finally, I followed the hashtag with the actual text that I wanted assigned to the ID: “container”.

As you can see, I very nearly cut my required typing in half for this particular snippet of code. I didn’t have to bother with any starting and closing brackets or quotes, instead the structure has been stripped to a bare minimum.

We can use this knowledge as a jumping off point for other similar snippets. For instance, let’s say I want to create a paragraph with a given class. The syntax is pretty much the same, only I use a period to indicate a class (again, just like CSS).

Chaining, Siblings and Children

Saving a handful of characters is quaint, but what if you’re a serious developer who can type all of that in your sleep in the span of a second? Is this Zen Coding stuff really going to be all that useful?

The answer is a resounding “yes.” In fact, the more complex your code structure becomes, the more helpful you’ll find Zen Coding to be! The real power here lies in the ability to chain together different elements.

As you can see, it’s easy to create both children and siblings with the Zen Coding syntax. Sticking with the CSS theme, siblings are connected with the “+” symbol and children use the “>” symbol.

This opens up a massive amount of time and effort saving potential. Play around with this for a few minutes and your brain will quickly begin to think of the structure of HTML documents this way. Before you know it, you’ll be typing long, advanced sequences that expand into nice, fat chunks of code.

Zen CSS

Zen Coding isn’t just for HTML, it also helps you code CSS. To be honest, I don’t use this aspect of Zen Coding too much simply because most decent text editors have such good CSS auto-complete that I spend very little time manually typing out properties anyway (also, CSS auto-complete tends to compete with and override Zen Coding). The same argument could be said of HTML, but here I find Zen Coding to be much faster than the auto-complete route.

Still, this is all my personal opinion, you might find that you absolutely love the CSS side of Zen Coding. Here’s an example of how it works:

As you can see, the CSS side usually involves you typing out the initials of the property, followed by a colon and the initials of the value to assign to the property. As you might guess, there are a ton of CSS properties supported so memorization here is much trickier than with the HTML side. Be sure to check out the cheat sheets.

My Favorite HTML Macros

The Zen Coding cheat sheet can be pretty overwhelming given that there’s so much in it, so to help get you hooked right from the start, here are some of my favorite macros.

HTML5 Starter

Want to start a new HTML document with a clean slate? Simply type “html:5″ and you’ll be off to a strong start.

<!--Type This-->
html:5
 
<!--Get This-->
<!DOCTYPE HTML> <html lang="en-EN">
<head>
  <title></title>
  <meta charset="UTF-8"> </head>
<body>
</body>
</html>

</ br>

Stylesheet Include

Once you start that fresh HTML file, you’ll want to toss in a stylesheet. Fortunately, you can do so in a jiffy.

<!--Type This-->
link:css
 
<!--Get This-->
<link rel="stylesheet" type="text/css" href="style.css" media="all">

</ br>

JavaScript Include

One more for the head portion of your document. After you’ve gotten the stylesheet worked out, it’s time to toss in the JavaScript.

<!--Type This-->
script:src
 
<!--Get This-->
<script type="text/javascript" src=""></script>

</ br>

Anchor Tags

One of my first questions regarding Zen Coding was, “how do links work?” Haml is actually pretty awkward when it comes to any sort of inline elements and attributes so I was worried that this might be the same.

However, instead of coming up with a complicated scheme for inserting the link text and URL, you simply type “a” and the core structure of the anchor is created and made ready for you to fill in. It could probably be a little better, but at least it’s easy to remember!

<!--Type This-->
a
 
<!--Get This-->
<a href=""></a>
 
<!--Type This-->
a:link
 
<!--Get This-->
<a href="http://"></a>

</ br>

Multiply Elements

Zen Coding has a handy multiplier trick that makes it easy to create a certain number of a specific elements. Once again, the process is very intuitive, just use the “*” symbol and the number of the element that you’d like to create.

<!--Type This-->
p*3
 
<!--Get This-->
<p></p>
<p></p>
<p></p>
 
<!--Type This-->
ul>li.someclass*4
 
<!--Get This-->
<ul>
  <li class="someclass"></li>
  <li class="someclass"></li>
  <li class="someclass"></li>
  <li class="someclass"></li>
</ul>

</ br>

Increment Number

Another really cool trick that you can pull off while multiplying elements is to include an incrementing number in the class or ID value. To do this, you implement the “$” symbol.

<!--Type This-->
ul>li.someclass-$*5
 
<!--Get This-->
<ul>
  <li class="someclass-1"></li>
  <li class="someclass-2"></li>
  <li class="someclass-3"></li>
  <li class="someclass-4"></li>
  <li class="someclass-5"></li>
</ul>

</ br>

How Do I Make This Work?

Zen Coding is supported in tons of different text editors and is occasionally even built in, as is the case with Espresso. Be sure to check the Zen Coding Google Project Page to download the plugins for your editor.

How To Install Zen Coding on Sublime Text 2

I’ve definitely been bitten by the Sublime Text bug. I simply love this text editor and can’t get enough of its extensibility and flexibility. One quick and easy way to make Sublime Text 2 even better is to add Zen Coding support.

To do this, you’ll need to grab the free Sublime Package Control download from Will Bond. This is an awesome package manager that makes finding and installing Sublime text plugins incredibly easy.

Once you’ve got that installed, hit Command+Shift+P (Command = Control for PC folks) to bring up the Command Palette and type the word “install”. You should see an item that says “Package Control: Install Package”, hit enter on that option.

From here, type “Zen Coding” and you should see the package. Simply hit enter again and the package will be installed (restart if it doesn’t take effect). Start a new HTML document, type out an abbreviation, hit tab, and watch the magic (make sure your syntax is set to HTML or it won’t work).

Sublime text is already a fantastic editor and using it conjunction with Zen Coding just makes me smile. It’s a killer combination that you won’t want to miss out on.

Do You Use Zen Coding?

To be honest, I really missed the boat on Zen Coding when it was popular a couple of years ago. I always found the Espresso integration to be a little clunky and since that was my editor of choice, I never explored it further. Now that I’m on Sublime Text I just love how quickly I can use Zen Coding to bust out a complex HTML structure without the hassle of tags, returns and the like.

What do you think? Do you use Zen Coding for your HTML? Do you prefer it over using a preprocessor to do something similar? How about with your CSS? Do you think Zen Coding is useful for typing CSS or are you fine with auto-complete?

You hear the phrases tossed around by everyone today – from amateur photographers to the iPhone salesman to some of the world’s most acknowledged visual creators and designers. But what do image size specs really mean? And what should you use?

Simply, it all depends on your project. Knowing what medium you are creating for and how your images will be used is key to sizing and picking the right number of pixels or DPI. Before you begin your next project, though, make sure you are familiar with all the image-quality jargon.

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

Pixels

Picture elements, or pixels, in web design refer to the smallest units on a grid displaying an image. Pixels are measure by pixels per inch, or PPI. The more pixels per inch, the sharper an image will appear because of the size of each pixel. Pixelation occurs when the number of pixels per inch in an image is low, causing each pixel to have visible edges.

PPI is important because it is a measure of image quality. Using image sizing tools in photo editing software, you can resample images (change the number of pixels in the document) or resize images (change the actual size of each pixel in the document but not the overall number of pixels). In Adobe Photoshop, the “Image Size” menu allows you to resize or resample. Keep an eye on the number of pixels (the top section of the window) versus the “Resample Image” option (in the bottom left corner).

On Screen and for the Web

The web standard for images is 72 pixels per inch. At 72 PPI, images will render nicely (as long as they are of good quality) and should not appear pixelated or distorted. Keep in mind that your full-size photo should be wide enough to fully occupy the frame. (If you are in doubt, always size your photo a little on the large side.)

Think about your Facebook timeline photo, for example. The cover photo is 851 pixels wide. At 72 pixels per inch, your photo would need to be nearly 12 inches wide to fill the space without causing pixelation.

PPI has an impact on text as well. Just as a higher number of pixels per inch can make a photo appear sharper, it can also make text easier to read. Fonts with higher PPI are legible on screen at even smaller sizes than lose with lower PPI. Remember, text can appear pixelated in the very same way images can.

Finally, when thinking about pixels for web design, you must consider the ever-changing browser size. Unlike a few years ago when most everyone used a standard shape and size browser for most applications, today’s users each have a set of preferences that you may want to take into account. When developing fluid-with layouts, allow for images to grow proportionately with the browser but not beyond actual size. This will maintain the integrity and quality of your images.

For Print

While PPI can help you determine the quality of an image, it really has little else to do with actual printing. For print specifications, understanding dots per inch is more relevant.

DPI

DPI means dots per inch. The term was developed as a method to explain printing quality and resolution. When an image is printed, it is made up of hundreds of thousands of tiny dots that are overlaid with each ink color. The inks mix in each dot to form a wide spectrum of visible color. The number associated with DPI is the number of printed dots in each inch. The higher the DPI, typically the better and smoother the image looks.

Increasingly though, people use DPI to refer to everything and often confuse DPI with pixels or PPI. (Photo software can add to this confusion as well, using the term in dialogue boxes.) But unless you are printing your project, DPI should not be a real concern.

On Screen and for the Web

When you are looking at images on screen, it is unlikely that you will be able to tell the difference between an image that is 100 DPI and an image that is 300 DPI because monitors just don’t render images in dots.

DPI is irrelevant when working on web-based projects. It is only important for items that will cross platforms. For example, a company logo may be used on both the company’s website and on business cards. A copy of the image with a high DPI will be important to have on file for the image that appears on the business cards.

For Print

This is where the importance of DPI comes in. Every printer will specify a necessary resolution for print jobs – 300 DPI is a typical resolution for paper printing. It is important for your final project to meet DPI specifications so that the printer does not enlarge or shrink your design, which could alter the look and quality of the final product.

DPI also comes into play when converting a printed item to a digital format. The higher the DPI when an image is scanned, the higher quality it will be on screen. In general, photo quality is considered to be a 200 DPI scan at actual size. Consider using a higher scan DPI if you plan to enlarge or reprint an image.

Megapixel

Since we are talking about images and image quality, it is important to note how all of this relates to what might be the most well-known form of a pixel – the megapixel. Megapixels are a unit used by the digital camera industry to help you understand how large or high quality of a photo you can take with a certain camera. When you boil it down, one megapixel is equal to one million pixels.

Digital images – no matter the source – are made up of pixels. Megapixels just help you understand the top resolution and quality of a photo your equipment can take.

Conclusion

Using the proper PPI or DPI specs for your next design project can impact overall quality. Remember to use PPI when working on digital applications and DPI when you are preparing a project for print.

Keep in mind that both units of measure can impact image quality. If you are unsure about the necessary pixel- or dot- resolution, opt for quality over file compression. You can always shrink something later with no visual loss.

Image Sources: Rego – d4u.hu, mamojo, Martin Cathrae, daveynin and skyseeker.

Recently, we took a dive into the very core concepts behind CSS layout and explored the differences between absolute and relative positioning. We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something?

There are a bunch of different types of web elements and layout situations, each calling for a unique solution for centering (both vertically and horizontally). Today we’ll go over a bunch of these scenarios so you can wrap your mind around how they work and come away with the confidence to center anything!

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

Who’s This For?

I’ve gotten a lot of commenter feedback lately from designers who struggle with the basic methods and concepts of layout in CSS. The general consensus among many of those new to CSS is that they simply “fiddle” with the code until everything finally works.

Having been there quite a few times myself, I know that this is an immensely frustrating period of your professional growth. Knowing that the answer is right there in front of you and not being able to figure it out is excruciating and time consuming.

If this sounds familiar, hopefully I can help ease you out of this period with some solid and practical advice for how to handle some common layout scenarios. If you’re a CSS ninja who can code a website blindfolded, this article probably isn’t for you. If you’re a designer who just wants a better understanding of how to take what’s in your Photoshop file and turn it into CSS, you’re in the right place. Let’s get started.

Horizontally Center an Element

The first scenario that we’ll attack is by far one of the most common: centering an element horizontally in the viewport or browser window. To get started, let’s bust out a simple div and give it some basic styling.

As you can see, by default, our div pops up in the top left of the viewport. The trick here is that we need the div to stay in the center of the window, no matter what the window’s size is currently. That means that we can’t use absolute positioning to place it at a specific point because that won’t be centered on any other possible window sizes.

Instead what we need to do is leverage the “auto” value that can be applied to margins. Here’s how this works:

As you can see, applying a single line of CSS tossed our box straight to the center of its parent, which in this case is the body. To accomplish this, I used a bit of CSS shorthand. If you need a refresher, margin shorthand starts at the top and works its way around clockwise.

You can shorten this even further if you only have two values that you need assigned. In this case, the first slot will apply to the top and bottom margins while the second slot will apply to the left and right margins. Here’s another look at our centered div, this time with the margins declared using three separate but perfectly equivalent methods.

As you can see, our element is void of top and bottom margins, but the left and right are set to auto, which keeps the item perfectly centered.

Things To Keep In Mind

There are some important things to remember about using the auto margins trick. First of all, you must have a specific width declared for the element that you’re centering. The height declaration is not necessary, you can allow the content to determine the height if you wish, which is the default setting, but the width must always be set.

It’s important to note that while this trick will work on most block level elements, not just divs, it won’t help you out with vertical centering. As an example, let’s throw a paragraph inside of a div, then attempt to center that paragraph in the space.

div {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: auto;
}
 
p {
  width: 60%;
  margin: auto;
  font: 14px/1.5 Helvetica, sans-serif;
}

</ br>

As you can see, I have auto margins set both on the paragraph and its parent div. This centered everything nicely horizontally, but it didn’t have any effect on the vertical position.

Center An Absolutely Positioned Element

The method above works to automatically center one item inside another, but the method assumes that you’re using the default positioning context: static. If you have absolute positioning applied, this method goes out the window.

Using the absolute and relative positioning methods we learned last week, we can apply a simply formula to solve this issue.

Here we see that on an absolutely positioned item contained inside of a relatively positioned item, we need to set the left property by plugging some numbers into this formula. Here’s a test case:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
}

</ br>

Let’s see if we can center the black box horizontally. Using our formula, we can see that the left property needs to be set to 100px.

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
  left: 100px;
}

</ br>

With this code, we’ve set the distance between the left side of the box and the edge of its parent container to 100px, which centers it perfectly.

With Fluid Width

The method above only works if the parent container has a static width. Given the popularity of responsive design though, more and more containers are going the fluid route lately. This means that we’ll need another way to center the child that isn’t dependent on the width of the parent.

To accomplish this, we need to use a percentage for the left value. The obvious answer is to use 50%, but that won’t really work because you’re not accounting for the width of the element that you’re centering. To make it work, we need to add in a negative left margin of half the width of the child element.

Using this logic, we apply a left margin of negative fifty pixels along with a left value of 50% and our div is once again perfectly centered on the x-axis.

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -50px;
  left: 50%;
}

</ br>

It’s important to note that this would also work if our child element had a fluid width. We use the same steps as before and come up with something like the following:

.container {
  height: 300px;
  width: 70%;
  background: #eee;
  margin: 10px auto;
  position: relative;
}
 
.box {
  height: 100px;
  width: 70%;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: 0px 0 0 -35%; /* Half of 70% /*
  left: 50%;
}

</ br>

Dead Center an Element

Now that we have a few simple and complicated centering methods in our tool belt, it’s time to tackle the puzzle of perfectly centering an element both horizontally and vertically.

Fortunately, to pull this off, we can use the same method that we just learned, we just have to account for height. This time around we’re also going to center both the parent and the child both vertically and horizontally. Here’s the code to pull it off:

.container {
  height: 300px;
  width: 300px;
  background: #eee;
  position: absolute;
 
  margin: -150px 0 0 -150px;
  left: 50%;
  top: 50%;
}
 
.box {
  height: 100px;
  width: 100px;
  background: #222;
  position: absolute;
 
  /*Centering Method 2*/
  margin: -50px 0 0 -50px;
  left: 50%;
  top: 50%;
}

</ br>

There are a few things that you need to notice here. First, this time both the parent and the child are absolutely positioned. From here, I used our negative margins trick with the left property on the container div, then did the same for the box div.

The result is that our content is completely centered and will stay that way as the browser changes size in any direction (even vertically!). Click on the image below to tinker with a live demo.

Centering Text

For my next trick, I’ll teach you something cool about centering text. We’ll start with a simple h1 element inside of a container div.

Now, I’m sure that you already know how to center this text horizontally in the space. It’s typically one of the first things you learn in CSS. Just set the text-align property to center.

.container {
  height: 400px;
  width: 400px;
  background: #eee;
  margin: 50px auto;
}
 
h1 {
  font: 40px/1 Helvetica, sans-serif;
  text-align: center;
}

</ br>

Easy right? But now let’s say we want to center this line of text vertically as well. If this were a paragraph, we would probably take the methods above into account, but since it’s only a single line, we can use a nifty trick.

All we have to do is set the line-height property to the height of the container. I accomplished this below using the shorthand font syntax.

.container {
  height: 200px; /*Set line-height to this value*/
  width: 400px;
  background: #eee;
  margin: 150px auto;
}
 
h1 {
  font: 40px/200px Helvetica, sans-serif;
  text-align: center;
}

</ br>

Warning: This trick only works with a single line of text, and is a bit hacky so it may not be appropriate for all situations.

Centering a Background Image

The last thing that we’re going to learn to center is a CSS background image. To get started with this, we’ll create another container div, but this time we’ll keep in empty and toss in an image using CSS.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
}

</ br>

As you can see, the default place for an image to appear if no repeat is set is the top left. It turns out though that you can move it to one of nine different preassigned slots. These are shown below:

We accomplish this movement through the use of the background-position property. Simply call this property and set any of the values listed above.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat;
  background-position: top center;
}

</ br>

As an alternative, we can use the shorthand syntax for this. Simply toss in one of the values at the end of your stream of values on the background property.

.container {
  height: 300px;
  width: 300px;
  margin: 150px auto;
  background: #eee url(http://lorempixum.com/100/100/nature/4) no-repeat center;
}

</ br>

Conclusion

There you have it! You should now be completely confident in your ability to tackle almost any centering situation with CSS, from dead centering a div to vertically centering a line of text within its container and beyond.

Reach out to us on Facebook or Twitter and let us know if you found this information to be helpful and if you have any questions.

Client testimonials are a popular website feature. They bring credibility to a company and instill a sense of trust. If your other clients love you so much, I might too!

As a fun experiment, today we’re going to set out to build a cool little quote section that will rotate between multiple different quotes using only CSS. Along the way, we’ll learn all about how to plan and create multi-step keyframe sequences. 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 HTML

To start this project, we need to decide on the structure of our quote. Typically, a client quote will have three pieces of text: the client’s name, where they’re from and what they said.

With this in mind, we can create a quote container that has three different pieces. The header will hold the client’s name, the small element will presumably hold the name of the company the client is from or some other related information, and the paragraph with hold the quote text.

<div class="quote">
  <h3>John Smith</h3>
  <small>Design Shack</small>
  <p>"This is the quote text."</p>
</div>

</ br>

Because we used three different elements, we won’t need any additional hooks and should be able to easily target each piece of the quote in our CSS. As a side note, I arbitrarily chose an h3 here simply because h1 and h2 are typically used up for other purposes. Feel free to change this to whatever you like.

Now that we have our structure figured out, it’s time to expand it into three different quotes. To showcase the versatility of this project, I decided to fill my text with the last words of a few famous people. A little morbid, but as a placeholder it’ll do!

<div class="container">
  <div class="quote">
    <h3>Emily Dickinson</h3>
    <small>1830-1886</small>
    <p>"The fog is rising..."</p>
  </div>
 
  <div class="quote">
    <h3>Oscar Wilde</h3>
    <small>1854-1900</small>
    <p>"And now, I am dying beyond my means."</p>
  </div>
 
  <div class="quote">
    <h3>Thomas Edison</h3>
    <small>1847-1931</small>
    <p>"It is very beautiful over there."</p>
  </div>
</div>

</ br>

Starter CSS

Once you have your HTML worked out, jump over to your CSS and enter something similar to the code below. Basically, I set an interesting background pattern and defined the container that will hold the quotes.

* {margin: 0; padding: 0;}
 
body {
  background: url('dark_geometric.png'); /*http://subtlepatterns.com/?p=1045*/
}
 
.container {
  height: 210px;
  width: 940px;
  margin: 0 auto;
  position: relative;
}

</ br>

Quote Styles

Next it’s time to style the quote divs. I used absolute positioning here so that all three quotes will occupy the same space. By default, they’ll create a vertical stack but we don’t want that at all. In our finished product, one quote will fade out, then another will fade in. Consequently, we’ll want them to be in the same spot.

I also set the opacity to zero so that all of the quotes will be hidden by default. Opacity is a quirky property that’s really a headache to work with. We’ll talk about this a little more later. The thing to note now is that, you won’t see anything with the opacity at zero so you’ll want to temporarily comment this part out while you style the quote section.

.quote {
  position: absolute;
  margin: 70px 30px;
  height: 80px;
  top: 0px;
 
  opacity: 0;
  -moz-opacity: 0;
  filter:alpha(opacity=0);
}

</ br>

Quote Text Styles

Now that we have the general quote container styled, it’s time to grab each piece of text and style it individually. For this demo, we’ll make the text nice and big so set the h3 to 55px and the small to 18px, then use Helvetica for the font-family.

.quote h3 {
  font: 300 55px/1.2 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}
 
.quote small {
  font: 300 18px/1.0 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
}

</ br>

Our task with the paragraph is much more complex. Not only do we need to style it into a box, we need to remove it from the stack and stick it to the right of the other content.

To make this happen, we need to do a number of things so I’ve divided my styles for this into three different steps (shown below).

.quote p {
  background: #fff;
  font: italic 25px/1.5 Helvetica, sans-serif;
  text-align: center;
 
  position: absolute;
  left: 450px; top: -15px;
  padding: 30px;
  width: 400px;
 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 
}

</ br>

For the first step, I handled the “icing” or standard visual stuff. I made the background white, set the font and aligned the text to the center. Next I handled the positioning and size of the actual box through the use of some padding and absolute positioning. I finished this all off with an optional border-radius, which rounds our corners off nicely.

Progress Check

If we check on our progress by making sure one quote is visible, we’re looking pretty good! However, our quote is sitting in a plain old box. We’re missing the little triangle that makes it look like a speech bubble.

Adding the Triangle

To add in that little triangle, we have to turn to the :after pseudo element. Basically, we create an empty element, position it to the left side, and apply some tricky border voodoo.

.quote p:after {
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  right: 100%;
  top: 50%;
  margin-top: -10px;
  border: solid transparent;
  border-right-color: #fff;
  border-width: 10px;
}

</ br>

As you can see, that gives us the effect that we’re going for, pretty neat eh?

Animate That Sucka

Now that we’ve got our visual styling and positioning figured out, it’s time to come up with a way to fade out one quote and pop in another and repeat this process on an infinite loop. We could and should use jQuery, but today we’re trying to figure it out with pure CSS so we’ll turn to keyframe animations.

I’m going to be brutally honest here, I do this type of stuff almost every day and it still took me forever to figure out the proper sequence to use to make the keyframes fade in and out at the right time. I fiddled and fiddled and kept having awkward overlaps and results that weren’t at all what I wanted.

I tell you this so you know that you’re not alone if you still find yourself hitting walls that are difficult to overcome. Eventually, I did get my slow brain to wrap around the concept though.

I’m a visual thinker so I made a crude chart to see how it all works. Basically we want to stack these animations so that only one quote is visible at any given time. To pull this off, we’ll put create a thirty second animation and split it into three parts. The first and last parts will have an opacity of zero and the second part will have an opacity of one.

As you can see, we’ll need to delay the second animation’s start time by ten seconds and the third animation’s start time by twenty seconds. This way, if you draw a vertical line at any point of the chart, no more than one quote is showing at the same time.

Now, when I implemented this, I didn’t like how long it took the quotes to fade in and out. I want a quick fade in, a long period of visibility and a quick fade out. To do this we simply need to add a couple of more keyframes. Here’s the sequence I came up with:

@-webkit-keyframes "quoteshift" {
 0% {
   opacity: 0;
 }
 2% {
   opacity: 1;
 }
 31% {
   opacity: 1;
 }
 33% {
   opacity: 0;
 }
 100% {
   opacity: 0;
 }
}

</ br>

We only need to set up the one sequence, but we apply it to the three separate quotes in three different ways. Basically, the only difference is the delay value, which makes the animation wait a few seconds before beginning.

.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
}

</ br>

That’s all there is to it! When the page loads, the first quote will fade in, then fade out as the second quote comes in (and so on).

Browser Compatibility

At this point you’re probably screaming at your computer screen that I’m an idiot who only uses Webkit prefixes. In truth, I only did this to keep things understandable. Now that we’ve got it all figured out, we can use our good old friend Prefixr to expand it out. When we do this, here’s the giant chunk of code that gets spit out:

/*QUOTE ANIMATION*/
.quote:nth-child(1) {
  -webkit-animation: quoteshift 30s 0s infinite linear;
  -moz-animation: quoteshift 30s 0s infinite linear;
  -ms-animation: quoteshift 30s 0s infinite linear;
  -o-animation: quoteshift 30s 0s infinite linear;
  animation: quoteshift 30s 0s infinite linear;
}
 
.quote:nth-child(2) {
  -webkit-animation: quoteshift 30s 10s infinite linear;
  -moz-animation: quoteshift 30s 10s infinite linear;
  -ms-animation: quoteshift 30s 10s infinite linear;
  -o-animation: quoteshift 30s 10s infinite linear;
  animation: quoteshift 30s 10s infinite linear;
}
 
.quote:nth-child(3) {
  -webkit-animation: quoteshift 30s 20s infinite linear;
  -moz-animation: quoteshift 30s 20s infinite linear;
  -ms-animation: quoteshift 30s 20s infinite linear;
  -o-animation: quoteshift 30s 20s infinite linear;
  animation: quoteshift 30s 20s infinite linear;
}
 
/*KEYFRAMES*/
@keyframes "quoteshift" {
 0% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 2% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 31% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
 }
 33% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 100% {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
 }
 
}
 
@-moz-keyframes quoteshift {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-webkit-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-ms-keyframes "quoteshift" {
 0% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}
 
@-o-keyframes "quoteshift" {
 0% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 2% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 31% {
   filter: alpha(opacity=100);
   opacity: 1;
 }
 33% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 100% {
   filter: alpha(opacity=0);
   opacity: 0;
 }
 
}

</ br>

As I mentioned before, our use of the opacity property is a little suspect because opacity support is a mess. Fortunately, Prefixr takes the lead on this and tries to ensure that our code is primed to work on as many browsers as possible. Unfortunately, it does go a little overboard by inserting all of those filter properties where they aren’t necessarily needed, so some clean up might be a good idea.

Selectivizr

We used some advanced selectors in the tutorial, so while we’re on the topic of browser support, I should point out that you’ll need to add Selectivizr and jQuery to your project to make sure older browser understand these.

Keyframe Support

Here’s the kicker, we’ve gone through all of this to make sure that we’ve maxed out our browser support on selectors and opacity, but in the end IE is still going to refuse to play along because there’s no keyframe support until IE 10.

Obviously, JavaScript is going to be the answer here if you’re going to use this in the real world. You can either do the whole thing in JS or simply use it as a backup for browsers that don’t support keyframes.

Demo

Here’s the live demo. Be sure to wait a while when you launch it, remember that the entire animation takes thirty seconds!

Demo: Click here to launch

Conclusion

Keyframes have come a long way since the days when they were only supported by Webkit browsers. However, keep in mind that because of our old friend IE, they’re still more in the realm of “fun to play with” than something you should bank on for important projects.

Leave a comment below and let us know if you enjoyed this tutorial and how you would improve it!

Here at Design Shack, WordPress is our bread and butter, but in the world of blogging platforms, we have lots of love for Tumblr as well. It’s simple, gorgeous, and simply enjoyable to use.

Today we’re going to take a look at what makes a great Tumblr theme. With over 1,300 options in the Tumblr theme garden, it can be difficult to stand out. Why do some themes catch so much attention while others are ignored? Good design holds the answer.

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

#1 Type Is Everything

If you want to create a popular theme, or even just an impressive theme for your own personal use, don’t let the type be an afterthought. With Tumblr themes, type is a huge part of the overall visual aesthetic. It defines the personality of the page and grabs the attention of very specific types of browsers.

As an example, consider how the headline in the theme shown above differs from that shown below. You have sleek and understated compared to bold and intense. Even if all other design features were constant, the type alone would drastically set these themes apart.

One excellent way to boost the appeal of your theme through type is to integrate various font services. For instance, the Candor theme shown below features Typekit and Google Web font integration. This gives users the ability to customize the type far beyond what would typically be available in a blog environment.

#2 Challenge the Status Quo

As a designer, it’s extremely important to keep your audience in mind and throughout this post I’ll continually discuss some of the quirks and intricacies of the unique user base that Tumblr enjoys.

One thing that draws people to Tumblr is that it’s a place where you can easily find something that’s very different than the traditional blog model. The popularity of themes like Organ shown below proves that this is the case.

This theme is completely out of realm of what you would expect in a blog page. There are plenty of others that follow this path as well. The theme below for instance, shows one post at a time and requires users to use their arrow keys to navigate.

The unique ideas go on and on. The theme below takes all of the posts and sticks them into a messy stack of Polaroids, which arrange into a neat grid when you hover over them.

The obvious implication here is that if you want to design a popular Tumblr theme, one great way to go about it is to create something unlike anything else that’s out there. These users really appreciate creativity and will download your theme like crazy if that’s what you’re offering.

#3 Customization Options Rock

Take a look at these three Tumblr theme previews and see if you notice a trend:

As I’m sure you saw, the customization options are a big deal. They’re touted above all else and the designers call out to you with impressive numbers: 60+ ways to customize, 80+ options, etc.

Once again, we see that the Tumblr user base is an expressive bunch. Not only do they want you to give them a great looking theme, they want to be able to make it their own. Earlier we saw an example of some built-in font customization options. Start here and then go much further. Provide color options, work in a personalized header or sidebar with information about the author, let the user rearrange the columns; the possibilities are endless.

As you customize, just remember that the theme should also be great with no effort. Make sure the personalization options are there for those who are interested, but don’t get in the way of those who aren’t.

#4 Go Responsive

To be honest, I didn’t expect the Tumblr theme market to be so current with modern web design practices. In my search I came across a number of responsive themes like the one shown below.

The fact that responsive Tumblr themes exist and are gaining in popularity shows that the Tumblr user base is either decently educated in web design or are at the very least, interested in making their blog as cross-platform as possible.

Your typical blog owners will probably visit their own page on their tablets, smartphones, laptops and desktops and they’ll definitely go for themes that look great on all of these devices. Responsive design is everywhere and a time is already approaching when it will become more of an expectation than a bonus feature. Are you ready for that day?

#5 Pay Attention To Trends

As we’ve already shown, Tumblr users seem pretty well aware of recent design trends. You can use this to your advantage to create themes that will be instantly popular. As an example, consider the popularity of Pinterest and how it has led to the wildfire like spread of masonry style layouts. Tumblr theme designers didn’t take long to jump on board this train and start dishing out themes that utilize a layout and aesthetic that appeals to Pinterest lovers.

If you’re looking to create a popular theme, look around the web and find some practices that are becoming very popular but haven’t necessarily caught on in the Tumblr market yet. What will the next layout fad be?

#6 Make a Beautiful Background

Minimal, white background themes flood the Tumblr theme market, many of which are super popular. It’s becomingly increasingly difficult to stand out in that niche though as all of the options start to look the same after a while.

One solution that proves extremely successful for some designers is to run to the opposite end of the spectrum and invest a lot of time into building a stunning background for their theme.

Tumblr themes tend to utilize a ton of whitespace so the background graphic can be a very important place to showcase creativity and a unique aesthetic.

Bottom line: don’t underestimate the power of a good background in earning you downloads. Even if you don’t have a graphic that can stretch all throughout a page, you can pour you effort into a header graphic with similar results.

#7 Come Up With a Visual Theme

One tactic that seems to work pretty well is to decide on a metaphor or theme for the template that you’re building (here “theme” refers to a specific aesthetic such as “desert” or “fantasy”). This is a great way to get your mind “into the zone” from a creative point of view and leads to some interesting results that users love.

For inspiration, look over the “Space Traveler” theme below. This gorgeous piece of design uses planetary orbital charts and compass rose graphics to create a positively charming aesthetic.

What visual idea can you run with that will make your theme both unique and enticing? Consider places that you’ve been, specific film or literature genres, foods; anything that you can turn into a specific look.

#8 Choose a Target Audience

No matter what you’re designing, it’s vitally important to keep your target audience in mind. This gets tricky when you’re designing general use templates though because your intended audience is pretty much anyone! Aside from the Tumblr user aspects that we’ve already been discussing, how can you further target your design to a specific set of users?

One of the best answers is simply to pick a group of people and intentionally target them. If I’m a photographer for instance, I might run a Google search for Tumblr themes for photographers. Now, tons of generic themes might work perfectly for what I need, but what I’ll find in my search is likely those themes that explicitly state that they’re for photographers, like the one below.

Spend some time looking through Tumblr and finding a market that isn’t well represented, then build a theme for that group of people. Think about specific professions like realtors or app developers and ask yourself what types of features they would gravitate toward.

#9 Icons Icons Icons

Thus far we’ve talked about how both type and background graphics play a huge role in the personality of your theme, another area of the design that fits this description is icons. Tumblr uses icons to differentiate between post types, which has led to a lot of creativity in this area on the part of designers.

Icons can really help define the aesthetic that you’re going for and many designers use them generously throughout their designs, not simply in post type indicators.

Whether you’re using a prebuilt icon library or crafting one yourself, remember that this is a key area where you can make your work stand out from the competition. Take the time to get it right and you’ll be glad you did.

#10 The Download is in The Details

As a Tumblr user myself, the themes that really impress me are those from designers that really gave a lot of attention to the finer points of the design. Subtle textures and patterns, shadows in all the right places, barely noticeable edge highlights, these little touches go a long way toward making your design seem professional and attractive.

No matter what aesthetic you’re going for, be it vintage, skeuomorphic, minimal or wacky, don’t rush through it just to have something to upload. Slow down and really polish off the minor details that you wouldn’t think anyone one notice. Trust me, they will.

What Are Your Tumblr Design Tips?

After reading through this article, you should have a lot of insight into what goes into the creation of a successful and attractive Tumblr theme. Following these ten tips will help you create your own themes that will race to the top of the download charts.

Now that you’ve read what I think, I want to hear your input. What attracts you to a Tumblr theme? Is it any of the things that I listed here or something else entirely. I want to know!

Adobe has an interesting relationship with folks who design websites. Photoshop and Fireworks have you covered from a static image perspective, but tools to build live, functioning websites are another story completely. Flash is no longer the poster child of modern web technologies (quite the opposite), GoLive went the way of the dinosaurs and Dreamweaver, though still widely used, is regarded by many to be a bloated mess.

One area that Adobe is intent on pursuing is web design for non-coders. They’ve made it their mission to bring the world of professional website creation to the huge market of designers who can’t write a lick of code. Thus far, they’ve largely fallen short of that goal (Project Rome anyone?). Their latest attempt, Adobe Muse, has finally exited beta and is available as a part of Adobe’s new Creative Cloud service ($50 per month) or as a stand alone product ($15 per month). Is Muse worth your time and money? Will it really allow you to create professional level websites without coding? 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.

A Long Time Coming

I’ve written a lot about Adobe’s road to releasing Muse. In 2010, I discussed why Project Rome fell far short of anything usable for serious designers. Many of the ideas from that project made it into the Muse beta, which launched a rant from me all about why adobe doesn’t understand web designers.

Given my history on the subject, is this article even worth reading? Won’t I predictably just bash Adobe and Muse and tell you to use Flux or code by hand instead?

Yes and no. Do I think Adobe has found the solution the industry has been waiting for? Not remotely. However, Muse has a lot of merit. There’s plenty that I really like about it in addition to what I think could improve. I will say this: Adobe is closer than ever. To see why, read on.

A Weak Start

I downloaded my thirty day trial of Muse, launched it, chose to create a new site and found myself looking at this window.

I was already disappointed. From step one Adobe is forcing me into a static width mindset. Print designers might find this familiar, but it blatantly disregards the current state of web design, which is rapidly traveling in the direction of fluid widths and media query driven breakpoints (responsive web design).

Here’s another problem that I had with this dialog: there are no units. The default page width that pops up is 960. 960 what? Pixels? Inches? Girth units? Seasoned web veterans will assume that this is a pixel based value, but this app isn’t built for seasoned web veterans, it’s built for newbies who need more information than what is offered here.

I was also confused about the margin and padding options presented to me. Was I setting global values for margins and padding? Why would I want to do that? When I code by hand I typically reset these values to zero, is that what I should do here? It turns out though that these values are for your main container. Again, a little more information would go a long way.

It’s not all bad though. I do really like that you can set up columns right off the bat. Really this just amounts to some guides being slapped on the page, but that’s a good thing. I like that setting up a grid doesn’t mean that I’m forced to stick to it in all circumstances.

Meet Muse

The Muse interface is just familiar enough that you’ll know how to get around if you use other Adobe products. There’s a positionable panel of tools on the right, a strip of buttons and options along the top and your main canvas in the center.

The app was built in AIR, which annoys the crap out of me as a Mac user. The result is something that almost looks native but feels quite different than a dedicated Mac application. This leads to several frustrating quirks. For instance, the main panel looks a lot like something you’d see in Photoshop.

Consequently, you expect it to work the same. Unfortunately, this panel can’t be anchored to the side of the screen like you’re used to, which means that it always feels in the way. You can reduce it to an icon strip, but it collapses to the left, so the default right side position becomes a poor spot.

No matter, you can simply move it to the right and keep it collapsed to save room. Like in Photoshop, clicking on a icon expands only that part of the panel, oh wait, no it doesn’t. Instead it expands the entire panel, which entirely defeats the purpose of the button strip.

Moving along, below you can see some of the options and buttons that reside along the top of the interface. There are three main view modes: plan shows you all pages in an outline, design is where you do your building and preview is where you see an in-app live web preview of your site (hit Command-Shift-E to preview in the browser).

Near the center of this topside panel is where you find what would normally be your floating toolbar containing the following: Selection Tool, Crop Tool, Text Tool, Zoom Tool, Hand Tool and Rectangle Tool. This is also where you apply various styles, add links, etc.

Building a Webpage

From here, the workflow is fairly intuitive. If you want to place some text, you grab the text tool. If you want to draw a box, use the rectangle tool; it’s that easy. As a coder, it scares me that I can’t manually set the parameters for elements that I add, but I guess that keeps things simple. For instance, if I want to set a paragraph to 300px wide, I just have to eyeball it or use my grid. And forget the box model, you just shove things where you want them.

One thing that Muse does pretty well is integrate with Photoshop and Fireworks. You can place a file from one of these apps, go back and make changes, and the edits will be updated automatically in Muse.

One of the things that I thought was a little clunky was working with the canvas. I couldn’t figure out how to simply select the background. It turns out just clicking on it does the trick, but there’s really no visual feedback to tell you that you’ve got it right.

From here you can apply a background fill or image with all of the options that you’d expect. If you’re working with an object, you can apply gradients and shadows, define hover states, round the corners, add links to other pages, etc.

Muse’s Workflow: The Good And The Bad

There’s a lot about Muse that Adobe got right. It’s really easy to just pick up and run with. I figured out pretty much everything I needed to with no outside instruction whatsoever. I think non-coders will really appreciate it as something more powerful than the typical WYSIWYG without being as overwhelming as something like Dreamweaver.

At the very least, it’s a great way to mockup websites, and its price range puts it into an area that’s somewhat competitive with online wireframing services that offer a lot less.

Now, from a coder’s perspective, there’s a lot I would change. I know the app isn’t built for coders, and maybe it should stay that way, but that doesn’t mean it shouldn’t share the constructs used to build web pages. The metaphor here is broken. Adobe needs to stop building page layout apps with web functionality and instead build a visual front end to the coding process.

Working with objects should be much more closely related to working with CSS than it is here. I should be able to set my color with RGBa, define the margins and padding for a button, set a paragraph’s width to 30% of the browser window, and create a font-family, but I can’t do any of this. Adobe has chosen familiarity and pretense over web design constructs and I think they’re on the wrong side of that fence.

The Code

After getting to know the interface, I busted out a super simple page so that I could see what the process is like and, more importantly, take a look at the output. Here’s what I came up with (click the image to see the live demo):

When you check out the demo, be sure to hit View Source so you can take a look at the code that was generated. I kept the page design simple for a reason: so I could see if the resulting code was also simple. A page like this would use a minimal amount of handcoding and should be fairly easy to sort through whether you can write code or not.

The good news is that Muse exports HTML and CSS, so thankfully the Flash only idea died with Project Rome. Predictably, the resulting code is extremely div heavy. Using the default navigation menu, each link uses a list item and not one, but two divs.

For the most part, the classes have straightforward names applied, but the ID names are useless and vague (example: “u154-4″). Overall though, it’s far from the worst WYSIWYG output I’ve seen. I can still easily read through it and see the structure. It’s certainly fluffed up, but only enough to make a coder roll his/her eyes instead of an abomination that will make him scold your very existence.

So Is It Worth It?

In the title of this article I promised to tell you whether or not Muse is worth the $15 per month. This question is difficult to answer simply because I question who the product is for. If you plan on building sites for a living, this isn’t the way to go. If you simply want to run your own little site, having a monthly fee simply to own the software isn’t exactly a thrilling prospect.

Bottom line: Muse is worth the money… in the short run. In the first few months, you’ll have a great piece of software with very little expense. However, using the subscription model, after two years, you’ll have paid around $360 for Muse. In my opinion, this pushes the upper limit of what the software is genuinely worth at this point. This may change as updates come, but if there’s no significant improvement, it simply doesn’t seem worth the expense in the long run when RapidWeaver is $80 and Flux is less than $150 (both Mac only options unfortunately).

How Adobe Could Make It Better

It’s interesting that I state that RapidWeaver might be a better way to go. With its rigid template-driven structure, RapidWeaver is far from anything that you would use to build a site from scratch. However, Rapidweaver has a rich third party plugin market capable of pushing it to greatness far beyond the default rigidity. With Blocks and Stacks, Rapidweaver becomes an impressive freeform site builder.

This gives me an idea for how Muse could be made a lot better with very little effort. Adobe should take a page from the RapidWeaver book and open up a marketplace where users can provide plugins. This way users decide what’s missing and how it should be integrated. If I want to use Muse to build responsive web pages, I’d simply download a plugin that would add the missing functionality. Granted, I’d prefer for Adobe to just understand the web design industry and build a tool that fits the market better, but in lieu of this option I’d take a RapidWeaver-like plugin market.

What Do You Think?

Now that you’ve seen my take on Muse, I’d love to hear yours. Do you think Adobe has finally nailed the idea of codeless web design or are they still treading water, pushing out products that aren’t moving the industry forward?

More importantly, how can Adobe refocus their efforts and create a product that you’d gladly shell out $15 a month to use?

Today I’m working on another awesome free download for PixelsDaily. Here you’ll be able to see my thought processes, goals and code, and later you’ll be able to download the whole project to use in your own work.

Basically, our goal here is to create a simple effect so that when the user hovers over an image, a hidden text label pops up into view. This is of course extremely easy to do so we’re going to go a step further by building a whole bunch of options for the developer to choose from. This will provide you with some good practice for how to create flexible effects that can be applied in different ways without too much code repetition.

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

Sneak Peek

If you’re anxious to see the result before you go through the code, check out the demo below and hover over each image to see how it’s different.

Demo: Click Here to launch.

The Plan

Here’s what we want: a simple text label with a black background to appear over the image when the user hovers. Now, since it’s going to be animated into place, I came up with a total of ten different variations that equate to roughly the same element being used in different ways:

We have two main parameters to set here. The first is where the the label will come to rest (top, center or bottom) and the second is where it will come from (top, right, bottom, left). What we’ll want to do is provide a basic repeatable HTML structure for developers to use when adding an image, then give them some classes that can be applied to control everything about the label’s behavior. With this in mind, we can proceed to the first step.

The HTML

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>

</ br>

For the HTML, we need a simple wrapper div that contains a paragraph and an image. The paragraph will serve as the hidden text label and the classes applied to the div will tell us two things: first, that we want to give this div the label treatment and second, which label treatment to give it.

We could skip the generic label class, but that would mean that all of the styles associated with every label would have to be duplicated in each version of the label, which would make for a big fat mess of unnecessarily repetitious code. This way we can apply most of the styling to one single class and save the changing styles to our specific classes.

Now let’s expand this out so we can try the ten different effects that we’re aiming for in our final result. We’ll keep all the divs for this tutorial, but the classes should be flexible enough that you can use block level list items as well if you’re building a gallery. We really just want to make sure each image effect works in an individual setting.

<div class="label top">
  <p>Persistence in Memory</p>
  <img src="img1.jpg" />
</div>
 
<div class="label bottom">
  <p>The Scream</p>
  <img src="img2.jpg" />
</div>
 
<div class="label bottomright">
  <p>The Last Supper</p>
  <img src="img3.jpg" />
</div>
 
<div class="label bottomleft">
  <p>Mona Lisa</p>
  <img src="img4.jpg" />
</div>
 
<div class="label topleft">
  <p>Starry Night</p>
  <img src="img5.jpg" />
</div>
 
<div class="label topright">
  <p>Girl with a Pearl Earring</p>
  <img src="img6.jpg" />
</div>
 
<div class="label centertop">
  <p>Whistler's Mother</p>
  <img src="img7.jpg" />
</div>
 
<div class="label centerbottom">
  <p>The Kiss</p>
  <img src="img8.jpg" />
</div>
 
<div class="label centerleft">
  <p>American Gothic</p>
  <img src="img9.jpg" />
</div>
 
<div class="label centerleft">
  <p>Water Lilies</p>
  <img src="img10.jpg" />
</div>

</ br>

Starter CSS

Now that we’ve got a good idea of what our HTML structure will look like, it’s time to jump over to our CSS. To start off, toss in a lazy man’s reset (or something more robust if you prefer) and a background pattern.

* {
   margin: 0;
   padding: 0;
}
 
body {
   background: #f5f5f5 url('wood_pattern.png');
}

</ br>

Now it’s time to implement some generic label styles. Most of what we need to do will specifically apply to the paragraph, but there are a few things that should be done here as well. Start off with the specific styles that you need to make the layout work. since we’ll be working with images of varying sizes, I used inline-block for the display context with a top vertical alignment. I also set the overflow to hidden and the position to relative, both of which are vital for this experiment.

Next I threw in some optional visual styles. These are separated so that a developer who downloads these files can easily see how to customize the look and feel of the items without screwing up how they work.

.label {
  /*Position*/
  display: inline-block;
  vertical-align: top;  
  overflow: hidden;
  position: relative;
  margin: 20px;
 
  /*Skin*/
  border: 7px solid #fff;
  -webkit-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
     -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
          box-shadow: 0px 2px 4px rgba(0,0,0,0.5), 0px 10px 7px rgba(0,0,0,0.2);
}
 
/*Extra Padding Fix*/
.label img {
  display: block;
}

</ br>

Notice the peculiar block positioning context applied at the end here. For whatever reason, this layout was giving me an extra four pixels of padding at the bottom of each image that couldn’t be manually overridden. This fixed this problem.

Status Update

At this point we’re looking good. Our images are lining up nicely and have the styling that we want. The only weird part is that the text labels are all screwed up and that’s what we’re going to attack next.

Style the Labels

Now it’s time to style the labels. Once again, it’s very important to figure out which styles can be reused and which need to vary. To do this, I simply ran ahead and created a bunch of different individual labels, then looked through to see where my code was redundant.

The realization is that each label will have to have absolute positioning (which works with the relative positioning from before), padding, a set width, transitions and visual styling. These properties will be identical, no matter what direction we’re coming from or what the final resting place of the label will be.

.label p {
  /*Position*/
  position: absolute;
  padding: 10px;
  width: 100%;
 
  /*Skin*/
  background: #000; /*fallback*/
  background: rgba(0,0,0,0.7);
  color: #fff;
  font: bold italic 18px/1.5 Helvtica, Verdana, sans-serif;
 
  /*Animation*/
  -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>

Status Update

As you can see in the image below, all of our labels are working now and look perfect. Notice that they’re all positioned at the top by default, keep this in mind as we move forward and shove them around.

Position Each Label

From here, we have a lot of styling to do. Really we have a tiny bit of styling to do, but we have to do it ten different times because each label is unique. For each label, we need to position the paragraph element out of the bounds of the picture, then bring it back in on hover.

To begin, we want a label that will start just above an image that will fly downward on hover and rest at the top. To do this, we set the top value to -50%, which then changes to 0% on hover. Similarly, for the same effect from the bottom, we start with a bottom value of -50% and change that to 0%.

My method here is very specific so take note. The trickiest part of this whole idea is figuring out how to make it work on a wide range of image sizes. We don’t want the developer to have to manually enter in a size every time, it should just work when someone slaps on the required classes.

By utilizing the top and bottom properties the way we are, we ensure that nothing is image-size-specific. The value of 0% on the bottom property will always push our label down to the bottom of the image we apply it to, no matter how far that may be.

/*TOP LABEL*/
.top p {
  top: -50%;
}
 
.top:hover p {
  top: 0%;
}
 
/*BOTTOM LABEL*/
.bottom p {
  bottom: -50%;
}
 
.bottom:hover p {
  bottom: 0%;
}

</ br>

Next up, we need to style our labels that swing in from the sides. We can swing in from the top left, top right, bottom left and bottom right. Here are the values for these. The method is straightforward and just like the two we just went over. Each time we set the resting position just off to one side, then bring it back into view with the hover. For these, the left and right properties come into play in addition to the top and bottom properties.

/*BOTTOM LEFT LABEL*/
.bottomleft p {
  bottom: 0%;
  left: -150%;
}
 
.bottomleft:hover p {
  left: 0%;
}
 
/*BOTTOM RIGHT LABEL*/
.bottomright p {
  bottom: 0%;
  left: 150%;
}
 
.bottomright:hover p {
  left: 0%;
}
 
/*TOP LEFT LABEL*/
.topleft p {
  top: 0%;
  left: -150%;
}
 
.topleft:hover p {
  left: 0%;
}
 
/*TOP RIGHT LABEL*/
.topright p {
  top: 0%;
  left: 150%;
}
 
.topright:hover p {
  left: 0%;
}

</ br>

To finish off, we need to code our centered labels. These are the hardest of the bunch to figure out. On hover, you want to place them fifty percent of the way down or up, minus half of the height of the label. So when we want to slide in from the top, we set the top value to 50% and apply and negative margin of 20px (half the height of our labels). Unfortunately, this does assume a single line of text and the specific font-size that we’ve set up. If either changes, then the height will be different and the item won’t be centered. The only way I know around that is to use some sort of display: table setup.

/*CENTER FROM TOP*/
.centertop p {
   top: -50%;
}
 
.centertop:hover p {
   top: 50%;
   margin-top: -20px;
}
 
/*CENTER FROM BOTTOM*/
.centerbottom p {
   bottom: -50%;
}
 
.centerbottom:hover p {
   bottom: 50%;
   margin-bottom: -20px;
}
 
/*CENTER FROM LEFT*/
.centerleft p {
   top: 50%;
   left: -150%;
   margin-top: -20px;
}
 
.centerleft:hover p {
   left: 0%;
}
 
/*CENTER FROM RIGHT*/
.centerright p {
   top: 50%;
   left: 150%;
   margin-top: -20px;
}
 
.centerright:hover p {
   left: 0%;
}

</ br>

Optional: Going Further

Now, if you’re crazy about repetition, you can go even further with making sure your code is as brief as possible. We separated out each label above for the sake of readability, but the result is a lot of values that are repeated throughout. We could go in and either manually combine selectors or use Sass @extend and come up with a much more concise result. The tradeoff here of course though is that you’re repeating your selectors because some appear in multiple places.

.top:hover p, .topleft p, .topright p {top: 0%;}
.top p, .centertop p {top: -50%;}
 
.bottom:hover p, .bottomleft p, .bottomright p {bottom: 0%;}
.bottom p, .centerbottom p {bottom: -50%;}
.bottomleft:hover p, .bottomright:hover p, .topleft:hover p, .topright:hover p, .centerleft:hover p, .centerright:hover p {left: 0%;}
.bottomleft p, .topleft p, .centerleft p, .centerleft p {left: -150%;}
.bottomright p, .topright p, .centerright p {left: 150%;}
 
.centerbottom:hover p {bottom: 50%;}
.centertop:hover p, .centerleft p, .centerright p {top: 50%;}
.centertop:hover p, .centerleft p, .centerright p {margin-top: -20px;}
.centerbottom:hover p {margin-bottom: -20px;}

</ br>

See It In Action

We’re all finished! Be sure to check out the live demo below and hover over each image to see the different effect.

Demo: Click Here to launch.

Conclusion

This project forced us into a lot of good thinking. We had to consider several times how to keep our code brief and free of repetition. We also consistently asked what was best given that we want others to be able to download and change our code with very little trouble. Sometimes when we saw a way to make our code more concise, it came at the price of readability and ease of use, which isn’t the best method for a free download.

Feel free to grab this code and use it however you like. Also keep an eye out for the download sometime in the coming weeks on PixelsDaily.

It’s time for another awesome web design critique, where we take a look at a real 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 WebAppers, a great place to find open source web resources. 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 WebAppers

“WebAppers is a blog dedicated to share top quality open source resources for web developers and web designers daily. As a web designer, you’ll find some of the best free icons, stock photos, brushes, fonts and design inspirations. As a web developer, you’ll also find some of the best Javascript and Ajax components like modal windows, menus, galleries, tooltips, charts, calendars plugins and a lot more.”

Here is a screenshot of the homepage:

First Impression

If you’re wondering whether a Design Shack critique is worth it, you need look no further than the repeat customers. WebAppers was actually the customer for our 14th web design critique and they’ve come back to have us take a look at their brand new, completely redesigned responsive site.

My first thoughts for the new design are very positive. This is no small update, they’ve taken the site in a completely new visual direction and I really think it’s better for it. The old site had a cobbled together sort of look, like various non-matching resources were thrown together. The new design, by contrast, is very clean and professional and comes off as a completely custom piece of work. And it’s responsive to boot!

We’re still very early in the responsive evolution of the web so my hat goes off to anyone who’s actually taking the initiative to remove RWD from the comfortable area of theory and put it into real world practice.

Let’s dig deeper into the site’s design and see what is working well and what could stand to be improved.

New Logo

The old WebAppers logo had this sort of 80s rocker appeal. There was a cat of some sort, some lighting bolt shapes; it was quirky but fun.

I always found the logo to be a little confusing though. I could never quite tell if the lightning shapes were meant to be just that or if they were perhaps a lion’s mane. And what did any of that have to do with open source web resources anyway?

The new logo takes a simpler, text-based approach. I actually love the visual of the page curl “W”, the center of which also serves as an “A”. It’s just a flat out cool idea that was pulled off quite successfully.

I also like that the logo clearly states what the site is all about. As soon as I load the home page, my eyes drift to the logo and I know what the page is offering me. This is extremely important and it’s all too often in these critiques that I’m telling a designer the opposite (that it’s difficult to see what their site is all about).

Layout

As I mentioned above, the new layout is responsive, and by that I mean that it uses media queries to reflow the layout at a number of preset breakpoints. To be “fully responsive” some say that a site must also be built on a fluid grid like the one seen on Smashing Magazine, a project which no doubt inspired this one in some way.

WebAppers doesn’t reflow itself to every minute change in the browser width (at least until the smallest iteration), and to be honest, as I play around with it, I think that’s fine. It’s still a remarkably flexible design that adapts well to all kinds of different screen sizes, which is a lot more than most websites can claim.

In the wide version, there are four primary columns. From left to right they are the navigation, primary content, secondary content sidebar and advertising. The two sidebars have been designed to look almost like drawers that slide out of the main content, a perfect metaphor considering that they collapse as the width narrows.

As we narrow the window down, we drop the advertising column on the far right. The content doesn’t merely disappear at this point though, instead the ads appear above the right sidebar, pushing that content downward. This is an elegant solution that looks great and still maintains most of the original content.

There’s a subtle jump after this that narrows the main content column slightly. The container becomes narrower, the text size decreases and the images reduce their width. If we narrow the window even further we get the most significant layout shift:

Here we can see that the third column has completely dropped away and any content that was inside has become hidden. This means that the ads have disappeared completely (Smashing Magazine does the same thing) and the sidebar containing the popular content and search field is gone as well.

My only real problem here is that from this point on the site doesn’t appear to be searchable. I’m all for shifting design as the screen size changes but functionality is a touchier subject and reductions must be approached with caution. Searching seems like a fairly primary feature and I’d likely be frustrated that I can’t perform this task on my phone or tablet.

Eventually, the site breaks down to a single column layout with the navigation now appearing in a simple native dropdown menu, which typically work well on both mobile and desktop devices.

Overall, I think the layout works really well, and with the exception of the search functionality, I’m not sure I would change much about it.

Looking behind the scenes we can see that this project was helped along by Twitter Bootstrap, which is nice because the page doesn’t look like your typical copy/paste Bootstrap project at all and proves that you can use that toolkit under the hood without sacrificing custom design.

Aesthetics

Now that we’ve discussed how the structure or bones of the site work, let’s take a look at the icing on top. The site takes on a largely gray color scheme with subtle pops of color here and there. It makes heavy use of attractive, minimal icons and of course Helvetica as its primary and nearly exclusive typeface.

My least favorite aspect of this entire site is the lack of contrast. Everything on the page has a sort of monotonous feel with nothing really standing out. I can see how the muted look is meant to be easy on the eyes, but it’s bland enough that it almost feels a bit straining.

The solution for this, as far as I’m concerned is so easy that it only involves replacing a single file: the background texture. I grabbed a dark texture from Subtle Patterns and gave it a test run on the WebAppers site with great results.

The dark background adds some much needed contrast to the site and really highlights the main content by pushing it to the forefront of your attention. It’s amazing how much of a difference a little tweak can make!

One other small thing that bugs me slightly is the shadow effect on the article titles, seen in the screenshot below:

One one hand, I think it’s a cool effect. On the other, I think it makes the text considerably more difficult to read. Perhaps if the shadow’s opacity were simply reduced it would be less distracting.

Summary

I think the WebAppers redesign is definitely a success. The site is more beautiful than ever and has taken a nice jump towards being device agnostic. It’s easy to use, the branding is more logical and the content presentation is really nice.

My one big concern is the lack of visual contrast, a concern which completely vanishes with the inclusion of a darker background pattern. I’m also skeptical of the decision to drop the search functionality on the narrower versions of the layout. I don’t think visiting the site on my iPhone should necessarily mean that I lost the ability to search.

Other than these issues though, it’s a great site. Be sure to stop by and give it a test drive. I think you’re going to like what you see.

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.

When was the last time a client asked you to design something for print? Did you feel comfortable meeting the request? There are a few key standards that you should understand to make the successful jump from online to printed design.

When planning a print project you really have to take the medium, format and printing press in mind when putting together a project. It is also important to understand the differences in how color works, font embedding and other just preparing your flier, magazine cover or business card for print.

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

Know Your Medium

The first step in preparing for a print project is to know what you are printing on and what kind of press is printing it. Talk to your team members about these considerations and plan for the unexpected in advance.

Determine what you will be printing on. Glossy paper, card stock, copy paper, newsprint? Each medium has a set of considerations of its own. Thinner paper types tend to have more bleed between the ink and paper, which can cause a degree of softness in images and text. Thicker paper types have far less bleed but can have a heaver ink lay, which can sometimes result in smudging because of the longer drying time.

Every printing press can have its quirks as well. Look at other projects that have come from where yours will be printed. Note how the finished products look. Are certain colors heavier than others? How sharp is the registration? These are things you will want to account for in your design.

Software

Adobe InDesign is the preferred software for designing print materials from magazines and newspapers to brochures and leaflets to business cards. There are other applications that can do some of the same things as InDesign but this product has become the industry standard (the runner up is Quark).

What’s nice about InDesign is much of the functionality will seem familiar for Adobe Illustrator and Photoshop users. The buttons, icons and shortcut keys are the same. (And for those who purchased the Adobe Creative Suite to bundle other software, InDesign is probably already installed on your computer.)

InDesign is specifically designed to create and prepare print projects for printing. You can create documents of any size and gain much more functionality when it comes to working with typography, as compared to the limited palettes in Photoshop. InDesign settings also make it easy for novice print designers to meet set specifications prior to publication.

Color Differences

Successful printing can hinge on color selection and choices but even more important is accounting how print colors are created before they hit the press.

RGB and CYMK

Online, designers create each color using an RGB (red, green, blue) formula. This is the standard for how computer monitors display color.

For print, presses use a combination of four colors, CMYK (cyan, magenta, yellow, black) to create each hue. Designers should create, or convert, all colors in their document according to where it will be published – online or in print.

A layer of ink is put down in each color – cyan, magenta, yellow and black – to create everything on the page in process printing. That is why preparing colors based on the CYMK formula is so important.

Black

Black is also a consideration. You have three options when creating black for CMYK printing – rich black, four-color black and 100 percent black.

Rich black should be used for large, solid areas on most printing presses. Rich black will give you a rich color and will not look gray, something that can happen with 100 percent black. Rich black can also be used for large type on presses with keen registration. Mix rich black as 30 percent cyan, 30 percent magenta, 30 percent yellow and 100 percent black (C30, M30, Y30, K100).

True or 100 percent black results from printing using a single plate. True black should be used for small text, such as in magazines, books and newspapers because it eliminates registration concerns. True black, though, can have a washed out or gray look when used in large spaces.

Four-color black also uses each of the printing plates and has an almost infinite number of color-mixing combinations. Four-color black is risky and should be avoided in most projects. Any mix of four-color black, including rich black, should not be used for text blocks. Any skew in registration can render the text unreadable.

Keep Fonts in Check

The biggest problem with fonts happens during the processing of files from your computer to the actual printing press. To ensure that fonts appear as designed, prepare your files for print by sending the fonts with the project or turning text into outlines.

InDesign can help you send the fonts to the printer using the package or preflight options. This will create a folder that includes all of your original images and font files that can be submitted with the finished product file to a printer. One thing to keep in mind is the licensing regarding fonts when transmitting font files. You may consider having a written agreement with the printer that states all materials transmitted with your document are for use only for printing said document and must be deleted once the project is finished.

Another option for font preparation is to turn text into outlines, which essentially turns each letter into an image. The major consideration is that text is no longer text and can’t be edited. Text that has been converted to outlines is perfectly compatible because the document no longer contains fonts. Most importantly, if you choose this option, keep two copies of your project – one with all of the fonts as fonts and another with fonts as outlines. If you don’t have the text version, a simple edit can result in hours of rework.

Prepress Considerations

Getting your files ready for print can be just as important as the overall design. Make sure to have a discussion with the printer to outline print specifications and acceptable file formats. (Most printers accept .a1, .indd, .qxp, .pdf. and .eps files.)

Resolution

Typically commercial printing jobs require image files to be submitted at 300 dpi (dots per inch) or greater. This is more than three times the resolution of standard web publication, which is 72 dpi. If a file is created at 72 dpi and stretched to the print specification of 300 dpi (or even higher) text and images will become blurry and pixelated, resulting in an unprofessional-looking final product.

Size

Always turn in a document that meets the specified size. If the project calls for an 8-inch by 11-inch flier, the document size should be just that. Files turned in at the wrong size can be rejected by the printer or resized in at the print facility. Resizing can result in a project with the wrong proportions or overall look.

Bleed, trim and safety

Finally you want to make sure that your file fits within the printable image area. Make sure to ask about and honor bleed, trim and safety specs. (You can even create these “lines” using layout software such as InDesign.)

Bleed is the area at the outside edge of the document that allows for edge-to-edge design. The bleed will keep edges from being cut off and leaving white lines. As a general rule, extend your image 1/8 inch all the way around the outside margin of your document.

Trim shows where a document will be cut off by the printer. This is generally the location of the page margin before any bleed.

Safety is the area that is guaranteed to fall within the printing margins. While images can extend beyond the safety, relevant artwork and text should not to guarantee it is visible. Set the safety at 1/8 inch all around the inside margin of the trim.

Conclusion

Preparing or converting a digital project for print takes some time and planning. A general understanding of the printing process can help you make your project more successful.

Be aware of the differences in online and print publication. When preparing a project for print, talk to the printer to nail down specifications in advance and properly prepare your project for printing before it hits the press.

Image Sources: “Peter”, Herkie and Thiemo Gillissen.

Three is only a number, right? Just one of ten numerals that we use to express value, nothing more. Or is it perhaps a lot more? Is the number three a designer’s best friend? Does it drive art, photography, design, architecture and even the natural order of the universe?

Join us as we take a look at some ways that designers leverage the number three, and more importantly, why you should keep the number three in mind whether you’re designing websites, print ads or even logos.

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

Three In Design

Three is a magic number. It’s been a close and dear friend of designers for as long as anyone can remember. There’s just something about three that works across all mediums, all formats, all sizes. Three is beauty, three is symmetry, three is design.

Take a look at TheBorsky.com and you can see the number three at work in multiple ways. The designer here has used three rotating featured images stacked on top of three columns of content.

Examples like this permeate the web. The site Vizzuality.com uses the number three horizontally, vertically, and in a stacked distribution. As you can see below, a three column layout is used for image galleries and blog post previews.

Not only does three divide pages into columns, it’s also used to split pages into rows. Here you can see three different featured products stacked on top of each other.

Three takes a step towards abstraction here as the content is split up into two rows. You might not even catch that the number three is at work here, but it’s there, quietly hiding and presenting the content in an attractive manner. Do you see it?

Three was guiding designers long before the web came around. Print designers were well acquainted with similar tactics. The ad below divides a square into three rows and three columns. There are also three primary paragraphs of text and three chess pieces.

image source: jbcurio

Three In Photography and Art

Think that three is limited to print and web design? Think again. Three is everywhere. In photography, the magic of three leads us to the rule of thirds, which tells us how to compose a visually pleasing shot.

Here three tells us where the butterfly is at rest:

image source: blacktsuba

And here three tells us where the action is headed:

image source: Michael Miller

The rule of thirds can make us feel surrounded by friends:

image source: Keven Law

And it can make us feel completely alone:

image source: joiseyshowaa

Of course, photographers merely borrowed the rule of thirds. Long before the first click of a shutter, brush strokes were guided by the same rule.

Van Gogh certainly knew of the power of three:

Three is more than the power of thirds though. There are three points in a triangle, another powerful structure used by artists for composition. Da Vinci knew about triangles.

And so did Michelangelo:

Architecture

Three doesn’t stop there. We build monuments to three. It’s everywhere in architecture.

image source: Toshihiro Oimatsu

image source: Alexander von Halem

image source: Aart van Bezooyen

Nature and Mathematics

Some say the rule of thirds is really a lazy or inaccurate application of the Fibonacci spiral or the golden proportion.

But even here we can see the power of three at work:

Many believe that the Fibonacci Sequence governs the natural world, hiding in plant life, seashells, tree branches and even the reproductive results of bees and rabbits.

image source: Daniel Parks

So What?

This conversation could go for days. Earth is the third planet from the sun, DNA is encoded using a triplet codon system, DNA is one of three major macromolecules necessary for life, there are three parts to the Holy Trinity, three people were crucified at Christ’s death before he was raised on the third day, Buddhists take refuge in Three Jewels or Treasures, there are three parts to the Hindu Trimurti… we get it, the world is obsessed with three! You could probably perform similar tricks with the number four, or even five or six. Why should designers give a rip?

Whether three has any significance in the grand scheme of the universe or this is all merely a silly numbers trick meant to get you to see what isn’t there, the simple truth is that three is indeed a cornerstone in the concept of humankind’s perception of beauty and significance.

As a designer, any time you’re faced with figuring out how to logically group items in a visual arrangement, the number three is there to help you out.

The number three can make it easy to divide up a page, present a tiered pricing strategy, list your best features and even create a memorable logos. Some of the most famous logos around lean heavily on the number three.

Is three the only solution for your design conundrums? Absolutely not. But it is an ever present friend that will always help you out of a jam. Three will never get old. It isn’t a design trend that will go the way of glossy buttons and reflections, it’s a constant in the world of aesthetics that you can always leverage for well structured design.

Where Else Do You See The Number Three?

The purpose of this discussion is not to stick you into a predictable design rut, but instead to open your eyes to the diversity of how thirds are used in the world of design. When this concept is burned into your brain, you’ll start thinking about proportions differently and more carefully considering the way you distribute items on a page.

Remember that one of the most important aspects of learning a design rule is that those who know the rule best can break it with the most skill and tact. An interesting design strategy if you want to create something unique might be to completely forsake the number three in every piece of your design.

Now that you’ve seen my many examples of how three is used in design, leave a comment below and tell us about your favorite examples. Have you seen the power of three in any logos or other famous designs? Let us know!

Podcasts have been around for a long time, but I’ve really never been able to get into them. That is until recently when I really invested some time into looking around and finding the best design and development podcasts on the web. Now I’m an addict and rarely spend a day slaving over my computer without a few podcasts to keep me company.

Today I’ll share with you some of my favorites so you can finally take the leap and subscribe to some podcasts that are not only enjoyable, but thoroughly educational. This isn’t a list of every web design podcast out there but rather a personal offering of some of the podcasts that I’ve personally checked out and enjoyed.

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

Why Podcasts?

For years I struggled with the idea of podcasts. The concept seemed interesting, but through browsing the topics that I’m interested in on iTunes, I was never able to find a solid podcast that really held my attention.

Lately though, I’ve come across quite a few really stellar podcasts from professionals that I already respect in the web design industry. Once you finally find a show hosted by someone that you enjoy listening to, then the whole concept really clicks and you find yourself anxiously awaiting a fresh week of episodes.

Good web design podcasts provide a perfect balance of education and entertainment. I personally enjoy it when the hosts are relaxed, cracking jokes and just talking shop. I find that it keeps me in tune with the industry and what’s been going on and I often hear about new techniques, web apps and strategies that I then go and research in-depth on my own.

Once again, the trickiest part is actually locating a few shows that you can sit through without nodding off. Hopefully I’ll be able to help you out with this process by sharing some of my favorite podcasts.

5by5

The 5by5 network was my gateway drug with podcasts. Their shows are the first that I ever really got into and if you’re looking to get started with podcasts, there’s simply no better place to go.

Dan Benjamin is the guy behind this network and he’s done an absolutely phenomenal job of setting up the best line of shows in the industry. He’s also a great host so be sure to check out the shows where he regularly makes appearances.

On the whole, the network is a primarily filled with Mac and technology shows, but there are a few web design shows in there as well. If you’re into Macs, I highly recommend The Talk Show and Hypercritical, but we’re here for web design shows so let’s look at what they offer in this area.

The Big Web Show

This show is hosted by Jeffrey Zeldman, what more do you need to know? The guy is a legend in the web design industry and it’s really cool to be able to put a personality to that image.

The big web show is largely an interview show. Jeffrey has a new guest each episode (often high profile folks) and chats with them about what’s going on in the web design industry and what they’ve been working on lately. Occasionally Dan Benjamin jumps in as well, which is always a good thing. He has a way of helping computer geeks along by steering them into interesting conversation.

The Web Ahead

Jen Simmons hosts this show, which is always filled with solid discussion and questions regarding all things web design. She does a good job of covering advanced and interesting topics while keeping things simple enough that even non-hardcore-developers can still follow along.

One of the most impressive aspects of this show is the caliber of guests that she brings on weekly. Recently she’s talked with Paul Irish, Eric Meyer and Ethan Marcotte, all of which are really big names in our field.

Retired Shows

There’s a whole section on 5by5 filled with retired shows that aren’t on the air anymore. Several of them ran up to a fairly recent time and therefore still contain lots of relevant information and conversation. Along these lines, be sure to check out The Dev Show and Let’s Make Mistakes. The latter of these is still going, but is now found on the Mule Radio Syndicate.

Shop Talk

Shop Talk is one of the newest web development podcasts to hit the web and it’s already my favorite. Hosts Chris Coyier and Dave Rupert are thoroughly entertaining. They tell horrible jokes, answer questions, dispense advice and have far too much fun with their soundboard. It’s fantastic.

The topics covered on this show are fairly lightweight and tend to stay in the realm of HTML, CSS and JavaScript. Their guest list thus far is overflowing with my favorite people in the industry: Jeffrey Way, Trent Walton, Ethan Marcotte, Paul Irish, Jonathan Snook and more. If you’re only going to listen to one web design podcast, it should be this one.

The Non-Breaking Space Show

I first heard about this show from the last one. The guys that host Non-Breaking Space, Christopher Schmitt, Dave McFarland and Chris Enns were on an episode of Shop Talk. Just like Shop Talk, this show has a really relaxed interview style and is always good for a few laughs as well as lots of good information.

Recently they’ve had some big names on their show as well: Brad Frost and Jeff Croft to name a couple. They’ve also had Paul Irish and Ethan Marcotte on as well, those guys certainly seem to be on the podcast circuit!

The Industry

The Industry is a show hosted by Adam Stacoviak, Drew Wilson and Jared Erondu that, true to its name, really covers a wide variety of topics that relate to the web design industry. They typically have a guest and discuss general CSS stuff like preprocessors and major events like Instagram’s sale and the Google+ redesign.

Aside from occasional blunders like someone eating potato chips (I simply couldn’t listen to that episode), it’s a great show and I highly recommend that you check it out.

The Deeply Graphic Design Cast

Admittedly, I only recently found this one and haven’t spent too much time listening to it, but I wanted to list it for one important reason. I know all Design Shack readers aren’t necessarily developers. Most of the podcasts that I listen to discuss development more than design but this one is actually focuses purely on the design side of things.

It’s also a fairly advice-driven podcast so each show has a topic on which the hosts give their advice. So far they’ve discussed topics such as how to deal with clients, create interesting business cards, and design logos.

Boagworld

Call me predictable, but you simply can’t have a list of web design podcasts without mentioning Boagworld. It’s hands down one of the best, longest running podcasts for web designers. Paul Boag is super entertaining and he brings a ton of business insight to the table.

This podcast tends to focus more on strategy, clients, and other professional aspects of the web design world than on specific technologies like HTML and CSS. If you’re a freelancer or someone running your own web design firm, you should absolutely be listening to Boagworld.

Unmatched Style

I like to listen to podcasts as I work, so video podcasts don’t generally work for me because they actually require a good amount of attention. That being said, the Unmatched Style podcasts are typically face to face interviews that aren’t particularly visual. You can definitely turn them on and let them run in the background without missing too much (there are some that break this rule).

They’ve had over seventy-five episodes thus far so there’s a ton of content to watch and listen to and they’ve interviewed a lot of interesting people over that time period such Cameron Moll, Chris Coyier and David Kaneda.

Other Great Shows

Can’t get enough podcasts? Be sure to check out these as well. Some are screencasts that I’ve been watching for ages, others are fairly new to me.

• CSS Tricks Screencasts – I talk about CSS Tricks all the time, if you’ve never watched one of these, go now.
• Nettuts+ – Nettuts+ is easily one of my top five favorite sites on the web for free instructional materials. The screencasts are always awesome and well worth your time.
• Before & After – Before & After magazine was probably one of the single biggest influences on my design style and opinions early in my career. Their stuff is pure 100% unadulterated design theory and discussion. No developer talk whatsoever, just design.
• 37signals – 37signals is the company behind Basecamp, Highrise and other wildly successful web apps. Like Boagworld, this podcast focuses more on the business side of things. It’s intermittent and there hasn’t been a new episode in a year, but it’s worth a listen.

What Do You Listen To?

I’m a little late to the game but I’m definitely officially on board the podcast bandwagon. Even if you just like background noise while you work, these podcasts will keep you educated and up to date on current web trends.

I’ve barely scraped the surface of the web design and development podcasts available so do me a favor and leave a comment with all of your favorites. I’d love to discover more and discover what you guys have been listening to!