Business Card: First Batch Check

POSTED Wed Sep.05.2012 by Dave Seah UNDER Note TAGGED

New Business Card I got my cards printed by 4over.com, a large trade printer, to see if I liked them. My experience with their ordering process was exceptionally smooth, with great feedback throughout the multi-step process. It’s among the best I’ve experienced. I was very hopeful that the output itself would be great.

Packaging

The Box! Proof Contents Label 250 Cards

The shipping package was pretty typical of a printer. I liked that they included a copy of the proof on the label, so you could tell what it was.

First Impressions

I had ordered a quantity of 250 cards, and since this was a small run it was printed digitally instead of offset. A digital press is like using a giant computer printer, whereas offset printing uses etched plates that are inked and run through a traditional printing press. I had been attracted to 4over because they use a 500-line screen, which is somewhat similar to “pixels per inch” when judging resolution; I was wondering if their digital press also used the same screen approach.

I used a 50mm macro lens to magnify the detail:

4over detail 1 4over detail 2 4over detail 3

You can see the dots here, which are allegedly 20 microns in size, smaller than the diameter of very fine human hair. To the unassisted eye, the dots run together and create the illusion of smooth color…it’s impressive! The black (far right) also looks pretty good. The only problem I see is that the registration of the cyan layer is not perfect with respect to the yellow and magenta layers, and it may be close enough not to matter with the naked eye. If I had been using strong yellows / magentas right next to a mostly cyan element, though, I might have seen a subtle fringing effect, but I am also being very nitpicky. NO ONE WILL SEE THIS FRINGE unless they’ve got 10x to 30x of magnifying power in their hand.

Comparison with sample book Of more serious note is the heaviness of the card stock, which is 16 thousandths of an inch (16pt) thick. This is regarded as thick premium stock, and it feels even thicker if you UV coat it. However, I went with matte 16pt stock, and it’s OK. It’s not ridiculously thick like I had hoped. This isn’t 4over’s fault, but it does make me want to hunt for some thicker options.

Just to be sure, I compared the 16pt matte stock in the 4over sample book with my cards (image right), and it’s indeed the same. The page feels more substantial mounted in the book…perhaps it’s the overall weight or the direction of the paper grain that makes it feel different.

Comparisons and Other Thoughts

Looking at these cards fresh after a week of being away from them, I think I might agree with the comments on round 3 about the outlines on the yellow boxes. This should go! I also have the feeling that they need to be a big bigger, but I’m flip-flopping on that. The desire for something to plus the card—that is, push it into a higher orbit of design—is still with me. Simplifying the lines slightly will help.

I can also see that I can use lighter tones without them breaking apart, thanks to this 500 line screen technology. Here’s some examples of older cards from 1995 to 2009 that use old-school screening.

old qualia card - printed 1994 on 1270 line screen old AE card - printed 2001 old Dave card - printed 2009

The cards from left to right represent 1994, 2001, and 2009 printing. The first two cards were printed using local printers under strong direction from the designer. The last card, on the right, was printed using an online printer. As you click on each example, you can see the relative quality of the screening from none (left) to mushy (right). I’d say that the 4over.com output is pretty good for an online printer.

Finally, I looked at the color differences between my proof (left) and the actual printed product (right):

Color Comparison

It is fairly close. The printout (left) is printed on whiter paper, apparently. However, the relative differences between the yellow and orange are pretty close, if a little blurry. The blues are pretty close too. The text thickness, however, is slightly more refined on the printed version; I’ll need to take that into account for the next run, as I feel they are just a bit too unsubstantial.

2 Comments

Business Card: Making the Master

POSTED Wed Aug.29.2012 by Dave Seah UNDER Note TAGGED

Now that I’m pretty settled on the design, it’s time to prepare the file for printing. Over the years I’ve picked up a few tips about making sure things come out OK.

First…don’t trust your monitor or your printer when it comes to color, unless you’ve calibrated it. I haven’t calibrated my monitors, so I grabbed my trusty Pantone Process Color Guide and used them to verify how the colors I had selected would actually print.

Pantone Guide

This picture was taken at my desk under half sunlight, half artificial light, which is terrible for color checking because of the unnatural color spectrum; lamps are either reddish (halogen, incandescent) or somewhat greenish (fluorescent). So I went outside as it was a bright clear day and ideal for color checking; natural daylight is the standard. An overcast day or standing in shadow would have imparted a blueish cast to the colors.

My Process Color guide shows me how colors actually look on paper. Process color is a combination of 4 primary colors used in color printing: Cyan, Magenta, Yellow, and Black. With these colors, you can create a pretty good mix of hues, but it’s not perfect. What looks good on the screen will usually look dustier and less intense on paper, especially when printing on uncoated paper stock. An uncoated paper is naturally dull, whereas coated stocks tend to show colors brighter. I’m planning on printing on uncoated stock because I want to write on the back of the cards, so I may have to get them printed by the local full-service printer to get them the way I want.

I selected some likely oranges, yellows and blues from the process color guide that looked good together, sharing the same saturation and tone so they all stood equal in weight. I picked colors that didn’t have black added to them, because adding pure black tends to make colors look muddy.

I also tinted the blacks. While I could have specified 100% black for everything, it’s common to add a bit of color on top of it (but not too much, otherwise the ink might smear from overloading). I again checked the Pantone process color guide, looking at some examples of rich blacks, and added 35% blue to the black text running under my name (thus unifying them by subtle hue grouping), and adding 35% yellow to the text inside the process boxes. If I’d used pure black in the yellow boxes, I think black text would have knocked-out the background color, and look a little disassociated. Adding a little bit of yellow might help. We’ll see.

With the colors squared away, it was time to reassemble the Illustrator into something print-ready.

Business Card Layout

This document has been sized to the dimensions of the card (2×3.5 inches). Colors are defined as global masters, so changing one swatch changes all objects that are colored by it. Outside the document in the non-printing area are instructions about this particular printjob. Additionally, there is an additional layer for text that has been converted into outlined shapes. By doing this, I don’t need to supply font files to the printer, which simplifies the way this works. The original text layer, which remains editable should I want to make changes in the future, is set to “not print”, as is the printing guide layer.

On a side note, it’s interesting to compare the screenshot above with the printed image from my home printer:

Business Card Printed Colors

The screenshot shows much more difference between the inner yellow and the outer orange than what actually shows in the print. It’s hard to predict exactly what will happen at the printer without doing a “proofing print”, which is their best guess at how the actual print job will come out. If I was super anal, I would do a “press check” to look at the prints as they were coming off the actual press, which gives us some flexibility in adjusting some parameters. Anyway, as my home printer isn’t calibrated either, that’s why I’m relying on the Pantone process color guide as a reference and winging it.

Checking the card again, I decided to shift the entire card right a tad, to help optically center the design a bit more. Before, it was centered mathematically, but the dotted line jagging to the left shifts the center balance slightly.

Now…to have the card printed! So many choices to pick from.

Leave a comment

2012 Business Cards, Round 3

POSTED Tue Aug.28.2012 by Dave Seah UNDER Note TAGGED ,

After taking a weekend break from the last round of personal business card design, I headed to Starbucks to see if I could finally get the design resolved.

To recap, here’s round 1 and round 2:

Business Card Draft 1 Business Card Draft 2a Business Card Draft 2b

And here’s round 3:

Business Card Draft 3

H: This is the combination of the round 2 feedback, fixing the bottom text address and trying a different slogan, which I ended up not liking because it seemed to try too hard to wedge everything in.

I: Having all the elements decided upon, it was time to come up with a final set of proportions and spaces. I noodled around for about 90 minutes at Starbucks, resolving balance and fixing weights. One problem that kept coming up was the balance of space between the top half and bottom half of the card (you can see how unresolved it is in H). So I tried splitting it, increasing the weight of my name from bold to semi-bold, and then tried crossing that void from the diagram to my name with a dotted line to draw a more immediate connection, centering the name to create a strong focal point with more whitespace around it. It battles the diagram in terms of visual weigh, but with the dotted line and separation I think it actually works pretty well. I also increased the weight of the contact information lead-in, so they would more actively draw attention from the bold name. I eyeballed a lot of the spaces to get a kind of consistent unit spacing with horizontal and vertical gaps by squinting at it…I think I have a pretty good balance (the name might still be a tad low, but it’s hard to judge with the dotted line).

Revision I is the release candidate, barring any horrors that come to light.

There are a few things I need to check, like whether the process colors I’m using will actually print anything like I hope they will, and making sure that I’m within the safe frame of the card edge (I think it’s 1/8th or 1/16th of an inch; it depends on the printer).

6 Comments

Application Icon for Emergent Task Planner App

POSTED Mon Aug.27.2012 by Dave Seah UNDER Note

Application Icon Sketches

I’m working with my friend Al Briggs on an iPad version of the Emergent Task Planner, primarily on user interface concepts and layout. Al’s doing the coding. As is the case with these kind of projects, programmer Al is excited to see graphics, as designer Dave is excited to see working code. Al suggest that I start designing an application icon, and while I’m not sure exactly what the icon should be, I started doing some sketches.

The concepts above are the result of a quick 15-minute sketch session at Starbucks, playing with the following concepts I’d written down on a previous page:

  • Emergent
  • On-the-fly
  • Low resistance
  • Freeform
  • Nonjudgmental
  • Focus without strictness
  • Planning
  • Encouraging

These words are some of the associations I have with the Emergent Task Planner, so I then tried to think of visual ways to portray them. On the left are the idea of something that “emerges” from a collection of parts; the metaphor is that of a puzzle or tower of pieces (sort of like Jenga). Then on the right side, there are notions of buckets that can be filled with marbles, and multiple paths leading to a structured resolution. There’s nothing really here yet, but I am thinking of jumping into a 3D program and moving some stuff around to see what can arise. So begins the design process!

UPDATE: Hoo, here’s the Apple Icon Guidelines…I didn’t realize how high-res we could get. Exciting!

2 Comments

2012 Business Cards, Round 2

POSTED Wed Aug.22.2012 by Dave Seah UNDER Note TAGGED

A couple days ago I started working on new business cards, doing a bit of on-the-fly thinking to come up with an idea. Now, it’s time to do some refinement.

Here’s the image from Round 1:

Business Card Draft 1

Here are the new Round 2 tweaks, based on feedback from readers both on the site and on Facebook. Thanks for all the great comments!

Business Card Draft 2a

AA: I’d changed the way the tagline looked, replacing the & with a +, and removing the spaces to make the line more compact. The use of a plus sign creates a compound word, sorta, instead of the “Sanford & Sons” association I have with the use of the ampersand. Plus, it just looks tidier to me. I like this.

C: This is a suggested tagline change. I actually tend to use this construct in my writing; it’s a habit I’m trying to break, actually because it’s “listy”. Great for ending a paragraph with authority. However, it spills to two lines, and makes the card just a bit too dense for my liking. I also feel that it’s somehow become less focused in the offering…are productivity, workflow, and learning all related? Sorta. It seems a tiny bit less credible than just having productivity+learning. Or workflow+learning, which might be better.

D: This is a change in the phrasing of the blue words, converting them from action verbs to categories of action. I don’t really like this, because it seems now that there are two conflicting hierarchies. Before, the blue words (deliberately less bold, and a cooler color) were intended to be descriptive of the process to the right. Now, they seem to be two systems that are implied to be related, but the linkage is not clear. Confusing, I think. But that’s just my interpretation. For all I know, my original diagram makes sense only to me.

Business Card Draft 2b

E: It was suggested that I add a gradient. Usually I don’t like adding gradients to printed designs, because they’re tough to reproduce smoothly in paper and can be super-cheesy if overused. The gradient is one of the first things that a stuck graphic design student will do to a background to try to add some life and interest…it’s sort of like adding reverb to a bad recording, or using a synth pad to create atmosphere in a piece of techno. However, when applied subtly, it can add dimension and bring visual elements forward. And if I’m going to graphic designer hell, I might as well add a drop shadow! I applied a light one to just add a bit of dimensionality, and it does change the nature of the card…I kind of like it. So, I guess the moral of the story is don’t poo-poo the gradient until you’ve tried it. But do it after you have a strong layout concept, and are using it for a reason other than “filling empty space”.

There is a practical worry: the smooth gradients may look great on a screen, but they could break up into visible bands when it’s printed. The printer I’m considering for this run, 4over.com, is using process color, which ordinarily means that I need to be very careful about gradients. However, this printer is also using a 500-line screen, which means that the gradient pattern dots will be very tiny, and maybe will blend well. It depends on the resolution of their RIP, too, which is unknown. That determines the number of fine gradations that can be reproduced, unless they’re using a stochastic screen, which would eliminate the banding altogether. If I were really serious about this I would do my own stochastic black plate in Photoshop, but now I am really getting into the weeds.

Oh, this revision also has digital hearts, or what could be interpreted as heart. I didn’t feel they worked on the non-gradient designs because it creates more complexity in the interstitial spacing of the word boxes, which grabs our attention and breaks the flow of reading a little too much. I don’t want these to be focal points. I want them to attention guides that read once, then fade away from conscious sight.

F: One commenter said something about the text alignment being distracting. I wasn’t sure exactly what was meant, but this is one interpretation: the ragged left edge interfered with the flow of the card. So, flipping the graphic horizontally is one was of fixing that. I had deliberately reversed it, though, because I liked how the eye moved diagonally from the upper right to the lower left, taking a detour through the blue text. More eye movement is interesting. When I have the card laid out like this, you can just read straight down from top to bottom very fast which is…somehow diminishing. The original layout is like an IKEA store, which makes you wander through a maze so you see everything. The flipped layout is like straight slide, and it’s more difficult to catch the blue words the first time around because your eye is being pulled down that left edge so fast.

Incidentally, this card does have verbiage change to seek inspiration, which I didn’t think would work but it actually IS much better. Gotta see things in context, sometimes.

G: This is another interpretation of the alignment comment. I left-justified the text in the boxes and then was forced to move the diamonds. I really don’t like this layout.

12 Comments
Page 1 of 3123