Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 04 2013

07:30

September 11 2013

14:38

35 Production Company Websites for Design Inspiration

Advertise here with BSA


Digital media production companies work with all kinds of artists. Production may come in the form of music, video, animation, or some other creative expression. These websites are designed to express the quality of their productions and the team behind each one.

In this collection you will find 35 inspiring production company website layouts. These are perfect for anyone considering a redesign of their own company website – even based in another field. Production companies are like many other companies and would include similar information. I hope these designs may offer a starting point to get working on your own project(s).

Nick Animation Studio

nick nickelodeon studios website animation

Blue Sky Studios

blue sky studios website layout

Maxtron Media

digital website layout maxtron media

Northern Blue

northern blue website layout inspiring

Carsey Werner

carsey werner productions website layout

Blare Media

blare media website layout inspiring design

Apostle

apostle nyc website layout production company

Dori Media

dori media productions website layout

Merit Motion Pictures

merit motion pictures production company

Primal Scream Music

fullscreen background primal scream music website

Zenith Productions

zenith productions company website layout

Strix

red webstie layout strix production company

Pilgrim Studios

pilgrim studios website layout production

FOX Searchlight

fox searchlight production company website

Zodiak Media

zodiak media productions company layout

McElroy Films

mcelroy films production company website

Pheonix NYC

pheonix production company website layout

214media

214media production company website dallas texas

Electus

electus production company website layout

GrooveWorx

grooveworx website layout production company

Wonderland Sound and Vision

wonderland sound vision production company

Lionsgate

lionsgate production company website layout

G4TV

g4tv techtv website layout production company

hitRECord

hit record website layout design productions

North South

north south production company website layout

Shine America

shine america production company layout design

Zinkia

zinkia website production layout inspiring

Rivr

rivr website production company layout

Hasbro Studios

hasbro cartoon animation studios production company website

Blowback Productions

blowback productions company website layout

Flashpoint

flashpoint productions studio website layout

Powderhouse

powderhouse website layout inspiring design

Katalyst

katalyst network website layout design inspiring

Asylum Entertainment

asylum entertainment website production company

Hoff Productions

hoff productions company website layout design


Advertise here with BSA

July 29 2013

06:30

May 13 2013

14:08

March 18 2013

08:00

August 14 2012

13:54

30 Webpage Layout Designs for Popular TV Shows

Advertise here with BSA


Television shows are often given their own webpage hosted on the TV network. FOX, Comedy Central, and HBO are just a few examples which support their own programming. These TV shows are also given a custom layout design featuring official artwork and character promo shots.

In this gallery I’ve put together 30 inspirational webpage layout designs for TV shows. You may recognize many of these popular titles from western media. But the design sense is also fairly critical when comparing the success or failure of any TV personality. You can learn great design techniques from showcases of unusual websites. If you like this collection and want to share ideas you can post a comment in the discussion area below.

Workaholics

Stella

Comedy Central Presents

It’s Always Sunny in Philadelphia

Archer

Adventure Time

The Marvelous Misadventures of Flapjack

Boomerang

Beavis and Butt-head

The CollegeHumor Show

Ridiculousness

Parks and Recreation

The Office

Family Matters

Full House

Spongebob Squarepants

Zoey 101

Victorious

30 Rock

Community

The Tonight Show

Grimm

The Big Bang Theory

CSI: New York

Design on a Dime

Chopped

$40 a Day

American Dad

Modern Family

Breaking Bad


Advertise here with BSA


March 26 2012

07:00

March 12 2012

08:00

Create a Responsive Web Design with Media Queries

If you’ve yet to get your hands dirty with media queries, now is your chance to create your first responsive website design. In this tutorial we’ll look at converting one of my previous WordPress theme designs into a responsive layout, while taking into consideration the design’s original grid structure.

View the responsive layout demo

If you cast your mind back to late 2011, we went through the process of designing, coding and building ‘Typo’ into a complete WordPress theme. The design itself lends itself well to a responsive layout, so we’ll use the HTML and CSS as a base to transform the static layout into a responsive layout that will adapt to various viewport sizes.

Non-responsive layout

When the viewport size of our browser is reduced on the original demo file we’ll see the site is cut off and ugly horizontal scrollbars are added. The idea of a responsive layout is to adapt to these various viewport sizes so the design remains legible. Smartphones and tablets will automatically scale the original website to fit, but creating specific layouts for those smaller resolutions will allow the site to be read easily without the need for zooming.

Common viewport sizes

The first step to creating our responsive layouts is to plan out what resolutions we’re going to cater for. Common resolutions include the 320px portrait width of smartphones, 768px portrait width of tablets, 1024px landscape width of tablets (and typical netbook resolutions) as well as various desktop monitor resolutions. It’s worth mentioning that a layout that only caters for preset resolutions is often referred to as being ‘adaptive’, whereas a truly ‘responsive’ layout will be built using ems or percentages, allowing an infinite level of scaling.

<link href="mediaqueries.css" rel="stylesheet" />

We can then get started with CSS media queries to add the responsive functionality to our design. I’m adding the media queries and additional declarations to a separate CSS file, but they could be added to your main stylesheet.

@media screen and (max-width: 960px) {

}

The width of the original layout is 960px, so any resolution below this value will generate horizontal scrollbars and cut-off the content. Therefore the first of our media queries will target screens with a width of less than 960px;.

@media screen and (max-width: 960px) {
	#container, footer {
		width: 758px;
	}

	#content {
		margin: 0 20px 0 0;
	}

	#sidebar {
		width: 212px;
	}
		#sidebar section {
			clear: left;
		}
		#sidebar #search #searchbar {
			width: 152px;
		}
}

The next most popular resolution under 960px width is 768px to cater for portrait tablet screens. This Typo design is built using a grid, so to stay true to the layout we can simply remove a column to leave a width of 758px. The original layout can then be narrowed down to fit by reducing the margin on the content div as well as reducing the overall width of the sidebar.

@media screen and (max-width: 758px) {
	#container, footer, #sidebar {
		width: 524px;
	}

	header nav {
		clear: left; float: none; overflow: hidden;
	}
		header nav li {
			width: auto; margin: 0 25px 0 0;
		}

	header {
		margin: 0 0 44px 0;
	}

	header h1 {
		margin: 0 0 24px 0;
	}

	#sidebar section {
		float: left; clear: none;
	}
		#sidebar #social {
			margin: 0 20px 47px 0;
		}

	#sidebar #search #searchbar {
			width: 464px;
	}
}

The value of 758px can then be used for the next media query, so anything smaller than this size will trigger the next layout. At this point the sidebar is too narrow to be made any smaller, so instead it can be naturally flowed underneath the main content when the grid is narrowed by a few more columns. This means the actual sidebar div’s width can be increased to fill the width of the new layout and its child elements floated to fill out the extra horizontal space.
Other areas such as the header have become too narrow to hold the logo and navigation side by side, so the navigation elements are altered to span the width of the layout on a new line.

@media screen and (max-width: 524px) {
	#container, footer, #sidebar, #content {
		width: 292px;
	}

	#content article h2 {
		font-size: 24px;
	}

	#content .postinfo li {
		margin: 0 10px 0 0;
	}

	#sidebar #social {
			margin: 0;
		}

	#sidebar #search #searchbar {
		width: 230px;
	}
}

The third and final media query in our responsive layout will cater for extremely small resolutions such as smartphones. This particular layout is narrower than the original content width, so this div also needs altering with a new declaration in the media queries CSS file. The extremely narrow view has dropped each of the post-info links on a new line, but decreasing the margin between them helps repair some of the floats.

View the responsive layout demo

Thanks to these three sets of media queries our website layout is now responsive enough to cater for common viewport sizes and will aid readability by generating a designed layout in place of scrollbars or a scaled view. View the demo and scale your browser to see the responsive layouts for yourself.

View the responsive layout demo

February 27 2012

08:00

January 02 2012

07:00

December 15 2011

06:00

Tips and Ideas for Designing With Blurred Images

screenshot

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

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

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


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

Blur to Make the Text Readable

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

Consider the following design:

screenshot

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

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

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

screenshot

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

Resources:

Image: Eneas De Troya
Font: Ribbon

Create a Frosted Glass Effect

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

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

screenshot

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

screenshot

Localize The Blur

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

screenshot

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

screenshot

Tips for Localizing Blur

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

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

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

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

Resources:

Image: Dave Conner
Font: Homestead

Create a Tilt Shift Effect

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

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

screenshot

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

screenshot

Resources:

Image: Nosha
Font: Airplane

Blur For Color

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

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

screenshot

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

screenshot

Resources:

Image: Leland Francisco
Font: Vevey

Try Different Blurs

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

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

Original Image

screenshot

Gaussian Blur

screenshot

Lens Blur

screenshot

Motion Blur

screenshot

Radial Blur

screenshot

Resources:

Image: Dave Morrow
Font: Deming

Conclusion

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

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

Tags: Layouts

December 08 2011

04:00

Popular Web Design Trends in 2011: Over 50 Inspiring Examples

screenshot

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

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


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

Top Trend: Responsive Design

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

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

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

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

screenshot

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

Dashed Lines

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

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

Founders Fund

screenshot

Yes!

screenshot

Boo Bebe

screenshot

Quartier Vier

screenshot

AskLela.org

screenshot

Circles

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

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

Carnette

screenshot

Lisi Design

screenshot

Pistachio Sketching

screenshot

TaosPuso Foundation

screenshot

English WorkshopLanguage Learning

screenshot

Air Protect

screenshot

Agência iSee Interactive Group

screenshot

Decode

screenshot

Sleek Design

screenshot

Rakesh

screenshot

I AM ZAM

screenshot

In My Bubble

screenshot

Clean, Sophisticated Retro Type

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

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

Big Bite Creative

screenshot

Beerworks

screenshot

Urbanoff

screenshot

Noltedesign

screenshot

Ribbons

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

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

Change Nation

screenshot

GiveBeyond.Me

screenshot

Tao Community

screenshot

Red Bowl Challenge

screenshot

Marisco Gallego a Domicilio

screenshot

LoadUp 2012 by PuddleDrop

screenshot

DigitalSafe

screenshot

Anhalter des Jahres 2011

screenshot

Goatee Joe

screenshot

Jopp

screenshot

Sunday Best Websites

screenshot

HarryFord

screenshot

Kitchen Sink Studios

screenshot

Three Things

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

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

Tabspresso

screenshot

Treehouse

screenshot

Shady Acres

screenshot

Sellfy.com

screenshot

Curled/Folded Paper

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

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

Literacy2030

screenshot

Edits Quarterly

screenshot

Greenjob

screenshot

Borderless Grids

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

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

Fuzzco

screenshot

Ignacio Macri

screenshot

CARLOS5TO

screenshot

ROA Produktion

screenshot

Diagonal Design

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

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

Bleep-Radio

screenshot

Piropixel

screenshot

Kikk Festival 2011

screenshot

David Kopec

screenshot

Marshes Shopping Centre

screenshot

Wixel

screenshot

Designer Gleb

screenshot

What Did We Miss?

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

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

Tags: Layouts

November 08 2011

16:50

How to Design a Tour Page: Examples and Best Practices

screenshot

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

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


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

It’s Harder Than It Looks

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

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

Mint.com

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

screenshot

Content Organization

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

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

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

screenshot

Strong Content Presentation

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

screenshot

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

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

screenshot

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

Basecamp

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

screenshot

Different, But the Same

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

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

Digging Deeper

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

screenshot

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

Mozilla Rethinks the Tour Page

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

screenshot
screenshot

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

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

screenshot

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

screenshot

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

An Organized Mess

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

screenshot

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

Show the Process

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

screenshot

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

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

Conclusion

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

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

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

Tags: Layouts

November 07 2011

18:22

Design History: The Art of Playing Cards

screenshot

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

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


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

A Little Background

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

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

screenshot

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

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

Taking a Closer Look

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

Symmetry

screenshot

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

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

screenshot

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

Usability

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

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

screenshot

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

screenshot

Meet the Royal Family

screenshot

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

screenshot

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

Mystery and Fun Facts

screenshot

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

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

One-eyed Royals

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

screenshot

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

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

screenshot

The Ace of Spades

screenshot

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

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

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

Sources and Further Reading

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

Grab a Free Set of Vector Cards!

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

Conclusion

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

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

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

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

Tags: Layouts

October 03 2011

17:44

Doing More With Less: Tips for Designing With Limited Resources

Today we’re going to tackle some common issues that arrive not with having too much scattered content but with too little. How can you flesh out a design when your client has barely given you anything to work with?

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


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

Wide Open Spaces

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

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

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

Only One Photo, Minimal Text

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

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

screenshot

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

screenshot

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

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

screenshot

Using the Same Photo Multiple Times

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

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

screenshot

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

screenshot

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

screenshot

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

screenshot

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

screenshot

Filling the Gaps with Stock

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

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

screenshot

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

screenshot

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

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

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

screenshot

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

Conclusion

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

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

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

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

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

Tags: Layouts

September 13 2011

13:00

Is Content Always King? Thoughts on Real World Constraints in Design

Content should precede design. It’s a basic and essential piece of advice that you’ll hear from me as well as countless other designers. But what about the situations where this idea breaks down? We’d like to imagine that it’s never the case that design must take place before certainty about content can be reached, but in truth this simply isn’t the case.

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


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

The Tweet Heard Round the World

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

screenshot

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

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

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

How Is This a Problem?

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

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

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

“The argument assumes that designers only use placeholder content when they are too lazy to design around actual content.”

</ br>

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

Two Archetypes

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

“Things just aren’t as simple in the real world as they seemed on the design blog.”

</ br>

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

Situation A: The All-Knowing Designer

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

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

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

Situation B: The Ill-Informed Designer

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

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

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

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

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

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

“As a good designer you want to make sure that content precedes design, but ultimately you’re in a workflow where the layout and aesthetic styling are absolutely forced to precede the content.”

</ br>

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

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

Designing In The Real World

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

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

“Content first is the ultimate goal to be striven for without necessarily being achieved in every circumstance.”

</ br>

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

What About Templates?

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

“Being able to design something that effectively works for a wide variety of circumstances makes you a valuable asset.”

</ br>

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

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

Conclusion: The Key Takeaway

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

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

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

Tags: Layouts

July 26 2011

22:17

How to Use Centered Alignments: Tips and Examples

Today we’re going to go back to basics with a “design 101″ discussion on alignments. Centered alignments are an easy place to go wrong and if you don’t know how to wield them properly, the result is a very poorly structured page.

Join us as we take a look at why centered alignments tend to be weak, where you should avoid them and how you should be using them.


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

Centered Alignments

One of the first things that you’ll learn in any basic design layout class is that centered alignments are weak. Now, that’s a blanket statement that might immediately cause you to protest, but we’ll explore this more in-depth in a minute.

Centered alignments are by no means something only used by beginners and non-designers, but they do in fact tend to be the go-to option for these groups. The reason for this is complicated. For some reason, we instinctively feel that things should be centered. We know that design is about balance and centered alignments are nothing if not balanced, so they make sense. Secretaries, CEOs, teachers and all other manner of other professionals that dip their toe into design almost always run straight for centered alignments on any project.

In practice, centered alignments are often the source of trouble in a layout. Learning both how to identify and how to fix these problems is a major step in your early design education.

The Problem with Centered Alignments

It’s difficult to explain the faults of pure centered alignments with theory alone so let’s take a look at an example. Let’s say you’re making little flyers to hand out for an upcoming party. The result that a non-designer will come up with will almost always look something like this:

screenshot

This isn’t a hideous flyer, in fact I’ve seen far worse in the real world. However, for a number of reasons, it’s definitely not what you would call a strong design. If you handed me the flyer design above and told me to improve it as much as possible in only three minutes while keeping the overall personality, this is what I would give back to you:

screenshot

This design simply feels better, and not just because I refuse to ever use the “Party LET” typeface, especially when typing the word “party”. I also split up the content a little better added some emphasis points and, most importantly, changed to a left alignment.

Notice how the left alignment feels very anchored. The text on the page has a clear starting point and you can follow that hard edge all the way from top to bottom. Despite the fact that the first flyer feels “balanced”, it doesn’t feel anywhere near as structured.

When To Stay Away from Centered Alignments

All right, so you get the point: left alignments are good, centered alignments are bad, so what? The reality is a little more complicated than that. There’s nothing inherently bad about a centered alignment, you just have to know how to properly yield one if you’re going to implement it with any amount of success.

The first thing you need to learn is when not to implement a centered alignment. The answer here is pretty simple: when you have a lot of content.

As we saw in the last example, centered alignments are pretty poor for large blocks of text. The lack of a hard edge makes reading difficult and erratic. The same goes for relying on a centered layout for your page as a whole, most of the time, it’s simply not the best idea. The website wireframe below is quite problematic from a layout standpoint.

screenshot

Now, don’t read that as advising against centering your content on the page. There’s a difference between building a website that uses a centered container and a website that uses a center alignment. You can easily have left or right aligned content that is still centered in the browser window using margin: 0 auto. That’s another conversation entirely.

Aesthetics

Also, don’t confuse this as a matter of aesthetics. As the page below shows, you can create beautiful sites that rely heavily on centered alignments.

screenshot

It’s very important in any design to analyze your goals. If a significant degree of readability is one of them, and it often should be, then aesthetic appeal is often completely separate or even directly at odds with this goal. The trick is to find the balance between the two.

The end result is almost always going to be completely subjective. The designer above decided that this chunk of content was small enough to be center aligned. I may think it’s pushing the limit a little but that doesn’t mean I’m right and he/she is wrong, it just means we draw the line in different places.

How to Use Centered Alignments

Now, with all of that said, there is no reason that you should abandon using centered alignments altogether. To do so would be to remove a key element from your layout toolbox. Once again, you just have to know how to use the tool to be successful with it.

There are a million different ways to successfully implement a centered layout so don’t imagine that the following examples are exhaustive. However, they can serve as a way for you to start to get a feel for a solid layout versus a weak one.

Very Little Content

One of the first places you can start to think about implementing a completely centered layout is when you have very little content. Check out the example below.

screenshot

This makes perfect sense, if the main problem with centered alignments is that they don’t hold up well with a lot of content, then they’ll likely be just fine if you only have a few items. In fact, they’re usually better under these circumstances. If you implemented a left alignment with the design above, the page would likely look very empty. However, with the current centered layout, it looks classy and well-spaced.

Selective Application

Avoiding centered layouts for anything but the simplest designs sounds like an awfully restrictive way to design, and it is. The key is to not avoid them all together but instead to apply them selectively within a greater design with a stronger alignment.

A beginner’s layout class might teach you to grab one alignment and stick to it, but as you improve you’ll find that mixing alignments is often a great way to add some variety to a design. As an example, check out the awesome page below from Assistly.com.

screenshot

Here we see, on the whole, the layout contains fairly consistent left and right edges. However, there are very specific portions that revert to a centered alignment. The headline is the most natural and most popular place to attempt this. Large, centered headlines and subheads look great in justified layouts. Also notice the smaller areas like the three columns in the bottom left, another natural place for a centered alignment to be implemented. Once again, each of these blocks contains a fairly small amount of content so the result isn’t overwhelming.

