There are rarely any rules or design parameters when doing show posters, aside from including all the pertinent information and staying within the limits of basic printing capabilities. Poster design is a virtual designer’s playground where we are given license to experiment with typography, color, illustration and layout to express our visions; there is rarely any sort of creative filter or limitation.

Given the fact that I primarily contribute inspiration posts to Fresh, and I moonlight as a poster designer while not pushing pixels at eROI, this post will combine these two constants. I would like to share some of the work of Toronto-based designer and screen-printer brother-duo Andrew and Matt McCracken, otherwise known as Doublenaut.

I don’t know much about the background of the brothers McCracken, other than their work. They have a beautifully simple site, complete with a blog of recent work and a shop where they sell prints of the posters in their portfolio. Doublenaut seems reminiscent of Oakland’s Small Stakes and Minneapolis’ Aesthetic Apparatus, in that their small scale operations pump out tons and tons of stellar work and they seem to only do show posters — which is traditionally very far from lucrative.

Their work shows obvious inspiration from the tactile  and hand-done aspects of classic Saul Bass, while integrating clean and modern vector illustration and typography. Vibrant color choices, clever compositions with smart hidden imagery, and an apparently solid understanding of the serigraph medium make Doublenaut’s body of work one to get easily sucked into. Trust me — I just examined every image on their site before beginning to write this post.

The following is a series of my favorite pieces. Enjoy, and if you are smitten enough, go buy a print here.

While much of the country is still reeling from the effects of massive winter-ness, PDX has had an untimely run-in with Spring for the last week or so. Our cabin fever has been relieved for the moment, and so our thoughts turn towards happy hour on the patio and unplanned use of vacation days.

Now, some of us have a not-so-healthy idea of fun (spring cleaning, anyone?). Of course, often it’s necessary to purge clutter and bad habits, and spring is as good a time to do that as any. In this spirit we wanted to take a moment to talk about some of the best practices we’ve found when working with your design files. Good habits can make the difference between a seamless development process and a complete nightmare, one that will try everyone’s patience and waste valuable time. We’ve even included a little treat at the end to help get you started. Ready to clean house?

1) Start with the end in mind
Back to the basics. When you build anything (even those one-off small projects), always use a grid. Choosing and sticking to a strong grid not only saves you lots of time when building the structure for your content, it ensures you will have a solid end result, not to mention the fact that it lays the foundation for a foolproof starting point when implementing the CSS.

2) Break it down
This may seem obvious, but organization is insanely important when building a design file. Name everything in ways that make sense to anyone else that might open it (i.e. a folder for navigation, then break it down for each piece within). Getting in the habit of doing this routinely will put any developer that works with your file at ease, and eliminates any questions over “where did you put that button?”

3) Smart & exact
Be a professional and avoid the temptation to be lazy in Photoshop. Always build to exact pixels, and zoom in to be sure – that’s what they make that magnifying glass for. Be weary of vector shape tools in PS, as they often miss the mark on pixels, and you get messy, ragged edges. When in doubt, select your pixels with the marquee tool and fill them. This same thinking goes for type – never resize type with the transform tool, always use the actual pixel height. Also, use text boxes to snap to your grid, and set padding, leading, etc. within the box. These elements also translate directly to CSS (another time-saver).

4) Refine your palette
The swatches palette is your friend. Stop color sampling things with the eyedropper tool and hoping you have a consistent file. Take the time to create your swatches as you go, and you’ll have the beginnings of a style guide ready for anyone who needs to use your files.

5) See it clearly
Transparency can be great for building effects, but unless you’re going to flatten all those layers into a JPEG in the end, you are creating unnecessary work and file size to make transparent PNGs. If you use transparency to find the perfect tone, resample the color with the eyedropper and make the object 100% with the new color choice. Also, be aware that layer effects and blend modes don’t always transfer when saving files to web. When in doubt experiment before committing to it or find another way to get the effect.

6) Be a master
I’ve found that when building large sites with huge amounts of adaptations, having a master file with the base elements is the simplest way to go. For example, one PSD will house the master navigation, footer, logos and any other repeated items, along with a file for all button states and icons, assets and such. This is a great way to make sure you have consistency among all the various pieces.

7) Stay lean and mean
In addition to that last tip, you can also save yourself valuable file size by flattening reused pieces from a master file to drop into subsequent files. This also reduces the margin for error, as you can only make changes to the file with all the layers.

8) Take action
Also another useful tip for building very interactive, feedback rich website files: break out complicated actions into their own file where you can concentrate on every aspect. For instance, I recently had the need to show every state for an interaction in an ecommerce site where a user would check the balance for and apply a gift card to an order. All the interaction was going to happen in place, and it’s really difficult to illustrate that in one page comp. It was much better to break it out and show all the states in line to cover all the details.

