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

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

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

Select a Cover Image

Technical Specs

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

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

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

Crop a Photo

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

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

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

Create an Image

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

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

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

Download an Image

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

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

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

What Works Well

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

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

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

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

A Few Things to Avoid

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

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

Conclusion

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

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

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

Are traditional paper business cards becoming obsolete? Have you considered a digital option? The type of card you use and how it looks can say a lot about you and your work. The style of card – from simple embossed text on a white card to ornate colors and fonts – can be a client’s first impression of your work.

You want to use a card that represents your style and works with the kind of clients you work with. When looking for a business card, consider both digital and paper options and integrate your digital self into paper cards. A business card does more than provide your contact information, it is a gateway to your portfolio as well.

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

Digital Business Cards

It started with the first-generation iPhone and the Bump application. With a tap, two iPhone users could exchange contact information on the fly without having to hold on to cards or write anything down. Bump is still around today and can be used for more than just contact information but only works between phones (available for iOS and Android), which could be a hindrance when doing business.

Most recently, people are beginning to turn to web-based business “cards.” Sites like About.me, IdentyMe and Flavors.me allow users to create a digital presence using a mix of photos and graphics – use preset choices or upload your own – with links to all of the users’ relevant work. You can connect to Facebook, Twitter, LinkedIn, Instagram, Foursquare, blogs and a host of other sites. With just one link, you can connect clients to all of your relevant information on the web. Because these networks are public, you can share and access your digital business card with a variety of potential clients that you might not have been able to contact otherwise.

A custom site is easy to create and just requires registration. You can change and update your digital card at any time. Make sure to keep your digital profile current and add keywords that describe what you do so your card is picked up in online searches.

Include a link to your digital profile on all outgoing correspondence and embed a custom QR code into your site so that potential clients can add your contact information to their phones and databases in a snap. (A QR, or quick response code, is a customizable barcode that can be used to store information and is readable with smartphones. Think of a QR code as a universal “Bump,” which is universally readable by iPhone, Android and BlackBerry phones.)

Think about what your digital profile says about your work. As a designer, you should look beyond stock images or templates. Use some of your own work as the main image. The design should represent a sample of what you can do for clients.

Try not to go overboard with images and fonts, the main thing you want to accomplish is to provide information so you can pick up clients. Make sure phone numbers and addresses are clearly visible as well as links to related work.

Pros

The best part about going the digital route is that everything is connected. Instead of listing a host of links on the back of a business card, you need just one link that can send people to different parts of your portfolio. You can update your profile as often as you like and don’t have to send out new links when you update the site or your contact information.

Going the digital route also helps keep your costs down. The “cards” are fully customizable and free on most sites. Shop around to find the site that works best for you, because some do charge to house your digital account. Access to some premium features, such as mobile layouts and custom domain names, come with an annual fee on some sites.

Most digital cards allow an almost unlimited number of options to showcase your portfolio. You can post video, flash images and photos in addition to links and text. You don’t have to worry about running out of space in the same way you do on a 2 inch by 3.5 inch card.

Cons

Some clients may not quite be on board with the digital trend and prefer paper products and you won’t have anything to hand out when you meet people in person. Evaluate your client base and their needs before ditching paper cards altogether. Links can sometimes be hard to remember and may get lost if you jot them down on paper.

Also think about the way you use business cards. Do you post them on billboards to drum up business? Or pass out hoards of cards at conferences or business meetings? Going digital may not be the best option if your cards are used this way.

Traditional Business Cards with Digital Elements

For most designers, the easiest link between digital and traditional business cards is something of a meshed version. While making the full-scale digital transition, think about printing a few paper business cards with a digital touch.

Create a QR code – try a free service such as JumpScan, BeQRious or QuickQR – and download your personalized QR image. Then just add the image to each of your business cards when you have them printed. If you already have a stack of cards and want to add a code, consider adding printed stick-on labels to the back of your cards.

Create a digital business card and embed that link in the QR code printed on your paper cards. Having both types of cards can help you expand your business reach and will allow those paper clients to get a taste of your digital products. When designing your paper and digital cards, consider creating a visual link between the two. Use the same image, fonts and color scheme to create a brand identity.

Passing out a business card has an element of traditional classiness and can say a lot about the person handing it out. The quality of printing, use of typography and color can serve as a lasting impression about your style of design. Make sure your cards have personality. Shoot for a special paper or color with a lot of pop and have them printed professionally.

Pros

Some people just like the feel of a card. They are easy to save and identify. Cards that are blank on the back are great for scribbling a little extra nugget of information for clients, such as a price quote. Having a card to hand out can make you look more professional and lend a little extra credibility to a new business.

You get the traditional look and feel of paper business cards with your portfolio attached. When you hand out cards, people can scan the code and toss the card without losing track of your information. You can also show a client your work on the fly with a quick scan of the code. Creating a code only takes a few minutes and can be done for free. Use a QR code generation site that allows you to update your code as well, so you can add links and keep your digital profile up-to-date.

Cons

Nice business cards can be expensive to print and need to be reprinted if contact information changes. Cards can also be lost or thrown away. For some, using a paper card just does not work with the type of business being done in the digital marketplace. If you include links on a card, they need to be short (or sassy) enough that they are easy to remember and type. Cards also offer a limited amount of space to make an impression, and don’t always allow designers to showcase the full scope of their work.
Not all of your clients may understand QR codes and you may have to explain what the code is and how it works.

Information to Share (and Avoid)

A digital business card allows you an unlimited space to promote yourself, but make sure to limit what you publish online. Try not to overwhelm potential clients with too many project links. Use your digital business card to promote your best work and not everything you ever created.

Always make sure your contact information is clearly stated. Remember that some people who check out your digital business card will still want to visit you or pick up the phone as well as send you an email.

Create space between your personal and professional selves. Do you use Facebook and Twitter for business? Include those links. If your accounts are strictly personal, don’t include them in your professional online profile. Make sure to use only links for sites that you monitor regularly. If you only log in to Facebook once a year, don’t bother adding it to your profile.

Digital Cards with Pop

Represent Your Work

Nothing sells your work better than showing off good work. Photographer Ricky Li does just that with his card. Using a striking and colorful photo, Li shows the kind of work he produces and provides a link to more if his photography. June Kim uses a super interesting image that represents Kim’s work and incorporates her name into the image. He resume opens with just a click and you contact information is clearly visible.

Use Your Face and Type

Tony Conrad, co-founder of about.me, uses his photo to sell himself and here it works. The photo is striking and makes you look twice, especially with the contrast of the start black and white photo with the blue text box. Mark Frederking took a similar approach with his card, using his face on a plain, but clean, background. Both cards use strong text choices – an interesting font for Conrad and a color that pops for Frederking – to pull you in.

The most striking use of a self-portrait and type is from Henry Timisela (shown near the beginning of this article). From the image you know what he does, and his achievements are stated with links to his work. The card uses a clean, crisp style which you might associate with his work.

Conclusion

Digital business cards may be the next big thing and can help your promote your work to a client base that you have yet to meet. Going the digital route allows you to showcase more of your work and can be inexpensive, but it might not always work for your client base.

Consider using both paper and digital business cards to get your name out. This will allow clients who meet you face-to-face to take a little reminder of you with them and hopefully do online to learn more about your work. Remember, both types of cards can be a lasting impression of you and your work so make sure they represent you well.

Image Sources: Murat Erturk, and jaaron.

The basic organization of a design project typically begins with a simple concept – the grid. Whether you decide to work within its constraints or intentionally move away from it, deciding how to use a grid tends to be one of the first steps in the design process.

Print designers have been working on grids since the first newspapers rolled off the presses hundreds of years ago. Most magazines also employ a grid; books are put together using the grid format. The grid can be part of a publication’s identity and helps create a sense of space and organization. Understanding the basics of grid design – from how it originated, to developing your own grid and using it in your workflow processes – will make working within vertical and horizontal constraints a snap.

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

History

The grid-based design structure has been used in print for as long as presses have been running. Grids, which create structure and organization, are used in print publications and to develop advertisements. The grid is used as a guide for how to place text, photos and advertisements on the page.

Historically, news design was based on a distinct grid that was unchanged from day to day and page to page. Text flowed from the top to bottom of each column and then over to the next column. Photos sat inside the columns as well so each page contained a perfect set of vertical lines. As design evolved so did the grid. Designers began to cross items over the gutters of the grid so that a photo would occupy the space above four columns of type. The grid is maintained but used in a different way.

Advertisements, such as classifieds, still commonly run in the same old news design format. They use a set of distinct columns from top to bottom of each column, with all photos set within the columns.

Book publishers also use vertical grids to keep text easy to read. While multiple column grids are less common than one or two column structures, they are often used in books that contain images or text with lots of formatting (such as cookbooks). Paperback books often only have one column of text per page but wider formats, such as coffee table books, may have two columns (or more) columns per page.

Grid Terminology

Gutter

The gutter is the space between columns. In typical grid design, columns and gutters have consistent widths. Commonly, in print design, the space between each column is one to two picas. (A pica is a unit of measure that is equal to 0.1667 inches.)

Column Inch

When measuring news or advertising space in newspapers and magazines, editors will often refer to column inches. One column inch is one inch of vertical space by one column wide. The number of words that fit in a column inch varies by font and the grid a publication uses.

Jump

When items flow from one column to the next, it is called a jump. Text can jump from one column to the next on the same page, or can jump across multiple pages.

Rail

In some grid structures, a skinny column that is about half the width of columns in the standard grid, occupies the space from the top to bottom of the page on the far left- or right-hand side of the page. This column, which is off the page’s grid, is often called a rail. Rails were common newspaper design tools in the 1990s and early part of this century but have fallen out of fashion in recent years.

Modular Grid

A modular grid uses less of a vertical column format and allows designers to package text and images in rectangles. Column widths may vary from element to element on the page, but all elements will stack to form rectangular spaces. Publications that sell ad space to fit a modular grid offer increments of eighth, quarter, half and whole pages.

Vertical Grids

One of the most recognizable uses of the vertical grid in print design today is employed by The Wall Street Journal. This newspaper uses a distinct six-column grid in its daily design that has become part of its brand identity. Look across the page and you can clearly see each column.

The number of columns a publication uses is determined by the shape and size of the paper it is printed on. Newsletters, for example commonly use a three-column grid, explains Tim Harrower in “The Newspaper Designer’s Handbook.” A three column structure offers limited options for photo and text widths. Tabloid size publications most commonly use four- or five-column grids and most broadsheet newspaper pages use the six-column format.

The width of each column in a vertical grid can set the tone for the way a publication looks and be a factor in type font and size decisions. The font size that you use should be proportionate to the grid. Using a font that is too large will cause odd hyphenation and breaks, which can be difficult to read and using a typeface that is too small can cause strain on a reader trying to get from the start of a line to the end. As a general rule in print design, a column width (in picas) should be no more than double the point size of the body font.

Grids and Advertising

Grids are used in two ways in print advertising – as a unit to sell advertising space and as a unit of design measure.

Just as in news design, ad designers often develop a grid structure for text and graphics. Advertisements with many small images, fox example use a grid so that everything appears organized and easy to follow. A grid may also be used to keep text in proportion to images. Grids used in advertisements may not be as rigid as those in newspapers and magazine and can change from ad to ad, even within the same publication.

The vertical grid used by a newspaper or magazine to shape the way text and photos look on a page is also used to determine ad space. Customers buy ads in increments of column widths by a certain height. This method of ad placement in print publications makes it easier for advertising and news departments (which are separate entities at most organizations) to work simultaneously on pages because of the common grid system.

Develop a Grid Template

