Love and Hate for Helvetica

Hate for Helvetica

This post over at Smashing Mag makes the oft-heard argument that, well, Helvetica should go away…that it’s boring, tired, vapid and, in a new twist, not that legible.

I wrote this response, which pretty much sums up my feelings about Helvetica (spoiler: I kind of like it. No, I like it a lot.):

I don’t really understand the hyperbole and hand-wringing hysteria of your post.

Frutiger and Syntax make noise for themselves. They say, “Look at me!” They are visible and therefore easily dated. Their anachronistic characteristics, however much they may add to legibility, scream, “I’ve been designed. Woo hoo!” They are beautiful fonts, no doubt.

But Helvetica is sort of invisible. To say it’s illegible is silly; maybe it’s not as legible as the other typefaces you cite, but it’s a damn legible font compared to most of the typefaces out there. Helvetica’s lack of style, if you will, makes it timeless, much more so than most other typefaces.

You’re looking for a typeface to make its case, to have a voice, to look beautiful and get noticed. But for many of us, the content is what matters, and Helvetica lets those other design elements shine. If I want the viewer to notice the content, I don’t use a font that will distract them. If I want them to notice the type, then I might make one of your choices.

But let’s look at the graphic above. Can one seriously argue that Helvetica is that much less legible than Frutiger or Syntax? Is Helvetica really boring, or is it just letting the words do their thing?

I don’t disagree that Helvetica is everywhere, but that hardly makes it the McDonalds of typefaces. It just means it works. It’s useful. It communicates.

Is that really such a bad thing?

//

Let me know what you think on Twitter: @mmcwatters

iphone-light

Heft

Hold and closely inspect an iPhone 5 (as I did the other day), and one thing becomes clear: it is one well-crafted piece of equipment. I mean, the fit and finish, as they say, is impeccable, especially for a mass-produced consumer gadget.

And yet…

When I held the 5 in my hand, it was so light — so very, very light — that it felt a little (how shall I put this?) … insubstantial. It felt like it was filled with air.

In a way, its very lightness seemed to run counter to the fact that I was holding one of the most advanced pieces of consumer technology in human history.

Don’t get me wrong: lighter is definitely better, especially when talking about a mobile device. But it made me think about psychology, and about how we still tend to associate things like heft with quality.

My grandparents’ Zenith was a wood-paneled piece of furniture, rivaling the adjacent loveseat for girth and weight, so it’s clear that we’ve come to accept smaller and lighter as (usually) better. And if I actually owned an iPhone 5, I’m sure I’d quickly come to appreciate its relative svelteness. Still, in the moment, I expected…more.

//

Let me know what you think on Twitter: @mmcwatters

Re-imagining the Autism Spectrum Diagram

The term “autism spectrum” is a bit of a misnomer, as it’s not actually spectrum in a linear sense at all.

In this post on my other blog, I illuminate how I’ve tackled the problem and hopefully created a more accurate, easier to understand diagram explaining where an individual might be on the so-called autism spectrum.

Netsoft Holiday Card

This year’s Netsoft holiday card (a quick design I came up with just in the nick of time).

Netsoft holiday cover 2011

Netsoft holiday inside 2011

Ascent

RIP, Steve Jobs

User in Chief

Jobs thinking

The genius of Steve Jobs is not in his creative or technical chops, but in his ability to be the ultimate user. He is able to tap into his own sensibilities to discern what will be great, and what will be a flop. More to the point, however, he is driven by his own own sensibilities, tastes, quirks, and neuroses.

After his return to Apple in the late 90s, when everyone said Apple was dead, he began identifying, supporting, and launching killer products with breathtaking frequency. Yes, there were missteps and mistakes, but overall the product line Apple developed reflects one thing if nothing else: the unique, unwavering sensibility of Steve Jobs.

iMacs

When you look at what other companies produce, do you see a singular focus, a common aesthetic, a relentless sense of right and wrong, good and bad, or do you just see another product lineup reflecting the flavors du jour? Do you see the thumbprint of a visionary, or the stamp of committee approval?

And now Jobs is retiring. But I’m not too worried about Apple’s future, because there is another thing Steve Jobs did really well: he recognized and cultivated great talent within Apple, and that talent is now taking over the reins.

Musing on Muse

Muse

In case you haven’t heard, Adobe is about to release a new AIR-based website design and building tool code-named Muse (the actual product name hasn’t been made public yet), and it’s currently available to download in beta format. I spent some of this past weekend using it, and below are my impressions.

The promise of Muse is that it will make designing and building websites as intuitive for Web designers as InDesign and Quark XPress did for print designers. In other words, it hides the code and employs a toolbox that is very similar to other Adobe design software.

A streamlined workflow

The workflow, as evidenced by the four main sections of the program, is very intuitive: Plan is where you build your site map; Design is where you lay out individual screens; Preview shows you a working example of your site in progress; and Publish is, well, where you publish your site.

The Plan pane allows you to do high level site mapping and user flows, and it remembers all links so that navigation is automatically updated. In addition, you can create master pages much as you would in InDesign, allowing common elements like navigation to be shared across multiple pages. You can even use multiple master pages in one site plan for greater flexibility in your site hierarchy.

The Design space is very straightforward, with a surprisingly spare toolset. Perhaps Adobe will add more tools later, but I found the bare bones nature of the environment refreshing. You’ll be laying out pages in minutes, without a care in the world as to how the code behind the page is actually crafted. And therein lies a giant risk: we know from experience that you can design almost anything these days, but whether it’s a good idea or not—whether it utilizes streamlined, efficient, accessible, and cross-browser compatible code—well, that’s quite another matter altogether.

My experience

I designed a few pages in Muse and ran them through a validator and they came out pretty unscathed. However, I also designed the pages in a way I thought wouldn’t cause any problems. In other words, the fact that I kind of / sort of understand the underpinnings of coding probably prevented me from designing something overly problematic. For example, I didn’t overlap elements, and I used paragraph styles that mapped to HTML standards. In the hands of a web novice, however, it’s entirely possible Muse might generate spaghetti code in order to achieve design fidelity. Adobe says that the code Muse generates is search engine friendly, and they test that it works on all relatively modern browsers; this doesn’t mean, however, that a user couldn’t generate a design that would fall apart in different browser environments.

Nonetheless, designing in Muse is actually a lot of fun, and certainly easier than designing in Dreamweaver which is more of a coding environment with a GUI front end. And, it’s a blast to lay out several pages in short order, add interactive elements, and then see your working website in a matter of minutes. Muse comes with several canned interactive elements like accordion elements, lightboxes, slideshows, and navigation menus, all of which can be customized to your design aesthetic, and these take a lot of the pain out of creating a richly interactive experience.

Hot AIR

As with many desktop apps that eschew OS controls in favor of an Adobe AIR environment, I encountered some interface wonkiness, and tools and features didn’t always behave as I’d expect them to. Nonetheless, this is beta software, and compared to similar tools I’ve worked with like HotglooMockflow or Balsamiq, I found Muse to be just as easy to use if not more so.

What will it cost?

Interestingly, Adobe says they won’t sell Muse as a stand alone product, but license it on a monthly basis. Adobe has started to allow customers to license other graphics app in a similar fashion, and this model is common in the wireframe and mockup space where apps like Axure, Protoshare, HotGloo, and Mockflow are billed on a monthly basis. The pricing for the monthly plan is $15 if you sign up for a year ($180 for the entire year), or $20 if you pay as you go.

Personally, I’m torn. While I don’t like shelling out hundreds of dollars for an app, I also don’t like to have a cloud of monthly payments hanging over my head. I wish someone would perfect the metered model, where you’re billed only for the time you actually spent using the software. Nonetheless, Adobe says users can license Muse without having to own other Adobe CS products, so that makes the cost of entry fairly low.

Some skepticism

The big question, however, is whether or not I’d actually give up the wireframe to Photoshop to developer model I currently use in favor of Adobe Muse. Do I, in other words, see this as a standalone website design and implementation app, like a better version of Apple’s now-defunct iWeb or NetObjects Fusion? The short answer is that it’s too early to tell; this is beta software and I’ve only played around with it for a small amount of time. However, I’m very skeptical of using any program like Muse on an enterprise level. For throwing together small, non-CMS-based websites in a short timeframe, I think Muse could be a very useful tool.

Some (surprising) optimism

Where I think Muse, even in its current beta state, could be very competitive and useful is in the prototyping and wireframe space. I can easily envision creating highly interactive, high fidelity prototypes to share with clients, then handing those working prototypes over to skilled developers who would ensure the code was as compliant, cross-browser friendly, and as clean as possible. In other words, Muse might not be the magic bullet for building websites, but it could honestly be the best wireframe tool I’ve used to date…and that’s saying something, because I’ve used a lot of them.

Adobe says the Muse will officially available in early 2012 (under a different name, of course). In the meantime, try it out for yourself.

lorem_wireframe

Lorem

Some UX professionals will tell you never to use lorem ispum, aka greek copy, and their reasons are very valid. In the real world, however, project deadlines often require us to start work without final (or any) copy. What are we to do?

Because I agree that a block of phony text isn’t very useful, I tend to wireframe with placeholder text that provides direction, tone and even source. For example:

This paragraph introduces the flagship product, and should touch on its inherent qualities including size, versatility, speed, and reliability. Review the latest product brochure, pp. 12-14, for specific attributes. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

While it’s not perfect (what is when it comes to building websites?), this approach to placeholder copy serves a purpose: it tells the writers what they need to communicate; it tells the designers how it might be treated; and it tells the client what they need to provide and approve.

Free Wireframe Sketch Template

It all begins with a sketch.

If you’re like me, you usually start your prototypes or wireframes on paper. However, it can be hassle to sketch out all the browser elements and grid anew for every page in a project. That’s why I created the 970 pixel wireframe sketch template that you can download (PDF) and use for your own work.

The grid is set to mimic 970 pixels, with 12 columns of 68 pixels width each, with a 14 pixel gutter between them. There are also 14 pixel gutters on the left and right sides, so the true width of the page would be 998 pixels if you wanted that padding.

As I’ve recently discovered, the 970 pixel grid is, in many ways, more accommodating than the popular 960 pixel grid.

In case you missed it, here is the template again: download.

A Font of my Own

A font made from my printing.

A font made from my printing.

If you’d like to use my admittedly rough and misshapen handwriting … well, printing … for yourself, you can download this font for free.

970 Grid PSD

The 970 pixel grid.

I’ve been using the 970 pixel grid for a little while now, and I agree with those who argue it has many advantages over the traditional 960 pixel grid. For more information, read this article. To download a layered Photoshop file with grid and measurements that I developed, click here.

My Type is Growing

How I now set type.

Large type is in vogue on websites these days due in part to larger screens, higher resolution monitors, and stylistic trends. But I bet part of it is also due to the aging eyes of those who design websites. We’re not all kids anymore.

Do you have a positive sensation?

Words Matter

Right now, conservatives are circling the wagons, defending themselves, claiming that the rhetoric of Palin, Beck, Coulter, Hannity (really, most of FOX News) cannot possibly be blamed for the actions of one psychotic young man in Pima, Arizona.

And they may be right: preliminary evidence suggests that the shooter was not, in reality, motivated by the rhetoric of the Right so much as he was suffering from a violently psychotic personality disorder. We could argue that Republican cuts on mental healthcare or the most liberal gun control laws are to blame, but I don’t want to focus on those issues at the moment.

What is illuminating is that many people across the political spectrum jumped to the conclusion that it was just this sort of outlandish conservative rhetoric that was behind the tragedy in Pima. And this fact alone — that so many thought it a not-unreasonable proposition that inflammatory words led to violence and murder — should cause those on the Right to reconsider their tactics, their language, their stance. It is fine to disagree, even strongly, but calling for the elimination of certain people with whom you disagree — putting targets over your opponents in campaign posters, for example — is a fundamentally dangerous proposition. For example, ignoring all facts and claiming our President is a violent Socialist Muslim bent on the overthrow of our country will obviously lead some unstable people to violence, and some splatter of blood will be on the hands of those who argued this fallacy, even if they didn’t pull the trigger.

Do you own what you say?

For decades, conservatives have tried to enact laws prohibiting certain kinds of speech they feel is damaging to society. They’ve tried to criminalize specific forms of speech like flag-burning; they’ve brought lawsuits against rock and rap bands they feel are destructive to our moral fabric; they have called for the removal of certain books from public libraries.

In other words, conservatives understand very well that words matter, that words can incite dangerous, destructive behavior, and they have gone so far as to argue certain kinds of language should be banned altogether. Therefore, it is the height of hypocrisy to now claim that the words of those who spew hatred and fear on the Right are not in any way responsible for the culture of violence and intolerance which is brewing in our country.

Words matter. Words are powerful motivators. Everyone from Madison Avenue to the most petty dictator understands this fact. Before action comes thought. If Sarah Palin, for example, claims that her words don’t really drive violent action among certain individuals (mentally unstable or not), then she is either a blatant liar or pathetically stupid.

Would Christ sanction this language?

Therefore, I would say to those across the political spectrum, mind what you say. Our collective dialogue is devolving into dark and dangerous territory. If we don’t choose to change the tenor of our political discourse, we shouldn’t be surprised if yesterday’s events repeat themselves with greater frequency in the months and years to come.

And to my more conservative friends, you have a chance to say that you really do believe in the ethos of personal responsibility. Hold FOX et all responsible for their words, and demand a more reasoned, thoughtful dialectic. If you don’t, if you defend those in your ranks who continue to incite violence with their words, you lose the credibility to claim the moral high ground you so desperately seek.

fireworks

Fireframes

Over the years, I’ve used many apps for wireframing, from Mockflow to Mockingbird, Dreamweaver to Flairbuilder, Protoshare to Balsamiq, Omnigraffle to Indesign and Illustrator. And, of course, everything still begins (and sometimes ends) on paper. But I’ve yet to give Fireworks a whirl, despite the fact that some UX people rave about its strengths as a wireframing and prototyping tool.

So last night I began developing some wires using Fireworks, and thus far I’m pretty impressed. I can export the wireframes as clickable PDFs or as PNGs with HTML hot spots, or as sliced HTML files with rich interactivity, making them easy to share with clients and colleagues.

A wireframe done in Fireworks.

Supposedly I will be able to bring them directly into Photoshop for UI design when they’re complete. All wireframe pages are stored in one Fireworks file (Fireworks uses a flavor of PNG that permits multiple layers and states, as well as vector shapes, symbols, and interactivity). I can use standard Adobe keyboard shortcuts. And, I can work the way I’m used to working: like a designer, not a programmer.

The biggest challenge so far hasn’t been learning Fireworks, but forgetting Photoshop: both apps are very similar in terms of form and function, yet they are different in subtle but critical ways. I seem to keep trying to do things the Photoshop way, and it doesn’t always work. Nonetheless, it’s a familiar environment, and that’s pretty helpful.

Some of my friends have said they don’t understand why I try to so many apps when there’s probably one that works better than others (and they each have their own preferences, of course). In my case, however, either I haven’t found the perfect tool or, more likely, in my opinion, each project requires a different tool.

In any event, I’m going to try to slug it out with Fireworks on this project, and I’ll report my progress when I’m done.

Update: Well, that was fast. After one day of use, I can state without equivocation that I won’t be trying to tackle this project using Fireworks. I wrestled for a couple of hours with the States / Layers / Pages confusion. Adobe’s help application was confusing, verbose, and incomplete. I’m sorry to report that Fireworks won’t be at the top of my tools of choice for wireframing, as I believe a great tool should be fairly self-explanatory, especially when it comes to basic tasks like exporting pages and states.

A happy cart is a better cart.

A Better Cart

The e-commerce checkout process can be frustrating and confusing: it’s not always clear where you are in the process, how to go back and make a correction, or how much further you’ve go to go until you’re done.

Fortunately, a relatively new type of checkout is starting to appear around the Web. It takes the form of an accordion, and it presents all of the steps of the checkout process in one layout, not spread across multiple pages.

The accordion shopping cart at lomography.com provides numbers to orient you.

Essentially, all form elements are contained in a single page, with non-active steps collapsed, and active steps open. On some sites that employ the accordion checkout, you can actually go backward or forward though the checkout process by clicking on alternate accordion layers. Other sites even allow you to edit information on non-contiguous form elements. And all of this happens without having to wait for any new pages to load.

The Land of Nod accordion shopping cart.

Having visited a few sites that employ the accordion checkout, I can safely report that the process feels more streamlined and pain-free, even though all of the steps you’d find in any other checkout process are still there.

Presentation, as we know, can be everything.