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.

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

Today’s site is Atlantic Corporate Interiors. Let’s jump in and see what we think!

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

About Atlantic Corporate Interiors

“From our business software to our product solutions to our back-room process, everything we do is built around listening to our customers and responding accordingly. Not surprisingly, this idea, as simple as it is, still resonates in the marketplace. As the pace of business increases and the demands of marketplace performance are heightened, one guidepost remains steadfast. Are we listening to the customer? If we do that well enough, everything else follows. Our solutions will be creative, within budget and, most importantly, exceed the customer’s expectation.”

Here is a screenshot of the homepage:

First Impression

I chatted with this site’s designer a bit and he noted that the site had just gone live the evening before I began this critique. It’s an interesting opportunity to get a chance to evaluate a site that’s so recent. As you can imagine, it can often take days or even weeks to smooth over all of the little quirks and errors that you don’t notice until the site is seen by thousands of people.

My first impression about this site is that it looks very clean. I can definitely tell that the designer worked hard to make sure the final product didn’t become overcrowded by unnecessary elements and messaging.

The pages are organized well. There are three distinct sections: a header, content area and footer, kept separate by color and texture. From a purely subjective standpoint, I feel like the site is a little texture heavy. I’m not particularly fond of the prominence of the lines and gradient in the footer. I realize that it’s a visual theme carried over from other elements but I feel like it’s a little busy and distracting in such a large area.

Once again, this is more of a personal taste thing than a logical criticism. On the whole, the new design seems like a success. It’s a solid attempt at a current design style that brings this company into 2011 and beyond. As I look around, there are definitely some specific points worth mentioning and possibly updating. Let’s discuss these.

Page Title

One of the first things that I noticed about the site is that it looks like someone forgot to update the title. This is currently a technical reference to an old test. Now that the site is live, it’s crucial to make sure this is updated to reflect the business name for both functional and SEO purposes.

Vague Purpose

Though I’m a huge fan of the minimalist web design movement, sometimes the principle can be taken too far. The home page of this site might be an example of this. When I load the site up on my laptop, here’s the portion of the page that I see:

As you can see, the site is pretty vague about just what is going on. There are some key questions that you want users to be able to answer right away: Who is this site from? What/who is it for? As an answer, the top portion of the site gives you only a logo that says “ACI.” There is absolutely no description of the company or what it does. The pictures in the slideshow are a clue, but looking at those I’m not sure if what’s being offered is a product (furniture), service (office set up) or both. The best indicator for what ACI is offering comes from the word “furniture” in the navigation.

This sort of “piece together the clues to solve the mystery” web browsing experience can leave users frustrated. Granted, some people will only navigate to the site because they know exactly what it is, others though will stumble upon the site via Google and other resources and you want to make sure these visitors don’t quickly lose interest due to a lack of information.

How to Fix It

The fix here is easier than you might think. You don’t necessarily need a huge paragraph of text to tell people who you are and what you do. Instead, try a simple one liner. For instance, Twitter is a pretty complicated concept, but its homepage simply says the following:

“Find out what’s happening, right now, with the people and organizations you care about.”

This just tells you the very core concept about the service, nothing more. I recommend that you strive to come up with something like this for the top portion of the ACI site.

Secondary Navigation

Moving on past the home page, we find that the secondary pages are fairly well designed too. Most of these pick up an effective and simple two column layout like the one shown below.

On these pages the designer has introduced a secondary navigation feature, which helps keep all the content neatly categorized and condensed. The repetition of the bright orange from the logo is a nice touch, it helps keep the color palette consistent and yet brings some life to the page.

The problem that I have with the secondary navigation is that it’s not always used. Some pages don’t have any siblings and therefore possess a blank navigation area. This makes for a pretty awkward element in the design that looks more like an accident than something intentionally left blank.

How to Fix It

The solution here is simple, just hide the secondary navigation altogether when there’s no content to put in it. The homepage is an example of a page that’s left this element out so it’s completely appropriate to do this again here.

Random Links

The last thing that I noticed about the site as I clicked around was that there are a couple of image links that don’t really go anywhere. Instead they open up larger versions of the images. In principal, this is fine and is even standard practice on image galleries. However, these appear on images that don’t merit this functionality. As far as I can tell, this is confined to the sidebar images like the one below.

Here we see a picture of a phone on a keyboard, which makes perfect sense given that this is a contact page. However, when I hover over the phone image, I get a hand cursor, which leads me to click. This gives me a large picture of a phone on a keyboard. Why do I need a closer look at a simple stock photo? This unnecessary functionality has the ability to distract the user from what’s important.

Conclusion

To sum up, I think this site redesign was a success. The aesthetic is clean and current and really pairs well with the stylish, modern furniture being sold on the site. Overall, my suggestions for improvement amount to subjective design decisions and slight bug fixes:

• Consider easing up on the texture a bit. Perhaps tone down the noise layer and make the footer less distracting.
• Fix the page title.
• Make sure the purpose for the site/company is clearly stated on the home page.
• Hide the secondary navigation bar when it isn’t needed.
• Ditch the links on random stock photos that don’t have a reason to be viewed at a larger size.

Your Turn!

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

Twitter launched a radically new layout to users Thursday. The first to see the new look were mobile users through the Twitter iPhone and Android apps. After updating those apps, the new look of Twitter became active on those users’ computers as well. All other users will begin to see the updated Twitter look over the course of several months.

The results are mixed. The new look and interface is great for mobile users and the sleek interface is cool. Features on the computer version mix the super-sleek interface with a few bonuses but also a few misses. Pages have more pop but still have the look and feel you would associate with Twitter. The site also rolled out branding pages for companies that have a nice look but could change the organic feel that has brought people to Twitter.

Visually, Twitter has reinvented itself consistently across various platforms. Aside from slight, device-specific tweaks the interface looks the same on the website, on a tablet and on a smartphone (no update for the Mac app as of yet). The biggest plus for designers and other visual professionals is an enhanced use of images to push you toward content. Twitter is starting to define itself as more than just a 140-character platform.

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

Web Design

The Twitter update adds a variety of new features, including better search functionality, keyboard shortcuts and better tools for social interaction.

The worst part? Twitter flipped the location of key items on its homepage, moving the timeline to the right and all of the extras to the left. I have clicked the wrong item on multiple occasions.

Home, Connect and Profile

These three “new” features speak for themselves. Home is a user’s landing page, and clicking the connect symbol (@) will show a user’s timeline. The thing that looks the most different is the profile page, which makes the account holder a star on his or her page. Profile information is in a larger box that stretches across the page with a much larger icon. Custom backgrounds are still very visible (and don’t have to be reset with the update).

Twitter did not change the font, size or color usage in tweets other than to make link text gray rather than black. So the timeline looks pretty much the same. It’s all the stuff around it that has an added pop (in part because of the lack of visual change to the basic part of the site).

Designers who are marketing themselves or their work could benefit from the use of larger images throughout the site design. The list of recent items has images that are also a bit larger as well. Images and videos now appear in each user’s timeline and are viewable without a link to another site.

Discover

The new “Discover” feature is a mashup between hashtags and trending topics. Click on the icon and get immediate access to things generating buzz. Each topic has a link to pages for that topic or hashtag.

This is one of those fun little features that adds visual punch to trending items. The photos and text are much larger than in the general timeline and really looks newsy in the mobile application. The downside is that it adds an almost false sense of credibility to Twitter as a news organization because the feature so closely resembles some news websites.

Hello, Shortcut Keys!

Twitter developers built 21 keyboard shortcut combinations so you can get away from the mouse. Want to send a Tweet? Hit “n” and the dialogue box pops right up.

The keys are something I have been waiting for. Unfortunately, they don’t work quite like shortcuts in other applications. Because the web browser already uses ctrl-letter combinations, Twitter uses single-letter keys. I must admit, it has made me a little nervous in the early stages. Am I typing random letters somewhere?

But it seems to work. Even the “gh” combination to get to the home screen sends me there without stray letters or Tweets getting sent out. The shortcuts don’t work when the Tweet window is active though, which prevents inadvertent tweeting.

But is it too late? After clicking through Twitter all this time, will users take to having keyboard shortcuts? It sounds like a great concept, but I am not convinced my habits will change. Still, it’s nice that they went the extra mile and included them for users who prefer to use the app this way.

Mobile Design

Twitter’s biggest improvement affects mobile users. I left Twitter for third-party applications on my smartphone a long time ago. Twitter’s app could not compete with the speed and simplicity of others that were free to download and use. Maybe that is why Twitter is offering the new-look site to its mobile users first, to get us to come back (it worked for me.)

It more than met my expectations. The feed is easy to navigate with home, connect, discover and me buttons that are anchored at the bottom of the screen (these are anchored on the left for tablet users). The “Discover” feature is visually appealing with large images and text and might be my new go-to source for information on the go. It is tailored to the mobile user as well and, according to Twitter, will adapt to your preferences with use. It uses your interests and location (if allowed) to showcase relevant trending topics.

The smartphone app looks and works like Twiter.com on a computer. It is easy to follow users without having to leave the item you are viewing. The tablet application has the same feel as well, with a popup window to view links without navigating away from the timeline.

Brand Pages

There goes the grassroots feeling that has made Twitter the anti-Facebook. With the update, Twitter introduced brand pages for companies. (Facebook and Google+ already offer something similar.)

It is a great concept for your small-time design shop or freelance business. Registering through Twitter advertising allows companies to have a distinct layout with a banner featuring a company logo rather than just the Twitter user icon, and other extras such as logos, taglines, videos and quick access to promoted Tweets, according to the Twitter Advertising Blog. In addition, Twitter promises that no other companies’ advertisements will appear on your page.

The new features will be free to all users, according to the Twitter Advertising Blog, but are being tested with only a handful of companies at this time. Most are household names – McDonald’s, Coca-Cola, Nike, Verizon Wireless and a page for the latest movie in the Mission: Impossible franchise. The new pages are only viewable on the new Twitter interface and there is no definite timeline for when these pages will be available to everyone; Twitter says it will be rolled out “in the coming months.”

These pages look good. As soon as you hit the page for @nikebasketball, the owner of the site is obvious. The brand pages have a visual definition that has been lacking on Twitter until now.

This feature could be a great asset to designers trying to showcase certain work and who are working with a limited advertising budget. Since Twitter does not charge to host a site, there is no upfront cost. Just visit Twitter.com and complete the business registration, upload your information and start tweeting.

The Lowdown from a Design Perspective

Historically, Twitter’s UI branding has been a bit all over the place. The iPhone, iPad, Android, web and Mac versions each had their own visual presentation style. This overhaul is a clear attempt to tie it all together and you can expect to see similar changes rolled out over the remaining areas sometime soon. Items like the new Home, Connect and Discover symbols give the official Twitter brand a much needed distinct style that helps it stand out from the third party Twitter universe (at least for now).

There are some nice usability tweaks as well in the web interface. For instance, clicking on a tweet expands it to show relevant information like retweets and other pieces of the conversation. This strategic placing of key information helps keep the interface clean and simple. This type of functionality also gives the web app a richness that makes it feel more like a native app, a clear trend in web app design that has really taken off lately.

Another interesting design observation: With each new iteration Twitter’s design focus on pure text tweets has faded. The latest round really pushes the new Twitter image-sharing service. Features like the new media grid shown below and the ability to embed videos into business pages hint that the days of Twitter being the simplest social media site around are over.

This represents an interesting change in identity that some users will hate initially, but I suspect we’ll all adjust before no time. However, in the long run it raises questions about just who Twitter wants to be. Let’s hope they can keep their core focus while adding helpful features and avoiding bloat.

Conclusion

Twitter has added enough extras and visual interest to its homepage that will allow it to compete with some of the other applications out there such as Hoot Suite and Tweet Deck. The look of the interface is much more visual with variance in text and photo sizes.

Although it has some faults, the new design works because it is simple and organized. Twitter may win back some users who have not been using their mobile applications with the streamlined site across platforms. Branding is a bonus for companies and looks really nice, but I worry all the corporate pages will just junk up my timeline with unwanted ads.

What do you think of the new Twitter design and functionality changes? What do you love? What do you hate? We want to know!

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!

Today’s site is Lake Gibbs Estate. Let’s jump in and see what we think! When you’re finished looking over this article, be sure to check out our huge collection of other web design critiques.

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

About Lake Gibbs Estate

Nestled in the foolhills of the Sahayadri mountain range, the peninsular Lake Gibbs Estate offers a perfect spot for your second home. Covered in lush green forests, surrounded by the waters of Thokarwadi Dam that merge and mingle with Andhra lake, Shirawata lake and Valvhan lake; Lake gibbs offers a unique opportunity to disconnect from your everyday and reconnect with yourself. Far enough from any urban area, but within 30 minutes driving distance from Malavli, Bhivpuri Road and Paladari stations; Lake Gibbs is the perfect getaway for the weekend or even the alternate year.

Here is a screenshot of the homepage:

First Impressions

The Lake Gibbs Estate website is very simple. There’s only a single page with a large slideshow and some very brief descriptions. Consequently, this will be a fairly brief critique!

My first impression of this page is quite positive. It’s very sleek and attractive, the fullscreen photos of beautiful scenery really grab your attention. For the most part, I think the designer has done a great job of creating something that’s both basic and interesting. Each piece of the design merits a comment so let’s take a closer look.

The Slideshow

As I just mentioned, the slideshow is the real show stopper here. In fact, the site is the slideshow, there’s little else. I’m always a bit proponent of leveraging great photography in design. A good photo can be more effective than hours of “from scratch” Photoshop work in grabbing the user’s attention and communicating an aesthetic feel. It might feel like you’re taking the easy way out by reducing a design to fullscreen photos, and maybe you are, but it’s hard to resist the idea of less work leading to a possibly more attractive finished product!

One place where photography heavy design works quite well is with product shots. When you’re selling a beautiful product, bullet points are great, but the image of the product should be the real hero. You see this at work in design from Apple, Dyson and many other premium product manufacturers. Here the same principal applies, the interesting part is that the landscape is the product (they’re selling plots). This works out fantastically because there’s almost nothing more attractive than lush greenery and a colorful sky on the bank of an expansive river.

Typography

When you have a photography heavy design like this one, typography becomes one of the most important decisions that you will make as a designer. You are tasked with choosing something that complements the imagery. It should be attractive and match the mood of the visuals without trying to steal the show.

A quick press of my WhatFont bookmarklet reveals that the modern, condensed typeface used on this site is a free font called Steelfish. I think the font is perfect for this project and I like how, despite only having one variation of the typeface, the designer was able to help certain aspects of the design stand out through the use of all caps.

The type would definitely not stand out against the photos so a simple and effective design trick was used: a reduced opacity black overlay. This frames the site nicely and highlights the important information while not detracting too much from the primary visuals.

One problem that I have with the typography is the word spacing, specifically on the “Lake Gibbs Estate” text. The space between words relative to the space between the letters seems way off. This is unfortunately the single most frequent problem that I run into with free fonts, few really seem to pull off word spacing as well as premium fonts.

Footer

On the surface, it appears that there isn’t anything else to the page but the slideshow and the name of the site. However, upon further inspection, it turns out that there is more. At the bottom of the page, you find a black bar with captions for each of the images in the slideshow:

Hovering over this bar expands an “About” and “Contact” section from the bottom of the page in a nice, fluid animation.

I like the way this area looks, but I’m definitely not a huge fan of the functionality. The problem is inherent in my previous comment, this section is fairly hidden. There’s no indication anywhere on the page that it exists, it’s only when you start randomly placing your mouse over various areas that you discover its presence.

I definitely recommend adding some ever present visual indicator. Perhaps a little tab that sticks up from the bottom bar that says “Learn More.” There are a million possible solutions, several of which will work just fine, the important part is to use something (anything) to help the user realize how to get to this important information.

Conclusion

To sum up, here’s a quick checklist of my thoughts on the design.

Good

• Simple, clean design that serves its purpose well.
• Slideshow: Gorgeous fullscreen images really grab the user’s attention.
• Font: It’s clean, modern and attractive. It’s also not used on the smaller body text, which is a good call as it’s clearly a headline font.

Needs Work

• The word spacing on Lake Gibbs Estate. I like the font but if you can’t fix this eyesore, it might be better to find something new.
• The hidden footer. It’s not apparent that this exists until you accidentally find it. Think of a way to highlight this content better.

Your Turn!

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

I’ll show you a quick way to make a software screenshot more interesting, how to create awesome vector grunge textures and a super fast way to build a vector starburst.

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

Breakout Screenshot

When you’re designing a website for a web or desktop app, you’ll inevitably end up incorporating a few screenshots into your design, which is great because they make for attractive graphics that are super easy to create. Simply bring up the app on your attractive but minimal desktop, hit a keyboard shortcut, add some text and you’re done!

This is definitely a beautifully simple way to create artwork for a website, but it’s worth the extra effort to put some thought into how you can go further and make the graphic even more interesting.

One super simple way to do this is to have the screenshot exceed the boundaries of the background image. This quick and easy trick makes your design seem more alive and layered.

Now, the long and difficult way to perform this trick would be to mask out part of the background on your screenshot, but that’s a real pain. It’s far easier to simply create a transparent PNG of your app window that contains no background, which you can then place over anything you want in Photoshop.

To do this on a Mac, hit Command+Shift+4 to bring up the crosshairs that will let you take a screenshot of a selected area. Then place your cursor over the app window and hit the Space bar. The crosshairs should transform into a camera icon and the window you’re hovering over should be highlighted. Simply click to create a file on your desktop containing that window and its shadow on a transparent background. Windows users can follow these steps for snapping a window screenshot.

Once you’ve taken the screenshot of the window, then grab a background to place it on and open them both in Photoshop.

From here, it’s easy to crop the background so that the screenshot peeks out of it. Notice that I took the opposite route on the bottom of the screenshot, which is tucked into the background image.

In The Wild

This trick is very common in web design right now and can be seen on any number of desktop software and web app sites. One shining example is the current Sparrow for Mac website.

Easy Illustrator Starburst

I hesitate to teach you this trick simply because I generally hate starbursts in design. However, I will accept that there are in fact some legitimately cool uses for them. More importantly, I know a pretty cool trick for making them that I love to show off.

To start, open up Illustrator and draw a circle. Then set the circle’s stroke to a dashed line. The parameters don’t matter too much at this point, just make sure you have something that looks approximately like this:

Here comes the fun part. Take the stroke weight on your circle and crank it way beyond anything logical (into the hundreds). Finally, set your first dash and gap values to be identical. The result is a nice perfect starburst.

The awesome part is that this trick gives you full control over the width of the lines and gaps. Here’s a slightly tweaked example that’s a little more spread out.

Take it even further and add some random values to some of the other dash and gap spaces. This will start to give you some really creative results, here’s a nice little pattern that reminds me of a peppermint.

Expand It

Now, working with a funky stroked item like this in the long term will get messy so once you decide on your general shape and patter, I recommend going to Object>Flatten Transparency. This will give you a nice, expanded vector starburst that looks like you built it the hard way (outline stroke gives some weird results). Just be sure to delete the original circle’s stroke to keep things clean.

Grungy Vector Textures

Photographic grunge textures are easy to come by, vector grunge textures, not so much. Fortunately, it’s fairly easy to create the latter through the use of the former.

Let’s start with by hitting up Flickr Creative Commons to find a decent grunge texture. Here is a great one from D. Sharon Pruitt.

Now, I intentionally picked this one because it contains light scratches on a dark background, which seems like it would be much harder to work with but really isn’t at all.

Open up the texture in Photoshop, hit Command+I to inverse the colors and suddenly you’ll have a nice white background with black scratches. Then use a basic Levels adjustment to bring up the whites and down the blacks. The result should look something like this:

Now save the image out as a JPG and open it up into illustrator. From here, we have some really basic shapes that can be Auto Traced with relative accuracy. Run the Auto Trace command and set your parameters to something like those shown below. One critical step here is to make sure you click the “ignore white” command so that Illustrator only traces the black parts.

From here you simply hit the “Expand” button in the menu bar. This will give you 100% scaleable and easily applicable grunge scratches.

We can combine this trick with the last one and we have an awesome retro piece of vector artwork. Pretty cool!

Conclusion

These quick tip posts are meant to expand your bag of tricks so that you have a larger pool of ideas to pull from on your next design project. I hope you’ve learned a thing or two and have been inspired to come up with your own unique ideas based on the information above.

Leave a comment below and let us know about any techniques you’ve seen around the web but aren’t quite sure how to replicate. We’ll take a look and see if we can help in the next design tricks post.

The main goal of any website is to lead visitors through your pages. This is accomplished via a navigation of some type, most commonly links. You can build tab bars, banners, block elements, or even float a nav menu off to the side.

Follow us in the guide below as we look through common trends in web navigation menu design. Both designers and developers have come up with tricks for expediting the process of building websites. And we hope to do the same by offering some unique tips for UI navigation.

Plan a Webpage Outline

Before the design process begins, you should take a moment to consider the many styles of dynamic navigation available to you. You could have fly-out or dropdown sub-menus appear from a nav bar or fixed block, but alternatively you could have sub-links slide, fade in, or maybe you don’t even need sub-navigation. These are all important ideas to work through before you dive into Photoshop.

With the above example, Fork CMS is using a simple top-bar navigation which fits in very well. Nothing comes off as confusing or difficult to find and you have access to all of the important site information.

Your situation may greatly differ based on the number of important pages in your own website. This is why I suggest sketching out a diagram to build a more solid idea of how the navigation should work. This could take the form of a flowchart, where you draw in arrows to point towards the next page in a segment.

Attaching Sub-Menus

As an example, the popular design magazine Speckyboy features a sub-nav dropdown menu within each category. WordPress can set this up by default but you still need to utilize some form of jQuery. Meanwhile the niche gaming site Destiny Islands uses jQuery for a slide-down sub-menu for each game in the sidebar area.

You may also notice the header navigation is coupled with replacement images on mouseover. This small effect is handy if your layout works well holding fixed-width link buttons. jQuery is an option but CSS3 transitions may feel like a better alternative. Both CSS3 and JavaScript boast flaky support in mobile OS’, But for older legacy browsers you’re likely to see more success using a jQuery-based method.

And a sub-menu doesn’t have to stick within the standard formats, either. I think the newest Smashing Magazine re-design says it best with their small tag cloud. Hover over the icon next to their site logo and a menu of blog categories and tags appear. Keep these small yet refined ideas in mind for your own pop-out menus.

Ajax Tabs

To contain a large number of links in a smaller area, some content needs to be hidden by default. Hidden dropdown menus are one way, but a container with tabs is another option. And with Ajax you can asynchronously pull out data from your database or another webpage with each different tab on the div.

WordPress blogs are notorious for these kinds of features. The above screenshot from Webdesigner Depot focuses on a sidebar widget to pull out the most popular and recent articles. If you feel this method will suit your layout, it is one way of containing links in a very reduced space.

If You Go Big, Go Fancy!

Those of you who frequent design galleries have most likely stumbled across Coda’s page before. They use both a tabbed content area for loading dynamic information and a heading area with 3 links: Download, Buy, and Help.

This is just one perfect example of taking your web navigation to the next level. Big and bold lettering is often attention-grabbing if designed appropriately. And the hover effects added over each link area tack onto the magical feeling of the whole layout. This is all without mentioning the delicious pixel-crazed icons featured next to each large block.

This is a very flashy display of website effects and will not always be realistic within the scope of every project. But for low-numbered navigation links it’s almost better to jack up the size quite a bit. If you only have 3-4 pages these should be easily found and glossed over exquisitely. As for the icons, there are so many resources to check out it’s most likely you’ll run into something cool!

Ruling HTML5 Standards

The web has advanced a long way since 2001. In the past 10 years we have seen tremendous leaps of innovation between techies all around the world. And now HTML5 has swept the design world by storm offering a sound, stable declaration for even some convoluted page elements.

One such example is the <nav> tag which is slowly taking over the unordered list formats (or even coupling the two together). Here’s a great Stack Overflow question about semantic HTML and using the nav element properly. As quoted from the specs page “the nav element represents a section of a page that links to other pages or to parts within the page“.

A personal favorite article published earlier this year is titled How HTML5 Changes the Way We Think of Navigation and expresses a lot of strong benefits towards the switch in coding. The basic confusion stems from so many developers growing accustomed to XHTML and HTML 4.01 standards.

Conclusion

This guide has looked more into the semantics and markup of building a dynamic navigation menu. Between the new CSS3 animation effects and jQuery UI library there are tons of customizations you can build. Front-end web development has never been this much fun! And it’s easy to find great support communities for newbie developers just picking up the trade.

Have you built any dynamic menu systems on your own website? Or maybe you’ve run into a few really cool effects on other websites. Let us know your thoughts and ideas in the discussion area below.

This leap is deceptively simple and merits significant inspection as to the fundamental differences between mobile and desktop platforms and how that can and should affect how interfaces and experiences are crafted.

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

The Rise of the Smartphone

As the smartphone made its rise to power and glory, designers realized that they had a lot to learn about the new form factor. On particularly impressive platforms like the iPhone, the potential was there to meet and exceed the richness of interfaces of desktop apps.

Countless studies, discussions and evolutions have led designers to a point where it is indeed the case that desktop users find themselves enamored with mobile interfaces, wishing that desktop UIs would undergo a similar revolution.

Mobile devices have a lot going for them. The direct interaction model provided by multitouch is so completely intuitive that everyone knows how it works immediately. Further, there’s just something about small screen that really makes designers focus on what’s most important while stripping out all the non-essential elements. The result is thousands of beautifully streamlined applications that users simply can’t put down.

A New Problem

Traditionally, given this timeline, the progression of interfaces in recent history has been from large to small. How do we take the desktop experience and successfully transplant it to a smaller screen and new interaction model?

As we now look to mobile development as a smashing success, the designer’s problem has been completely turned on its head! Many developers, including the Apple team themselves, are seeking to translate the newfound joys of mobile interfaces to the desktop (not to mention a similar leap from the iPhone to the larger iPad).

More than Interface Scaling

Conceptually, it seems like a far easier task. You’re going from a small amount of space to a large one, so you have more room to implement the features you need. However, in practice, the shift is much more difficult. In fact, many developers and designers are still struggling to get it right.

I’ve found that the problem goes much further than merely how interfaces scale to a new screen size, there’s actually a fundamental difference in the way we interact with desktop interfaces versus those on a mobile device. Let’s explore this idea further.

Back to the Mac

Leading this procession of technology and design from mobile to desktop is of course, Apple Inc. Their most recent operating system, OS X Lion, was labeled a “Back to the Mac” project meant to bring key features that first made an appearance in iOS back to OS X.

If anyone was going to get this transition right, it was Apple. After all, they were behind the smartphone that set the standard for all smartphones: the iPhone.

Interestingly enough, even Apple’s designers and developers have had a less than perfect run with making the transition from mobile to desktop. Let’s discuss some of their attempts.

Natural Scrolling

When you look at a document on an iPhone, there aren’t any visible physical controls on the phone itself, so your first reaction is to reach out and touch the document when you want to scroll. This reaction proves to be correct and you instantly realize that the interaction model mimics the real world, it’s as if you were really reaching out and touching a piece of paper. If you flick your finger in an upward motion, this grabs the piece of paper and moves it upward, effectively scrolling downward. The key takeaway here is that the learning curve is about as close to zero as it can get, almost no one takes more than a few seconds to figure out how scrolling works and will then remember it forever.

Since scrolling feels so natural like this on the iPhone, Apple decided to implement the same system in Lion. “Natural Scrolling” is now the default scrolling mode in OS X, all it really does is invert the scrolling method: swiping down used to scroll down, now it scrolls up and vice versa.

Not What I Expected
The first time I personally used an iPhone, I immediately appreciated the intuitive nature of the scrolling and remarked that the Mac should adopt this model. However, when I first tried Natural Scrolling in Lion, I realized that it didn’t translate quite as well as I thought it would.

Curious about what others thought of this, I polled over 1,800 OS X users. Almost 26%, a decent number to be sure, responded that natural scrolling seems more intuitive than the previous model. However, 34% admitted that it took some getting used to, 14% said they tried it for a while but gave up and the remaining 26% said they turned the feature off immediately.

Direct vs. Indirect Interaction
Fully 74% of respondents had at least some trouble adopting the new, supposedly more intuitive, scrolling system. Now, most of this is because we’ve been doing it the other way for years, our brains were hardwired for one model switching so suddenly wasn’t the easiest task.

Far more important though is the realization that direct interaction is a very different beast than indirect interaction. Both trackpads and computer mice provide an indirect means for input. We’re not reaching out and touching the icons or the page, we’re looking at these items while our hands are off somewhere else controlling the movement on the screen. Even though both trackpads and the Magic Mouse are multitouch, using them is still a very different experience than interacting with a touchscreen device.

Drawing tablet users have known this for years. Drawing on a tablet without a screen is a pretty interesting experience. Your hand is one place and the output is another, very different from the natural drawing model. The process becomes much more intuitive when you use a Wacom Cintiq, which has a built-in touchscreen for direct input.

Fullscreen Apps

This one should be easy to transfer, right? Bringing an app to fullscreen on a large display helps you stay focused on the task at hand and can surely only increase productivity.

However, in many ways, fullscreen apps actually represent a reduction in functionality and efficiency. One such problem that I encounter daily is with Mail, OS X’s default email client. When I’m not in fullscreen mode, I can easily start a new message in a new window, then switch back to the main window to copy an email address or some other important snippet of information. I can also move that active message window over a little bit, click on a file on my desktop, and drag it to the message window.

In fullscreen mode, neither of these actions are possible. The interface isn’t merely stretched in size, there’s a fundamental shift in the way it works that locks things in place and makes for a more rigid workflow. This seems natural on my iPad, but on my desktop where I’m used to being able to move between windows freely, I find it frustrating and usually revert to manually sizing the Mail window rather than using fullscreen mode.

Versions & The New Saving Model

Autosave is another feature that seems like it should easily survive the transition from iOS to Mac OS. After all, who wouldn’t want their document to save itself so that work is never lost?

Apple decided to go a step further with this though and rethink the core functionality of how saving documents works. Since saving the way we used to know it is now automatic, each time you hit “Command-S” you now save a new version. You can then sort through previous versions of the file and see the changes progressively. Again, a great feature!

The part where it becomes strange though is the removal of the “Save As” functionality. As a full-time writer, I have several templates for various types of content that I typically produce. My workflow used to be such that I would open my template, make some changes and hit “Command-Shift-S” to save those changes as a completely new document, thereby preserving the original template. Now however, the system is far less efficient. I’m forced to open my template in TextEdit, manually navigate to File>Duplicate in the menu before I make any changes, then make my changes and save the document.

In making the desktop saving model mimic that of iOS, Apple has stripped out core document functionality that has literally been around for decades. Before this, the lack of a “Save As” feature in any text editor would’ve been a cause for mass complaints, now it’s billed as a feature.

What’s the Point?

All right, so we agree that there are significant differences between both mobile and desktop interfaces and the interaction models for the same, how does any of this relate to design?

The primary takeaway from this article is to thoroughly consider every aspect of moving a design from a mobile space to a desktop space. Here are a few points to keep in mind as you make this transition.

Don’t Just Scale the Interface, Rethink It

Many developers have been criticized for creating simple ports of iOS apps for the Mac. Remember that, just as with natural scrolling, what seems perfectly intuitive on a touchscreen may seem awkward on the desktop.

Begin to question why your buttons are placed where they are, how each item’s proportions works with the rest of the interface, whether desktop users will expect greater control and how you can tailor the visual experience to a fundamentally different interaction model.

Think About the Experience

Notice that, more than making Lion look more like iOS, Apple sought to make it work like iOS. As we showed above, this can be both good and bad depending on the implementation.

Remember that there’s a fundamental difference between UI and UX. When crossing platforms, we uproot both the UI and UX and plop them into a new system. This causes obvious troubles with the UI, which are fairly easy to address because we can clearly see them. However, far more subtle and tricky are the UX differences between the two platforms.

Never assume that the experience and interaction will translate perfectly. Instead think about the strengths and weaknesses of both systems and fuse the strengths in light of user expectations. If you’re constantly bucking against how the user will intuitively want to use your product given that it’s in a desktop environment, you could be fighting a losing battle.

Always Ask “Why?”

When moving a product from a mobile to a desktop environment, “Why?” can be your greatest asset. If you leave something exactly the same during the transition, ask yourself why it wasn’t changed. Are both platforms similar enough in this area that it will translate well? Was the standard way of achieving this in a mobile environment better than an alternative route that’s usually taken in a desktop environment?

Similarly, if you do change something, also start asking questions about why it was changed. What were your motives for the change? Did you improve the experience or make it less efficient/effective?

Ultimately, you should always ask yourself if you’re mimicking mobile UI and/or UX just for the sake of doing it or because it actually represents an improvement. As we saw with Apple’s attempts, the answer won’t always be black and white. I am personally now more comfortable with natural scrolling than the old way, but has my experience actually improved or was it a superficial change?

Conclusion

The purpose of this article was to get you thinking about the fundamental differences between mobile and desktop environments and how that affects design and interaction decisions.

Too many people hastily port a product, feature or model from one platform to the other without thinking through the implications of that leap. The result is a poorly developed end result that disappoints users.

Always remember that a multitouch trackpad and/or mouse is very different than a multitouch screen and that moving a design from a small screen to a large one involves much more than scaling your graphics.

Image credits: superstrikertwo and kumazo

Headlines are one of the most important elements on your page and are often the starting point that sets the tone for the entire design. So why not make them great?

Today we’ll take a look at seven different design techniques that you can implement in a minute or less that will boost your headline from plain to awesome.

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

One Big Line, One Small Line

We’ll start with the most typical and basic trick on the list. One of your most powerful tools for creating headlines is contrast, which we’ll be using again and again throughout this post.

Here we chose to apply contrast primarily in the form of font size. It’s extremely common to have a two-line headline setup where one line utilizes a larger font size than the other. This works with just about any typeface and you can vary which line is larger.

The key here, as with a few of the other examples below, is to place the emphasis where you think it belongs. In my example, “Great Headline” is the main idea and is always emphasized whether it’s on top or on bottom.

Vary Your Case

This is a simple trick that I end up using quite a bit. Using just about any headline structure you want, try switching up the case on some of your words or lines.

In the examples above I used various combinations of uppercase, lowercase and small caps text. Typically, the uppercase letters are used for emphasis, but it’s nice to throw in a curve ball every now and then and actually make the lowercase line the primary attention grabber as I’ve done in the second headline.

Your reasons for choosing which words or lines to capitalize can of course be logical and thought out, but don’t be afraid to attempt a little bit of arbitrary application. Your reasoning can be as simple as the fact that you liked the way a word looked better in all lowercase letters.

All Caps: Harder to Read?

Somewhere in the age old designer creed is a statement about how all caps makes for hard reading. To a certain extent this is true, but it really only applies in large blocks of text like a paragraph or really long sentence.

The variation in letter height in lowercase letters helps you differentiate and read faster, but when there’s only a few words, it’s perfectly easy to read in all caps and I’ve even heard some argue that it’s easier!

Equal Line Width

This technique is used all the time in modern headline design. The result that I achieved above is fairly non-typical (intentionally). You usually see this technique used on a bold condensed sans-serif like Helvetica, but don’t fall into the trap of doing what everyone else does, break out on your own and try it with any font you want. It won’t always look good, but experimenting is an important part of every design!

The font that I used above is DeLarge Bold, which is admittedly fairly difficult to read but is quite attractive in small doses.

The idea behind this technique is that you’re really pushing the concept of a headline as a single element. By creating a fixed width column, normally diverse letter shapes and line lengths become a cohesive whole that is easier to work into a larger design. Plus, you know, it just looks cool.

Equal Line Width Online

Want to implement this technique with live text on the web? There are a few jQuery plugins, like Lettering.js and BigText that make it easy. BigText is specifically for this technique while Letterring.js is more flexible and could be used to create most if not all of the examples in this post.

Selective Word Emphasis

This one has the same basic logic as the first example above. We’re simply attempting to use size as a major point of contrast. Here we’re emphasizing certain words and de-emphasizing others.

There’s no real magic formula for which words to make large, just feel it out and see what makes sense. I typically reduce unimportant words such as “the” or “and” while trying make the large words read somewhat decently as a whole. For instance, in the example above, you can see the phrase “Make Some Important” even though that’s not quite what the sentence as a whole says.

Back when I designed print ads, this was one of my most used tricks for headlines. In print, you’re always trying to grab someone’s attention in a split second and reducing a headline to its most important parts really helps with that goal while still getting in that giant headline that the copywriters gave you to work with.

A Double Message

This one is a little quirky and should only be used in rare cases, but it’s pretty fun. You can use size, weight, typeface and/or color to set out specific letters from the rest of the line.

The result is a clever hidden message in your headline. In the headlines above I’ve made “DUH!” and “WOW” stand out. These are overly simple examples, it’s much more impressive when you really spend the time to make the two meanings work well together like this designer did.

Integrate Text-Altering Graphics

If you want a really interesting design, try not placing your headline off floating by itself but rather working it into the graphics on the page. This works great with simple vector shapes like the one above. Notice how the headline message and graphic reinforce each other.

One of the most typical places you’ll see this technique is in infographics. Here the entire point is to intermingle images into the text to make the message clearer, so it’s an obvious and appropriate setting for this to be used.

Sometimes your letters are easy enough to manipulate that they can be bended and stretched to follow the lines of your graphic, this was the case with the “W” above. However, the other letters were much curvier so I just took the easy way out and had the graphic cut into them.

Nestled Text

We started on a really simple technique so I’d thought we’d end on one as well. This sort of headline design is very common in magazine titles. Basically, you type something out in title case and watch the negative space formed between the ascenders. It’s often the perfect place to nudge a word or two into.

The result is a nicely integrated headline that only takes two seconds to build! Perfect for all those times when you’re way over your deadline and need throw together a design in record time.

Conclusion

The moral of this story is to think twice before you simply type out that headline and call it a day. Always think about how you can improve the readability and/or the aesthetics of the text to better meet the goals of the design.

Leave a comment below and let us know which of these is your favorite. Do you have any of your own headline tricks to share?

Today we’ll offer up some basic advice that everyone should consider before attempting to teach someone to be a graphic designer.

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

Those Who Can, Should Teach

We freelancers often consider bringing on an inexperienced partner not for our own benefit, but because we love our work and are eager to show others how they can succeed as well.

This is in fact how I got my start in graphic design. My uncle is a print designer who works on a few huge store marketing accounts. One day as I stopped by after dropping off a few job applications at local burger joints, he offered to teach me basic page layout and even paid me far more than I was worth. Within ten minutes I was hooked and never had to look for a burger job again.

After nearly a decade as a professional graphic designer, Design Shack serves as a way for me to continue the favor that my uncle extended to me by acting as my outlet for providing free design lessons. I absolutely love to share what I’ve learned with other people in addition to encouraging them to make their dream job a reality.

Whether you’re looking to help out a design intern or want to teach a close friend how to replicate your success in making dang good money from their couch, it’s important to understand how to teach design. I lucked out that my teacher was an actual former graphic design professor and from his example I’ve learned a lot about how to approach teaching someone to be a designer. The following lessons are some of the most valuable that I’ve learned.

Lesson One: Photoshop ≠ Design

When I was in high school I watched a ton of Total Training video tutorials and quickly picked up an impressive knowledge of and competency with Adobe Photoshop and Illustrator (then later, InDesign).

This solid understanding of some of the most important modern design tools was a critical step on my road to becoming a professional designer, but the first thing I learned when I started designing ads is that knowing how to use a few pieces of software and knowing how to really design something are two very different things.

Design isn’t about software or computers, it’s about visual communication. Every project has a set of goals that it seeks to accomplish. These goals might include anything from persuading someone to buy a candy bar to organizing a large amount of information in a meaningful way. We use design in conjunction with copywriting to accomplish these goals.

Being a professional designer is about making the boring interesting. You must possess a strong sense of aesthetics and be able to turn something ugly into something beautiful. Being a designer is also about learning to simplify. You must be able to clarify a complex message and break it down into manageable chunks while placing visual emphasis on the most important parts. Finally, being a designer is about understanding people (often very specific groups of them). You must intuitively or explicitly know a thing or two about human psychology. What motivates people to act? How will people respond to certain visual styles? How can you leverage design to help people understand whatever it is you want to tell them?

In a Nutshell

The gist of this lesson is that it’s easy to confuse teaching Photoshop with teaching design. In reality, they’re two distinct but potentially interwoven disciplines.

If you’re going to teach someone to be a designer, stopping at a few software lessons is like teaching someone to write letters and numbers but neglecting basic grammar. They wouldn’t make it far as a professional writer! Which brings me to my next lesson.

Lesson Two: Cover The Basics Thoroughly

Some people have this amazing innate sense of design and visual communication and take minutes to figure out what takes others years. Even if you’re working with one of these extremely gifted individuals, don’t be tempted to skip basic design principles.

I’m constantly preaching the benefits of explicit knowledge vs. implicit knowledge. Having “a feel” for something will earn you a few successes, really understanding that same thing will allow you to do it for 40+ hours per week and consistently repeat that success.

CRAP Filled Designs

No matter who your student is, he/she will benefit from a solid explanation of the most basic principles. A great place to start is the “Non-Designer’s Design Book” by Robin Williams, which serves as a solid primer and teaches new designers how to properly wield Contrast, Repetition, Alignment and Proximity (CRAP) to create successful layouts. No matter which area of graphic design someone wants to get into, this knowledge will prove invaluable throughout the course of a career.

That same book serves as a basic introduction to typographic principles, which is another key area where building a strong foundation pays off. Learning how to properly mix typefaces and apply selective kerning are just a few of the skills that every design student should pick up. Designers who don’t understand terms like serif, baseline, ascender, x-height and tracking really lack a fundamental understanding of type and their designs likely suffer for it.

The Meaningful Rule-breaker

Design is a very subjective art and it’s often the case that something is interesting and effective because of how much it goes against traditional practices.

Understanding the basic rules and principles of design will empower new designers to create strong designs and help more experienced designers know when and how to break the rules to create something unconventional. There’s a big difference between sloppy design and a skillful departure from the norm.

Lesson Three: Fix The Broken

One of the best ways to learn how to design something is to learn how not to design something. Critiquing design work isn’t something reserved only for the experienced, it should be done frequently by design students as they learn.

Just about everyone has some basic design instincts and a big step in turning those into real knowledge is meaningful analysis. Show the person you’re teaching a bad page layout, headline arrangement, logo, color scheme or all of the above and ask them to explain what’s wrong with the design.

Fixing a poor design is an easier starting point than designing from scratch. It gives the student something to work with and really pushes them to think critically about what works and what doesn’t.

Self-Criticism is Difficult

It’s easier to critique the work of others than our own. If someone creates a poor design, their biases get in the way of a proper analysis. For this reason it’s much better to look elsewhere for examples of poor design practices.

Fortunately, both the web and the real world are overflowing with examples of truly horrid design! Find some and start discussions about them. You don’t have to pretend to be a professor in a classroom, there’s no reason you should have someone submit their answers in the form of an essay. Just talk with the person about why the design seems inadequate.

This exercise will bring to light loads of knowledge that the learner can then apply to his/her own work. Learning to spot faults elsewhere helps you then turn around and look for the same mistakes in your own work.

Lesson Four: Give Encouraging Feedback

Design can be a very technical process, but it’s ultimately a creative venture, which makes things difficult when it comes to feedback. For whatever reason, many people link creative skill very closely to self-esteem. We’re not embarrassed about not being able to work out complex astrophysics but when someone points out that we suck at Pictionary, it hits deep.

No one likes being told that they’re a bad designer, even if they’ve only just started. It’s really easy to get frustrated and intimidated while someone is trying to teach you a creative skill and the result of those feelings is often a full-on surrender. People tell me all the time that they could never do what I do, that they’re not creative enough, etc. In truth, being a graphic designer doesn’t mean that you have to be some uber-talented Michelangelo. Sure it helps to have advanced artistic skill, but it’s not requisite.

Always remember this when it comes time to tell someone what you think of their design. Creativity is so deeply personal that it’s almost as if you’re not simply critiquing their work, but are actually critiquing them personally!

Don’t mistake this direction as a suggestion to baby the person and not point out mistakes, criticism is critical to learning. However, any feedback should be given with an encouraging attitude, not a deprecating one.

Tell whoever it is that you’re teaching that they’re off to a great start and constantly remind them that you were horrible when you first began. This is all of course wrapped around suggestions for how to improve and clear analysis of what went wrong vs. what went right. An old teacher’s trick is to sandwich a criticism between two compliments to help lessen the blow.

The Keys to Becoming a Good Designer

Both you and your design pupil need to remember the two key ingredients in the recipe for creating a good designer: time and practice. Design principles take a few minutes to understand and years to master. No horrible designer is going to turn into a professional in an afternoon!

Each project is unique and therefore presents a unique set of challenges. The more projects you have under your belt, the more challenges you’ve successfully overcome and will be better prepared to face in the future.

I’ve been doing this for a long time and I still find things to struggle with on every single project.

Conclusion

I strongly encourage every successful graphic designer out there who loves what they do to help others learn to do the same. The experience is very fulfilling and I know from experience that it can literally change lives. Learning to make a living doing something fun is one of the best things that has ever happened to me.

When teaching someone to be a graphic designer, remember that it goes far beyond showing them how to use a few pieces of software. Design is both a highly creative and technical skill and those who attempt to skip either of these steps really fall short. A solid foundation in basic design principles is an absolute must and will stay with a person for their entire career. A great way to teach good design practices is by showcasing bad ones and discussing why they’re bad.

Finally, the road from layman to designer is long and hard for both student and teacher, being overly strict or harsh in your feedback can scar a person for life. Instead of cold insults, try wrapping constructive feedback in encouragement.

Wedding invitation design is one of the most creative areas of print design today. Talented designers really pull out all the stops and create some amazingly inspirational pieces. Keep reading to see fifty astounding examples of wedding invitation design.

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

Trends

Before we launch into our huge list of invitations, it will be helpful to point out a few trends. These will help feed your creativity and teach you what you can expect clients to be looking for in a professional design.

Letterpress

By far the most popular trend I came across was letterpress printing. This relief printing technique uses an inked, raised printing plate to create an imprint effect on text and images.

The result is a high quality, classic feel that is absolutely perfect for wedding invitations. It’s not always the cheapest route but it’s certainly a good way to impress your guests.

Vintage Typography

Another extremely popular trend is using a typographic treatment as the primary design feature. These layouts typically mix several types of old style typefaces and incorporate interesting word shapes and ornate line graphics.

As you can see in the example above, it’s hard to beat a good vintage type treatment. There’s just something so undeniably eye-catching about it!

Custom Illustrations

If you’re good with a pencil, wedding invitations provide the perfect outlet for your artistic genius. Brides and grooms often love something personalized with a comically drawn version of themselves.

Recipients of these invitations will instantly know that the couple went out all on custom design rather than simply buying a cheap template.

The Whole Package

Don’t stop at mere invitations, wedding clients require lots of printed materials and getting them all in one place with one coherent theme is an enticing deal.

In addition to invitations you can throw in “Save the Date” cards, RSVP cards, custom envelopes, maps to the church and reception locations, wedding day programs and “Thank You” cards.

Unique Packaging

If your clients have a decent budget to play with, try putting some creative thought into how you present the invitations. The awesome example above uses a pop-open can containing the invitation. Guests are encouraged to then bring the can to the wedding and tie it to the back of the bride and groom’s car for that classic “just married” look.

The Invitations

Wedding Cards by Tim Van Damme

Vintage Travel Wedding Invite by Katrina Sirmon

Pennsylvania Wedding by Lydia Nichols

Wedding Invite – final letterpress result by Boris Forconi

Wedding Invitation by Joshua Krohn

Wedding Invitation by Gedy Rivera

Wedding Invite – Close Up by Josh Sullivan

“I Do!” by Allison Grayce Nold

Invites by Matt Braun

My Wedding Invite System by Gaelyn Jenkins

My wedding invitation by Vikifloki

Wedding invitation by J3fton

Wedding Invitation by XtrDesign

Wedding Invitations by Kostadin Kostadinov

Wedding Invite by Samantha Wiley

Wedding Invitation by Peterbowen

wedding invitation by FireFlyGa

Andrew & Aly’s Wedding Invitations by Seth Nickerson

Brooke and Michael Save the Date by Ghostly Ferns

Jeslyn and Chris Wedding Invite by Emory Cash

Ludwig-Allmett Wedding Package by Primaluxe

“Did she say yes?” – Wedding Invitation by Chris Trivizas

Martha’s Vineyard Wedding Invitation by Sarah Parrott

Wedding Invitations by Phaedra

Typography Inspired Wedding Invitations by Sarah Parrott

Wedding Invitation .01 by Wormsinfected

Wedding Invitation by RafaelVictor

Wedding Invites by Matthew Muller

Set Sail Wedding Invitations by Sarah Parrott

Genna + Clark Wedding Suite by Andrea Mentzer

Wedding Invites by Skylar Hartman

Wedding Invite 1 by Justin W. Siddons

Our Letterpress Wedding Invitations by Matt Omohundro

Sydney Wedding Invites by Greig Anderson

Tying the Knot – RK+MM Wedding Invitations by Urban Influence

Wedding Invitation by Wundercloud

Ashley + Kevin Letterpress Wedding Invitations by Matthew Duerksen

Wedding Invitations by Jeremiah Shaw

Wedding Invite by disturbance

I Do’s Wedding Invitation by Eric Carver

“Crete” – Wedding Invitation by Chris Trivizas

Wedding Card by Peter Becker

Mel & Joe by Nick Wavish

My Wedding Invitation

Vintage garden wedding invitations by Luke Morgan

Wedding Invite by Sophia Tarasova

Y+S wedding by Farah Assir

Tarjetas de Nuestra Boda by burun DANGA

Beñat y Ainhoa by La caja de tipos

Wedding Invitation by Nicole Ziegler

Conclusion

Weddings are an incredibly special event and are a pleasure to be a part of as a designer or photographer. They provide an amazing opportunity to hone your “human-focused” design skills as you get to know the bride and groom and try to translate their personalities to a finished design.

Leave a comment below and let us know which of the invitations above you liked best. Also be sure to leave a link to any awesome invitations you’ve designed!

I adore a good read. In a time where 90% of my life is spent staring at a digital screen, reading a physical book with real pages gives me an ephemeral illusion that life is simple again. To defy the age old adage, I will freely admit that I choose books to read based on their covers. I’m a designer, I simply can’t help it.

The question I’m exploring today is whether or not the rest of the world thinks like we designers do. Does everyone judge books by the quality of the cover design? If we take a look at the bestseller list, what will we find?

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

An Oversimplified Experiment

I should start by recognizing the fact that this experiment is a drastically simplified look at reality. There are tons of factors that sell books: the fame and reputation of the author, the publicity it receives, critic reviews, etc. We’ll be pretty much tossing these out entirely and focusing solely on whether or not books that sell well have attractive covers from my extremely subjective opinion. Nevertheless, the experiment will be a fun one and I’m greatly looking forward to it. Let’s get started!

Bossy Pants, by Tina Fey

Sourcing the New York Times Best Seller List, we start our journey in the “Hardcover Nonfiction” category where comedy queen Tina Fey holds the top spot with her book “Bossy Pants”.

We’re definitely off to a strong start! I think this cover design is pure genius. First of all, people love Tina Fey for being funny and she’s playing to the crowd here because this image is hilarious. The photo isn’t mere low brow visual humor though, it seems to convey a deeper message. Tina Fey is a woman in a man’s world and she’s had to learn to cope with that reality to get where she is today. This book is likely targeted towards a largely female audience who immediately identifies with the message while appreciating the candid nature in which she approaches it.

As far as the composition itself, there are a few important things that I notice. First, the illusion is completely believable. It’s not a Photoshop hack job but rather a juxtaposition so convincing that you can barely take your eyes off of it. This idea could’ve easily come out on paper looking hideous but the designers and/or photographers took the time to get it just right.

The idea of opposing concepts goes even further the longer you look at the cover. Notice the duality of the tie and dress shirt against the hat. Even the Didot typeface used for Tina’s name seems to convey dual personalities: masculine in its harsh serifs but feminine in the contrast between the thicks and thins.

Finally, notice the hierarchy of the text. The title of the book, though clever, is secondary to the real highlight: the author. Thanks to Saturday Night Live and 30 Rock, Tina Fey is a household name in America and these designers wanted you to know above all else that she’s the author of this book.

I think this cover is a clear case of awesome design. In fact, I’d be willing to bet good money that the cover alone has sold more than a few books.

Dead Reckoning, by Charlaine Harris

Next we’ll jump over to the “Hardcover Fiction” section, where we find Dead Reckoning by Charlaine Harris sitting at number one.

Tina Fey’s book looks fantastic and sells well, a perfect affirmation of our theory. This one is a little harder to figure out. The illustration is pretty bizarre and doesn’t tell me much. With the upside down woman and the flying, burning pages, the story is bound to be mystical in nature, but beyond that I can’t really tell what I’m getting myself into.

The designer and publisher perhaps knew that the illustrator wasn’t really conveying the full story though because they’ve given us some important clues that fill in the gaps in our knowledge. First of all, as with the Tina Fey book, the author name is the primary piece of messaging here and sits as a large block of text at the top of the cover.

I wasn’t familiar with this author, but the line the very top of the cover informs me that she has graced the best seller list before. This is an important aspect of the design because it comforts the potential buyer and lets her know that this author can be counted on to deliver an entertaining experience.

Jumping to the opposite end, the bottom of the book gives me another key piece of information: it seems this is one book in a series about someone named “Sookie Stackhouse”. Again I had no idea who this character was but at least I now know that I’m getting ahead of myself and should probably check out the earlier books in the series.

Finally, for the few souls like me who are still clueless at this point, there’s a burst in the lower left that informs me that Sookie Stackhouse is a character on the hit HBO show, “True Blood”. At this point feel free to comment below in shock and awe that I’ve never seen this show.

There is plenty that I don’t particularly like about this cover, not the least of which is the horribly cliche star-shaped burst. I literally cringe when I see designers still using these. However, as we can see from my walkthrough above, the designer did an admirable job of letting me know what the illustration didn’t: that this is one book in a massively popular series that has even turned into a hit television show.

Most of the buyers of Dead Reckoning were probably already waiting anxiously to purchase the next title before the book was even announced, but for those that weren’t, the design reassures them that the series is one worth pursuing.

The Help, by Kathryn Stockett

Another book that’s doing remarkably well right now is “The Help“, by Kathryn Stocket. This one also takes an illustrated approach.

This cover definitely wins the vagueness award. At first, it’s quite difficult to ascertain anything about the book, surely it’s not about birds right?

As with the previous books though, the more you look at it, the more it begins to make sense. The title “The Help” implies that the book is about a servant or housekeeper of sorts. This terminology was popular in the early to mid 20th century so we can at least begin to guess a rough time period and subject.

The illustration is an attractive mixture of cool and warm colors and is taking advantage of the bird on a wire metaphor. The image reinforces our suspicions about the title by distancing the bird on the right from the two on the left. This bird is different; an outcast not fit to stand with the others.

The title is placed in a large, cloud-like bubble where the text is a bit awkwardly positioned. The use of whitespace is pretty poor and I’d love to move things around a couple of clicks. The interesting part this time around is that the title of the book has been given more emphasis than the author’s name. This is in direct opposition to the techniques we saw in the previous two titles.

The reason for this is perhaps a mixture of the author’s name not being quite as ubiquitous while the name of the book has become recently recognizable due to the major motion picture soon to be released under the same title.

The cover is obviously quite feminine and therefore clearly targets a certain group of readers. The painting is obscured and intentionally lacks realistic details, driving home the idea that it’s a metaphor. The tone isn’t intense like the previous illustration but instead feels softer, indicating that the contents will target your emotions rather than your imagination.

The overall composition is fairly attractive and likely enough to rouse a browser’s interest. A few weeks ago I actually watched from a distance as my wife picked this very book off the shelf among a wealth of others.

The Wrong Audience?

After three in-depth analyses, are we seeing any trends? The first and the third covers were well thought out and very attractive while the second one is intentionally bizarre and relies heavily on textual cues as to the fame of the author and the series.

At the beginning of the article I promised to focus on purely design as a factor in the sales of the books, but after choosing three titles at random there’s one pattern here that I can’t ignore: television and movies sell books. All three of these titles are tied to television or films that are currently popular or about to be released. What happens on our television screens is apparently a huge driver of what ends up on our bookshelves.

It strikes me that the audiences for the books above present a fairly narrow scope. Almost all are targeted at female readers, be it the educated professional, the hormonal teen or the mature and sympathetic young woman. It’s entirely possible that this particular group is skewed to judge books as much or more by outside forces than by the design of the cover alone.

Children & Teens

Perhaps children are a more appropriate segment that might be particularly inclined to judge books by their covers. I love children’s fiction and judge books by their design, so I must think like a kid!

Fantasy for a preteen audience tends to have very rich and colorful illustrations that aren’t vague or metaphorical but get right to the point about what the book is about and The typography tends to be ornate and edgy. These are definitely the kind of covers that could convince a young reader to bring a book home.

Looking at a slightly different young audience that relates more to real world problems such as sibling rivalry and schoolyard bullies, we see the design style take a definitive turn towards lower fidelity illustrations that easily catch the attention of their target audience because it looks like something they would create. Notice that the colors are even brighter in this segment and really scream for attention. The typography this time is more handwritten (these are both diary-themed books) and irregular.

Adult Males

Reverting back the world of adults I browsed a few reading lists specifically created for men. Again we see some very definitive patterns emerge.

Here the emphasis is on intensity and a dark, foreboding environment. The typography conveys a sense of seriousness and is often exaggerated. The covers are often straightforward but can also be pretty vague like the two above. You can’t quite tell what these books are about but you know both of them will be page-turning thrillers.

Does Good Design Sell Books?

So what conclusion have we reached here? I think one of the most important discoveries is that the design of a book cover sells books to the right people. Whether you’re a full-time mom looking for a good cry or a kid who wants an amazing adventure, a good cover tells you that you’ve come to the right place. Regardless of whether or not it clearly depicts the events of the book, it sets the tone and aims at a specific audience.

Beyond that, there are a lot of outside factors, especially in the adults who keep up on popular culture and want to read books that will keep them relevant and interesting at the dinner table. Kids seem more prone to choose a book based on the cover art and then to read others that have a similar illustration style to something that they liked. They don’t need author names or recommendations from critics, they need a designer or artist to tell them that the book is a lot like the other books that they enjoy.

What do you think? Does the design of a book cover influence what you read? How about your spouse and children?

We’ll break down every step of the design process, from choosing colors and images to using whitespace properly. After reading through this you should be all set to design your own beautiful presentation slides that will put your coworkers to shame.

A Word About Content

I usually make a big deal about content preceding design, and presentations are no exception. Ideally, you’ll have the topic and much or all of the content outlined before you even think about design. This will in every way shape the appearance of your design, which is why working from pre-built templates isn’t always the best move (though generic templates can and do work great in some circumstances).

The reason that I bring this up is that I don’t really have an actual presentation in mind for this project. I’ll be running with a basic theme, but the textual information will be entirely placeholder copy. Your image, font, color and layout selection shouldn’t necessarily match mine but instead reflect the topic and content you’re working with.

Choosing A Color Scheme

Before I even open Photoshop (yes, I design PowerPoint/Keynote slides in Photoshop and drop them in, thought it helps if you do the te), I want to find a color scheme on which to base my entire design. When I need to quickly find several colors that go together I usually start with Kuler. Not only is it a great way to build your own color schemes, it’s an outstanding source to find schemes built by others that you can just grab for your projects.

As luck would have it, I liked the very first color scheme I saw upon opening Kuler. “Keep the Change” was featured on the home page and looked like a great place to start for our presentation design.

Now, if you wanted to get everything exactly right, you could make a list of the RGB or Hex values, but I prefer a quicker, more direct route. What I usually do is snap a screenshot of the color scheme, paste it into my document and stretch it across the canvas on its own layer for easy access. This way I can quickly activate the layer, eyedropper the color I want, then hide the layer and get back to work. It’s a bit like having a palette of colors to dip your paintbrush in.

Designing Your Cover Slide

Now that we have a color scheme, the design work is going to be much simpler. One trick that designers often use in presentations is to leverage the color scheme as heavily as possible. If you’re new to design, you’ll likely think that this is too easy, too plain or even that it’s cheating somehow, but trust me, it’ll be much more attractive and professional than that horrid Microsoft clipart library you love so much.

To start, simply grab one of your colors from the scheme you chose and flood the background of your slide with it (I chose #631c25). Good job, there’s your background. Don’t freak out. It’ll look great. Now let’s throw in some typography.

Choosing a Font

Font choice is a major issue for non-designers. The tendency is to think that most fonts are “boring” and to look around for something exciting and fun. This inevitably leads to the use of Comic Sans or some other equally hideous font.

Unless you’re an elementary school teacher, your presentations should never look like this. Instead, why don’t you try one of those “boring” fonts to see if you can come up with something you like.

Combining fonts can be a tricky task and can take a trained eye to pull off. Fortunately, font designers have already created collections that work well together and if you’re not a designer, they make it easy to pull off great typography. The trick is to just stay in a family. Again, I know this sounds lame, but it works really well if you make sure the two styles you choose are very different.

For instance, I chose a Helvetica Bold Condensed and a Helvetica Light for my cover slide. Notice how different the fonts are from each other in terms of thickness. Choosing two styles that are relatively close causes visual confusion and should be avoided as a general rule of thumb. Instead, what you want is contrast and plenty of it.

Alignment and Layout

Notice a few things about the way I set up this slide. First, I used a strong left alignment for the text. As I say in just about every design article I write, center alignment should be a last resort, not a first. It tends to be the weakest text alignment that you can choose, having a hard edge increases readability considerably (notice that book pages aren’t center-aligned).

Also, notice the generous whitespace that I used. Remember that you don’t have to eat up every inch of space. Giving your text room to breathe helps your layout immensely and gives the design a clean look.

Adding an Image

At this point you might be wondering why you wasted your time reading so I could give you such plain advice. The truth is, most people that create presentations could improve them by 100% from following the advice above. However, I realize minimalism may be too extreme for some folks so let’s throw in an image to make it look nice.

Since our text is on the left, I wanted to find something a little heavy on the right. The general theme that I’ll go for is “City photos” assuming I had some sort of architecture or city-centric presentation to give. Again, you’ll have to choose iamges relevant to your own topic.

I grabbed this Flickr Creative Commons image from photographer Ben Spreng.

Now, if we just made this image our background, the text would become unreadable and we would be ditching our color scheme. What we’re going to do instead is set it on top of the colored slide and set our blending mode to Overlay. Then throw your opacity to around 45%.

As you can see, this helps the slide look much more interesting but keeps the text and colors fairly intact. It’s a simple solution that adds a lot of interest to an otherwise plain design.

Adding Content Slides

The cover may seem like it’s only a tiny part of the battle, but you’ve actually already set the tone for the entire presentation. You’ve got your theme, color scheme and fonts already in place. Now you just need to set up a few different layouts for your content.

The thing to keep in mind is to keep everything extremely simple, and that includes the level of content that you include. Apart from design, these are just good presentation tactics that you’ll learn in every public speaking class. Filling your slides with everything you’re going to say makes you unnecessary. You could just email everyone the slides and shut up.

Instead, the slides are merely meant to be a visual aid. Show a slide with your overall topic or main point, then speak the rest, without reading. Nothing is worse than watching a guy read his note cards word-for-word for thirty minutes, except perhaps watching a guy turn his back to the audience so he can actually read his slides out loud to you the whole time! You may laugh, but I’ve seen it happen folks.

For our first content slide, we’ll grab another Flickr photo and set it to the bottom portion of our slide at full bleed. Then we’ll set the top to another color from our scheme and toss in some text using the same exact formatting that we used on the cover.

See how this closely resembles the theme we’ve already established while still looking significantly different? This is they key to good presentation design: cohesiveness without redundancy.

Now for our third slide, we can simply do the inverse of the second slide with a new color and a new image.

Adding Informational Elements

It would be nice if every slide ever presented could work in a full bleed image, but the truth is that this simply isn’t practical. It will often be the case that you’re presenting graphical information or some other item that isn’t necessarily a photo.

My advice here is to try to stick as close to your theme as possible. For the slide below I flooded the entire background with a solid color from our original scheme and made a quick 3D graph with white columns (I drew a few flat boxes in Illustrator and applied a 3D effect).

As you can see, this slide is very information-focused and yet it doesn’t sacrifice the aesthetics and simplicity we’ve already established.

You’re All Set

From here you might come up with one or two more alternate slide designs and then rotate between them for the duration of your speech. The result is a presentation that is beautiful, very readable and highly professional. The bonus is that the simple, straightforward design will probably result in less work than a clip-art-filled horror show.

Most of the time, great design doesn’t mean being particularly artistic or knowing how to create amazing complex layouts. Instead, it’s about presenting information in an attractive and user-friendly way. With this goal in mind you realize that you’re probably trying way too hard if your end result is ugly. Try cutting out half or more of the elements on one of your slides and giving what’s left a strong left or right alignment with plenty of whitespace.

Conclusion

I hope this article has convinced you to abandon that clip art gallery once and for all. The benefits of clean, minimal design in presentations are clear: the information is easier to take in and the end result is more professional than the mess of information you typically see in presentation slides.

Leave a comment below and let us know if you’d like to see more content aimed at presentation design. What else do non-designers find themselves tasked with designing on a regular basis? Let us know and we’ll write some articles to help out!

Before websites, email blasts and banner ads, business cards were the central piece of design work for countless small businesses. This simple little piece of cardstock was a major representation of your company. In China, business cards are so highly regarded that it’s considered poor etiquette to write on someone’s card or even put it in your wallet! Typically upon exchange business cards will be placed into a small card case.

Though the digital age has dawned, business cards remain a fairly popular way to quickly provide someone with information about how to reach you or find out more information about your company. Today we’ll go over some common mistakes in business card design and explore a few practical techniques you can use to bring style and professionalism to your cards.

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

The Typical Business Card Design

Inevitably, upon designing their first business card, many people will create something like the card below.

At first glance this card may not seem that bad. However, from a design perspective, there are several mistakes. Let’s take a look at these one at a time.

Don’t Get Cornered

The very first thing I notice when I look at this card is that the designer has pushed the majority of the content to the corners. For some reason, when we see the rectangle shape of a business card we have a tendency to think that the center and corners should always be full.

Many rookie designers will go so far as to devise extra content to fill an empty corner if they only have enough to fill three! What you need to learn is that whitespace (empty space) is your friend. Don’t be afraid of emptiness, instead use it as a primary element of the design.

Alignment

One of the main reasons you shouldn’t just go sticking content into every corner is that it destroys any sort of cohesive alignment.

Now let’s consider what we just learned: filling the corners is bad, whitespace is good, and clear alignment is good. You will now no doubt be tempted to create something like this:

Granted, this follows the advice I just laid out, however, it’s still a pretty poor design. It’s also a very boring design. Center-aligned text is boring, one font for the whole card is boring, and even the sizing of the various pieces is boring.

So what can we use to really liven this up?

Contrast

Ah yes, our old friend contrast. If you read Design Shack regularly you’ve heard me say again and again that contrast is the key to good design.

Remember that there are several ways to bring contrast into a design. Color, size, typeface, boldness, etc. can all be varied to create visual interest.

Let’s see what happens to our design if we toss in some contrast. First, we’ll vary up the fonts a bit and give the text a strong left alignment. Centered alignments, though seemingly the go-to option, are in fact the weakest choice in many circumstances.

We’ll also have a little fun with the logo. We can use the scooter graphic to introduce both size and color contrast. We’ll keep things grayscale to save on our budget but that doesn’t mean everything has to be pure black or pure white.

See how much more attractive that is than the original design? Not only is it more exciting, it’s more functional. The flow of information is easier to follow and the business name and logo are much larger.

Notice the difference between the way you read both cards. The first card had your eyes bouncing around with no clear path. The final card is carefully structured to lead you from the headline through the contact information with no searching.

Also notice that I didn’t just center that scooter graphic but pushed it off to the left. This is a bit more interesting visually and reinforces the left alignment.

Going Further with Contrast

If you wanted to take the contrast even further, you could create a strong footer that contains the contact information. This will draw the viewer’s attention down to the bottom if/when they actually pull the card out to use it and give your eyes a really bold visual difference to look at.

To accomplish this I increased the boldness on the footer text a little. When reversing small text out on black, the ink can often bleed a little (especially if you’re printing these yourself) so it’s a good idea to avoid any text that’s super thin.

Finally, if you really wanted to go nuts with contrast, you could duplicate the bottom bar up top and create a letterbox effect. Personally, I like the previous option a little better, but it comes down to personal preference.

The bold frame keeps your attention towards the center of the card. This can be a good or bad thing depending on your goals. Just make sure you understand where you are leading the viewer and whether or not it matches your goals for the card.

Go Vertical

Even if you want to keep things classy and professional, there’s no need to stay with the traditional horizontal business card format. A vertical business card certainly isn’t groundbreaking but it’s still unique enough to catch the attention of the person you hand it to.

If you’ve got the budget, bring in some color and use it as a major point of contrast. You can also explore various rounded corner or even custom die-cut options to really make things interesting.

Using Photography

If you really want to up the quality of your business card, bring it into the 21st century by going full color and utilizing some beautiful photography. Check out the example below (photo source).

Here I’ve taken inspiration from the scooter graphic and found a photo to essentially replace it. The overall effect is a really attention-grabbing card that’s attractive enough that the receiver might just hold on to it rather than tossing it in the nearest recycling bin.

Notice that I’ve actually painted out the background a bit to make sure the text is legible. Never sacrifice the readability of your text for the sake of a pretty picture. In fact, if your background is proving too busy, consider using a color fill behind the text like I did with this next example.

Here I grabbed a dark color from the photograph, stretched it out behind my text and reduced the opacity a little to let a hint of the background detail show through. This allows the text to be much bigger than in my previous version which really increases the readability.

Conclusion

To sum up, when designing a business card the primary mistakes to be aware of are watching your alignment and arbitrarily filling the corners with content.

Implement contrast in size, color, and font choice to add visual complexity and draw the viewer’s attention to the right places. Also, don’t be afraid to break out of the box a little with the shape and layout of the card.

Finally, use professional photography if you really want to increase the perceived quality of the card (and in turn your business). Make sure you watch the readability of your text closely and take appropriate steps to ensure visibility.

Leave a comment below and tell us about the techniques you use when approaching a business card design. If you have any samples online leave a link so we can check them out!

Today we’ll look into the web design practices and trends of the single biggest name in software to see if we can learn anything about some mistakes to avoid in our own work.

Feel free to comment to either agree or disagree with the suggestions below. As professional designers your insight is valuable and I look forward to your thoughts.

The Occasional Rant

To everyone who hates articles filled with rants, I apologize that this post is a little harsh at times. I normally favor praising good design over criticizing bad, but when David Appleyard and I decided to do a post on the design trends of Microsoft, there just seemed to be a lot more to learn about the messy, ugly, and/or inadvisable things that they do than the alternative.

To cut you off in the comments, I won’t mention or make a single comparison to Apple in the analysis below. This is not meant to be a PC versus Mac argument in the least, but rather a look at what we believe to be genuinely poor practices in web design and development. In all fairness, Microsoft is a hugely successful company and is not exacting failing due to any of these problems. In fact, as we point out below, Microsoft really seems to have some stellar designers on the team for certain sites, we merely suggest that a greater level of quality control be implemented across the board.

With that in mind, let’s analyze a few places that Microsoft seems to fall short in its design and development practices and how you can benefit from this knowledge.

#1 Beware of Mandating Certain Plugins

If we’ve learned anything from the recent scrapes between Apple and Adobe it’s that creating sites entirely dependent on closed third party plugins can eventually lead to some serious backfire. Microsoft seems to be repeating this same blunder as its own network of sites becomes more and more deponent on Silverlight.

As I browsed Microsoft’s various sites preparing for this article I was constantly harassed by windows informing me that I had not installed Silverlight and therefore could not experience the webpage the way it was meant to be viewed. My question is, “why go this route?” Especially when we’re talking about simple slideshows and animations that can be done with more ubiquitous technologies. Granted, Microsoft owns Silverlight so it makes good business sense for them to back up their investment, but that doesn’t mean that it’s the best choice for you to go jumping on their bandwagon.

Whether you’re a huge fan of Silverlight or not, my advice is to be extremely cautious about basing the functionality of your site on this or any similarl technology. As the debate about whether or not it makes good sense to develop sites with Flash continues to heat up, second in line systems like Silverlight become even more of a gamble. Where possible, stick to cross-browser, standards-compliant code and tools that don’t require any additional work or installations from your visitors.

#2 Watch Your Resolution

This is one of my biggest complaints about Microsoft simply because it just seems like sloppy design. There is undoubtedly a fine line to walk between keeping your file size down to increase usability and keeping your pictures clean and crisp, but I can’t help but feel that Microsoft seems to be more prone to display ugly, jagged JPGs than literally any other professional site that I’ve seen in the past few years.

The ever decreasing amount of dial-up Internet users continues to push acceptable image sizes up and up. This by no means implies that you should not take special care to make everything as small as is reasonable, but the moment it starts to weigh so heavily on the design that it dramatically reduces the apparent quality of the site, the images become self defeating!

You’re living out pure irony if you use images to make your site look better but ultimately reduce your aesthetic appeal in the process. When possible, preview your processed images on different monitors and pay close attention to how much distortion and artifacting you find to be acceptable.

#3 Organized Clutter

Sometimes you can follow all of the obvious design rules and still end up with something that seems visually subpar. Browsing Microsoft’s sites I came across countless areas like the one below that just seemed cluttered despite their attempts at column-based organization.

So what’s the problem? Simply put, there is a ton going on in a relatively small space here. Even thought they’ve definitely attempted to arrange the content and enhance the visual readability through icons, the end result is still quite off balance.

If you take a close look at what’s going on here it feels like four columns of information designed by four different people that have been crammed together. The left side seems really heavy with images compared to the right, the text color is a little sporadic, the content is awkwardly staggered, and the columns lack enough breathing room to make them seem like the independent areas that they are.

The lesson here is to be careful of packing a single area of your page too full of disparate information. There are undoubtedly plenty of times when the situation will demand lots of content, but the organization should be handled in a consistent and attractive manner as seen in the beautiful examples below (from non-Microsoft sites).

#4 Inconsistency

Starting from Microsoft.com, open up the gargantuan navigation dropdown menus and choose an area of the site to visit. No matter which link you click, the resulting page will look quite different than the homepage and different still from most of the other links available in the same dropdown.

Exploring the Microsoft site is like spinning a roulette wheel. You have virtually no idea where you’re going to land and what to expect from the next page. Some pages feature swooshy backgrounds while other use soft gradients or even exploding circles. Most pages seem to favor blue but not necessarily the same blue and there are also plenty of pages that ignore the blue trend altogether.

The point is, whether your site has two pages or two hundred, consistency is a must. It makes users feel more comfortable when they can become familiar with the way a site works and looks within a few seconds. Giving them something drastically different every few pages makes browsing a more confusing and less efficient experience.

in addition to this there’s the idea that creating a strong, consistent brand is just good business as it helps customers relate to your company in a more personal way. Admittedly, Microsoft is juggling many different brands and microsites that all stem from the homepage, but even among what could be considered the core Microsoft.com pages, the image themes and navigation methods seem drastically diverse.

#5 Clipart-centric Design

This suggestion is obviously a little absurd seeing as how clip-art and Microsoft Office have always been inexorably intertwined. However, icon design has come a long way since 1995 and it’s about time to give up that specific style in the images you use.

The examples of art above pulled from various Microsoft pages simply make me cringe, especially that awful “Beginner Developer” logo. I have no idea why a boomerang is attacking a plant or whether the magical hovering computer monitor is aiding in the attack or fleeing the scene. All I know is that the visual communication here is an indecipherable mess.

This is one of the primary reasons CSS galleries like our own exist. Not so you can steal the design of others, but so you can get a glimpse into the state of design in the decade you’re developing in. Browsing through these galleries is like visiting popular clothing stores at the mall to show your crazy aunt that she doesn’t have to dress like someone from the Sunny and Cher show.

Always feel free to break boundaries and move beyond current deisgn trends by starting your own. Just be cautious of staying stubbornly stagnant for years while the rest of the world moves on.

#6 Misaligned Overflowing Text

Another trend that’s hard to miss across Microsoft’s sites is the constantly broken columns of text that overflow their obvious bounds.

This one is fairly easy to fix and really only requires a bit of effort and attention. Just make sure to take advantage of free tools like Adobe’s browser lab to ensure that your layouts don’t break when viewed on any major browsers.

Though CSS layout is an admittedly tricky beast when it comes to cross-browser consistency, small mistakes like this really bring your site quality down and are worth the troubleshooting time they take to resolve.

#7 Poor Alignment

Sometimes a given page presented me with the challenge of deciding which design foible to point out. For instance, on the page below I originally considered picking on the use of a tiny screenshot that doesn’t get bigger when you click on it, but the more I looked at the page the more I became confused as to what was going on with the layout.

If you’re familiar at all with basic design theory, you know that learning to implement solid, consistent alignments is the key to good page layout. The odd mixture of left, center and right visual alignments taking place on the site above, in conjunction with the awkward empty space near the top, make for a really odd visual flow of the information being presented.

Further, if you visit the page above you’ll see that the content as a whole seems like it’s trying to be centered but is really thrown off by the strip across the middle, which makes the page seem quite right of center.

#8 Ad Clutter

Free design blogs like this one have to feature plenty of ads, it’s simply the way we make an income and continue to provide you with content. However, if you’re running a professional business site, you have to consider carefully if you want to detract from your message and professionalism with advertising.

The pages of Microsoft.com are littered with various ads that really bring down the aesthetic of the page that they’re on. Sometimes these ads point directly to other Microsoft pages, sometimes to other companies or partners. There’s nothing wrong with the concept of directing traffic to other parts of your site, but how you accomplish this can make a huge difference.

If there’s one thing most web users have learned to spot, ignore and possibly even resent, it’s a banner ad. Not to say that this type of advertising doesn’t work with proper targeting and design, or to even say that Microsoft users aren’t clicking on these, but I do wonder if there isn’t a better way.

If Microsoft wants to direct traffic to their mobile phones and other projects, the easy way out is to setup a cluttered, non-standard (design wise) ad system that rolls across their entire site. However, it seems like integrating this content as part of the actual site would have a much better click-through rate as more users would take note of the message and not have to break any internalized rules about avoiding banner ads at all costs.

Plus, such integration would force the designs to be more consistent because they are created as a single unit rather than by separate teams. Again, this is a scenario where I can understand the cost-efficiency of Microsoft’s approach, but want to caution you against following their lead. Odds are, the sites you design won’t rival the mega-network of Microsoft sites and will therefore more likely lend themselves to solid, integrated design so you can avoid the visual clutter of excess ads.

Obviously, there are plenty of sites genres where this doesn’t apply at all as advertising is expected to be present. Just make sure you consider whether your site should be dedicated to selling your product or service, or requires the extra income and distraction of advertising.

#9 A Lack of Breathing Room

In print design, designers setup every page with a “live area.” This is usually a rectangular inset from the trim of the page that defines the area in which it is safe to place content to avoid page cutoff or edge crowding. Most web designers do this intuitively as it’s fairly obvious you don’t want your content to be too far crammed up against the side of the browser.

However, as the screenshot above shows, there are a few Microsoft pages that don’t seem to put stock in such opinions. Instead, the content starts as soon as the page does with zero horizontal padding or margin (at least on the browsers that I checked with).

The navigation panel doesn’t feel like it’s built-in to the side of the page, it feels like it’s getting cutoff (again, it may be doing just that due to the fact that I don’t have IE). The lesson here is simple: always be conscious of the edge of the browser window. Unless you’re breaking the rule for an obvious visual bleed effect, place your content, especially interactive portions and links, well within a safe margin so that users don’t feel crowded when they try to use it.

If you look closely at the screenshot above you can see some more examples of Microsoft’s designers simply not considering whether or not their text will flow properly on all major browsers. This is quite the amusing trend for Microsoft as many web designers spend their days attempting to make special accommodations for Microsoft’s Internet Explorer, but the multi-billion dollar company can’t be bothered to return the favor by checking their own work on other systems.

#10 Failing to Leverage Your Talent

Though there are plenty of negative comments above about the web designers over at Microsoft, I was pleasantly surprised to see that they do in fact have quite a few sites and pages that look simply amazing.

The examples above are just two of the many places I believe Microsoft really knocked it out of the park with their layout, color choices, graphics, and cross-browser compatibility. What this tells me is that somewhere among the vast pool of cubicles in this company there sits some really talented individuals capable of taking the company completely out of its design slump.

These designers, whoever they are, should be promoted to positions that would allow them to cooperate together and set consistent standards that literally every Microsoft web designer would be forced to follow. In place of a labyrinth of disconnected jumbles of content they could create a strongly branded network of beautiful sites that all clearly belong in the same family.

The final suggestion I present to you is to find these types of outstanding individuals in your own company and give them a voice. Rather than lamenting at the lack of talent among the other members of your team, appoint the strongest designers and developers to positions where they can influence every piece of visual communication that rolls out associated to a specific brand.

This can be done efficiently and effectively by creating clear, consistent and strict brand guidelines that are distributed to every designer and developer for every distinct brand that you work with.

Closing Thoughts

To sum up, though Microsoft possesses quite a few extremely talented web designers, the work of these individuals is almost completely overshadowed by the vast amount of content that doesn’t even meet standards that we would expect from rookie designers and developers in their first year.

Fortunately, we can use companies like Microsoft as instructional aids to clearly illustrate that there is in fact a wrong way to do things. Never imagine that just because you’re a lonely freelancer or small design firm that you can’t completely outperform mega-corporations and design firms when it comes to the quality of work you produce.

I’ve found that it is often easier to find examples of quality designers in home offices around the world than sitting at the desks of large firms. Take comfort in the fact that you don’t have to coordinate and control the quality of hundreds of designers. Do your best to create some of the best sites on the web with the small amount of resources you possess in conjunction with a mass amount of personal drive to create beautifully functional designs.

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