Developing a grid for your publication can be done in just a few minutes using built-in software tools. Programs such as Adobe InDesign will allow you to create a grid template that can be used for your projects. When you set your grid, remember to set a margin that corresponds to the space needed for printing.

To set the document default, close all open files in InDesign and navigate to “Document Setup” in the File menu. Choose the number of pages you would like your document to include, the page size and orientation and bleed. Apply the changes by clicking “OK.”

Set the page grid in the “Margins and Columns” option in the Layout menu. Set the page margins first. Click the lock icon, to ensure the margins are the same all the way around. Select the number of columns your document should have and the width of gutters. Apply the changes by clicking “OK.”

Another option is to create InDesign templates for each different grid you plan to use. Open a new document and follow the steps above. You should be able to see a blank document on the screen that is set to your specifications. Click “Save as” using the InDesign template option.

You can also use preset grid tools in Adobe Illustrator and Photoshop to show grid lines. Set grid preferences in the “Grids and Guides” option in the Preferences menu. Note that these programs use a square vertical and horizontal grid, not a columnar grid. Set the spacing of grid lines and how they appear in the document. Apply the changes by clicking “OK.”

If you would like objects and frames to snap to this grid, select the “Snap to Grid” option in the View menu. Objects will attach themselves to grid lines when they are moved near them; this will work even if grid lines are hidden.

Grids and Workflow

Using a grid in projects can save you time and provide a consistent look. Newspapers and magazines use the same grid day after day, establishing a visual identity. Publications have the same look regardless of which designer puts together the pages. You could almost pick out The Wall Street Journal from a stack of newspapers without seeing the nameplate on the top of the page.

This same methodology can be used no matter the size of the project. Set up several grid templates that use different grids for varying size and scale. Use a consistent grid template for a project that should have the same look each time it is published. Stick to the grid when your design should have an organized, consistent feel and break away from the grid to create chaos in design.

Further Reading: Grids On the Web

If you’re a fan of grids, check out these other great articles, which explore the use of grids in web design.

• The Ultimate Collection of 50+ Resources for Grid Lovers
• Ditching the Grid: Alternative Layout Strategies and Tips
• Rolling Your Own Grid Layouts on the Fly Without a Framework

Conclusion

Grids are a method of creating organization in design and have been used by print publications for hundreds of years. A consistent grid can help a publication develop its visual identity, regardless of who puts together the actual design.

A vertical grid can help you determine type sizes and scale for your projects. Develop several grid templates to refer to as a starting point for new projects and use a consistent grid for ongoing design projects that need to have a visual identity.

Image Sources: micora, Tu Photo con El Presidente and Nesster.

“The supreme accomplishment is to blur the line between work and play.”
- Arnold Toynbee

The topic of today’s discussion is blurry photos. No, not the kind that you accidentally take because your kids won’t sit still. The intentional kind, the use of which can serve several practical purposes in design.

We’ll learn all about how to use blur effects to help make text more legible, direct the viewer’s attention, and just make backgrounds more fun. We’ll also take a look at some different types of blurs and how to properly apply selective blurring.

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

Blur to Make the Text Readable

Whenever you have a fairly busy image, it can be quite difficult to incorporate text into. The photographic background might give your design a much greater appeal, but you’re sacrificing too much if you’re willing to kill your readability for the sake of aesthetics.

Consider the following design:

This is a nice looking piece. The background is very striking and the text provides a nice focal point. Unfortunately, the two form a somewhat competitive relationship where the presence of the former is hurting the readability of the latter.

There are a lot of ways that you can approach this problem. As you can see, I added a drop shadow, which helped, but not to the extent that I’d really call it a finished product.

Next let’s try adding a blur. This is a tough decision because it means you’ll be killing all the detail in this beautiful image, but as a designer you have to be open to making radical changes!

Here we can see that this completely solved our problem. The text is now quite readable and really draws in your focus while still allowing the background image to add a lot of interest. You can still make out the basic scene so you’re still benefiting from the beauty of the image, you’ve simply modified that aesthetic to better suit your needs.

Resources:

Image: Eneas De Troya
Font: Ribbon

Create a Frosted Glass Effect

We can take this effect even further by thinking about a sort of frosted glass metaphor. To achieve this, in addition to a blur, we might toss in a white overlay and a noise layer.

Create a solid black layer in Photoshop and then go to Filter>Noise>Add Noise. Make sure you select the “Monochromatic” option. This should give you something like this:

Now set that layer to screen and bring the opacity down to around ten percent. Then create a white layer and bring it’s opacity to around 15 percent. The result will be another unique take on the original design.

Localize The Blur

Keep in mind that you don’t have to blur everything. You can still help out the readability of your text without killing the story told by the image. Consider the following example:

Here once again we have a case where the background image is great, but really trashes our text. With a little bit of selective blurring though, we can keep the awesome photo and make our text a little more readable.

Tips for Localizing Blur

The great thing about this technique is that you often don’t even have to fake it. Many photos provide a completely natural separation of focus and blur, try keeping text and other elements confined to the blurry area for an effect similar to the one above.

If you are selectively blurring a part of an image, be careful about reducing the opacity of your blur layer, whether uniformly or gradually through a mask. Generally, this will give you some pretty ugly results. Try this instead:

• Step1: Make a quick blur layer.
• Step 2: Apply a mask and use a gradient on the mast to fade out the blur.
• Step 3: Convert the mask to a selection.
• Step 4: Go back to the original image and now apply the blur using the active selection.

This process may seem like a pain, but it will usually provide much better results than simply masking out the blur layer.

Resources:

Image: Dave Conner
Font: Homestead

Create a Tilt Shift Effect

In the past couple of years, tilt shift photography has really taken off. More often than not, it isn’t a case of the photographer using a tilt shift lens so much as it is an afterthought in the post-processing step.

As an example, let’s say we were working on the following design. There’s nothing wrong with it, but the image isn’t quite as eye-catching as it could be.

If we toss in a tilt shift effect, suddenly the primary group of buildings in the center really draws our eyes in. Overall the image feels easier to look at and we instantly get a feel for where the designer is directing our attention.

Resources:

Image: Nosha
Font: Airplane

Blur For Color

It’s often the case that I use a photo purely for the nice color scheme that it offers. I’m not necessarily interested in the content, just the natural palette that often results from good photography.

Take the following image as an example. The warm colors are very intense and there’s a lot of great contrast to work with. The photo is so beautiful that you might think it’s a shame to ruin, but not every design calls for a photo of a field at sunset.

Just like in our first example, we’ll go in and blur the entire background. However, this time we want to crank the strength of the blur way up so that any and all detail is lost. The result is a nice, unique background image that took very little effort to create.

Resources:

Image: Leland Francisco
Font: Vevey

Try Different Blurs

While you’re experimenting with using blur in your design, don’t get caught up in the trap of sticking to a single technique. Photoshop and other image editing programs offer lots of different functionality when it comes to blurring filters.

Try every different blur you can find to see how they effect the image differently, even mix blurs together to see what happens. Here are a few of the main types of blurs you’ll typically want to play around with:

Original Image

Gaussian Blur

Lens Blur

Motion Blur

Radial Blur

Resources:

Image: Dave Morrow
Font: Deming

Conclusion

I hope this brief discussion on blurring tricks and techniques has you thinking about how to creatively apply blurring in your designs. The next time you’re in a tight spot with some unreadable text on a busy background, come back to this article and take a look at the examples above to help you out.

Have you spotted any examples of intentional blurring being used in design recently? We want to see them. Leave a link below in the comment section and tell us what you think of the example.

One of the first things you do in designing a site is to decide what that first chunk of pixels that users will see looks like. You’ve got to grab their attention and communicate your message above the fold or risk that person moving on to their next open tab.

Unfortunately, many of us fall into predictable patterns for this piece of the site. We use the same old tricks, shapes and plugins and come up with a result that might look great, but isn’t really that exciting. Today we’ll take a brief look at how you can make your header images more interesting. Along the way we’ll see some live examples from sites that have implemented these techniques successfully.

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

The Standard, Boring Header Image

Far too often, when I start wireframing a project, I begin with something like this:

Don’t get me wrong, this is a rock solid layout, and the reason that it’s so popular is that it works extremely well. However, there’s a time for going the safe route and a time for creatively branching out and exploring new ideas.

Particularly, the part that I get bored with is the header image (I’m using the term “header” loosely to mean the top portion of the page). It’s just a big static rectangle. If it is dynamic, it’s usually something as simple as a jQuery image slider. Once again, one of my favorite design tricks, however, not exactly a good representation of “out of the box” thinking at this point in time.

So how can we get out of the rut of running to the tired rectangle every time we need a big, bold image in our header? If we really give the problem any thought at all, some solutions readily present themselves.

Changing it Up

Here are a few quick thoughts for how to add some variety to your header images. Can you think of any other ideas?

Change the Shape

The first thing that comes to mind is to ditch the rectangle. Try using a square, circle, triangle, or even a series of images. You can even ditch the container all together and try placing an icon or graphic right onto your website background.

Also, don’t just get caught up on standard shapes. Try creating an image that uses a more abstract, fluid shape. Bend it around your content for some real creativity.

Make It More Dynamic

Go beyond the jQuery image slider. Try to think of a new way that you can get a user to interact with the image. Use clicking, scrolling, mouse movements and more to transform the image in some interesting way.

Break Out

Another really simple way to make the header image more interesting is to allow the content that’s inside of it to break out or the content that’s outside to break in.

I used this technique with an app screenshot in a recent Design Tricks article.

Something Different Every Time

One popular trick that you see Apple frequently using on their homepage is to have a series of header images on rotation. When you refresh the page, it grabs from a set of three to four different options at random.

This not only makes your site more engaging for users, it helps you track what works best and what users seem to be interested in the most. Looking at your stats, you can track which image is getting the most clicks and then create a new a strategy based on that knowledge.

Examples in the Wild

Now that we’ve got some ideas on the table for approaching header images in a more interesting way, let’s see if we can find any examples of designers following these techniques.

Co-Work

One of my favorite examples that I’ve seen recently is on the site Co-Work. The image slider at the top of this page is, at heart, the same old standard technique. However, the designer added a few notches that give it an irregular shape.

Notice how much more integrated this image feels with the rest of the content than your typical rectangle. It curves around the logo, navigation and body copy in a way that gives the site an almost abstract modern art sort of feel that’s perfect for the clean, nicely designed working spaces the site is advertising.

This doesn’t require an overactive imagination or even much work to implement, it’s just the result of a little bit of extra effort that gives the site a look that’s all its own.

Adrian Baxter

Web developer Adrian Baxter has another great example of a unique header image on his site.

Apart from the awesome idea of fighting off a zombie horde with only a Mac Bluetooth keyboard, this image is different because it’s been split up into four separate panels. Functionally, there’s really no reason for this, but from a design perspective, it’s a nice touch. Notice how it mirrors the arrangement of the links below, a classic example of repetition in design.

The fun doesn’t stop there though, Adrian took it one step further by adding a parallax effect that shifts the scene as you move your mouse around the site. As the scene shifts, images bleed out of one frame and into another. It’s a really nice effect!

Sony Tablet S

The most impressively innovative example I was able to find was the site for the Sony Tablet. Starting off, the site looks simple enough, the header image shows a sort of folded stream that ends in the tablet. At this point I wasn’t really impressed and even thought the site looked a little too cluttered.

As you scroll down (or hit the down button), the site gets really fancy really quickly. The tablet stays in the middle of your screen as the rest of the content moves. It disconnects from the folded stream and begins to spin and flip in 3D space.

As you come to a new content section, the tablet flips into a pose that integrates with the design of that area.

It goes under some content, over other parts, overlays pop up and point to features, hands come out and use the touchscreen; the result is super impressive and makes for an awesome, dynamic and interactive browsing experience that requires only scrolling.

