Packaging

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:

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.

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.

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):

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.

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.

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.

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:

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.

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

And here’s round 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).

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!

Here’s the image from Round 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!

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.

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.

After getting my iPad, I installed Square Register so I could accept sales by credit card in-person. It also has a cool “Favorites” display, so you can just tap the things you are selling, and they’re added up right on the screen before you swipe the card.

There are two kinds of sales I’m making: physical goods in the form of the various Emergent Task Planner printed products, and also face-to-face consulting and on-site production (graphics) time. Square Register allows you to take pictures either from the camera (this is buggy and unreliable, currently) or from your stored photos, so I designed a set of icons for this.

The criteria that they were visually distinct from each other and not too hard to draw.

• I stuck with simple shapes and geometries. For the ETP products, I just used Illustrator’s 3D Rotate tool for the page and text, then drew in the pad thickness with the pen tool. For the time-related services, I drew a simple hourglass with a couple of triangles manipulated with the ROUND CORNERS filter, pathfinder UNIFY tool, OFFSET PATH, and CLIPPING MASK.

• The one conceptual idea I put into this was having the “thought bubble” on the left of the hourglass to imply “thinking comes first”, and the “brick stack” on the right to imply “production comes next”. But this is subtle reasoning; it actually just helps distinguish the two icons a bit better, as they have similar elements, element weightings, and proportions.

• To impart a little motion to the images, the hour glass dripping sand is spaced to imply acceleration. The stack of bricks also has the top brick tilted and placed as if it’s going to drop. The strong pyramid pattern creates the desire for shape closure (our friend “gestalt” at work), so I think that helps sell the idea of something in the process of being assembled.

The hard part was figuring out how Square Register imports the images. While it appears to accept a square-aspect icon, it actually clips the image in a way that was difficult to predict. If you import a square-aspect picture (e.g. 256×256), Square doesn’t show you any cropping that it will perform. In actuality, it WILL crop it to allow the app to put a TEXT LABEL at the bottom of the icon. Strangely, if you upload a pre-cropped icon, Square will THEN show you the cropping tools…it seems to want to crop the image square, and then screw it up later.

To get around this, you need to design with a safe frame at the top and bottom of your icon. The aspect ratio of the final cropped image is 200×158, so you want to make a 200×200 icon with a buffer of 79 pixels at the top and 79 pixels at the bottom with 21 pixels of dead space at both the top and bottom. Here’s a visual representation of what happens:

After that, you just need to figure out how to get those images onto your iPad’s photo application. Either sync it with iTunes or whatever. I use DropBox for all my project file synchronizing, so I used the DropBox iPad app to do something similar. It can copy image files from your DropBox account into the iOS Photo Album thingy, which then can be set in the Square Register App.

On a side note, Square Register seems to be a little flaky about remembering the images you set, sometimes forgetting the image or reverting back to the text-only label. It also gets confused and sometimes crashes when using the camera to take a photo. But once it’s set up, I have my pretty icons :)

This is the difficult part of design for me, when I don’t know what to do that will deliver a result. I’m used to thinking through problems to come up with a hypothetical solution, but in this case the solution isn’t clear or obvious.

The trick to get past this is to just do something anyway, and count on spending a bunch of time on it. I know from past experience that it takes me between 40 and 80 hours to create a polished prototype of a brand new idea. That time is spent trying a lot of things until you find a few pieces that seem to fit, and then those fragments crystalize into a whole organism. Sometimes that organism isn’t viable, but it’s a stepping stone to the next design.

So here’s my first stepping stone, only partially complete and not organized, but it started to give me an idea that the big picture is like a game board divided into realms and portals.

I think the big picture I need becomes a place that can accept attachment of ideas and activities. It’s the missing bedrock of my to-do list landscape. It reminds me a little bit of the visual model approach to business planning, but highly personalized to what I need to do. Perhaps it’s more of an operations map.

So, it’s slow going, but I’m posting this as a reminder to myself of how far I’m going to have to go, one idea at a time.

I spent part of the day doing some personal logo work, and though I didn’t get to a place where I can call it DONE, it was a surprisingly enlightening exercise. I don’t usually take on logo work for other people because I think they are such personal things, and my approach to this kind of design can be very drawn out, and therefore expensive in terms of my time. There are other people who are much better at it than I, anyway.

That said, I figured it might be interesting to share the process. Read onward!

Dave Seah, Functional Stationery Designer

I’ve been trying out a new description for what I do: “I make functional stationery” or “I’m a functional stationery designer.” I like this because it includes the word “stationery”, which is something that people understand more intuitively than “information graphic designer” or “investigative designer”. This revision to my small talk algorithm is part of my journey for 2012l; I’m getting used to the idea of being someone who identifies himself by being someone who makes things instead of being a service worker.

Anyway, I was planning on spending some time today working on me-stuff, and of course this ritual begins with the selection of the proper bag. As I was reviewing my choices, I noticed that one of them still had my business cards, and this reminded me that they are all out of date. It’s time to make new ones. Seemed like a good place to start.

I decided to try having breakfast at my local municipal airport, which has a cafe overlooking the single runway that serves breakfast all day. I love airplanes and airports, and as I waited for my unexpectedly enormous breakfast to arrive, I doodled a few things in my notebook (above). Like any 1st year design student, I just took the letters F and S and jammed them together. Perhaps the F and S could be made to look like the same letterform, and maybe by making it look something like two nodes connected by a line would imply “functional”. Or, if luck smiled upon me, I could at least make it look interesting and mysterious.

The idea of functional stationery is something that everyone probably can appreciation, but for me is kind of a secret pleasure. This got me to thinking about secret brands, as described by William Gibson in his book Zero History. The idea of a secret brand is that it’s small and exclusive, not known by many except those who are really into it. This is kind of how I think of what I do; I’m not interested particularly in a traditional path of company growth. I just want to make something cool and obsessive that I liked, that would earn me enough living income so I could continue to make these things. That stationery is kind of my version of art is really bizarre, but I figure I might as well see where this idea goes.

So, I thought about secrets and symbols. The visual identity for a secret brand doesn’t have to be obvious. It just needs to be recognizable, and perhaps even a little cryptic. The f and s could be merged into a single totemic figure, perhaps, while conveying the idea of “function” as something moving from point A to B.

I moved into Illustrator and made some vector versions of my scribbles. These weren’t working for me at all. They looked more like instructional diagrams, and after a while they started to resemble dancing worms wearing skirts. Idea (C) resembles some kind of moonwalking snake creature with arms.

As I was constructing the vectors for pass 1, I did notice some pleasing repetition of the curves. I wondered if making some kind of companion form would work, so I made an “s” (figure D) to experiment with it. It’s a weird S too; if you look at the curves up close you’ll see they’re not exactly symmetrical, but I wanted it that way. I retained a tiny bit of a tail on the f, to let it have some forward slinking motion like (C) does, and gave it two crossbar arms (I think my reasoning was that if there were two next to each other, they wouldn’t read as arms). The slant of the arms adds a strange perspective effect (I’m fond of that), as does the slight offset between the baselines of the two letters. They start to take on a slight runic appearance or some weird logo from the 1920s that you might find on the bottom of a piece of pottery. A maker’s mark, in other words.

If it was a mark, then it belonged in a lozenge. And in the 1920s they might have made some kind of reference to stationery, so I stuck something that looked like a fountain pen nib on it, and tried a few variations (E-G). I showed these to my friend Sid, who liked (G) because it started to look sort of regal, like it was wearing a crown. Adding the vertical line to split the nib helped add some complementary line detail that helped balance out the letters.

I wasn’t really satisfied with the way that the fs pair was filling the lozenge, so I tried various sizes. Figures H, I, and K were the original scaled sizes. H feels peculiarly flat, while K feels too contained. Figure J was my pick, as it feels comfortable to me.

Looking this over, I started to wonder about the f. Did it read as an f? Probably not. In version L and M, I played with the letter a bit, removing the tail (which made it look like a letter “J”) and removed one curve detail. In N, I wondered if I could bring back the idea of a system node by replacing the crossbar, mirroring the round cutout of the nib. This was kind of interesting by seemed unresolved; I tried flipping the nib on the other side so the balls were more on opposite sides of the logo, but it really did nothing for me.

After the second hour of working on this, I took a break and came back. I decided I didn’t like the pen nib, and removed it to see how the lozenge stood on its own, thinking of a secret, clean maker’s mark. This looked much cleaner, though the dot really didn’t work. I added a crossbar through it, asymmetrically bisecting the lozenge to make an f, but it started to look like the UPS logo or a drug capsule (Q). Tilting it helped break that look, and then it was a matter of playing with line widths. While I liked the fine line, the thickness really needed to match the letters, which ended up with (S2)

I wondered if I could get a more robust feeling by cropping the lozenge, as T through V show. I stuck the nib back on it to see what it would look like. Seemed overly ornate, but with additional treatment it might have been the basis for some kind of fancy engraving approach. I decided, though, that (S2) was the mark I’d try to work with.

The mark by itself, I found, didn’t really work with the typography I came up with, and it’s a bit awkward to use on a business card. And it’s lost some drama too. I find myself looking back at (P) and thinking that I like this better, because it just seems more mysterious. I don’t know…I’ll have to take a break from this and look at it again in a few days. For example, instead of a lozenge I could make it looks like stacks of paper. That might be more obvious. I may have to rethink my choice of typeface too, but I’ve pretty much standardized on Proxima Nova Condensed as my “official” font. I just like it.

The left side shows the half-sized ETP overlaid on the 4×6″ template. The right size shows the resized version. I had to make several more adjustments, and ended up redrawing most of the form.

Challenges

I started shrinking the A5 design, as that design went through a group test to find the smallest size I could make things. However, for the ETP to be useful for a day of planning, I needed at least 12 hours visible. That wasn’t going to happen with the existing day grid. So, I simplified it by shrinking the hour boxes and eliminating the 15-minute boxes of the original. The resulting design can show 19 hours, which two lines of planning per hour. This means that the level of detail you can record is lessened, but I think that isn’t going to matter much for the way I imagine this will be used.

I got rid of the secondary line of 15-minute boxes, sticking only with the hour boxes. Half hours are designated by the dashed lines. There’s not a lot of room here to write things down, so I would encourage the use of numbers to note when you plan to do a particular task. For example, if you are doing task 01, then write an 01 on the day grid.

Other missing elements: I decided to us the “7 Task” design as a starting point, so there are no time tracking bubbles. I think that’s OK for an on-the-go form, and it turns out that the 7 Task design is the more popular one.

Design Changes

I defined a grid size of 0.15 inches to use for spacing and sizing purposes. The width of the day grid hour box is 0.15″, and this is repeated across the entire design in multiples and dividers. This helps create a feeling of harmony in spacing across the design. This is not present in earlier versions of the form; I pretty much eyeballed those to look good.

Alignment helps too. I tried to align as many edges as possible while maintaining consistent spacing. All the horizontal lines line up to something else. Even the text elements align in some way to one of the horizontals.

One place that feels off, still is the positioning of the THREE MAJOR TASKS and WHAT ELSE IS GOING ON blocks. The way to fix that would be to raise the header a bit, so the space above the THREE MAJOR TASKS block matches the WHAT ELSE IS GOING ON block. As it is, visually the title block looks low compared to the horizontal rule to its left.

I altered the typography slightly. The numbers are now all 100% orange, instead of the 65% I had used in earlier printed designs. I wanted it to be a bolder form. There’s also more emphasis on the three most important tasks through use of background shading.

Scale

You can get a sense of the size difference between the various sizes of ETP from this photo:

The bottom-most pad is the regular US Letter pre-printed ETP. The middle pad is a custom job contracted by a company in Spain, in the A5 size. On top is the new 4×6″ design, sitting on a stack of large index cards.

For a better sense of how big this pad is, here’s a picture of it next to a fountain pen:

Step 1: Recreate the Current Logo

As I didn’t have immediately access to the website’s graphic source code, I just decided to redraw it instead of bothering Kelley, one of the main organizers of the event:

Sure, I could have asked for the original vector or photoshop files, but the typography for the overall Barcamp organization is well-known: the font is Century Gothic, and the vector artwork itself can be downloaded with a little Googling.

The Barcamp Manchester logo is a little bit different from the “official” template, as it’s something of a tradition for local organizers to put their own twist on it. One year, organizer Ian Muir decided to turn it 90 degrees; it’s so that has been a consistent thematic element.

One element that was new this year was the placing of the BarCamp symbol (still rotated to resemble a campfire of sorts) inside a box. You can see this on the main barcampmanchester.org site.

When remaking the logo, I took a few liberties with it—heck, it’s Barcamp, right?—and made the following adjustments:

• Moved the symbol box to the left-hand side, and made it a square instead of a squashed square.
• Used a single master tint for all the colors (all shades of that dark cyan, instead of dark cyan + gray), so there would be no surprises in printing (old habits die hard…
• Tweaked the kerning in “barcamp”
• Shrank the height of “MANCHESTER” because it was taller than the x-height in “barcamp”, and created weird visual hierarchy.
• Increased the size of the symbol box a bit relative to the type to increase contrast.

The result is a little boring, but it’s clean and will print well. The signs I made will also benefit from the clear shape, I think, when someone is trying to see it from across a parking lot or down a hallway.

Playing with Variations

Since it’s our sixth year, I tried to wedge a “6″ or “six” somewhere into the logo where it would look OK. Nothing really worked. I even tried to construct a 3D block with the BarCamp symbol on one face and a big 6 on the other, like a wooden block. It looked awfully trite, so I gave up on it.

As I was looking at the boxed symbol and the boxed 6, I naturally imagined a third thing. Manchester is nicknamed The Queen City, and I thought I’d see what a line of three blocks would look like. I downloaded a suitably ornate Chess font and extract the Queen symbol. The result looks like a nice coded block of symbols, and I used the original BarCamp typography below it.

I added the “NH” to the end of the city, because people sometimes confuse us with Manchester, England.

As I reviewed the logo, the other Manchester nickname came to mind: Manch Vegas. I’m not sure where this nickname comes from; apparently it’s a more recent nickname than “The Queen City”. In this case, though, the 3 symbols had a resemblance to slot machines, so I figured it wouldn’t hurt to try to sell the Manch Vegas line at the same time:

I tried a number of different ways to imply that the three symbols were spinners, using some cross-hatching and extra boxes. It ended up being too busy, so I just added two tall light lines between each symbol. Since they’re taller than the boxes, this creates the impression of a track; the horizontal motion is redirected by these two lines, which helps them read as slot spinners. The staggered heights of the symbols reinforces that a bit as well.

The arrangement I chose of two symbols higher and one symbol lower is to make some symmetry that I thought would be pleasing. And it IS pleasing. However, there’s a problem: the pattern is so symmetrical that the three symbols now read as a single group of playfulness. In fact, they look like three banners or three flags. So I tried this:

Two of the symbols are “locked in”, and that helps the divider lines read more clearly. The last spinner, however, is still in play, just about to drop that 6. The asymmetrical layout creates more of a desire for completion of action, which is more like gambling in spirit. I played with several heights; I found that aligning the top of the 6 block with the top of the line creates maximum motion in the available space. I thought that having a little extra line above it just seems sloppy, which weakens the tension between top and bottom. Or so I imagined as I looked at it.

One last thing I tried (not shown) was staggering all three symbols to create a kind of time-lapse effect. This looked interesting, but drew too much attention to a WAVE SHAPE I thought. What I have here seems to be a good compromise, but it’s too early to be sure. I have to sleep on it and look at this again in the morning.

But is it Good?

I don’t know. It feels like it’s an 80%-complete design to me; there is some missing flourish of love that needs to happen to the shapes. Maybe another round of simplification? An adjustment of lineweights or spacing? One more pass at kerning those letters until they are rich with rhythm and harmony?

Maybe it’s just stupid or cutesy. I’ve never really liked the Manch Vegas nickname anyway…maybe you have to be from Manchester to really appreciate it. I live down in Nashua (“The Gate City”, twice voted “Best Place to Live in the USA”) so what do I know :)

Concept aside, the logo has a few things going for it visually:

• It’s a single color
• It’s bold
• It has decent proportions and spacing, which are chosen to reinforce a pleasing repetition between letter spacing, word spacing and line spacing as multiples of line thicknesses and implied grids created by the size of the graphic elements. It’s not quite perfect, but it is there.
• It’s pretty clean, with few awkward or ugly shapes.
• There is good balance between type and symbol, so your eyes swim over the entire thing with ease.
• The visual hiearchy mirrors the information hierarchy, simple as it is.

I’m too close to it now, so hopefully when I look at this tomorrow the parts that are wrong (and invisible to me now) will jump right out.