Quick Tip: Wrap It Up

One of the simplest and most useful tricks for implementing centered text alignments within a larger layout is shown in the example below.

screenshot

First, look at this page as a series of blocks. Notice that all of the have a fairly justified alignment. With the exception of the left-aligned navigation, there’s both a hard left and a hard right edge that defines the content. Now, within that framework I have a little more freedom to play around. Notice that “Box One” and “Box Two” actually contain centered content, but the containment devices keep them looking perfect within the overall layout.

Anytime you have some center-aligned content that just doesn’t feel like it’s working, try wrapping it in a box that conforms to the overall page layout to see if the design improves.

Conclusion

To sum up, centered alignments are weak, but not bad. There’s a very important distinction there that you really must grasp to be a good designer. “Weak” implies that they can easily be taken too far and are easy to abuse. However, you can and should be using centered alignments in your designs.

Make sure that, if your entire layout is built on a centered alignment, you have a very simple design with only a few items. Once you start adding big blocks of text and lots of images, the centered alignments starts looking messy. Also, try building a solid left, justified or even right alignment for your page as a whole, then experiment with selectively dropping in centered alignments in key areas such as headlines. Finally, as a quick trick when you’re in a jam, try wrapping center-aligned portions in a box that goes with the flow of the rest of the page.

Tags: Layouts

July 20 2011

21:59

Ditching the Grid: Alternate Layout Strategies and Tips

Are you tired of creating building websites using the same old grid-based layouts for every project? Have you been itching to break away from the norm and attempt something a little more organic?

Today we’ll take a look at a few sites that have done just that to see what we can learn about alternative layout methods and how they can be successfully implemented.


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

Grid Layouts

Grid-based layout is a cornerstone of modern web design. In a time where clean, minimalist designs are held up as the ultimate ideal (a direct response to the messy design styles of the 80s and 90s), the very definition of “good design” will no doubt include mention of simple and solid alignments.

Ultimately this is a good thing. Grid-based layouts provide unmatched structure, balance and organization. They bring a predictable rhythm and a sense of familiarity to the design and let the content stand out on its own accord.

Grid layouts are incredibly user friendly. We instinctively read a page from left to right, top to bottom and grids tend to reinforce rather than defy this tendency. With a grid-based design, the content is exactly where the viewer would expect it to be, no extraordinary effort required.

screenshot

We have entire design galleries, like the one shown above, dedicated to grid-based designs. There are countless CSS frameworks and Photoshop templates devoted to helping us achieve rapid grid layouts with minimum effort. If design is a religion, grids are the holy scripture to which we ascribe truth.

If we run with this over-reaching metaphor even further, then today’s topic is nothing less than “blasphemy.” Let’s explore how we can introduce a little more variety into our layouts by abandoning the grid, at least partially, in favor of more organic layouts and graphics. It turns out there are in fact multiple ways you can structure information, just don’t tell the design gods.

Find Other Ways to Direct Attention

Our first example of an alternative layout comes from We Are Empire, a digital design agency. Here’s a screenshot of the homepage of their website.

screenshot

As you can see, it definitely doesn’t represent your typical web page layout. There are several things to note here. First, the primary objects on the page are circles. Any normal, grid-based website is usually made up primarily of rectangular objects. Grids are made up of rectangles so objects with four edges and at least minimally hard corners work quite well.

By contrast, almost all of the organic layouts you’ll come across utilize circles heavily. Circles feel more organic and seem to fit this layout style better. Further, they present rebellious designers with yet another way to deviate from the norm.

Even more important than the shapes of the objects is the way that they’re connected. Once again, grid layouts can be read very naturally, but organic layouts leave the eye to wander in confusion in search of what to look at next.

By creating a rudimentary path, the designer here has created a clear flow of information for you to follow. Looking at this page, you almost can’t help but to follow the path with your eyes; a simple and extremely effective trick for controlling the user experience.

Fewer Objects

The path helps, but isn’t a complete necessity. This is especially true when there are really on a few objects in the layout. For instance, check out Michael Wong’s page below, which utilizes a similar layout.

screenshot

Wong’s site uses another popular technique for these types of layouts: mouse-controlled animation. As you move your mouse around on the screen, the objects in the layout move around in a parallax effect that simulates a 3D interface.

Structure Is Still Present

One very important thing to remember as you stray from grid-based layouts is that you don’t necessarily have to abandon structure altogether. As the Melonfree layout below illustrates, your design can still be highly logical.

screenshot

Here, in favor of a simple grid we find heavy utilization of rounded symmetry. The design is quite attractive and well-balanced. Reading in a circle definitely isn’t the easiest thing in the world but the end result is refreshingly different.

Focal Points