9) Be thorough
Don’t just take the word of your monitor if subtlety is a key to your design. Take a look at it on various monitors, especially those with an sRGB profile (standard on PCs). Check for contrast and try to get an acceptable amount of consistency between appearances. You can’t make this part of the design perfect, but make sure important details don’t fall out, and your hierarchy still holds up.

10) Have some style
The extra work of building a style guide will be worth every minute when you hand off your files to someone else to build. Including all the needed info about styles used, standard elements and measurements are essential to making the design come together. While this may seem hardly necessary for smaller sites, it will save your sanity when tackling something large.

To help all of this permeate your process, we’ve included a downloadable treat to keep for reference on best practices with your design files. Hopefully these tips will help keep your designs tight and ultimately more successful when produced. Enjoy!

Download the zen design super awesome treat ›

I Love Typography

This is a blog about all of the intricacies of typography ranging from the basics to super technical jargon-filled goodness. The design is a beautifully simple execution of what they preach.

Their treatment for tags is totally unique. ‘Tags’ is listed in the primary navigation, and when you click on it a grid comes up in a lightbox. I’m always glad to see an out-of-the box solution like this!

Jesús Rodríguez Velasco’s Blog

I love the droves of illustrations on this blog! If you click around the header image will change. It doesn’t look like the author is currently posting (but that certainly doesn’t mean you can’t go over and have a look-see at the design)

Interface Engineering

Pardon the horn-tooting here, but this is one of my favorite designs that has come out of eROI. The  subtle lines that cross from the background into the photos are my favorite aspect. And you better believe it’s WordPress!

jQuery

I have to give a shout-out to the new jQuery API site that was recently rebuilt using Wordpress as their CMS.

Web Designer Wall

This is a popular blog, and for very good reason. I especially like all of the illustrative details, hand-drawn type, the way they’ve handled dates, and the rollovers for the main navigation. Oh heck, I like it all!

Creative Spaces

This organization out of Melbourne, Austrailia lists spaces that are available for creatives to work or exhibits in. I was automatically intrigued by the painterly environment! It’s creative.. and it’s a space… nice!

The juxtaposition of dainty decorative elements with the more grungy textures is interesting.

Typechart

This is another typography related site: so sue me! Typechart is a gallery of typography examples that you can browse through. If you find a style to your liking you are able to directly download the CSS! How cool is that? I’d also like to add that I am especially fond of the color palette and background pattern.

Cloud 365

This site is lovely! It is a project where the author posts a photo or video of clouds every day for a year. The rollovers! You must see the rollovers. It’s pretty easy to spend some time on this site.. so beware :)

WordPress Showcase Sites

If you’re itching to keep browsing I’ve got a list of other places around the interwebz for you to visit:

WordPress’ very own Showcase

CMS Designs

WP Inpsiration

We Love WP

WordPress Garden

WP Float

LoopPress

West elm has a slew of what look to be templates that are super clean in their design. They rely on the great product photography for the most part and always have a grid as the foundation. There is care taken with the typography and this helps the designs sing. The photography is very high quality with beautiful staging.

Note that the text footers were longer than what I’m showing here. My screenshots only show the first part to make sure the images aren’t too long. But you can get an idea of how they are formatted.

The emails are generally monochromatic and always complement the colors in the product photography (which are usually neutrals, so this is easy). West Elm has the freedom as a brand to use their logo in different colors which is great to tie the entire email together in one primary color.

The email above is just about as over-the-top holiday-themed as I saw from West Elm. One thing that I appreciated was that West Elm didn’t only stick to the typical red and green color scheme for this time of year. They weren’t afraid to use yellows, interesting shades of green, or just gray.

Another technique for keeping the emails interesting is the different layouts that are seen in the main area. Some of the emails here rely on one image, the email above has a three column layout and you’ll see the last one in my list has a nice rectangle message area followed by a grid of products.

These emails and products are obviously geared toward an audience who appreciates aesthetics so it does make sense that they are so image heavy. Although, after having said that, the emails fare well if you have your images turned off, too (the offer is stated in the pre-header).

The email above is an example of how they handle an email that is mostly typography-based. West Elm is not afraid to keep it simple (as evinced by their product line as well.) This email was refreshing to see admist some of the more hectic things going on in my inbox.

Another element that I like that West Elm added for the holidays, is an added “ship it in time” area at the top of the functional footer. It isn’t intrusive but gives an overview of the key dates you need to purchase by to send gifts by Christmas and Hanukkah for different types of shipping options. This is a really smart idea!

I’m just about always happy to see an email from West Elm, and if nothing else, it is to check out what they are doing design-wise. Their subtle changes day to day and overall aesthetic are really successful in this medium. Nice work West Elm!

What retailers have you seen that have consistently good design in their emails?

(images: Daily Drop Cap by Jessica Hische. Found Via Apartment Therapy)

The Selby.  Artist Todd Selby interviews and photographs interesting people in their homes. Great site to browse through for beautiful interiors and color inspiration. Each interview at the end is really unique and often includes little drawing tid-bits.

Also check out Selby’s work with Nike 6.0 campaign where he photographs the 6.0 stars in their hometowns.  Selby’s style really brings them down to earth and let’s you get a peek into their spaces.

960 Gridder:  This tool allows you to see into the structure any website. While some grids are apparent it is interesting to see subtle relationships and how they can get executed in development. Obviously a strong grid system is important for any successful website, so learning how others have utilized the gird is the best way to push limits and break rules. Long live the grid!

Steve Power’s ‘A Love Letter for You’ Project:  A rad project from a rad artist. Using old-school sign painting techniques, Powers is beautifying spaces in Philidelphia. Sponsored by The City of Philadelphia Mural Arts Program, Powers juxitiposes incredible vintage-inspired typography with wry sentiment.

2010 Ford Fusion Campaign Site:  This site makes tasteful/good use of flash to help bring the viewer into the site, much further than we would be usually enticed on a product site such as this. They also do a good job of presenting a rounded, full-circle conversation about the product by providing clear and distinct dialogues from 3 points of view, including the customer.

Panelfly:  A couple of things drew us into this site and application. We dig the combination of a branded website/landing page and iPhone interface. It shows a lot of cohesion, and it’s apparent that the minds behind this project thought long and hard about UI. The application is gorgeous, and makes browsing comics online intuitive and fun.

Cheese and Burger: We thought this was a great example of a site that has one goal and finds a few ways of accomplishing it. – Sell Wisconsin Cheese -  By showcasing beautiful cheese burger photography, witty copy and voice over, and a good takeaway (the burger recipes) it is a really great web-based campaign that has brought us back to the site 5 or 6 times now, either to share it with others or get a recipe for a kick ass burger.

Silenzio:  Check out this one for the shear radness of the navigation. This is a great use of browser space and presents an amazing amount of work in a way that begs to be explored. When drilling down past the main navigation you are presented with yet another way of sorting through the huge volume of work while viewing the selected piece. Overall this site was just plain fun to play with and gives us some interesting ideas about how to sort and present images….

Finally, this may have not been from our lunch n, learn, but is just awesome all the same:

Buttermilk

First up is Buttermilk, a delightfully bold script font by Jessica Hische:

The example on the purchase page highlights its use for holiday cards, but Jessica also mentions its extensive ligature options as well as its potential for fancy numerals or drop-caps.

I can totally see this being used for a nice monogram (perhaps some pretty stationery?) or a wintry event poster. It’s feminine but definitely not weak, and the ball terminals remind me of writing with pen and ink. Beautiful.

Buttermilk can be purchased from myfonts.com for $49.

Phaeton

Next is Phaeton, a charmingly old-school serif from Kevin Cornell:

As I’ve mentioned before, I really enjoy Kevin Cornell’s use of type in his illustrations, and LO AND BEHOLD he – in collaboration with Mr. Randy Jones – has released a font. I am in love.

I particularly enjoy the attention paid to what Cornell calls “catchwords” – things like “and,” “the,” “or,” and “but.” Not only are there several available, they are available in multiple languages.

Details like that are really what make typefaces “click” for me. I can see this being used in print for product boxes or labels, or on the web as blog headers or site branding. Or merely for buying and admiring. Whichever.

Phaeton can be purchased from Veer for $49.

In brief, once installed, the plugin will act automatically, relying on CSS classes to target content. Typography styles are defined using a simple rule syntax not at all unlike CSS allowing for versatility and flexability all from within the wordpress dashboard. Since it is a server-side technology, the method is truly cross-platform and allows license-burdened fonts to be secured to prevent download.

Download the plugin here.

Check out the film here.

via Design Crush

Web Typography: Quit Bitchin’ and Get Your Glyph On was a popular panel that discussed limitations of web typography, myths about web typography and how to dispel them, and talked about overcoming constraints on the web to create typographically beautiful websites.

What is all the fuss about fonts on the web?

The first question the panelists were asked was, “Why are designers still bitching about typography?” After the giggles subsided, the top reasons they gave were:

• frustration stemming from having such a limited palette of available fonts
• the complexity and consistency involved in getting your type to render as intended

Basically, type on the web can be a pain in the ass. There are a decent amount of web fonts, but not all are attractive (Papyrus, anyone?), sometimes you have to use the corporate font specified in a client’s brand guidelines, and regardless what you do, everything can still shift around. A user could increase their font size or have a different default font specified for their system and throw off your whole groove.

Are there solutions?

There are several. Many people make their fancy titles into images, which does work, but then you’re faced with how to keep that text on the page for SEO; others use an image-replacement method like SIFR, but that involves Flash and can get pretty tricky in terms of line-height and making sure it doesn’t do something funky with punctuation or line wrapping. The “new” thing on the scene is to try out @font-face.

What is @font-face?

@font-face is a CSS property that has been around since 1998 (!) that allows you to “embed” a font so that you can call it using normal CSS font-family properties. Both Microsoft and Netscape adopted this CSS rule at the time, but each browser wanted a different font file type (EOT versus TrueDoc) and neither supported TrueType font files.

As Jon Tan explains:

That means that designers and developers have the same perennial problem: Two different implementations to achieve the same result. Safari 3 and Firefox 3.1 beta both support direct linking to OpenType (.otf) font files. Presumably Opera will soon. Only IE 4 to IE 7 support Embedded Open Type (.eot) files. IE8 does not, but will at some point. So, to see Fontin display in standards complaint browsers like Safari 3 and IE, we need to provide two separate fonts.

@font-face is pretty simple to implement once you have the proper file types:

@font-face {
	font-family: "Fontin Sans";
	src: url("http://server1.com/FontinSansR.otf");
}

h1, h2, h3 {
	font-family: 'Fontin Sans', Georgia, serif;
}

And then for IE 4-7:

<!--[if IE]>
<style type="text/css" media="screen">
	@font-face{
		font-family: 'Fontin Sans';
		src: url('Fontin-Sans.eot');
	}
</style>
<![endif]-->

You embed the font and give it a name, and then use it like you would any other font. Here, it’s named “Fontin Sans” but you could name it “Sparkly Unicorns” as long as that’s how you refer to it in the second CSS rule where you actually specify which font you want.

If you use one of the browsers (Safari!) that supports this, you can view an example »

Why should we use it?

Because it’s awesome! No, really. It’s nice because it lets your browser treat the font like any other font on your system. Copy wasn’t meant to end up as background images! It doesn’t require Flash! Plus, it’s been around forever without a lot of people using it, and if we start pushing the envelope by using it and voicing our concerns regarding its implementation, its situation may start to improve.

Why shouldn’t we use it? Are there problems?

The problems with using @font-face seem to be:

• Legal issues stemming from font licensing

  There aren’t a ton of fonts that allow embedding via @font-face. Some more astute type foundries (like H&FJ, in paragraph 3.1 in their EULA) have used their licensing and terms of use to explicitly forbid the embedding of their fonts in this manner. Now, while this is decidedly not awesome for web designers or developers, it is in fact a step forward, because at least they know about it enough to recognize that it is a possibility.

  The other problem is the issue of redistribution. Most font licenses forbid unauthorized redistribution, and if you happen to use @font-face to embed your font, any Joe Q. InternetUser can come in, follow that link, and download the very expensive font (that you paid for!) for free. This is obviously not ideal for anyone except Joe Q. InternetUser. The panelists suggested that in order to protect yourself, you should set up your .htaccess file to forbid hotlinking or direct access to that font file, and then explicitly state in your site’s Terms of Use that downloading the font is unacceptable and if someone does manage to circumvent your .htaccess protection, that it is a violation of your Terms of Use. This is not foolproof, but it does show that you are making a concerted effort not only to protect yourself, but to protect the intellectual property of the type foundry from which you purchased the font. A determined thief would have to jump through several hoops to get at your font, and at that point it becomes obvious that you were trying to protect it and they are in the wrong.

• Browser support

  Unsurprising, but as-is, this works in Safari 3 and Opera 10. It works in Firefox 3.1 beta but not Firefox 3. If you manage to create your special EOT file for IE, it will work in IE 4 through 7 but not IE 8.

  There are also some rendering issues. Safari will wait until the whole font file downloads before displaying any of the text using that font on the site, so if you’re using it for body copy, all your text may be invisible until that file finishes downloading. There is also no jQuery callback, so if you want to test to see if everything has loaded before you call a jQuery function, it does not include @font-face loading in that test.

• Creating the EOT file for IE

  There is a program called WEFT that converts a TrueType font file to an OpenType font file to an EOT font file for Internet Explorer to use. Why it cannot do it straight from an OT to an EOT, I do not know. The program is free to download but is purportedly a total pain to use. In that same Jon Tan post, he discusses what a nightmare WEFT is and offers some helpful tips for getting it to create your file.

What are our next steps?

Trying it out! The panel set up a website called SXSW Typography where they posted a ton of resources and their downloadable slides. One of the best resources in their sidebar is Jon Tan’s experimentation with @font-face. It offers instructions as well as history and tips. There is also a website with a list of embeddable fonts.

The prevailing attitude in the panel (and in other places at the conference where I heard it mentioned) was that we need to keep pushing things forward. If @font-face doesn’t have the pervasiveness or the correct implementation right now, it’s not a problem since so few people use it, so we need to MAKE it a problem. Go out, experiment, push the envelope, and get your glyph on!