Design

Parts of CSS3 in Internet Explorer now with CSS3 PIE

One great thing about several CSS3 properties is that they let you save bandwidth and write cleaner markup. All those extra meaningless div and span elements you used to be forced to add to create rounded corners? Not needed. The images used for the same rounded corners, for dropshadows, and for gradients? Not needed either.

Unless of course you want to achieve the same visual design in Internet Explorer. Until IE9 is out, IE users won't get any rounded corners, dropshadows or gradients created with CSS3. So it’s either living with that (which can be an option) or back to writing markup suffering from divitis and spanitis and letting your users download loads of images. Or you could try CSS3 PIE.

Read full post

Posted in , .



Expressive Web Typography: Useful Examples and Techniques

Smashing-magazine-advertisement in Expressive Web Typography: Useful Examples and TechniquesSpacer in Expressive Web Typography: Useful Examples and Techniques
 in Expressive Web Typography: Useful Examples and Techniques  in Expressive Web Typography: Useful Examples and Techniques  in Expressive Web Typography: Useful Examples and Techniques

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Typography Examples

Denise Chandler
When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

Denisechandler in Expressive Web Typography: Useful Examples and Techniques

The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

Jessica Hische
Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

Jesse in Expressive Web Typography: Useful Examples and Techniques

MCQ
The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio.

Mcq in Expressive Web Typography: Useful Examples and Techniques

The classic color scheme, a monochrome black and cream with just a splash of mint green thrown about, give the site a very attractive overall look. Though the contrast between the gray text and the dark gray background could be brought up by making the text just a tad bit lighter for sharper text.

Cooper Type
The large illustrated ampersand on Cooper Type is a perfect mascot for this typography website, and it works well with the big bold header. A bit more space between the illustration and the rest of the content would make it feel less cluttered. Some of the body type is too small to be readable, and a few of the paragraphs could use a wider letter spacing. Larger type or an alternate font would improve this greatly. The navigation looks a bit misaligned as well; it might work better aligned to the right over the main content.

142 in Expressive Web Typography: Useful Examples and Techniques

Hype Nation
Hype Nation uses a stylized font in the header which works really well for the funky feeling of the site, as does the bright orange and gray color scheme. And given that they went with such an unusual header font, the follow-up choice of a simple sans-serif for the rest of the site was a wise one. Though the header is certainly complementary to the site feel, it might have benefited from the contrast of the footer rather than the black on orange that they went with.

Hype in Expressive Web Typography: Useful Examples and Techniques

The footer is beautiful and perhaps working the header to match the footer a bit more would have been very beneficial to the overall look of the site. The ‘Projects’ section is a bit confusing to use: there is no separate, detailed portfolio or project pages which isn’t good for what is essentially a simple portfolio site. Though overall, the page has excellent type spacing and a good use of white space.

Wing Cheng
Wing Cheng is a uniquely styled portfolio that uses hand drawn effects along with a script font on an accordion sketchbook background to bring together the entire presentation. Using the wireframes look to preview each project instead of the finished product is a very interesting choice, and it certainly adds to the uniqueness of the portfolio. The classy serif font used in the sidebar contrasts well to the hand drawn effect of the rest of the site, and plays into the finished designs you receive when you click on the wireframe of a project.

Wingcheng in Expressive Web Typography: Useful Examples and Techniques

Though the handwritten, cursive font used to describe each of the projects is a little bit hard to read, and it could stand some tweaking. Also, because the whole website feels a bit more like illustration, it’s a bit difficult to see what elements are clickable, partly also because various elements are underlined. This problem is particularly apparent in the footer of the page where a contact form is displayed. Tooltips or striking button-like appearance of some elements could improve the user experience a bit.

Stephen Caver
Stephen Caver’s portfolio is another site where the typographical presentation strongly stands out as soon as you arrive. The layout of the site is truly remarkable: the font size of the main header and position of elements change when you resize the browser window. The big, bold header with a very subtle letterpress effect, as well as the combination of thin and bold type, creates a great look.

Stephencaver in Expressive Web Typography: Useful Examples and Techniques

However, the main site navigation on the top is far too small, especially for the font used, and as a result, has some readability issues. The same goes for the vast majority of the body text. Also, the large part of the ‘Vitals’ section has some really low contrast to deal with that creates some issues too. The overall layout of the site is really good with a really strong focus on the work which is great for a portfolio, but so much of the site is hard to read which could end up just driving visitors away.

Kaleidoscope
This web app website has an appealing combination of circular script and squared-off sans-serif font. The typographic choices really add versatility to this single-page website, a testament to the imagination of the designer. The type sets off each distinctly styled section, making the page easily scannable. The contrast could stand to be a bit stronger in a few places on the website (e.g. the section “Complete your workflow” and “Details”), to keep things readable and flowing.