Kyan

This site is very similar in concept to the Sony Tablet page, only in a horizontal fashion. The initial position of the image slider shows an iPhone, tablet and computer screen sitting around various design tools. I love the flat paper-like illustration style.

When you hit the arrow button on the right, each of the objects surrounding the devices in the center flies up and off the screen one by one, then the screen shifts and brings the devices into a new scene:

This is much more impressive, unique and engaging than your typical slider. When you first see the effect, you can’t help but hit the button a few more times to see it again.

Conclusion

The purpose here is to help get your brain out of the rut of inserting the same old big rectangle image at the top of your designs. With a little thought and effort you can easily accomplish something more unique and engaging.

This barely scratches the surface of what’s being done currently with header images. Have you seen any other interesting examples? Also, have you come up with any great ideas yourself? Leave a comment and let us know.

December is here and it seems we’re finally wrapping up 2011. It’s been a year filled with new and exciting forefronts for the web. CSS3, HTML5 and responsive design were at the top of the most-discussed topics. We also mark the passing of the old ways. Flash, Silverlight and similar proprietary plugins received an all out assault in 2011, one that they may never recover from.

To end the year with an informative retrospective, we’ve scoured the web in search of patterns and trends that emerged or became increasingly popular throughout 2011. Follow along as we examine over fifty websites in an attempt to spot similar tricks and themes. I guarantee it’ll be difficult to read without spotting a few trends that you jumped on in your own projects this year!

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

Top Trend: Responsive Design

In 2010, Ethan Marcotte coined the term Responsive Design and wrote an enlightening and persuasive article about it on A List Apart. By mid 2011, Responsive Design had completely taken off as the hottest new trend in web design.

This is no mere style fad like the others on this list, it’s a new approach to creating content on the web aimed at creating the best possible experience for the maximum number of devices. While some designers wave this idea off as extra work, an ever growing number go so far as to say that if your site isn’t responsive, you’re doing it wrong.

Here on Design Shack we’ve been no stranger to the topic of responsive design this year, here are a few of the articles we’ve posted on the topic:

• 20 Amazing Examples of Using Media Queries for Responsive Web Design
• Practical Design Considerations for Responsive Sites
• How to Build a Responsive Frankenstein Framework With LESS

I could easily provide you with over a hundred examples of responsive designs that have cropped up this year, but plenty of others have already been hard at work for months gathering such collections. My current favorite responsive design gallery is Media Queries, which has over 200 examples!

Responsive design definitely stands out as the design trend of 2011, but there are some other, much smaller trends that are worth taking a look at as well. The following represents a few that I’ve noticed.

Dashed Lines

Dashed lines received growing attention from designers in 2011. Though occasionally straight, the more typical use case is a winding, meandering path that draws your attention and leads it where the designer wants you to go.

I’ve mentioned this trend in several articles this year as a great way to achieve a resemblance of order in an otherwise organic design. It provides the perfect way to turn chaos into an easily followable line of thought.

Founders Fund

Yes!

Boo Bebe

Quartier Vier

AskLela.org

Circles

I hesitate to mention this one simply because I’m not sure you can ever refer to a basic shape as a design trend. After all, circles have always been present in all types of design and always will be.

Nevertheless, I definitely noticed an increase in the use of circles as primary design elements. It’s very evident that many of the designers below intentionally chose circles as the crux of their theme and built off of that simple but elegant idea. The result is often fairly organic in nature but as you can see below several of the designs are still quite structured and use circles arranged in a straight line simply as an alternative to the age old rectangle thumbnail.

Carnette

Lisi Design

Pistachio Sketching

TaosPuso Foundation

English WorkshopLanguage Learning

Air Protect

Agência iSee Interactive Group

Decode

Sleek Design

Rakesh

I AM ZAM

In My Bubble

Clean, Sophisticated Retro Type

I’m beginning to think that retro is a trend that will never die. We’ll always look back at design styles from bygone eras with interest and nostalgia. The really interesting revelation though is that modern and retro design styles actually evolve together.

In years past, retro designs and specifically typography often involved a very grungy, distressed look like what you’d expect to see on an Old Navy t-shirt. However, as clean, minimal designs began to take hold in modern design, retro design made a similar leap into sophistication. These days retro typography is classy and clean with no distressing. Shadows are almost always present and completely void of blur, many are comprised of diagonal lines or some other simple pattern as opposed to a solid color.

Big Bite Creative

Beerworks

Urbanoff

Noltedesign

Ribbons

The single most important design element in 2011 has to be the vertical hanging ribbon. This thing popped up absolutely everywhere as a nicely integrated way of holding a logo, icon or some text while helping it stand out from the background.

The typical shape has two triangular points at the bottom, but designers have experimented with all manner of ribbon metaphors. One example below even takes a familiar ribbon shape and gives it an unexpected twist by turning it into a shirt pocket.

Change Nation

GiveBeyond.Me

Tao Community

Red Bowl Challenge

Marisco Gallego a Domicilio

LoadUp 2012 by PuddleDrop

DigitalSafe

Anhalter des Jahres 2011

Goatee Joe

Jopp

Sunday Best Websites

HarryFord

Kitchen Sink Studios

Three Things

Every designer knows that three is a magic number and this was very evident in web design this year. A very popular layout technique that you see again and again uses three prominent sections or objects to convey a process, list of features, or other concept.

I really like this trend because it forces designer to simplify the information presented to the user and divide it up into a few easily digestible chunks. The result is often a very attractive page that seems both informative and well balanced.

Tabspresso

Treehouse

Shady Acres

Sellfy.com

Curled/Folded Paper

The drop shadow has evolved. This design trick uses a simple illusion of a curved shadow to make the otherwise flat object above it look like curled paper. It’s such a believable little lie that even when you know what’s happening, it’s hard to make your eyes see what is really a straight edge. The shadow instantly makes your brain perceive a curve, no matter how straight you know it to be.

It’s an easy effect to pull off in either Photoshop or even CSS. Here are a few pages that use this trend effectively:

Literacy2030

Edits Quarterly

Greenjob

Borderless Grids

Another increasing visual trend is the disappearance of borders or margins on a grid of images. Historically, we more often than not lined up images in a nicely spaced grid but these days it’s quite popular to simply cram them all together.

I really like this look as it gives the separate images a very integrated feel. It’s an example of synergy at work where the whole is something greater than the sum of the parts.

Fuzzco

Ignacio Macri

CARLOS5TO

ROA Produktion

Diagonal Design

Our final design trend is the emergence of fairly chaotic looking designs that heavily leverage diagonal lines. Expect to see this design trend continue into 2012. Why? Because it represents a sharp turn away from the clean, heavily structured, minimal designs that have permeated the web design landscape for the past few years.

Looking back through history, you can clearly see that design trends are reactive. Something becomes cool because it’s different than the norm, then it becomes so popular that it is the norm. What was once rebellious is now commonplace, so someone comes up with a response that represents a clear departure. For instance, the minimal fad that I just mentioned arose as a response to the overly crazy, messy, and colorful design of the 1990s (see: Saved By the Bell). The current diagonal trend harkens back to these days while still maintaining an attractively sophisticated feel.

Bleep-Radio

Piropixel

Kikk Festival 2011

David Kopec

Marshes Shopping Centre

Wixel

Designer Gleb

What Did We Miss?

This represents only a handful of the many popular web design trends in 2011. Now it’s your turn to help out. Leave a comment below and tell us about any trends that you noticed or even took part in during the year.

Which trends were your favorite? Which did you hate? If possible, leave a link and show us an example!

The Apple design team is widely regarded as one of the most talented group of designers in the industry today. The trends that they set are followed by not only every other major tech company, but by web designers in every conceivable product and service niche.

Follow along as we embark on an exciting journey through time and witness the evolution of Apple’s design style. You’ll get several amazing glimpses at Apple.com dating all the way back to 1997 as we witness the rise and fall of several important design trends.

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

Apple and Design

The image above is a snapshot of the Apple website as it currently stands. It’s a perfect picture of everything we love about Apple’s sense of design. It’s clean and minimal with a strong emphasis on the beauty of the product.

There aren’t a million different banners or mega drop down menus to sort through, just a simple navigation scheme, a featured product and four distinct content boxes along the bottom that serve as a universal way to highlight other important products and information.

Notice the copy as well: brief and to the point with a touch of hyperbole (where would Apple be without it?). Despite the fact that the iPhone 4S has hundreds of features to be bragged about, they’ve whittled it down to four basic bullet points, just enough to snag your interest and encourage you to look further.

Was It Always This Way?

Apple has long been known for their sense of style and superior design. Unbeatable innovation is at the forefront of their success, but pushing that success along has been a tightly integrated brand image that’s irrevocably ingrained in its products, commercials, web pages and even its stores.

As we look at Apple.com as perhaps the most prominent and frequently updating pulse for Apple’s visual brand, I can’t help but wonder about the journey. How did this brand evolve? What did early versions of Apple.com look like? Were they similar? Did they share the same simple aesthetic or were they more prone to reflect the busy web design styles from a decade ago?

Apple in Print

To get a feel for Apple’s brand evolution, we should briefly consider the time before Apple.com even existed. From the genesis of the company, Jobs always placed a strong emphasis on simplicity. However, that term had a very different visual translation back then. Mac Mothership has a delightful collection of vintage Apple ads that give us a glimpse into Apple’s brand image in the late 70s, as you can see, it’s a far cry from Apple.com today.

These ads are filled with sales pitches and informational copy. This may be a necessary evil for new product categories, but it goes beyond this. Even the logos show an evolution of Apple’s definition of itself. The original on the left is a very complex illustration of Newton under a tree, the updated version on the right is a colorful rainbow shooting across the page. Both are far more complex than the simple and ubiquitous symbol we see today.

For the next twenty years Apple would flirt with generous amounts of whitespace but only briefly in between ads that followed the same basic copy heavy approaches that we see above.

It could be said that the most important jump towards the simplicity of the Apple brand that we know today came from TBWA\Chiat\Day, the agency behind the original 1984 Macintosh commercial and subsequently one of the most famous ad campaigns of all time: Think Different.

By 1997 Apple had found its identity. In over a decade, the Think Different campaign hasn’t aged a day. It doesn’t feel antiquated like the original Apple ads, it is instead timeless and powerful enough to impact many subsequent generations.

Back to the Web

Think Different changed everything for Apple (this charge was of course led by the return of Jobs in 1996-97). It provided an amazing identity not only to Apple, but to its customers. Visually, it rocked Apple’s brand style into what we know today.

Nowhere is this clearer than on Apple.com. Using the wonderful time machine of The Internet Archive, we can travel back to the early days of Apple’s website. Think Different hit in 1997 so if our premise proves true, we should see this as a year of change for the site. Here’s a look at Apple.com around the middle of 1997:

Not quite what you’d expect from Apple is it? Like the early print ads, here we see type, and lots of it. To be fair, compared to the general state of web design at the time, this was in fact a fairly minimal design. Indeed, everything is laid out nicely, but there is a ton of content. In fact, what you don’t see in the screenshot is that those news paragraphs go on for miles (click here for the live version).

Keep in mind that this design is pre-Think-Different. The previous Apple.com designs shared this aesthetic. Now let’s jump to May of 1998, the first in-tact post-Think-Different Apple site I could find.

The difference between the two aesthetics is incredible, they don’t even appear to be from the same company (let’s face it, they really aren’t). Where we used to find clutter and an over-abundance of information, we now find whitespace; tons and tons of white space. Where we used to find a page that scrolled for miles, we now find brevity.

The simple headline just says “Apple,” the product shot has made its rise to the hero and there’s even an impressive animation of the iMac spinning into place via the wonder of the animated GIF.

Think Same

The most amazing part of the 1998 design to me is just how similar it is to what Apple is currently using going into 2012! The typography, logo and splashes of color serve as an important design lesson in what type of elements you can expect to age over time in your design, but the fundamental layout here is shockingly close to what we see on Apple.com today.

The top portion of the site is reserved for the main product feature (in this case the original iMac), and the bottom is split into a few horizontal rectangles that feature other important products.

Key Differences

As I mentioned, the typography is a main element that stands out in this evolution. There’s a reason we refer to sans-serif typefaces as “modern,” you can clearly see how Apple’s current font brings their designs forward in time compared to the classic old style serif from 1998.

One of the most important changes I see here is the navigation, notice how far down the page it is. These days we’re so accustomed to topside navigation that this design would certainly throw many users for a loop (perhaps even an infinite one). Apple has obviously learned that helping you get to where you want to go on the site is quite literally a top priority.

A very important component of the layout that you don’t get from the cropped screenshot above is that the fixed width content sits on the left side of your screen. These days modern sites usually center their layouts so that the origin is the middle of the browser window.

Also worth mentioning is the Apple news feed, which remained a staple on the site for years and was only removed earlier this year.

Moving Forward: 1999

By October of 1999, Apple was still using the same design. The products are evolving but the page design is almost exactly like it was the year before. Notice the shout out to Pixar’s Toy Story 2 right on Apple.com, can you tell that Steve is at the helm of both companies?

Also notice a big change in the logo, by now Apple has killed the rainbow in favor of a solid white Apple. Apple would prove to be a strong leader in a logo simplification movement that’s still going on today. You can read more about this in our article, Pepsi vs Coke: The Power of a Brand.

2000

When we hit May of 2000, we see a few big changes take place. For starters, the entire layout is now centered in the browser. Further, the navigation has finally been moved to the top and closely resembles the aqua-style interface that Apple made famous with OS X. Notice the how complicated the navigation is with the two layers of links.

Glossy buttons and tabs were a huge movement in web design and were the standard “cool” for several years. The current web designer obsession with simple, minimal buttons with flat colors or subtle gradients is a direct response to this more ornate style

2001

Fast forward to November of 2001 and we see a few more important jumps. The aqua style has made its way down to the news feed, sans-serif type is beginning to take hold (notice the subhead) and the content boxes have evolved dramatically. We’ve made the jump to four instead of three and the boxes are now fully distinct shapes with rounded corners like those we see in the tabs at the top. They’re still rounded today, but Apple has pulled back dramatically on the border radius.

Though Adobe takes the center stage in this screenshot, 2001 was a monumental year for Apple due to the release of iTunes and the iPod. This marks their first foray into a generation of non-traditional devices that would entirely redefine the company. This was also the year they made the jump to OS X, a decisive move to a much more friendly and intuitive system which would prove helpful in winning over Windows users drawn to the Mac by their love of the iPod.

2004

By late 2004, Apple had begun to experiment with highlighting its main content area with a solid color rounded corner box. More typically, you would see this box in black, which made for beautiful contrast with the white background, but the iPod’s colorful advertising marked an occasion to bring some life to the page.

Another really important aspect of the 2004 design: they’ve made the jump to all sans-serif type. This is a major milestone in the advancement of design trends.

2005

Flirting with black in 2004 led to a major experiment for the release of Tiger in 2005. Here we see most of the Apple.com homepage flooded in black. A trend that carried to many of the product pages.

Also a very big deal by 2005 were product reflections, visible on the bottom of this page with the iPods. I fully remember seeing these and immediately ripping them off for the projects I was working on at the time.

2007

Apple trends stayed fairly static for the next few years, it wasn’t until late 2007 that they finally made a huge and very welcome leap towards the site that we know today.

The site’s homepage has been completely overhauled. They’ve widened up the content considerably and killed the old aqua navigation, replacing it with a greatly simplified version utilizing the smooth gradients that I already mentioned would follow the aqua trend for most designers. The expanded content width can definitely be attributed to the widescreen displays that were now present on most desktops and notebooks alike. It’s very important to stay aware hardware evolutions that can and should affect UI design trends.

Also notice that the search bar is finally at the top of the page. This was an afterthought thrown in at the bottom for far too long and it was great to see it finally get the attention and prominence that it deserved.

2011

Apple found its stride with the previous design and it stuck largely unchanged until January of 2011, an impressive run by any standard!

At the beginning of this year, we saw Apple take a step back and return the navigation to a glossy look, albeit an updated dark finish. They also began experimenting with some subtle background noise texture, a painful move in my opinion that made their typically leading design team seem like they were jumping on popular trends set by countless others before them. Click the image below to see the texture up close.

What’s Next?

It’s difficult to predict where Apple’s homepage will go next, but we see some interesting experiments taking place further in the site. Despite the fact that the home page has dropped the noise texture, the current iPhone page has introduced a much heavier implementation of a textured background, with an inset product area.

There are also some really impressive animations of the iPhone flying in and out of view. These replace the animated GIFs of 1998 with modern web technologies, but the heart of the idea is definitely the same.

Going forward, will we see Apple return to old tricks like animated products and glossy buttons? And will they trudge on in their implementation of textured backgrounds, perhaps introducing more of the textures that we see in iOS? Your guess is as good as mine!

Conclusion

This study of the evolution of Apple.com is so much more than a look into the whims of a single company, it serves as an important lesson on several major web design trends for all companies in the last decade. We witnessed the simplification of layouts and reduction of text, the rise of sans-serif type and the several year love affair with gloss that we’re still toying with today despite the resulting rebirth of minimalism.

We can easily spot other trends as well such as the increase in importance of search bars, the realization that navigation should be prominent and easy to find and the richness that new web technologies are bringing to web design in a post-Flash era. Apple has been responsible for pushing HTMl5 and CSS3 perhaps more openly than any major tech company in a direct assault against Adobe’s reign.

A huge thanks is owed to the folks at Internet Archive for preserving these and countless other important pieces of design history. I greatly look forward to seeing whether Apple will serve as a leader or follower in web design trends in the years to come.

Last week our U.S. readers celebrated Thanksgiving and its subsequent shopping madness known as Black Friday, where retailers dramatically reduce their prices for a day of pure shopper mayhem.

Instead of joining the stampede of frantic shoppers, I followed my annual tradition of hiding away in my home office. However, I couldn’t resist a look around to see how various stores were handling the design side of the event. Let’s see which top name retailers pulled out all the stops and which ran with cliché, generic and even ugly designs.

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

General Retail and Electronics

Let’s kick off this list by looking around at some of the Black Friday sites for big name brick and mortar retail stores with an online presence.

Target

I’ve long respected the Target creative team as some of the best in the retail industry. From television commercials to junk mail, Target has a history of good design. They’re also one of the leading hype-builders for Black Friday. Consequently, I had high hopes for their site on Friday. Unfortunately, this is what I found:

To be fair, it’s not horrible, it’s simply not what I’ve come to expect from Target. If I had to use one word to describe this, it would be “weak.” It’s not bold, exciting or even well laid out. It’s a clutter of objects that don’t fit well together and don’t highlight the sale very well.

Above you can see just a few of my thoughts as I look at this page. The products and prices are the hero of any Black Friday sale, here they’re lost in the mess. Further, the entire page is filled random alignments and poor whitespace distribution.

Sorry Target, I’m not a fan. Better luck next year.

Walmart

It may be necessary on some level for super retailers, but I simply hate the banner-driven web design on sites like Walmart. Nothing looks integrated, nothing matches; the entire header looks like a collection of the type of banner ads we’ve been trained to ignore.

Walmart’s Black Friday page held true to this legacy. However, you can’t really expect the entire site to be redesigned for the sale so it’s probably not too fair to judge this round of designers for anything more than the two banners in the middle.

As with Target, these aren’t necessarily horrible, but they’re certainly not impressive either. Here’s a close-up of that main ad:

I get the message pretty quickly and it’s clearly meant to get me thinking about Christmas shopping. However, the typography could be a lot better. The progression from big to small as you read down the page is awkward and the two lines in the headline are distinct statements and could use some differentiation.

Further, there are several points where the layout seems crowded, the snowy edge in the background randomly goes from blurry to crisp, the button treatments are ugly, and the way the separate times are presented is a little confusing.

Kmart & Sears

Kmart & Sears are in the same family of retailers and both of their sites suffered from the same problem. Everything in the main banners of these sites was either one big image or a series of small ones, text included. We moved beyond these types of practices ten years ago.

They weren’t just images either, they were ugly, pixelated, low-resolution images that looked like they had been compressed to near death. Here’s a tip, if you want to cut down load times, try using live HTML content.

Best Buy for the Win

Of the big name retailers, most were pretty disappointing. However, they weren’t all bad. Best Buy, for instance, made a really strong showing. Their page featured a clean and modern design, was completely void of clutter, had a friendly and welcoming environment, and clearly delineated the various sales categories with easily recognizable icons.

To anyone who wants to argue that big retailer sites simply can’t pull off a good design due to the restraints of this type of medium, Best Buy’s page stands tall as a big fat, “you’re wrong” statement.

Others

Toys R Us
Toys R Us was of course silly and cartoony. I was tempted to not like it but given that it’s for a kid-centric audience (adults shopping for kid stuff), it’s a pretty good direction and definitely seems to fit their familiar brand.

Radio Shack
Big red background with white accents, hero product shots; this is what I expected from Target! There’s plenty that I wasn’t crazy about on the site, but the main portion shown here seems to work well.

Kohl’s
Kohls’ showing was a little awkward. It seemed like it was just slapped onto the site over the normal content. It definitely didn’t feel integrated or particularly attractive.

Office Depot
These guys easily had one of the ugliest Black Friday themes that I found. Sunbursts everywhere, hideous color palettes, type treatments from 1995, I’d go on but I don’t want to look at it anymore.

Computer Manufacturers

Here we’ll take a look at how three major computer retailers handled the aesthetic of their Black Friday sales.

Apple

Apple is of course no stranger to good, clean design and their Black Friday showing is was no exception. It wasn’t by any means groundbreaking, but it stayed right on brand, communicated its message nicely and of course highlighted those always gorgeous product shots.

Apple of course wouldn’t let a sale take over their whole site so this appeared about a quarter of the way down their store page, which was a bit awkward but overall I think it worked well in the grander design scheme.

Dell

Dell chose to take a very minimal, low hype, high class approach to Black Friday. The home page was simple and the contrast combined with generous whitespace made the main banner super attractive.

They took it a step further and customized the shopping experience as well. Their store was overhauled to heavily feature their top deals, complete with countdown timer and sold out notices. I may be an Apple man, but I can give credit where it’s due and Dell really made a stellar effort here.

HP

I couldn’t get past HP’s refusal to center their container long enough to really evaluate the site, but that alone tells me that great modern web design isn’t high on their list of priorities. Seriously though, the Black Friday graphics were nice enough but this store as a whole needs some major work.

Fashion

The last section of Black Friday sales that I decided to check out was fashion. I figured if anyone should have a strong visual aesthetic it would be companies who literally sell style.

American Eagle

This assumption turned out to be spot on. The first site I checked was American Eagle and it was a breath of fresh air. Finally, someone had made a decent effort to go all out and just create a beautiful Black Friday homepage.

Smiling faces everywhere, great colors and a super simple layout help push this design into the major leagues. Also, look at that awesome and huge 40% off banner in the dead center of the page. Some designers seem to think that you can’t announce a sale using anything but design treatments devised when Saved By The Bell was still on the air but it turns out they’re wrong, you can in fact make a big, bold sales announcement and not compromise the design one bit.

Abercrombie

Abercrombie followed suit in its own overly dramatic and “too cool for school” way. The ripped man-chests that define Abercrombie design might make this lazy desk jockey feel like a pitiful excuse of a man but their design is always very stylish and conveys a premium and high quality feel.

I would’ve probably never center aligned that big column of text on the left but in all honesty I think it looks great. This skillful variation in font size is exactly what I meant earlier when I was ripping on Walmart for horrible typography.

Abercrombie stores are still so filled with gag-inducing cologne and hormonal teenagers that I won’t go anywhere near them but their designers are star players.

Aeropostale

Aeropostale definitely doesn’t meet the high style bar set by the previous two sites but it’s still a fairly good effort.

Forever 21

I’m not personally ready for washed out over-flashed photography with blown highlights to be a cool thing but girl stores like Forever 21 and Urban Outfitters have their own aesthetic that people like my wife seem to love. Their Black Friday page seems in line with this increasingly popular style and at least has a strong simple layout.

Old Navy

Not everyone in the fashion industry is aiming for high class design, take Old Navy for example. These guys are always hit or miss with me. Walking around their stores, I love their vintage lettering, grungy textures and great design metaphors. Projects like this one though simply don’t resonate with me. At the very least, it highlights the low prices really well, if you can look past the ironically cheesy but still annoying gimmicks long enough to read them.

Conclusion

If Big Friday is the biggest shopping day of the year, it follows that retailers would spend the most time and effort making sure their sites are perfectly primed to get you to join the fray and blow your paycheck.

Some players stood out and really showed the talent of their design teams. Best Buy was clearly a leader in big box stores, Dell was surprisingly quite stylish in their presentation and American Eagle showed that you can throw a sale in someone’s face while maintaining a friendly, gorgeous design. Others however ranged from mediocre (I’m looking at you Target) to horrible (Office Depot just needs to apologize).

Leave a comment below and let us know what you thought of Black Friday design this year. Were there any retailers that stood out to you in a good or bad way? We want to know!

Tour pages are one of the most important components for websites advertising apps and/or services. The tour page is often where interested users will either make the firm decision to sign up or move on to something else.

Needless to say, there’s a lot of pressure as a designer to get this right! Fear not however, many talented designers have gone before you and we can learn a lot by looking at their examples. We’ll dive into tour pages from giants like Mozilla, 37Signals and Mint.com and see what common tricks they all use to win conversions.

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

It’s Harder Than It Looks

You’ve done it, you’ve wrangled that ever elusive home page click out of the user. They’re interested in your site and they want to learn more. You think you’re in the clear but a new challenge awaits. You now have one shot to convince them that you can make good on the promises of the home page, that your app does what you said it would and more in a way that is better than what everyone else is doing.

You’re designing a tour page. It’s a deceptively simple task. You’ll do well to not run through it half-heartedly but instead spend some solid time making it the best page you can. This is where potential users will really start to form judgments about your service and you don’t want to screw up that all important first impression. Let’s take a look at some live examples from designers that have gone before you to see what we can learn.

Mint.com

Mint is one of my favorite services on the web. Not only is it immensely helpful for tracking every cent you spend, it also happens to be super attractive from a design perspective. Since their designers are so talented, I figured they could probably teach us a thing or two about today’s topic. Here’s a snap of the tour page:

Content Organization

The first thing I notice about this page is that it has a ton of content. You don’t want to overload your visitors with information if you have a fairly straight forward service, but something financial like Mint raises a lot of red flags with people who’re rightfully cautious about giving a website access to their bank account. In light of this, Mint is very transparent about every aspect of the service before you sign up.

This is an important concept. If your service has any reasons that would give visitors pause when thinking about signing up, the tour page is your chance to address those issues in detail by being open, honest and reassuring about your product.

Another great thing that Mint gets right is the organization of the content into small, digestible and neatly organized chunks. Rather than tossing everything into one mile long page, they’ve implemented a sort of AJAX content switcher that updates the right column as you choose a topic.

Strong Content Presentation

Another thing that mint really nails is the presentation of their content. Take note of this because lots of people get it wrong: Short, simple and straightforward headlines coupled with clear, attractive screenshots and brief but descriptive supporting text. Here’s what that looks like in action:

Notice the copy here, it’s brief and to the point while telling you what you need to know. Also check out how the screenshot is focusing in on the important part, this loupe trick is really common in web design right now.

Mint has another trick up its sleeve as well. When the screenshots may not be enough, they toss in some extra visual cues. In the screenshot below, the headline about a budget is reinforced by the instant read of a piggy bank with a belt around it to signify budgets:

The screenshot could’ve done this itself, but the graphs are a little vague and were therefore not an instant read, the pig may be cheesy and predictable but it helps push this design right where it needs to be.

Basecamp

Let’s leave Mint behind and look at another well designed tour page. The folks at 37signals are known for their simple and clean design style that serves up just what you need and nothing more. Here’s a shot of the tour page for their Basecamp app.

Different, But the Same

Notice two important aspects of this page in light of the previous example. First, the design style is very different from Mint’s. However, the pages are actually incredibly similar. Notice the brief chunks of content organized by a content switcher on the left, screenshots, strong headlines, extra visual cues to aid the screenshots, even the back and forth layout style is almost exactly what we saw on Mint.

This is a very important thing to learn as a designer: design patterns exist independently of design style. Mint has a very shiny, finished look with lots of gloss and reflection while Basecamp is very flat in its Google-like simplicity. This is merely the candy coating though, under this is the critical framework of a strong layout, which makes the content easier to take in.

Digging Deeper

Once you’ve checked out the overview for the Basecamp features, you have the opportunity to see them in action by clicking on the little video links scattered throughout the page. I’m a sucker for a good product video and I think these really help to keep your content brief and to the point while still offering the in-depth look that some visitors need.

Keep in mind that Basecamp prides itself on how simple and stripped down its feature set is, so if Basecamp isn’t too basic for product demonstration videos, neither is your site. Video screencasting apps are very affordable and easy to use so no matter what your budget is, it’s not hard to pull together some professional looking video tours.

Mozilla Rethinks the Tour Page

The basic format that we’ve seen for the last two tour pages is a fairly common one. You can see nearly identical tactics being used on dozens of web app sites. Check out the tour pages for Checkout App and Campaign Monitor and you’ll find that same left aligned content switcher being used in conjunction with brief lists of features coupled with screenshots and icons.

There’s a reason this format is so widely used: it works. Each of these pages is able to maintain its own unique identity while sharing tried and true techniques with its brethren. However, this doesn’t necessarily mean that the rules of the tour page are set in stone or that we’ve landed on the best possible solution for all sites.

One example of a company that often decides to think outside the box is Mozilla. Their talented design team decided to ditch the common tour page format and blaze their own trail. The result is a fun, interactive and incredibly straightforward overview of the browser:

Here we see a screenshot of the browser with a bunch of markers placed all over it. The instructions are simple and can be read in a second: “Roll over the markers below for feature info.” Following this advice gives you a closer look at the important features.

I love how direct this method is, it explains the app’s features not through abstract generic icons and bloated paragraphs but with a simple screenshot that points out everything you need to know.

An Organized Mess

This method of marking up a screenshot makes for a fairly organic design. Rather than a predictable and logical flow, the markers are scattered all over the place. There’s a very subtle design trick though that helps you see order in the chaos, can you see it?

That little dotted path is one of those tiny design touches that can really pull a page together. Without it, there’s a mess of links, with it, there’s a clear progression to follow. Granted, you don’t have to follow it perfectly and I’d wager that few users ever do, however, it’s mere presence gives the page a slight but important usability boost while bringing in a semblance of order.

Show the Process

Our last tour page design trick that you should know comes from Big Cartel. Here’s a cropped shot of their tour page:

There’s something super simple but incredibly effective at the top of this page, a three step process. Sometimes a tour page needs to be more than a simple showcase of features. For instance, when you’re claiming that your service simplifies something complicated, such as setting up an online store, it’s critical that you illustrate how this works somehow.

Three is a magic number so when possible, try to break down processes to three nice and simple steps that anyone can grasp. This is all about making the user feel empowered, they need to look at this and say, “I can do this!”, especially if they’ve looked elsewhere and found only discouragingly complicated solutions.

Conclusion

The examples above each have their own unique lessons to teach us and together they paint a picture of some very common tour page design practices that you can implement in your upcoming projects.

As you embark on your tour page adventure, remember that the web gives you remarkable freedom to experiment to see what works best. Try coming up with a few different designs and then running some A/B testing to see which users respond to best.

If you’ve designed a tour page recently, leave a comment with a link below. What techniques did you employ to ensure success? Have you learned anything by experimenting with different layouts and designs?

Great design inspiration is all around us. Sometimes the best examples are so common that we see them all the time without a second thought. The cars we drive, the advertisements in our mailbox, the cover art on that new album you just downloaded, all of these are teaching their own little design lessons and if we would but listen, we just might learn something.

Today’s subject is playing cards. At least one pack can be found in almost every home in America, which means they’re a perfect example of ubiquitous design that we take for granted. We’ll take a fresh look at why they’re so perfectly designed and learn a little history along the way.

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

A Little Background

Playing cards have been around in some form or another dating all the way back to 9th century China. By the 14th Century, they were making their way around Europe.

There were two primary design patterns popular in Europe at this time: Parisian (popular in France) and Rouennais (popular in England), the latter of these having a great deal of influence on the card designs that most of us know today.

The four card suits that we are familiar with, hearts, diamonds, clubs and spades, were created by the French. The original concept of suits came from the Italo-Spansish deck, which contained cups, coins, clubs and swords. The simple French suits were much easier and cheaper to manufacture because simple stamps could be used for the numbered cards instead of the traditional woodcut method. Only the court cards in the French deck required woodcut illustrations.

Already we’re seeing good design in action. The graphics were specifically created with affordable replication in mind.

Taking a Closer Look

Have you ever really thought about how well designed playing cards are? You might scoff at this notion but I’m quite serious, they’re a shining example of the marriage of aesthetics and usability into a coherent and nearly perfect product. As an exercise in how to learn from the amazing design all around you, try to clear your mind of everything you know about cards and attempt to look at them for the first time.

Symmetry

Playing cards are one of the best examples of symmetry in design that you will ever find. This expert wielding of a basic design principle serves two purposes. First, it makes the cards quite attractive. Our brains love symmetry and are attracted to it both in nature and in art. More importantly perhaps, the symmetry in a deck of cards serves a functional purpose: you can’t hold a card upside down. It seems a small thing, but functionally the game goes infinitely smoother if cards can be immediately picked up and placed into a player’s hand regardless of orientation.

This is simple enough with the numbered cards, but the symmetry persists (albeit a reversed symmetry) into the “court” cards, which modern players commonly refer to as face cards.

Court cards were originally created as full length character illustrations, the symmetry was added as an improvement around the middle of the 19th century.

Usability

Playing card designers went well beyond symmetry in consideration of how to maximize the functionality of the designs. There are quite a few design characteristics worth mentioning. Notice how the numbered cards display their suits, not with a single illustration but by repeating the icon to match the card’s value. Originally, this allowed the exclusion of typography, these days it serves more as a bonus visual indicator.

Eventually though numbers (and letters) were added in the form of corner indices, which made their way into American decks in 1875. This design tweak allowed players to hold the cards closer together in a single hand rather than dispersing them over two hands; a major usability boost!

Before this, the Jack card was more commonly referred to as a “Knave” or “Knight.” This presented a problem with the indices though as a “K” would appear on both the Knight and the Knave. At this point, the card was officially changed to a Jack to prevent confusion. Once again, we see the designer keeping the user’s best interest in mind.

Meet the Royal Family

As playing cards evolved, the originally generic royal figures took on specific personalities. Popular historic royal figures were chosen and ascribed to each court card. The image above shows the kings, David, Charles, Julius Caesar and Alexander the Great. Similarly, the queens of spades, hearts diamonds and clubs are, respectively, Pallas, Judith, Rachel and Argine. In the same order of suits, the Jacks/Knaves are Ogier the Dane, La Hire, Hector and Judas Maccabeus (or Lancelot). Read more about this here.

The names were occasionally printed on the old cards, but today these personalities aren’t really considered, standardized or used in any way.

Mystery and Fun Facts

The designs on the court cards hold some secrets as well. Notice how the King of Hearts is the only king without a mustache, and he appears to be killing himself! Some speculate that the latter of these has to do with the uncertainty surrounding the death of Charlemagne. Also notice how the King of Diamonds is the only king with an axe instead of a sword.

One very likely story sums up all this mystery in a single, simple solution. Supposedly, after numerous copies, the integrity of the original artwork greatly declined. This lead to the vanishing of the King of Heart’s mustache and the other half of the axe which was traditionally slung over his shoulder, which would’ve resulted in a clear pattern: black kings carrying swords and red kings carrying axes.

One-eyed Royals

Another interesting fact, the Jack of Spades, Jack of Hearts, and the King of Diamonds are depicted as profiles, meaning you only see one side of their faces. This gives rise to the terms “One-eyed Jacks” and “One-eyed Royals.”

The other court cards are shown with in a more front-facing fashion, typically still looking left or right but showing both eyes. The one-eyed cards are attributed special significance in certain games.

It’s also interesting to note that only four court cards, all of which are black, are looking to the right. The other eight cards look to the left.

The Ace of Spades

Why is the Ace of Spades given special significance? It used to be the case that Kings were the cards with the highest value in the deck, but from the 15th century on, the Ace, commonly the lowest valued card, became more important.

Then under King James I of England, a law was passed requiring an insignia on the Ace of Spades as proof that the required taxes had been paid. This led to fairly lavish embellishments of company logos on only the Ace of Spades, which pursues to this day.

Around 1860, even the Ace was dethroned as the highest trump in some games as the Joker came into being. “Joker” could be a derivative of “Jucker”, which is German for “Euchre” a game utilizing this now famous card.

Sources and Further Reading

I’ve barely scratched the surface of interesting card facts. Here’s a list of sources for the information above, each is loaded with a ton of great history so be sure to check them out.

• Snopes: The Four King Truth
• Wikipedia: Playing Cards
• 10 Interesting Facts About a Standard Deck of Playing Cards
• WOPC: History of Court Cards
• 5 Things You Didn’t Know About Card Games

Grab a Free Set of Vector Cards!

Most of the images in this post were built using a free set of vector cards made available by Inkscape. A huge thanks to Chris Aguilar for the time and effort he spent on these in addition to making them available for download. Be sure to grab the free download!

Conclusion

The point of this article is to get you to think about the normal every day objects around you from a designer’s perspective. Who knew there was so much rich history and logic surrounding why playing cards look the way they do?

As you become aware of interesting facts about how much design goes into silly little things that no one ever notices, you’ll find yourself wanting to put forth that extra effort to really refine your designs and put forth your best effort, regardless of the credit you’ll receive for doing so.

Know any more fun facts about playing cards? Leave a comment below and let us know!

Photo Credits: Adrià Ariste Santacreu, Nancy Ellis and Steven Depolo.

Today we’re going to take a step back from discussions of media queries and technical jargon and focus on the core aspects of how responsive techniques affect your design process. What major points do you need to keep in mind when approaching a responsive web design project? 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.

Design is More Than CSS

There has been a lot of discussion lately regarding the techniques involved in responsive design from a technical standpoint: media queries, percent based widths, etc. However, once you master the CSS tricks for implementing a responsive design, you’re faced with a much bigger hurdle: the actual design.

It sounds like a daunting task doesn’t it? You’re setting out to create one cohesive, consistent experience that looks perfect on just about every screen size. It’s hard enough to pull off a professional design when you’re worrying about a single format, how much more difficult will it be for responsive design?

This is a key reason for the hesitance for many designers to adopt responsive design as a default practice. The most frequent objection I hear from both designers and their clients is that responsive design sounds like a fairly time intensive venture. Designers are forced with attempting to either justify a price hike or eat hours in the name of producing quality work.

Fortunately, from a CSS standpoint, projects like Skeleton really cut back on the coding time commitment. That doesn’t mean you’re off the hook though, as a designer you’ll still need to focus on creating a solid experience for every user and that means investing some serious thought into how the design process changes in light of this new methodology. Let’s take a look at a few of the primary considerations for you to keep in mind.

Photoshop Won’t Cut It

With responsive design, designing in the browser is no longer a fad, it’s a necessity. You can definitely spec out some ideas in Photoshop for how the site should look at different widths, and doing so might even provide richer end results, but the simple truth is that Photoshop can’t replicate the kind of dynamic effect that is indicative of responsive design.

When you’re talking about a single design that evolves with the browser window size, the best way to plan that out is to kick the tires and see it in action in the browser.

Don’t see this as a Photoshop bashing rant, you don’t have to and shouldn’t abandon using images, textures, etc. that were built in Photoshop, Fireworks or other graphics software. However, putting them together in a quick mockup is likely going to be best achieved through live browser implementations rather than static thumbnails.

Keep in mind that your mockups can still be low fidelity products, whether you want to start with a basic wireframe or a fairly finished looking design is completely up to you. The key here is that you have something live that allows you to test the various evolutions so you can solve problems as they arise rather than wasting valuable hours on a fundamentally flawed idea.

Dramatically Different

Sometimes scaling a design down is as simple as reflowing the items from multiple columns into a single stacked column. If your design is split up into nice little chunks, this may be the way to go.

However, remember that dramatically different devices can call for dramatically different designs. It’s often the case that a genuinely better solution can be delivered through a considerable change in how the page works. To see what I mean, consider the El Sendero del Cacao design below.

As you can see, the large and small versions of the design differ quite a bit. The key here is that they still look like two versions of the same site, meaning the brand consistency has stayed on point. The designer merely decided that the mobile version functioned better with considerably less visual flair than the full version.

Keep in mind that “different” doesn’t always mean a complete and utter stripping down. Your mobile version doesn’t have to be boring and predictable. The point here is not to strip everything away but to critically consider all the different key sizes that you’re targeting and how you might improve the experience for each by rethinking the fundamentals of the design.

What’s Absolutely Essential?

One of the major components of transitioning your design through various phases is to target the absolutely vital components of the design and give them the highest priority.

As we saw in the previous example, it’s definitely not always going to be the case that your mobile-friendly version will contain everything that your full-size desktop design will. The trick then is to consider everything that you and your client are planning on including and create a hierarchy of importance so that you can trim the unnecessary for the smaller versions.

We see this principle at work in Stephen Carver’s site below.

Notice how the design has not only been reflowed but actually trimmed down for the mobile version. Some of the content was viewed as essential while other content is more of a “nice to have” when there is enough screen space available.

The most obvious example of this is in the navigation area. Notice how the larger version of the design contains little sub-headers for every navigation element. These help the user further understand the navigation scheme. On the small version however, these have been stripped out to save room.

While analyzing your design for essential elements, experimentation is the key. Try stripping out various components to judge whether or not the usability suffers. Note that these decisions must be made at every interval, not just the smallest and largest.

Touch ≠ Click

Another significant point to remember as the design scales is that the current state of computing is split into two different categories: touch based input devices and those that use a cursor. The safe assumption of course (for now) is that larger browser window sizes tend to correspond to desktop or notebook computers while smaller browser window sizes usually indicate a touch-based interface.

These are significantly different beasts and you’ll do well to remember that while structuring your designs because the direction this knowledge leads you in might be a little counterintuitive.

For instance, even though we tend to think of the mobile site as a scaled down version of the desktop site, it’s often the case that elements will actually increase in size due to the difference between touching and clicking. A navigation element that seems perfectly accessible with a mouse and cursor might be next to impossible to accurately target with the large, crude input device that is the human index finger.

The important thing to remember here is to test like crazy. It’s too easy to design on a desktop and then resize the browser window to take a peek at that mobile version. This simply doesn’t tell you the full story. You need to get your hands on the design at a smaller size before calling it good.

It’s All In the In Between

One crucially important thing to get in your head regarding responsive design is that it’s about more than screen sizes: it’s about browser window sizes. Just because someone has a 13-inch MacBook doesn’t mean their browser window is that size. It’s often the case that users open and use browser windows at far less than full screen.

The takeaway here is that you’re not off the hook after testing a few preset window sizes. Resize the browser window and watch how the design responds at each little step. The standard argument is that non-designer users never perform this action, and that’s correct, but they will use their browser windows in an endless array of unpredictable sizes and the beauty of responsive design is that you can fairly easily ensure that your design will look perfect in all of them.

Consider Going the Mobile First Route

Ultimately, how you plan out your responsive designs is up to you. However, there are plenty of strong arguments for joining the mobile-first crowd.

Starting with the mobile version helps ensure that you’re not simply serving up a crappy half-hearted version of your original design to your mobile users. It also ensures that you really think through the specifics of every little piece of content.

Above we stated that you need to comb through your design and target the absolutely essential elements, this is a far easier process if you actually start with only the bare essentials. With this technique you can proactively add to your design as the page size increases as opposed to cutting out as the page size decreases. This follows the concept of progressive enhancement, which starts with a solid functional base and offers improvement where possible.

Another benefit of mobile first is that you can often avoid the loading of unnecessary elements on smaller devices that won’t use them. Projects like 320 and Up are aimed at helping you minimize the resources loaded by the small version of your design.

Conclusion

The point of this article was to get you to stop thinking about the backend portion of responsive design long enough to consider the ramifications of this technique on what the user sees. Far more important than media query syntax is the end result of how your design evolves from a visual and functional standpoint to meet the user’s needs.

Remember that you need to actively progress your design in the browser, not just in a static design application. You also need to establish a concrete hierarchy of the most important elements in the design to make sure those pieces of the puzzle are present and working perfectly for every window size. Finally, remember that mobile web design is much more than scaled down desktop web pages. Consider taking a mobile first route to help ensure that all users are receiving a rock solid experience.

Image Credits: Claudia Regina

From here you gain access to a slew of applications both free and paid. These are all built for OS X Lion and can be downloaded directly into Launchpad. In this case study I’ll be looking into design trends for Mac app websites. These are specifically geared towards OS X and do not include iOS apps… the styles are very different. Along with these tips I have also compiled a small showcase gallery of my favourite Mac app sites to share a bit of inspiration.

Enlarge your Key Points

When people land onto any app website they hope to figure out the purpose of the application very quickly. The easiest way to do this is by immediately grabbing the visitors’ attention and guiding them throughout the layout. And from past experience it seems jumbo-sized text/graphics will often do the trick.

Alfred App is one such example which incorporates the entire screen into a sliding layout. Both the app logo and download button jump off the page at a glance, along with the monstrous app icon! Users familiar with the Alfred app will recognize the unique hat and magnifying glass. And it’s not just the top page area, either.

As you scroll down you should notice each page section is also broken into pieces. The demo screenshot area has a small column for thumbnails with a beautiful display of the app. Just by checking out the few demo shots it’s generally understood what the app can do. As you find more application websites keep your eyes open for the “big picture” stuff which is meant to stand out. Also keep yourself thinking about what should be jumping off your own app website.

Clean-cut Characteristics

The more popular site designs are often featuring the same type of elements. This could be a more finalized and detailed icon design, fancy logo text, and other fun graphics. But you should follow Apple’s example and cut out the expendable stuff. Clean and simplified interfaces will keep your visitors’ focus moving through more downloads and purchases.

I am a huge fan of Instagram which has taken up plenty of my time on iOS. And the Mac app Carousel is a beautiful sister-service on the desktop. If you notice their site layout features a smaller logo area with more room for screenshots. Additionally the typography appears more refined to match the classy, upscale theming.

You should also notice there isn’t any main navigation here. Consider duplicating this for your own app website, it removes a lot of user frustration. This idea goes double for mobile users finding your website for the first time on iPhone or Android. If you can portray your app’s message on a single page I say go for it!

Include Standard App Store Icons

To grab your visitor’s attention is one important requirement, but you also want to garner their trust. And people who are using the Mac OS are generally trusting of Apple developers. You should include badges and/or buttons on your site to let people know that you’ve been published into the app store. It may seem small, but it can be of huge significance to new potential customers.

The Mac App Store Marketing Guidelines (PDF) go into a bit of detail about the App Store badge you see on most of the popular Mac apps. I also like to hit up dribbble’s shots to see if anybody has cool design sets or icons relative to the theme.

Provide a Demo Where Possible

Remember the whole point of conveying your message quickly? This can most easily be achieved through images or video – no big surprise there. But even just thumbnail galleries or slideshows sometimes aren’t enough.

You should try to include a demo of your service in a type of workflow infographic There are tons of free PSDs to download which fit into MacBooks, iPhone’s, iPad’s, and everything else. Here’s a beautiful example of a free iMac PSD template to download. Now you could take screenshots of your application and build small demonstration images.

This works really well in the example above for NotifyMe. The app is open and developed for all 3 platforms on iOS/iPad and OSX. At first glance you can assume the app is a notification-type system. Through a small demo graphic and some further explanation, you can put together the extended features to compose your opinion on the app.

Dynamic Animations & jQuery

Apple is also well known for having beautiful transition animations. Their attention to detail in both design and function is incredible – spanning the breadth of their entire software portfolio. And as a web designer publishing under Apple you may find your app site could use a magic touch.

Reeder for Mac is beautiful and the demo site fits just as well. Notice the page URLs are extremely simple and easy to pass along to friends or via social networks. Additionally the navigation is held in a side column, while page content is slimmed down to the bare minimum.

Although Reeder does have quick page speeds, it is only one example of many app websites. If you enjoy these dynamic animations consider looking into the jQuery library and also the jQuery UI set as well. These are two very popular JavaScript libraries with pre-built functions for page effects… and you can build a lot! For one idea you may enjoy this small Apple-style tutorial using jQuery to build a splash screen fade-in effect.

Inspiration Gallery

As mentioned earlier no case study would be complete without a small design showcase. Below are just a few examples of my personal favorite OS X app website layouts. Check ‘em out and let us know what you think! And if we missed any awesome app layouts you really like be sure to let us know in the comments.

Versions

Espresso

Things for Mac

Delibar

Transmit

Checkout

Kaleidoscope

Tangerine!

Dropzone

Postbox

Courier

Lighthouse Keeper

Git Tower

Espionage

Cornerstone

Soulver

iBank

WalletApp

Sparrow Mail

We’ll go over some quick and easy tips for crafting gorgeous designs that don’t feel empty despite using very few resources.

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

Wide Open Spaces

Throw a bunch of designers around a table and you’ll find many of them complaining about how clients always want them to squeeze so much into such a little space. Non-designers tend to focus on maximization of the potential of an available web page or printed ad with little to no thought that information overload can often render even the best designs ineffective.

Figuring out how to organize a lot of information and resources in a limited space is a big problem that we all face, but it’s only half the story. Perhaps just as many designers struggle with clients who have very little to provide, both in direction and resources.

When you don’t have much to run with, a blank page can seem huge and you’re left wondering how in the world you’re going to fill it. Let’s run through a few common scenarios and see some example solutions for each.

Only One Photo, Minimal Text

This is a fairly common issue designers. You need to produce a quality, finished design but you’ve only been provided with a single image to work with. To make things worse, you only have a few sentences of text. If you were given a full page ad or an entire web page, this could seem fairly disheartening.

Tossing the image onto your canvas, you see tons of space that needs filling up!

As we start to add standard web content, the page admittedly begins to look a lot better. By simply moving the photo to the right, we get a decent two column layout that follows minimalist trends and has plenty of nice contrast.

Unfortunately, it’s completely boring. The elements don’t look “designed” so much as thrown together in the most obvious fashion. For some images, this might be the best we can do but it’s a good idea to really take in the photo and think about how you can use it in a more creative fashion.

In our case, it’s a studio shot on a black background. This makes extending the photo a virtually painless process. Full-bleed images have a way of looking classy and professional. We can use an almost identical layout as before and achieve a much more visually stunning result:

Using the Same Photo Multiple Times

One really great trick you can implement when your resources are limited is to use repetition to give the illusion that you have more to work with than you actually do.

For me, this typically involves finding ways to duplicate the image tastefully and without obvious redundancy. Here’s our example project at step one. Once again, we have something that’s fairly boring and not very creative to start with:

To give a little bit of life and variety to the layout, let’s focus on maximizing our use of that single photo. For starters, with a few layer copies and simple Photoshop layer effects, we can turn a single image into a stack of photos. Already our page is looking a little friendlier and less rigid.

To take this idea even further, let’s turn the same photo into a background texture. We stretch it to a full bleed and then screen it back a bit. This takes that plain white background and adds much more visual interest.

At this point, the background image is quite obviously the same photo. This isn’t necessarily a bad think but if you want to abstract it out a bit so it’s not quite as obvious, try blurring the background.

You can go as far as you want with this. Try adding a little texture as well. The background image basically just provides us with something other than a white background for our canvas. As we build on top of something that mirrors the feature photo’s colors and composition, our design stays nice and consistent while giving us remarkable freedom to experiment.

Filling the Gaps with Stock

Another important thing to remember is that you can always use stock imagery to help round out your resources. Even if your client has already provided you with a primary image to use, it’s often a fairly easy task to find a related photo that finishes off the design nicely.

As an example, let’s say our client gave us the following image to work with and the instruction to display it prominently on the page.

Given that this image is so attractive, we already have a lot to work with. We can easily use the sea turtle image as the basis for a great looking full page ad.

I like this design, but there are some functional issues. The top image is so attractive that it catches my attention right away. Unfortunately, after this, there’s nothing else to lead my attention down the page but a big chunk of boring text. Many viewers will likely to glance at the turtle and then lose interest, which is no good if we want to get them to read that secondary headline.

One solution is to hunt for a stock image to help pull that attention downward. We don’t need anything amazing, just something simple that adds visual interest to the field of white on the bottom half of the ad.

Within only a minute or two I was able to find a great image for the task:

The concept of a turtle exhibit is now driven even further and the bottom half has a cute little guy to grab your eyes and force you to read the headline. Fortunately, photos like this are really easy to find in either completely free of extremely cheap forms. iStock has just about everything you can imagine shot on a white background and won’t break your budget.

Conclusion

Since minimal design is so popular right now, having less to work with can be a positive thing as long as you know what you’re doing. It makes for a few layout challenges, but if you’re creative and resourceful, you can easily overcome these.

Remember to analyze your imagery and consider how to extend it or maximize the space that it uses. Try a full bleed photo and see if your design doesn’t look a lot classier than before.

Also, if you’ve only got one image to work with, consider how you can duplicate that image in a stylish way. This can take the form of obvious intentional repetition or something more subtle.

Finally, remember that the web is full of amazing visual resources that are either super cheap or completely free. Think about how you can use stock to reinforce what you’ve already been provided with.

Photo Sources: Vikram Vetrivel, Luis Hernandez, Maria Herrera and Ibrahim Iujaz.

What circumstances are there that force designers to proceed with a lack of content? How should you respond to such scenarios? Keep reading as we explore these ideas.

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

The Tweet Heard Round the World

On May 5th, 2008, Jeffrey Zeldman sent out one of the most quoted tweets in the design industry: “Content precedes design. Design in the absence of content is not design, it’s decoration.” (source)

This simple message really hit home for a lot of designers, including me. It has been my own personal mantra for design ever since. It helps me to remember the real set of goals behind a given design instead of merely considering aesthetics.

To this day I think the quote is highly relevant and has a lot to teach us. This article is not in any way meant to dispute this idea. Content-focused design is good design. In fact, in many ways, this mindset makes the difference between art and design.

With that said, I’ve seen a lot of designers really latch onto this idea without putting any critical thought behind it. In the same way that some people cling to a set of religious rules in favor of a critically explored personal faith, these designers analyze everything in light of content-first design without analyzing the concept of content-first design itself.

How Is This a Problem?

So what’s the big deal? I just said that content-first design is the defining aspect of good design and now I’m complaining that people follow the idea! Isn’t that a bit two-faced?

Recently, it has occurred to me that there are in fact areas where this becomes a bit fuzzy. Any argument can be framed to appear as an absolute, but this is often just a result of a narrow focus that doesn’t consider the bigger picture. I think many designers suffer from this sort of tunnel vision in the content-first debate.

One of the examples that got me started on this line of thought was last week’s article on Lorem Ipsum Generators. In this article I outlined a familiar argument that Greek text has absolutely no place in design and should never be used. One author even suggested that it was “a plague” and a “massive obstacle” to web design.

The thought behind that argument was of course a content-first one (rightfully so). The problem is though that the argument assumes that designers only use placeholder content when they are too lazy to design around actual content. It’s not that designers truly lack resources or content, they simply don’t want to do their jobs and generate that content. I’m sure this is in fact an issue but to assume that this is true for everyone using placeholder text paints designers with a fairly broad and unfair stroke.

Two Archetypes

To bring some perspective to the discussion, I think one of the most useful things we can do is to take a look at reality. Theories and principles are great, but real designers with real projects are the ones coming up against these theories daily and often find that things just aren’t as simple in the real world as they seemed on the design blog.

With this in mind, we can come up with two archetype design projects. Despite the fact that these are still hypotheticals, hopefully they can get us a bit closer to real world design situations than the average aphorism or epithet. Both archetypes come from my personal experience and absolutely exist and therefore reflect real design situations.

Situation A: The All-Knowing Designer

This situation is the one that we base all of our arguments on. In this scenario the designer is basically the project manager. Everything goes through the designer(s), major decisions are made by the designer and a large portion of the content itself is actually generated by the designer, even if that content isn’t traditionally placed in the hands of a designer.

For instance, instead of using placeholder copy, designers should use real copy because ultimately the responsibility for generating this content lies with them.

Knowing the End Game
Perhaps the most important concept here is that the designer knows exactly how his or her design will be used. This may seem strange and obvious, but as we’ll see in the next section, it actually isn’t always the case. Here lies the point where some of the content-centric arguments become a little bit harder to manage.

Situation B: The Ill-Informed Designer

Those of us who chant the content-focused mantra (myself included) hardly ever consider that all design jobs are not created equal. Freelancers tend to have a lot of say over what types of projects they take on and how they’re structured. But what about the full-time employee who is forced to deliver comps based on limited information and resources?

Tons of designers in the real world simply don’t enjoy the kind of control and information that some content-centric enthusiasts demand. For instance, when I worked for a major marketing firm we had a magic little stamp that we placed all over our comps that said “FPO”, which meant, “For Position Only.” If an element was shown in the design that really only represented the idea that something would be there later, it got an FPO stamp.

This existed because we rarely started a job with the kind of resources that were required to finish it, through no fault of our own. It was often the case that you were forced to wait on the copy department to provide a headline or some legal copy, or perhaps there was a team doing some custom photography that would take a week or two to be completed. Just because you didn’t have these resources didn’t mean you could take the day off!

You were still expected to begin your basic layout, Greek text and all! I would’ve loved to drop an argument about how “content is king” and that I shouldn’t design a thing without completely understanding the content to be used, but that would’ve gotten at best a laugh and at worst a threat that my team’s projects could be given to someone more competent.

Templates
As I mentioned above, there are cases where, even when your design work is 100% done, you still have no idea what the design will be used for. Further, this constraint is often self-imposed!

Some designers spend a great deal of time designing general use templates. Like it or not, this is a legitimate design practice for which there is a huge audience as proved by professional marketplaces like ThemeForest.

Here you have an interesting dilemma, as a good designer you want to make sure that content precedes design, but ultimately you’re in a workflow where the layout and aesthetic styling are absolutely forced to precede the content.

It’s nice and quaint to simply suggest that template-based design shouldn’t exist for this reason, but that argument is completely pointless as there is zero chance of your content-first utopia ever existing without the need and customer demand for turnkey design templates.

Designing In The Real World

At this point, I seem to have set up the content-first argument only to attempt to knock it down. So where does this leave us?

The answer is that this leaves us in the exact same position as countless real designers every day. You know, the hardworking people that we throw stones at for using placeholder content because we’re so sure that they’re just too dang lazy to do it right.

The answer of course is that “content first” is the ultimate goal to be striven for without necessarily being achieved in every circumstance. As a designer, it is your job to work in light of the information and resources that you have at your disposal. Where possible, you should remember that you’re more than an artist, that “designing” something is far more than making it pretty and that good design always seeks to structure, highlight and convey information in a way that is satisfactory both to the client and the ultimate viewer or user.

What About Templates?

If we really think about it, content-first design can even be a primary goal in template design. Once again, you can’t perfectly meet this ideal because you ultimately have no control over what someone will place in the box that you build, but you can at least structure your design is such a way that it achieves success under certain circumstances.

For instance, specifically targeted templates often sell quite well in light of this idea. If I need a portfolio website, I don’t look for general website templates, I search for those that were specifically designed to contain and showcase portfolio elements. These designers based all of their decisions on the idea that the purchaser would be inserting a very specific type of content into the design. So in a sense, despite the fact that the same template could be used for an architect and a web designer, a “content-first” strategy is still pursued. The same is true of broad categories like “blog templates” and very defined categories such as “independent realtor websites.”

Being able to design something that effectively works for a wide variety of circumstances makes you a valuable asset. The trick to achieving this is to learn to walk that line between placing content first and designing for general use.

Conclusion: The Key Takeaway

The main point of this article is to actually further the content-first argument by bridging the gap between the theoretical ideas and reality. Is it always going to be the case that content can completely precede design? Absolutely not. Does that mean we should give up that goal entirely? Absolutely not.

Whatever you’re working on, however limited your resources and information may be, you can still do your absolute best to be more than a decorator by structuring designs to serve the content that will be placed inside, whether by you or by someone else.

Leave a comment below and tell me about your workflow. As the designer, are you in complete control over the project’s flow and even the various aspects of content creation or are you one piece of a larger team that is often forced to stretch or even break the concept that content should precede design?

Commence browsing and bookmarking!

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

Hate Grid Frameworks?

Before we get started, I just want to say that I know full well that many of the people reading this are already bursting with anger about the evils of layout frameworks.

In truth, there’s a lot to be said against grid frameworks. They’re cumbersome, have a learning curve and often toss semantics out the window. Further, there are a million of these things, which makes it hard for discussions of standard practices to even begin.

If you fall into the camp of CSS framework haters, don’t worry there are still plenty of grid design resources below that have nothing to do with frameworks. In the mean time, here are a few alternatives to grid frameworks.

Rolling Your Own Grid Layouts On the Fly

I recently published a piece on how to easily achieve complex multi-column layouts quickly and all on your own without complicated frameworks or non-semantic class names. It’s so easy that you might never use a framework for layout again.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography. It doesn’t come with any predefined grid systems or non-semantic classes.

Stack Layout

A flexible width, component based CSS layout system that makes heavy uses of inline-block elements.

HTML5 Boilerplate

HTML5 Boilerplate is quickly becoming the standard starting point for modern web design projects. Last I checked it has everything you could possibly want with the exclusion of a grid system.

Old School Frameworks

These are the grandpa grids that have been around for years now. A few of them are really starting to show their age so you may or may not want to use them today.

Blueprint

Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

960.gs

960.gs is where most people start when they get into CSS frameworks and grid systems. It’s still quite popular and many of the newer frameworks are based at least partially on the work here.

Fluid 960 Grid System

A popular variant of 960.gs with a fluid layout that automatically adjusts its width depending on the browser window size.

YAML

“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

Awesome New(er) Frameworks

Perkins

Perkins combines the shiny newness of HTML5 and CSS3 with the awesome power of LESS.js to create an ultimate CSS framework. If you love experimenting with futuristic CSS solutions, this is a great framework for you. It uses a variant of the 1KB Grid.

Less Framework

Less Framework is a responsive CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid. “Less” in this sense shouldn’t be confused with LESS.js from above. I know, it’s confusing. They need to name this one something else!

Columnal

A responsive CSS grid system helping desktop and mobile browsers play nicely together. Columnal uses its own hybrid grid system that borrows from a few others.

Skeleton

Skeleton is an awesome responsive framework that I’ve written about a couple of times before. If you’re not sure about the extra time and learning curve involved in responsive design, you should check this out. Skeleton is built loosely on 960.gs.

52Framework

A framework that utilizes HTML5, CSS3 and JavaScript to maximize compatibility of modern web development practices across all major browsers. It’s based on a simple 16 column grid.

G5 Framework

(X)HTML5, CSS3, PHP & jQuery Front End Framework. G5 Framework started as a personal project. In an attempt to speed up workflow, reuse the best coding practices & similar coding techniques, the framework serves as a starter file for new websites.

G5 Framework’s grid is based on Easy Grid.

Easy Percentage Grid System with HTML5

The main characteristics of this grid system is that all the columns have percentage based width so they adapt to the container element. It means that with using this system you will not have to define a width of each column by hand, you can simply throw it inside any container and the column widths and column gutters will be automatically set.

Cabin CSS

CSS Frameworks tend to be super bloated. Cabin solves this problem with a modular extension system that allows you to add only what you need. Various grid extensions are supported.

jQuery Masonry

jQuery Masonry isn’t really a CSS Framework at all, it’s a JavaScript plugin that allows grid-based designs that use a sort of vertical float system. It’s an awesome tool that is quite popular right now.

InuitCSS

This framework has it all: plugins progressive flexible mobile tablet sensible extensible accessible pragmatic functional useful production-ready more. The grid system is customized to your needs.

Small Footprint Frameworks

1 line CSS Grid Framework

I thought that a single line CSS Grid sounded nuts, but this guy pulled it off. I’m not sure how practical it is in the real world but I’m impressed with the thought that went into it!

1 KB Grid

This is one of my old favorites. It’s a grid system stripped to its absolute bare essentials, no sixty minute walkthrough video needed. If you don’t understand CSS grid systems, start here.

Tiny Fluid Grid

Just like the 1KB grid only fluid for added fun.

Slim CSS

SlimCSS is a light CSS Framework thats sets a solid cross-browser foundation with many essential features while staying as small as possible.

Other Frameworks

Gravity

Gravity is a SASS based framework for making powerful, easily maintainable HTML5 websites. It helps you rapidly prototype your ideas and will generally make your life much easier.

1140 Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.

Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The Square Grid

A simple CSS framework for designers and developers, based on 35 equal-width columns. It aims to cut down on development time and help you create beautiful-structured websites.

Fluid Grid

Fluid Grid is a new grid system that works the same way as Blueprint or 960, but with any page width, even fluid layouts. It is based only on CSS.

EZ-CSS

EZ CSS is a completely different kind of grid framework. It uses a unique module system that allows you to copy, paste and nest simple layouts to create complex pages. It’s a little hard to wrap your head around but a really brilliant use of CSS.

FEM CSS Framework

FEM CSS Framework is a 960px width + 12 column grid system + CSS common styles, to easy and fast develop web layouts.

It is based in the 960 Grid System, but with a twist in the philosophy to make it more flexible and faster to play with boxes.

Elastic CSS

A simple css framework to layout web-based interfaces, based on the printed layout techniques of 4 columns but with capabilities to unlimited column combinations. and capacity to make elastic, fixed and liquid layout easily.

Atatonic CSS

This framework is mostly aimed at typography, but there is a very lightweight grid system in place as well.

Baseline

Baseline makes it easy to develop a website with a pleasing grid and good typography. The grid in Baseline is composed of 4 basic columns, for more flexibility each column can be divided in 2 units.

Emastic

A lightweight fluid grid CSS framework with a focus on typography.

Golden Grid

The Golden Grid is a web grid system. It ‘s a product of the search for the perfect modern grid system. It ‘s meant to be a CSS tool for grid based web sites.

Frak

Frak is a CSS framework for creating fluid grids. It has an interesting concept that involved using multipliers as class names.

Easy Framework

Easy is a CSS/HTML/JavaScript framework started as a personal project and then grew into something more. The idea behind it is to reduce the amount of time spent on setting up the basic master HTML template by reusing the same coding techniques. Includes a simple percentage-based grid system.

Grid

Grid a simple and minimal fluid grid system that can flow inside any fluid or fixed container or play good with another Grid system.

520 Grid

A grid system for designing Facebook pages, crazy but true.

Tools and Grid Builders

Grid Calculator

A really awesome grid calculator with Photoshop and Illustrator template support.

Grid Calculator and Generator

GridCalc is a easy to use grid calculator. Just enter the desired width of your page and an aproximate range for your column and gutter width and the calculator will give you all the possible combinations within the limits you entered.

GuideGuide

GuideGuide is my new favorite Photoshop plugin. This free tool automatically places guides in your Photoshop document based on your input.

3×4 Grid Builder

Grid Builder enables you to easily build an HTML grid with a simple drag
and drop interface. It’s a really interesting tool that allows you to create custom grids for each project.

Gridr Buildrrr

A super simple and effective custom grid builder.

Boks

A really great and under appreciated tool that allows you to build custom implementations of Blueprint. Check out my tutorial here.

Variable Grid System

The variable grid system is a quick way to generate an underlying CSS grid for your site. The CSS generated file is based on the 960 Grid System.

ZURB CSS Grid Builder

A great grid builder that dishes out a really simple grid with a tiny footprint.

Griddle

Want to use a grid-based design without a framework? This tool creates a custom background image that makes it easy to achieve grid layout on your own.

Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.

Gridulator

Another background image tool like Griddle. The main difference being that Griddle generates a URL for you to drop in and this gives you an actual image (I like Griddle better).

Grid Lover Sites and Must-Read Articles

Grid Based

A web design gallery full of awesome examples of grid-based design.

Design By Grid

Another great site dedicated to grid-based tools, articles and other resources.

The Grid System

A one-stop shop for all things grid-related. It’s an old source but it looks like it’s still updated regularly.

Grid Based Design Simplified

An unbeatable primer on grid-based design fundamentals. This should be step one in your grid design quest.

The 960 Grid System Made Easy

An complete beginner’s introduction to the 960 grid system by yours truly.

Designing With Grid-Based Approach

An older Smashing Mag article, but it still has tons of great resources and information to check out.

Rethinking CSS Grids

Mark Boulton discusses how native CSS support for grids should work. A great read!

Conclusion

I hope you enjoyed this massive collection and have enough grid-based design resources to keep you occupied for months on end.

Leave a comment below and let us know what you think of the tools and resources above. Do you use any grid frameworks? Which ones and why?