When you’re working with an alternative layout, always attempt to stay keenly aware of where you are creating focal points. The layout above intentionally has a heavy draw towards the center where you’ll find a large graphic of a melon, which represents the name of the company.

In your layouts, use size, color and placement of objects to create specific focal points and analyze how well they work with the visual path that you’re trying to create (from above).

Build a Scene

A very different but still quite popular alternative layout method is to create a scene that serves as the interface for your site. I typically warn heavily against this as it usually ends up going in the direction of a bad, Flash-driven fast-food-type site where you can’t find a single thing.

However, this method can and does lead to some attractive, well-designed sites as well. Consider the iCodeLabs site below, which uses a really great illustrated scene that can be navigated by, you guessed it, moving the mouse around.

screenshot

One key feature here is that the iCode site reserves the explorative scene as an optional fun element of the site. The primary navigation is a more familiar bar interface at the bottom of the page. No hunting for links here!

Grids: Hidden But Rarely Gone

The big secret to all of this discussion about abandoning grid-based layouts is that they’re rarely entirely absent from a given web design. In fact, if you visit the sites shown above, you can see that there’s still an overall grid structure to many of the pages. The alternative layout methods exist in areas within the greater structure.

The lesson here is that you don’t have to, and often don’t want to, completely abandon the safety of clear, simple and logical layouts to achieve something that looks and feels unique.

Tilted Grids

One clever way of hiding your grid-based layout is to make strong use of diagonal lines instead of vertical and/or horizontal lines. The same exact conventions that are used in normal grids can be applied, the result simply looks edgier.

screenshot

As you can see, Estilo DLT has the appearance of an organic layout, but in reality it’s conforming to some very strict layout principles.

Conclusion

Breaking away from the norm can be a remarkably refreshing experiment. It helps you to think differently and see design in ways that you never have before. Exploring alternative layout ideas is a prime way to get your feet wet in this arena. Use the examples and information above to get you started in the right direction.

Remember that grid layouts are often broken but rarely abandoned completely and that even when you aren’t using a grid there can still be a very logical structure to your layout. Leave a comment below with a link to any untraditional layouts you’ve come across. Also, let us know whether you’re a stickler for grids or are prone to venture outside the box with your layouts.

Tags: Layouts

May 23 2011

06:00

Create a Grid Based Web Design in HTML5 & CSS3

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.

The design concept

Optik website design concept

The design we’ll be coding up is for a fictional eyewear brand named OPTIK. If you’re interested in seeing how the design concept was created in Photoshop, head over to Blog.SpoonGraphics so see part one of the tutorial. Essentially the page is based on an underlying grid and features a few key focal elements to direct the user towards the various ranges of eyewear.

View the Photoshop design tutorial

Exporting the images

I know I mentioned we’d build the website with minimal background images, but there’s still a few graphics that need pulling out of the Photoshop concept that just can’t be recreated in HTML or CSS (…yet!). The first of those graphics is the patterned background. Copy and export a selection so that the pattern will repeat seamlessly when tiled.

We’ll create the gradients used on the feature area with CSS3, but we’ll need to export the actual photograph. Draw a tight selection around the character and save for web as a JPEG.

In the original concept we saved two versions of the range graphics. Copy both into a new document to create mini sprite images then export as JPEGs.

This design was created according to columns and a baseline grid. Export a copy of the grid image from Photoshop. We’ll add this as a temporary background image so we can easily line up the elements with CSS to replicate the grid based layout.

The HTML structure

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>OPTIK</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

</body>
</html>

The HTML file begins with a typical document structure of Doctype, page title, link to CSS stylesheet and the opening & closing body tags. The simple HTML5 Doctype really looks great when compared to the long versions of HTML4 and XHTML.

<div id="container">
	<header>
		<h1><a href="#"><img src="images/optik-logo.png" alt="Return to the homepage" /></a></h1>

		<nav>
			<ul>
				<li><a href="#">Sun</a></li>
				<li><a href="#">Sport</a></li>
				<li><a href="#">Tech</a></li>
				<li><a href="#">Special</a></li>
			</ul>
		</nav>
	</header>

A typical container div is added to ‘contain’ the elements to help centre everything up, then we can get stuck in to some fancy HTML5 tags/elements with <header>. As the name suggests, <header> is used to outline an introduction or group of navigation elements and is used in place of the traditional <div id="header"> code we usually use.
<nav> is another new element we can make use of, which identifies a section of navigation. Inside this element a normal unordered list lays out the four navigation links.

	<section id="feature">
		<a href="#"><img src="images/feature-image.jpg" alt="Man wearing Hydrotek sunglasses" /></a>
		<div id="feature-info">
			<a href="#"><h2>Hydrotek</h2></a>
			<p>HYDRO-TEK sports eyewear from OPTIK optimizes the flow of perspiration for an increased aerodynamic advantage over your competition.</p>
			<p class="btn"><a href="#">Find out more</a></p>
		</div>
	</section>

Where we would previously use divs to create major structural areas of a webpage, in HTML5 we can use the <section> tag. <section> is used along with an ID to identify a clear ‘section’ of the document, such as the feature area at the top of the page. The photo of the guy wearing sunglasses could be added as a background image, but I expect users to naturally try to click it, so adding it as an <img> inside an anchor will allow us to link it up to its relative content.
A <h2> and <p> elements semtantically lay out the few lines of content, with a class of ‘btn’ allowing us to style up that particular link as a button graphic later. All these elements will need floating next to the image, so a simple div helps group them all together.

	<section id="content">
		<div class="bucket">
			<a href="#" id="sun">Sun range of OPTIK eyewear</a>

			<p>Enjoy the summer sun in style with OPTIK's range of casual eyewear. Choose from an array of fashionable frames and styles.</p>

			<p><a href="#">View the SUN range</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="sport">Sport range of OPTIK eyewear</a>

			<p>Protect and enhance your vision with the SPORT range of eyewear from OPTIK to give yourself the edge over your competition.</p>

			<p><a href="#">View the SPORT range</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="tech">Technicaly information about OPTIK eyewear</a>

			<p>Find out more about the science behind the materials, geometry and coatings that make OPTIK lenses so technologically advanced.</p>

			<p><a href="#">View the TECH info</a></p>
		</div>

		<div class="bucket">
			<a href="#" id="special">Special range of OPTIK eyewear</a>

			<p>OPTIK also design eyewear for specific industries where eye protection is crucial. Make sure your team has the best optical safety.</p>

			<p><a href="#">View the SPECIAL range</a></p>
		</div>
	</section>

Another <section> tag outlines the main content area, followed by four separate divs with a class of ‘bucket’ to lay out the four boxes seen on the design concept. Inside each of these boxes the images will need adding with CSS to allow the sprite hover effects to work, so they are created in HTML as simple anchors with a descriptive anchor text introducing the section.

</div>

<footer>
	<p id="copyright">&copy; Copyright OPTIK 2011</p>
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Retailers</a></li>
		<li><a href="#">Corporate</a></li>
		<li><a href="#">Warranty</a></li>
		<li><a href="#">News</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<p id="back-top"><a href="#">Back to top</a></p>

</footer>

</body>
</html>

The footer appears below the main content panel in the concept so the container div is closed before the <footer> tag opens. Just like <header>, <footer> is a new structural tag that replaces the old method of <div id="footer">.
The <ul> in the footer isn’t enclosed in a <nav> element because of guidelines in the HTML5 spec:

It is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page. The footer element alone is sufficient for such cases.

The complete HTML

View the complete HTML

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font: 14px Helvetica, Sans-Serif; line-height: 24px; color: #a6a6a6;
	background: #000 url(images/bg-pattern.png);
}

#container {
	width: 960px; margin: 0 auto 24px auto; background: #000; /*background: url(images/grid.png) center top no-repeat;*/
	box-shadow: 0px 5px 45px #343434;
	-moz-box-shadow: 0px 5px 45px #343434;
	-webkit-box-shadow: 0px 5px 45px #343434;
}

a {
	color: #abe2ff; text-decoration: none;
}
	a:hover {
		color: #5db5e3;
	}

Onto the CSS! First we clean things up with a simple reset and declarations to the body to set the global styling. Then the container div is centered up and given the outer glow styling from the Photoshop concept with CSS3 box-shadow. Remember that grid used in Photoshop? We can add that as a temporary background image to allow us to align all the page elements exactly into place.

header h1 {
	margin: 54px 0 0 21px; float: left;
}

header nav {
	float: left;
	margin: 79px 0 17px 0;
}
	header nav ul li {
		float: left; list-style: none;
		width: 58px; margin: 0 0 0 98px;
	}
		header nav ul li a {
			text-transform: uppercase;
		}

Next up the header items are moved into place according to the grid with simple margins. This is where the Firebug plugin for Firefox comes in handy so you can edit the figures live in order to achieve pixel perfection.

#feature {
	clear: both; height: 431px; overflow: hidden; margin: 0 0 48px 0;
	background: #000;
	background: -moz-linear-gradient(top, #000 0%, #191919 5%, #000 5%, #000 94%, #191919 94%, #000 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(5%,#191919), color-stop(5%,#000), color-stop(94%,#000), color-stop(94%,#191919), color-stop(100%,#000));
	background: -webkit-linear-gradient(top, #000 0%,#191919 5%,#000 5%,#000 94%,#191919 94%,#000 100%);
	/*opacity: 0.5;*/
}
	#feature h2 {
		width: 216px; height: 30px; margin: 0 0 31px 0;
		background: url(images/hydrotek.png); text-indent: -9999px;
	}
	#feature img {
		float: right; margin: 22px 0 0 0;
	}
	#feature-info {
		float: left; width: 370px; margin: 89px 0 0 100px;
	}
		#feature-info p {
			margin: 0 0 34px 0; font-size: 16px;
		}
		#feature-info p.btn a {
			display: block; width: 170px; height: 35px;
			background: #497389;
			background: -moz-linear-gradient(top, #497389 0%, #151e36 100%);
			background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#497389), color-stop(100%,#151e36), color-stop(100%,#000));
			background: -webkit-linear-gradient(top, #497389 0%,#151e36 100%);
			border: 1px solid #313e52;
			border-radius: 10px;
			-moz-border-radius: 10px;
			-webkit-border-radius: 10px;
			text-transform: uppercase; text-align: center; padding: 12px 0 0 0;
		}

We can really start going to town with CSS3 styling on the feature section. In the concept there’s a gradient glow above and below the feature area. We could replicate this in CSS3 with box-shadow or CSS gradients. Here I’ve gone for the gradient approach with the help of the handy CSS Gradient Generator tool, which makes it easy to match the format from Photoshop.
The <h2> uses a non-web font so a simple CSS image replacement technique switches the default H2 text for an image. The text content and image is moved into place, then the “btn” class is given some styling to convert it into a button style graphic. display:block; converts it into a block element so a width and height can be added, then another CSS gradient is generated to flow from dark to light blue. border-radius then rounds off the corners and the text is set to uppercase and bumped into position vertically using a touch of padding.
Tip: Use opacity: 0.5; as a temporary declaration on the feature section so you can see the underlying grid lines.

#content {
	overflow: hidden; clear: both;
}
	#content .bucket {
		width: 212px; float: left; margin: 0 0 48px 20px;
		border: 1px solid #262626;
		background: #000;
		background: -moz-linear-gradient(top, #000 0%, #000 39%, #191919 39%, #000 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000), color-stop(39%,#000), color-stop(39%,#191919), color-stop(100%,#000));
		background: -webkit-linear-gradient(top, #000 0%,#000 39%,#191919 39%,#000 100%);
	}
		#content .bucket:first-child {
			margin: 0 0 0 22px;
		}

	#content #sun, #content #sport, #content #tech, #content #special {
		display: block; width: 212px; height: 143px;
		margin: 0 0 32px 0; text-indent: -9999px;
	}
		#content #sun { background: url(images/sun.jpg); }
		#content #sport { background: url(images/sport.jpg); }
		#content #tech { background: url(images/tech.jpg); }
		#content #special { background: url(images/special.jpg); }

		#content #sun:hover, #content #sport:hover, #content #tech:hover, #content #special:hover {
			background-position: 0 -143px;
		}

		#content .bucket p {
			margin: 0 0 24px 0; padding: 0 13px 0 13px;
		}

The four buckets in the content area can then be styled up with a specific width and margin and floated side by side. A simple border and another background gradient help replicate the shadow underneath the header images in the concept. To match the layout to the grid the first bucket’s margin is adjusted using the first-child selector.
All the header images can be grouped together for some general CSS such as the width, height and margin. text-indent: -9999px; shifts the default text off screen, then the specific background image for each link is added. These images has a hover state included in the basic sprite, so all anchors are set to move the background position on hover.

footer {
	width: 960px; margin: 0 auto; height: 80px;
	font-size: 12px;
}
	footer #copyright {
		float: left; margin: 0 0 0 22px;
	}

	footer ul {
		float: left; margin: 0 0 0 134px; list-style: none; overflow: hidden;

	}
		footer li {
			float: left; margin: 0 10px 0 10px;
		}

	footer #back-top {
		float: right; margin: 0 22px 0 0;
	}
		footer #back-top a {
			background: url(images/optik-logo-sm.png) left no-repeat; padding: 5px 0 5px 40px;
		}

Finally the footer area can be styled to finish off the page. Because it’s outside the container div it first needs moving into position with the 960px width and margin: 0 auto; declarations. Then each of the three elements can be floated side by side and moved into place with margins.

The complete CSS

View the complete CSS

Patching up IE

Needless to say, Internet Explorer doesn’t support these fancy new HTML5 and CSS3 goodies. Our CSS will simply degrade back to non CSS3 styling, so there will be no gradients or round corners. The HTML5 tags on the other hand won’t be recognised at all, which will bork the layout altogether. Luckily there’s a snippet of code you can add to the head of your page to render the tags as normal elements:

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('nav');
</script>
<![endif]-->

Then you can simply create a conditional stylesheet to fix up the mess IE makes of your standard CSS. With this tutorial being a HTML5/CSS3 demonstration, I’ll leave those exciting fixes for another time…

The final website design

View the demo

Our final coded website matches the original Photoshop concept identically with the help of a few CSS3 features and looks cool under the hood with the new HTML5 tags. Check out the demo in the latest Firefox, Safari or Chrome browsers.

View the HTML5/CSS3 website demo

May 09 2011

07:00
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl