In these heady days of web design and development, with multiple screen sizes, tablets and smarphones, it can be difficult to get proportions and spacing correct. Of course, one would expect a major retailer to have the resources (and care) to get it right. This screenshot was taken on my laptop with a resolution of 1440 x 900 running Firefox 5 on OSX. Nothing too crazy in terms of a web user profile.

Beyond any aesthetic issues with the check box label being too far to the right, the functional issues (or non-functional as the case may be) are what should be of primary concern here. I suspect many users would stumble over connecting these two parts of the form. If it takes folks an extra few seconds to fill out your form, it takes away from the shopping experience and therefore it impacts your brand.

Will it take away from sales? Maybe not initially. I certainly continued with my purchase, but if users are left remembering that the checkout process was annoying, weird, or heaven forbid, difficult, they may be more likely to head to your competitor’s better designed site.

Small improvements can build up to increase satisfaction and in this case, it seems like an important (and easy) fix – especially as this is one of the very last steps in the check out process – right before you click the “purchase” button.

Seems simple enough – in both common sense and in design – but the evidence is clear.

…Or Why Would a Designer Use a Template?

I know, I know. It’s sacrilegious for any self-respecting designer to use a template on their site. Or is it? Frankly, for me, it’s temporary and using one comes down to a few key reasons.

• I had grown to hate the design of the site. It was in desperate need of a complete overhaul.
• The technology has changed dramatically since I last designed the site.
• It serves as a motivational tool to drive me to complete the redesign of the site.

Let’s look at each reason a little more in depth.

First up, the old design. Overall, I don’t think it best represented me or my work. It was a piece of history, a piece of my past. The dark background, the typography, the left justified layout — it all had to go.

Next up, the technology. Originally, I was attempting to organize a lot of content and moving away from using Adobe Flash. Adobe Spry with it’s XML backend worked great, but Adobe let Spry sort of…die a slow death. No progress, no development. Meanwhile, JQuery exploded in popularity, functionality and maturity. Throw in the rise of grid frameworks, responsive design, new browsers and the signs were clear — move on and move on up.

Finally, the motivation. Typically, it’s very difficult for designers to design their own materials and this is certainly true with me. Either I get stuck in a perfectionist editing loop or just let self-doubt kill off concept after concept. A little distance goes a long way in being able to stay objective and working for yourself isn’t always to provide that objectivity. Pulling down the site completely and using a template for the blog isn’t quite a deadline, but it does force me to make the difficult choices that the redesign needs.

So here we find ourselves. I’m hard at work on the redesign (really!) and thanks to this template (tanzaku 1.1.1 by TRIPLESHIPS Inc.), I’m able to keep the blog up and running while I work.

So everybody remain calm and I’ll get back to the drawing board.

If there’s one thing I love, it’s history. For me, understanding history helps me feel grounded in the present and part of the larger picture as a whole. Now,  I’ve also been known to stop by a bar now and again. Combine the two and it’s pretty hard for me to resist. Couple these two with a unique story of typography and I’m a moth to the flame.

In New York, there’s no shortage of history and as you might imagine, there’s no shortage of historic bars. Some I’ve been to, some are still on my list. This is about one historic bar that also has a little typographic novelty.

New Yorker’s are resilient (as you might imagine) and have always been that way. The Ear Inn was built in 1817. The long and sordid tale of it’s decades as an unnamed sailor’s haunt perched on the edge of the Hudson River are better left for other times and better historians, but I do want to talk about it’s sign.

It’s sign, you see, is magnificent. It exemplifies both the resilient nature of New Yorkers and a wonderful grasp of typography.

In 1977 when new owners took over the bar, they were faced with two problems. The first? They had to actually name the bar. You see, it had mostly just been known as “bar” or “the Green Door” by the old sailors. And the second? The Landmark Commission. That’s one of the downsides of being historic. You’re protected from the vagaries of progress and as part of the deal you have to remain, well, historic. The Ear Inn had for many many years simply had a neon sign out front stating plainly, “bar”.  Removing or replacing the sign would mean going before the Landmark Commission which in it’s infinite wisdom works at a glacial pace.

As for the name, they decided to name it after the music magazine that inhabited the second floor. As for the sign, this is where the story gets creative. The solution? Just paint over the parts of the “B” in bar to create a sign that reads, “Ear”. True inspiration. Not many folks (outside of those who love typography) would look at the letter “B” and see the “E” hiding inside.

Of course, the Ear Inn can’t avoid progress completely – last time I visited, I spoke with a couple of old timers over some whiskey who were lamenting the fact that many of the regulars were dying off. They were worried not only about their friends and their own future, but what would become of the Ear Inn. A new condo has been built next door (which might help keep the Ear Inn standing upright) and the neighborhood is being gentrified.

One of the earliest forms of graphic design in my mind is cartography. An elegant production of visual communication that has been refining itself since the dawn of man. Yeah, I like maps.

This past spring here in New York City, the MTA unveiled a new subway map, the first update of the map since 1998. And while the map has been reviewed in the press, as a designer, map lover and most importantly as a rider, I wanted to give my thoughts.

The old subway map suffered from an overwhelming amount of information some of which was really unnecessary for most riders. For example, the bus information always was an annoyance to me. It’s always just served as clutter the map.

One striking thing about the new map is the decision to reduce the size of Staten Island in relation to the other boroughs. This allows the other boroughs — where most of the trains (and people) are — to be enlarged. Apparently, there was some uproar about this decision, but personally, I’m fine with it. Guess what? I’ve lived here six years and never met anyone from Staten Island. All the other boroughs? Yep, lots of people, lots of times. In fact, I’ve never even been out to Staten Island. Maybe someday I’ll go, but I’ll probably take the ferry. Reducing it’s prominence on the map — even if the geographic proportions are not accurate — is a good design decision.

A large portion of the distracting bus route information has also been removed which I whole-heartedly approve of. It allows the map to focus on it’s main goal — the subway system.

One thing I don’t like about the new map is the color change for the parks. They’re no longer a true green and are much more subtle than in the previous map. The colors of the parks and the surrounding city are so similar as to make the parks almost unnoticeable. While I like maps, I also like parks and since many of the viewers of this map are tourists, I would think the city would want to highlight the green spaces.

——————–
Update: I’ve noticed that the version of the new map that actually is posted in subway cars contains even less of the pop out bus information boxes making for a cleaner (and clearer) presentation.

The gaming site Kotaku has posted the entire Sony Move brochure I designed — every page. Maybe it’s some attempt to one-up IGN who posted just the comparison chart page last week. You can view the post here.

Again — they seem unable to work the scanner/copier as the pages aren’t even straight. Sigh. At least the comments are funny this time around.

In terms of the design — I wanted to create a new cover (like I did for the holiday brochure), but Sony ran out of time/budget and so we went with one based on another marketing brochure that Sony had developed internally. And although I did illustrate some of the elements (such as the line drawing of the Move controller), the action photos generating comments were provided as is by Sony.

A page from another Sony Move brochure I designed got picked up and posted online fueling a ton of comments from gamers on the Move motion controller. Over 600 comments and counting at this point. You can view the chart and join the fray here.

As a side note, it’s a little disappointing that IGN couldn’t be bothered to get a clean scan of the page. It looks like they used it as a napkin before scanning and posting it. It’s not a big deal for me (I know how the page should look), but as a “publisher” it shows a real lack of concern for quality (and therefore a disdain for their viewers).

For a long time now, I’ve been quietly working to bring more space into the world. Specifically to typography and the em dash in particular. The en dash (–) and to a lesser degree it’s cousin the em dash (—) are some of the most misunderstood pieces of punctuation in the English language. Being a designer, I’m intimately concerned with the visual aspects of text and seeing an en dash crammed in between two words just screams, “HELP!” I find myself adding a single space on either side of the en dash consistently and repeatedly in my work. Using the em dash to separate phrases in a sentence has always seemed jarring and then to use it without any space on either side causes it to act as a hard stop on the eye of the reader. Not very pretty and not very functional.

And I’ve always thought it was just my quirky pursuit of a certain visual aesthetic. One of those quiet tasks a designer faces. A task that at first, you try to turf onto the writers through education (along with many of the other of the finer points of digital typography) but eventually resign yourself to as just part of the job.

Recently though, I came across some typography tips which expressed and reaffirmed my beliefs regarding the en and em dash. And from none other than famed typographer Erik Spiekermann in the FontShop publication, “Erik Spiekermann’s Typo Tips.” Right there in Tip #2, he summarizes the proper use of both the en and em dash and (thankfully) helps to justify all the quiet work us designers do to improve the visual appeal of the written word.

It’s nice to be in good company (and to have a resource for explanation when the curious ask why there’s a little breathing room around an en dash).