232 in Expressive Web Typography: Useful Examples and Techniques

Trent Walton
Trent Walton has a minimalist black and white website with heavy typography. Each article on the website has an original design that features a number of typefaces, but always as large blocks of sharp text, thus maintaining consistency. The most recent article is always the landing page for the website, which gives the recent article a prominent position on the site. The “Articles” page has generous white space and solid alignment, although post illustration do appear to be position a bit too far away from the excerpts. The typography carries the page, filling in the white space and fleshing out the design quite nicely.

Tw in Expressive Web Typography: Useful Examples and Techniques

Barley’s
This bar website combines serif headers with sans-serif body type well, a combination that tends to be used quite often on the Web. The entire home page could use a bit more white space; the elements feel a bit stacked on top of one another. The type and content need room to breathe. The “News & Events” and “Contact” pages are a much better example of how spacing for the whole website could have been handled.

Barleyes in Expressive Web Typography: Useful Examples and Techniques

They feel much less compressed, which only makes the other pages feel that much more confined. One can argue if it is necessary to employ the letterpress effect for navigation items, as it does not quite match the rest of the website. A hidden highlight: the food menu page is a pleasure to look at, but it is not clear what the column “Beer pairings” stands for, especially because it’s always empty.

New Deal Festival
Right off the bat, the header on the home page for New Deal Festival really grabs attention. The script, combined with the block-style sans-serif, gives a clean sharp look. For some reason, though, the company changes the header on interior pages, and these headers are squished together and distorted, making the rest of the website feel a bit unfinished and unpolished.

292 in Expressive Web Typography: Useful Examples and Techniques

New Deal Festival could have kept the home page header throughout the website. Also, the typography would benefit from a wider letter spacing. And the main content area would look better with more padding between the edge and the type; 40 pixels would probably do it.

Futu
The clean classic look created by the big bold type stands out right away on the Futu website. There is a bit too much animation, distracting you from the text. A better approach might have been to make the header ad either different or static and then just scroll the featured content. Also, the leading on the body type could stand some work. Some of the paragraphs have an uneven rag, which could rub some users the wrong way. As it stands, the website has a bit confusing hierarchy, and the reader could have difficulty figuring out what to focus on.

Futu in Expressive Web Typography: Useful Examples and Techniques

Design 977
The sans-serif type works really well for this website, which is clean, minimalist and to the point. Only the most important information is presented, and it’s done straightforwardly. At first glance, the letter spacing might seem a bit small, but in this case it complements the overall design. The website has a sharp angular look, and the tightness of the type sets this off. But while the social media link area is original, the constant animation in the corner is distracting. The text on the profile page could use more leading, and so does the contact form.

272 in Expressive Web Typography: Useful Examples and Techniques

Robots Are Friends
Here, the texture works quite well behind the bold serif font, although the type could use a wider letter spacing. Sans-serif fonts seem to work wonderfully for these kinds of minimal websites with big bold typography. However, the sudden solid-gray footer feels a bit out of place here, and the black and gray text on the “About” page has a low contrast against the dark blue, making it a bit difficult to read. Also, the font size in the “Design” section on the front page is way too small, and we are not quite sure if the choice of type for the body copy is optimal.

Robots3 in Expressive Web Typography: Useful Examples and Techniques

Louise Fili Ltd.
The script and sans-serif type that Louise Fili Ltd. has selected for its website make for a classic and elegant look. The all-caps serif in the sidebar works well visually, but the sidebar would be more scannable if it were not in full-caps (although the full-caps everywhere else on the website do not detract from the design). The “About” page integrates a drop-cap beautifully into the typographical presentation, setting it apart from the other websites we’ve reviewed so far.

252 in Expressive Web Typography: Useful Examples and Techniques

The flourishes between menu items really tie in with the logo script in a whimsical way. The main problem with the design is that the text is embedded into images almost throughout the site, making it impossible to copy. Also, on some pages the embedded text appears a bit blurry. Using plain text would be an improvement of this website.

Attack of Design
The font on Sacha Greif’s website blends really well with the retro feel of the rest of the website. And there is plenty of white space, making the content a pleasure to read. The subtle hover effects on headlines and icons make for a pleasant user experience. The headings in the sidebar are a bit difficult to read, though; perhaps a bigger font size or different font altogether would help. The navigation and hover effect for the different categories are clean and original.

114 in Expressive Web Typography: Useful Examples and Techniques

Overall, another great example of type spacing: easy on the eyes and legible. The dates on the comments could use some extra padding around them to feel less constricted. Also, the “Read more” links could stand out a bit stronger. The highlight of the site is a beautiful comments design. The hover effect on the logo is a nice touch, too.

Process Type Foundry
Process Type Foundry uses a combination of serif and sans-serif type, which works really well. The clean minimalist design really highlights the big bold typography. The main body type could use higher contrast, and the relatively small light-gray type is not easy on the eyes. Still, the type throughout the website has a very good leading and letter width, making for a pleasant reading experience.

Anchor in Expressive Web Typography: Useful Examples and Techniques

Also, the large bold headings combined with the thin, evenly kerned sub-heading make the website welcoming and engaging. The “About”-page is a beauty of simplicity and clean, sharp design with generous leading and whitespace.

Chipotle
This restaurant website has a grungy handwritten look for its font, which, combined with the other hand-drawn elements, fits well with the brand and the ‘industrial’ design of the restaurants. However, the typography on the website is almost completely embedded in images, to the point that the little bit of HTML type looks out of place because the other fonts are so distinct.

Chipotle in Expressive Web Typography: Useful Examples and Techniques

Also, the paragraph text (as seen on Chipotle’s story page) would look much better with a bit more attention paid to leading. As it is, it seems a bit squeezed together. Also, the main drawback of the site is the audio that starts playing automatically on page load. Notice: the footer contains some hidden treasures for typography lovers.

Worry Free Labs
Another fine example of a subtle texture working with the type instead of against it. As has been demonstrated a number of times, script and sans-serif fonts can complement each other well, especially on websites with the kind of retro look of Worry Free Labs. However, the letterpress effect on the type looks rough and unattractive, while the script font does look attractive and playful. If a font does not scale properly, then finding an alternative is better than forcing it into your design.

222 in Expressive Web Typography: Useful Examples and Techniques

One site highlight that stands out, even though it is not necessarily type related, is in the portfolio section, the fluid scrolling through their work with the click of the ‘Next’ navigation button is — sorry for the wording — extremely awesome. We don’t really know why the company uses the German greeting “Willkommen” in the header of the page, though. But it is a nice touch for German visitors!

Made By Water
The first thing that jumps out at us from this website was the oversized type for “Running Water,” bold and eye-catching for sure. Spreading “Running” out some and bringing “Water” closer together could improve the introduction of the site. The uneven, almost sketchy, font establishes the website’s character well, and the background works well, too.

192 in Expressive Web Typography: Useful Examples and Techniques

The gray and yellow color scheme works well with the font, and the minor yellow highlights stand out… except when you mouse over the header, the yellow is blindingly bright; a darker tone would work better. The contrast of the light-gray link and the subheading color could also use a bit of tweaking.

The Design Cubicle
TDC has a minimalist theme, with a heavy focus on typography. The squared-off sans-serif fonts complement the rest of the design, with their diversity of italic, bold and all-caps. A fine example of well thought out spacing in the body text, making for optimum readability; you can tell a lot of attention was paid to this aspect. Much of the text in the footer feels a bit small; the difference between 11 and 12 pixels may not seem much, but as you can see here, it can make a huge difference in readability. The beautiful drop-down menu in the top navigation is subtle, but looks great and even has nice hover effects.

Tdc in Expressive Web Typography: Useful Examples and Techniques

Dubbed Creative
In the header, the thin red font of “Creative” gets lost next to the bold white of “Dubbed” and could use better balance. At first glance, the user is overloaded with information. An easy fix for this typographical barrage would be to move the description of the website from beside the header to under it. The site has a very promising structure, yet feels way too overwhelming because of the lack of whitespace. There are too many colors, too many icons, too much text, too much buttons. An example of a site where nice typography doesn’t necessarily lead to optimal results.

Dubbed in Expressive Web Typography: Useful Examples and Techniques

The Combine 2010
The designers of this website do a good job of establishing visual hierarchy by combining font types. Combining serif, sans-serif and script typefaces is no easy task, no matter how simple they make it look here. All of the calls to action are visible and attractive. The texture in (rather than behind) the heading type sets off the solid background well; this texture is different than most of the other ones we’ve seen.

Combine in Expressive Web Typography: Useful Examples and Techniques

It is pretty obvious that the designers know their typography. On the “Schedule” page, “2010″ would look better with a bit tighter letter spacing; also, the logos on the Sponsors page present so many different colors and fonts that it looks a bit sloppy.

Edgar Leijs
As soon as you land on Edgar Leijs’ portfolio website, you are met with a bold oversized typographic header. The mouse-over effect in the logo is certainly nice, but the light yellow on white in the “LeIJs” is visually grating. Perhaps the yellow could be replaced by a more muted color, or the white could be softened to more of a gray. The yellow text in the main content area looks really good there, but it is not compatible with the white behind it.

Edgar in Expressive Web Typography: Useful Examples and Techniques

Also, increasing the contrast between the dark-gray background and light-gray text would improve readability. When you hover over a portfolio item, a clever text box pops up that offers details unobtrusively. The screenshots of the works in the portfolio don’t have to be greyed out though, making them clearer and more vibrant (at least on hover) would make them a bit more attractive. Very original, distinctive and interesting design.

Rouse
Rouse employs a letterpress effect for the sub header which looks great on the textured background, really carving out the letters sharply. The combination of the sans-serif headers with the serif body text plays well into the slight retro look of the site. Though the effect that was used on the word ‘Rouse’ looks a bit strange. It is easy to see that it is supposed to be a 3D-effect, however it is pretty poorly rendered. The line length and leading of the body copy are done beautifully.

Rouse1 in Expressive Web Typography: Useful Examples and Techniques

A couple of negative remarks: the footer could use some extra top padding to balance it out and give the overall design a symmetry, and too much text is embedded in the images, making it impossible to copy and paste.

Related Posts

Below are a few related posts you might want to check out. Also leave your thoughts in the comments section below.

(al) (vf)


© Fran Melo and Angie Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , ,


HTML5 and CSS3 Web Page Tutorials

The arrival of HTML5 and CSS3 has given web designers a major sense of excitement by offering a broader range of options, creative opportunities and shortcuts for designing a web page. We could talk about all of these new features endlessly, instead, to keep things simple, we have highlighted four web tutorials that make use of HTML5 and CSS3 perfectly and that demonstrate effectively the potential power of these fantastic technologies.

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Creating a Minimal Blog Design Using HTML5, CSS3 and jQuery

Coding a Stylish Blog Design Layout in HTML & CSS

Coding a Stylish Blog Design Layout in HTML & CSS

This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.
Coding a Stylish Blog Design Layout in HTML & CSS

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer), coded through two new great technologies, HTML 5 and CSS3.
Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images

Build a HTML5/CSS3 Website Layout Without Images

By Paul Andrew (Speckyboyand speckyboy@twitter).


Designing and Producing Creative Business Cards: Techniques and Details

Smashing-magazine-advertisement in Designing and Producing Creative Business Cards: Techniques and DetailsSpacer in Designing and Producing Creative Business Cards: Techniques and Details
 in Designing and Producing Creative Business Cards: Techniques and Details  in Designing and Producing Creative Business Cards: Techniques and Details  in Designing and Producing Creative Business Cards: Techniques and Details

Plenty of creative business card showcases are available out there. Many of these are beautifully done and well thought out, and they serve as inspiration for those who would like their business card to be more than the standard rectangular piece of paper. Yet little explanation accompanies these examples, and figuring out just how to bring your idea to life can be overwhelming, to say the least. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

General Advice

Content Goes First

I never tire of repeating this to anyone who will listen. Don’t base your business card design on the fact that your printer has a special limited-time offer on round corners or metallic inks.

Think in terms of what the design will add to your message. Tempted to use rounded corners just because the cool kids are doing it? Maybe your card would stand out more by not using this technique.

Why do you want metallic ink? Do you think your name would really stand out in gold, even though your message is all about technology and recent code developments? You may want to rethink that. Or do you sell hand-crafted jewelry and want a design that reflects your latest silver creation? Then the silver ink might be the perfect solution for you after all.

The back of a business card is often ignored, but it can be a great place for extras that make your card even more memorable. Make it relevant to what you do, and make it useful if you can. You could include tips or a quick how-to guide relevant to your product, offer a free consultation, add a reminder for a date when you will offer discounts, or invite loyal customers to collect a stamp every time they purchase from you. Think of something that would make them want to hang onto your business card and consult it often. If you think the back should be reserved for note-taking, why not mark a few dotted lines, titled “Notes,” rather than leave it blank?

Talk to Your Printer

No one knows more about the techniques and materials available—and new ones come out all the time. Generally, printers are more than happy to give you all the industry news and advise you on techniques and materials. (If yours isn’t, you might want to look for a new printer.) If you learn a little about how they operate, they will appreciate it and be even more willing to help.

Size

While this article focuses on custom shapes and sizes, keep in mind standard sizes, too. Card holders are made to fit standard size cards, and I have often heard comments like, “If a business card doesn’t fit in my wallet, I don’t care how beautiful it is, it’s going in the trash.”

The standard sizes are 3.5 x 2 inches in the US and Canada, 85 x 55 mm in the European Union and 90 x 55 mm in Australia, New Zealand and Scandinavia. Or you could use a standard credit card as a reference, which about 85 x 54 mm or 3.34 x 2.25 inches.

Unless you have some other use for your cards in mind (for example, a bookstore’s card that doubles as a bookmark), you’ll want to stay within those dimensions. Smaller is okay, but anything too big won’t fit in most pockets, so consider going bigger only if you have reason to believe your cards will not be stored in wallets or holders.

Do you have the perfect idea but don’t know what to do with it? Maybe you’ve heard about die-cutting, varnishes, metallic inks, letterpressing and special materials but are unsure what they are exactly or which one is for you? Let’s jump into the different techniques!

Die-Cutting

Any card (or any printed material for that matter) that isn’t a standard rectangle or that has holes in it is created by a technique known as die-cutting. A metal template is prepared and is used to cut the paper in the given shape. The easiest way to think about this is to picture a giant hole-puncher, except that the holes are not necessarily round, but rather whatever shape you want them to be.

This means that, in addition to the artwork, you will need to provide the printer with a custom shape to “punch out” your cards.

The result can be as simple a round hole in the center of your card or as complex as a three-dimensional pop-out.

Optimum in Designing and Producing Creative Business Cards: Techniques and Details
This simple and effective design makes use of the round hole on both sides of the card.

Bizcards03 in Designing and Producing Creative Business Cards: Techniques and Details
This card takes the shape of the product. Instant recognition!

Preparing the File

I’ll use die-cutting as an example, but most of these guidelines apply to the other finishes as well. The main differences are cited in the respective sections below, and I will provide links to help you read about the techniques in more detail. The guidelines below should give you a good starting point.

The best applications to prepare files for any special print finishes are the industry-standard Adobe Illustrator and InDesign. Photoshop is not suitable because it does not have the precision necessary for this kind of project.

As with any other print document, set up your file to the printed dimensions (i.e. whatever size you want your card to be, whether rectangular or a non-standard size), at 300 PPI resolution, using CMYK as the color space for all the elements of the artwork.

There seems to be a bit of confusion about DPI, PPI, CMYK and RGB. Preparing a file for printing with either Illustrator or InDesign is actually very simple.

In Illustrator, when creating a new document, click on the “Advanced” options tab (in some versions this is already visible). This brings up the options for both the resolution and color space. Set the resolution to 300 PPI and the color mode to CMYK.

Note that PPI, or pixels per inch, is often confused with DPI, or dots per inch. The latter refers strictly to printer hardware and its capability to reproduce dots on paper. When preparing files for printing, don’t worry too much about the DPI. 300 PPI is the magic number. Remember that and you’ll be golden. If you would like to learn more about DPI and PPI, see the link at the end for an article that explains it in much more depth.

Newdoc in Designing and Producing Creative Business Cards: Techniques and Details

InDesign documents are automatically created at 300 PPI. The only thing to make sure of is that the elements you insert in the document (such as photographs) are also at 300 PPI and use CMYK. Check this by selecting your image and bringing up the info window (hit F8).

For example, the image below uses the RGB color space; it should be changed to CMYK:

Info-panel in Designing and Producing Creative Business Cards: Techniques and Details

Even though you can use RGB images, it doesn’t mean you should. Yes, both InDesign and Illustrator are perfectly capable of converting the output to CMYK when you export a file as PDF, but if you ever have to submit your source files to someone or use the images for something else, this extra step could save you hassles.

And please-double check the resolution. Print out the card to check for pixelation. I know this sounds like a no-brainer, but so many people forget to check the printed result. What you see on the screen is not what you will see in print.

Another thing to check is your black text and line art, if you are converting any of them from RGB. They should be 100% K in CMYK color mode to avoid a muddy effect and color halos.

When your artwork is ready, create a new layer above the artwork. Call the layer something like “dieline.â€� You could be even more specific and name it “Dieline – DO NOT PRINT,” which would be especially helpful if you are not able to speak with the printer before submitting the file (say, if you are using a Web order form or your client is the point person for the printer.)

Now, create the guidelines for how your card should be cut. Make sure your outline for the die-cut uses a custom spot color, not CMYK; this allows the printer to extract the die-cut template when printing separations. To create a custom color, click on the little arrow in the swatches palette, and click to make a new swatch. In the dialog box that appears, choose any color that will stand out in your artwork, and then select “Spot color” from the drop-down menu next to “Color type.” The color can be anything you want. 100% magenta is quite popular because it usually stands out, but saving it as a spot color is important.

Custom-color1 in Designing and Producing Creative Business Cards: Techniques and Details

Also, remember to set the stroke (if it’s a custom crop shape) and/or fill (if you are cutting out holes) to “Overprint” to avoid knocking out the art below. You can bring up the options for Overprinting in InDesign by going to Window → Attributes, or in Illustrator by pressing F11 to bring up the “Attributes” window.

Overprint in Designing and Producing Creative Business Cards: Techniques and Details

Let’s say your logo is a cloud, and you want the card to be cut in a cloud shape (not a very creative example but easy to explain). Your file in Illustrator would look something like this:

Cloud-card in Designing and Producing Creative Business Cards: Techniques and Details

And your finished card would look like this:

Cloud-card1-mock-up in Designing and Producing Creative Business Cards: Techniques and Details

If you wanted to cut out the cloud shape, it would look like this:

Cloud-card21 in Designing and Producing Creative Business Cards: Techniques and Details

And the finished card would look like this:

Cloud-card2-mock-up in Designing and Producing Creative Business Cards: Techniques and Details

Notice how the logo has moved from the artwork layer to the dieline layer and is now also filled with the custom spot color.

Make sure your artwork has enough bleed (i.e. it extends well past the edge of the document if the shape is regular or past the die-cut guidelines if custom). Usually 0.125 inch, or about 3 mm, is enough, but I tend to add more to be safe. Both InDesign and Illustrator allow you to add bleed in the “Document setup” options.

I won’t go into too much detail here, because bleed is a rather complex subject that deserves its own guide. For those of you interested in learning more, a couple of links are at the end of this article that explain it more thoroughly.

On the same note, do not put any important elements (such as logo or text) too close to the edge. Leave a buffer margin (again, about 0.125 inch or 3 mm) around the dieline or document, to avoid the risk of something getting cropped.

Usually, either a native file (AI, INDD, EPS) or high-resolution PDF is acceptable as the final file for printing. (Always check with the printer before preparing the final file.) If you prepare a PDF, make sure your custom fifth color is kept as a spot color and is not converted to CMYK. You can check it in the “Ink Manager” window (Export as PDF → Output → Ink Manager):

Ink-manager in Designing and Producing Creative Business Cards: Techniques and Details

You can double-check that it appears in the Ink Manager list in the PDF itself (Acrobat Pro) by clicking Advanced → Print Production → Ink Manager:

Picture-1 in Designing and Producing Creative Business Cards: Techniques and Details

Printing It

Most big print shops have die-cutting equipment. Check first if you are printing locally. The best way to make sure everything goes according to plan is to ask questions, explain your requirements and look over the proofs in person. Small printers outsource die-cut jobs. If you want more control, look for one that does it in-house.

If you are unable to print locally (for example, because your client is remote), you have two options. One is to find a printer local to your client. Usually, the client will already have one lined up, but I strongly recommend you get in touch with that printer yourself, rather than just pass the files to the client and let them handle it. Ask questions, send over mock-ups, get a proof sent back to you—do what you can to make certain that the job prints the way it should.

Alternatively, you could find an online print shop that offers die-cutting. Again, get in touch with them personally, rather than just submit the file via an online form, and make sure all your questions and concerns are addressed.

Printer Checklist

Need help choosing a print shop and communicating with it? Here are some things to keep in mind.

  • Before you do anything else, get their phone number or email address and get in touch. Tell them about your project, and ask about technical specifications and any other questions you may have. (This is a good time to request a cost estimate as well.) If you have more than one candidate, rinse and repeat.
  • Ask to see samples of similar pieces they have printed. Examine them. This could lead to more questions—or inspiration to make your project even better.
  • The main criteria I use in choosing a printer is how responsive and knowledgeable they are. You want someone who will actually check your file and contact you if there are any problems or questions; because no matter how great a printing deal you find, if your file has an error, that’s money thrown down the drain.
  • To save some money, you can often do this by asking the printer for advice. Would making the file layout slightly smaller allow them to fit more cards on one sheet? Could you adjust the shape so that there is less wasted paper? How about using fewer colors? Your printer should know the options; just ask!
  • In my experience, PDF is one of the safest options for prepress. Native Illustrator files work well too, but be sure to check which versions of Illustrator your printer accepts. Always check which versions of any Adobe software your printer uses if submitting native files.
  • Ask the printer if they have .joboptions files. These files can be imported into Adobe applications and will give you presets for exporting to PDF or EPS. This is the easiest way to make sure that your final files are exactly the way your printer needs them. If they don’t have these files, both InDesign and Illustrator have presets for saving in PDF. Just make the necessary adjustments; for example, you will have to add the bleed to these presets manually (see the links at the end for step-by-step instructions).
  • If you are not able to speak with the printer, add an email message or a file with instructions. Don’t forget to include your contact information so that they can call or email you if they have any questions!

You’ve probably noticed that most of these tips emphasize the importance of communicating with your printer. I cannot stress this enough: every project is different, and communication is the key to getting the best result possible.

How Much Will It Cost?

While pricing depends on many factors, there is usually a set-up fee when using a die-cut or other special finishing technique. (Remember the giant hole-puncher mentioned above? They need to make one of those, just for you.)

The fee will be the same whether you print 50 or 500,000 cards, so printing larger quantities is much more cost-effective.

This may not be the case with certain popular formats (for example, rounded-corners business cards) because the printer would reuse the same template for multiple jobs, hence the special offers.

Special Finishes

I’ve devoted a big portion of this article to die-cutting because the file preparation and printing process described here is similar to many other techniques. But let’s look at some of them.

Spot UV Coating

This special finish is achieved by applying a clear varnish to an area of the card defined by you. The effect is a slightly raised design element, with a glossy, matte or satin finish. The example below shows a glossy finish:

Silk-laminated-business-cards-1 in Designing and Producing Creative Business Cards: Techniques and Details

File preparation is done the same way as for die-cutting, but instead of specifying a stroke, you specify a shape or area to apply the varnish to. This is still done by filling it with a spot color and, in this case, setting the fill to overprint.

Letterpressing

Letterpressing is done by inking a raised surface and then pressing it into the paper, giving the design both color and depth. This technique is suitable for vector images and text, using solid Pantone inks. An article linked to at the end of this article provides more technical detail. Here is an example of a business card done with this technique:

Letterpress-business-cards-06 in Designing and Producing Creative Business Cards: Techniques and Details

Embossing

Similar to die-cutting, a die is used to press the paper up, creating a three-dimensional raised effect.

Embossed-business-cards-5 in Designing and Producing Creative Business Cards: Techniques and Details

Foil stamping

With this technique, a layer of thin foil is applied to an area of the card you specify.

Foil-business-cards-15 in Designing and Producing Creative Business Cards: Techniques and Details

File Preparation for Special Finishes

File preparation for all of these effects is similar to that of die-cutting: you have to define the area to be coated, embossed or whatever the effect is. But you might need to submit two files: one with the artwork, and another with the area to apply the effect to.

Make absolutely certain these two files line up perfectly. The easiest way to do this is to use a file with separate layers: one or more for the artwork, and another for the special finish guidelines (as described for the die-cutting file preparation above). Then, simply save them as separate files by first hiding one layer and then the other.

When using photos for a special finish, create a clipping path in Photoshop before placing the photo in Illustrator or InDesign. Then you can use this same clipping path as the mask for your effect either by choosing to export the clipping paths to Illustrator or by right-clicking (PC) or Control-clicking (Mac) on the clipping path in InDesign and converting it to frame. (You might want to check the options first if it isn’t showing by going to Object → Clipping Paths → Options.)

For example, you can use different masks with this image:

Apples in Designing and Producing Creative Business Cards: Techniques and Details

This mask will apply the effect to the entire photo:

Apples-path1 in Designing and Producing Creative Business Cards: Techniques and Details

While this one will apply it only to the foremost apple:

Apple-path2 in Designing and Producing Creative Business Cards: Techniques and Details

Special Inks

Additional inks can be used to make your card stand out even more. Metallic, pearlized and fluorescent inks can produce interesting effects. (To better preserve metallic inks, consider putting a varnish on top.) The even more common Pantone colors give a different and more solid effect than their process equivalents because they are opaque.

This one is simple: just find a custom color you like by looking at the Pantone swatches, and add it to your document. Prepare your artwork as you normally would, but make absolutely certain that your output does not convert to CMYK if you are preparing a PDF (as described above).

Note: the easiest way to prepare photos with a special ink is to convert your image in Photoshop first to grayscale and then to duotone. Choose your ink(s) from the Pantone library, and tweak your settings as necessary. (Working with color channels is a complex way to get more control over the result, but I don’t recommend this to Photoshop beginners, and Photoshop experts probably already know how to do this.)

Picture-2 in Designing and Producing Creative Business Cards: Techniques and Details

Duplexing and Triplexing

This technique is about using two or more sheets of paper glued together. The effect achieved is commonly referred to as edge-painting or edge-tipping, because a different-colored sheet of paper that is inserted between the two main ones produces colored edges “inside” the card (triplexing), as seen here:

Triplexing in Designing and Producing Creative Business Cards: Techniques and Details

Using only two sheets (duplexing) gives a two-color edge—one on the front and one on the back:

Duplexing in Designing and Producing Creative Business Cards: Techniques and Details

It adds a touch of elegance and makes your card thicker than the standard stock. Combining this technique with die-cutting—budget permitting—gives an even more interesting result.

Scented Inks

You won’t find many examples of this technique on the Internet because it doesn’t exactly translate as a photo. Still, it is an interesting way to make your business card jump out.

Available scents range from chocolate to mildew. If that is not enough (and money is no object), you can create a custom scent for an extra fee.

Special Material

This is a vast subject because the options are countless. We will only touch on this topic. To see and feel the different kinds of material available, visit your printer!

Paper and Cardboard

There are so many varieties that I wonder why most people still use the same white or off-white cardboard stock for their business cards. From soft-as-cloth finishes to cold-pressed textured paper, there are enough options for everyone’s needs. The options are rather hard to describe; I recommend you make a trip to the printer (and give yourself an hour or so to ponder the choices)

File preparation is no different; except with colored paper stock, keep in mind that the colors will not display the same way in your software. To simulate the effect, use a layer of a similar color below the artwork, and set the artwork layer to multiply; or to about 70% opacity with darker color stocks.

Plastic

Transparent, frosted, stretchy—there are plenty of options for a plastic stock.

Viewzi-business-card in Designing and Producing Creative Business Cards: Techniques and Details

Poul-nielsen-business-card in Designing and Producing Creative Business Cards: Techniques and Details

Plastic is usually printed with a different process, such as screen printing. Check with your printer to see what colors you can use. Special printing processes usually require that you use Pantone inks. Remember to account for any special effects, such as transparency and stretch. Giving general advice on this one is hard, because each material has its own requirements.

Metal

If your service or product is related to a metal, you might want to consider using metal as a material. You could simulate a credit card or computer. Keep the design minimal for a more striking effect.

126896700 F6bf4e7b59 in Designing and Producing Creative Business Cards: Techniques and Details

WOZMetalProof1 in Designing and Producing Creative Business Cards: Techniques and Details

Again, check with the printer before preparing your artwork to find out what process they use to print on metal and which colors you can safely use.

Other Material

Other options are wood, plexiglass, cloth. You could combine these and use a special finish as well. Hopefully this article has given you some ideas, and you will know how to start researching: by speaking with your printer.

Customizing by Hand

Sometimes, printing a highly customized card is simply not worth it, especially if you need only a small quantity. Does that mean you should dismiss your creative idea and stick with a standard solution? Not necessarily.

All you need is some imagination and a lot of patience. An appetite for crafts or having crafty friends or relatives can be a big plus, too.

You could print a standard card as the base of your idea and then customize smaller quantities by hand. I recommend doing this with fewer than 500 cards, or you will be overwhelmed. If you have crafty friends or relatives who are willing to help, you could tackle more.

Again, keep it relevant to the content. For example, colorful hand-stitching to underline a key phrase or “stitching” your design would be fun for a textile or fashion business:

126896067 3f6dda5b8d in Designing and Producing Creative Business Cards: Techniques and Details

Gluing on an element would work for crafts stores. Or you could glue a piece of fabric or something else that characterizes your service:

126894242 09e4aa3da4 in Designing and Producing Creative Business Cards: Techniques and Details

Incorporating something relevant to what you sell is a great idea, and there are plenty of ways to do this. Here is an excellent example:

A364 C12 in Designing and Producing Creative Business Cards: Techniques and Details

A paper clip would work for a business supply store or even a business consultant, while a dried or plastic flower would work for a flower or gift shopt. Just about any kind of business can find something relevant to add on.

You could even invite the recipient to customize the card themselves; for example, by including cut and fold lines that transform your card into a unique shape. Simple examples are a paper doll for a children’s store or origami for a stationery store. Just make sure it’s relevant and fun, otherwise your recipients are unlikely to go through the trouble of cutting out and folding the card.

Hopefully this article offers enough information and inspiration for you to make business cards that are as creative as your imagination allows, and on any budget.

Want To Know More?

Here are a few articles that go into more detail on some of the topics covered:

Related Posts

You may be interested in the following related posts:

(al)


© Lisa for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: , , ,


Fresh Web Designer Tools and Resources

For today’s design news we have highlighted some fresh tools and resources for all you web and app designers out there. There are a couple of tools to help with any CSS3 and HTML5 development issues you may have, there is a marvelous new technique for styling buttons, and finally, and perhaps the coolest of all,some time saving iPad actions for Photoshop.

BonBon Buttons – Sweet CSS3 buttons

BonBon Buttons - Sweet CSS3 buttons

These sexy looking flexible CSS3 buttons have been styled with the most minimalistic markup as possible.
BonBon Buttons – Sweet CSS3 buttons

iPad Actions for Photoshop

iPad Actions for Photoshop

These Photoshop Actions will allow any UX/UI designer or App developer to quickly create a gorgeous rendering of their app as it would appear on an Apple iPad. All that is required on your end is your final designs (and a copy of Photoshop, obviously).
iPad Actions for Photoshop

Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.
Selectivizr – CSS3 pseudo-class and attribute selectors for IE 6-8

HTML5/CSS3 Cheatsheet

HTML5/CSS3 Cheatsheet

Here are some simple cut-and-paste examples of HTML5/CSS3 features that are currently (mid-2010) usable across a number of web browsers, chief among them Firefox, Safari, Chrome and Opera.
HTML5/CSS3 Cheatsheet

By Paul Andrew (Speckyboyand speckyboy@twitter).


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress