Recent job listings

~ 02 May 2008 ~

Last week following my session at An Event Apart, a gentleman stopped me in the hall to shake hands and say, “Thank you.” His story, neither spectacular nor banal, was one of fulfillment: Having lost his job a year ago, he soon found employment in Georgia through a listing on Authentic Jobs. He’s still at the company today, and shaking the hand of someone whom the site has positively affected is tremendously rewarding for me. (Is your next job in Georgia?)

Some recent listings are highlighted below.

Full-time (International)

• South London Web Designer at Down2Earth
• Stockholm Java-utvecklare at Unikum - Unikt lärande AB
• Rotterdam Senior Interactive Designer at Studio Dumbar

Full-time (U.S.)

• Anywhere CSS Zen Master at SmugMug
• Work from home Code Mechanic at EllisLab, Inc.
• Cupertino, CA iCal Software Engineer at Apple Inc.
• Cupertino, CA UI Engineer at Apple Inc.
• Los Angeles, CA Web Designer / Client-Side Developer at Casting Networks, Inc
• Los Angeles, CA User Interface Engineer at Synctree
• Palo Alto, CA Graphic Designer at Facebook
• Redwood Shores, CA Visual Designer / Production Designer at Navigenics
• Jacksonville, FL Multimedia Design at City of Jacksonville
• Laurel, MD Web Project Manager at LMD
• Brentwood, TN—Near Nashville Flash Expert Wanted at DaveRamsey.com, Top 5,000 US ranked website
• Chattanooga, TN E-Commerce / Social Networking Developer at MNDCreative, LLC
• Brooklyn, NY Interaction Designer at HUGE
• New York, NY Web Designer at Polar News Company
• Provo, Utah Web Developer at BYU - Harold B. Lee Library
• Bellevue, WA Social Application User Experience & User Interaction Designer at Livemocha

Freelance

• FLEX Developer at TEKsystems
• Senior Web Developer at Liquid Digital Media
• Social job site needs web designer with emphasis on User Experience at BizFavors

Speaking of freelance listings, the very same day the gentleman stopped me in the hall, I received this email from Katrina McKinnon of Motive Media (Australia):

I posted a freelance position on your site yesterday for 75 bucks. Within these few hours I have received a hundred or so responses — a few of them exceptional, most of them good and only a few absolute duds. That’s quite possibly the best 75 I’ve spent for a while. Thanks for making the service you made. I appreciate it.

Post a job or find one at Authentic Jobs.

Archived article (comments off)

Craziest thing you’ve done for user research?

~ 23 April 2008 ~

Me? I signed up as a full-fledged Tupperware rep for two months.

At a former company, we delivered web-based marketing tools to distributors and consultants of network marketing companies. One of our biggest (and best) clients was Tupperware, purveyor of all things plastic. We were in the midst of a major upgrade to the software they licensed from us, and I figured the best way to understand our/their users was to become one of them.

So, with the permission of the company, I became a part-time Tupperware rep. I sold product online, I attended a really wacky rally with women screaming wildly about Tupperware as adrenaline-infusing tunes such as “We Will Rock You” boomed loudly from on-stage speakers, and I even handled a return from a mildly disgruntled customer who found me merely because I was the nearest rep in town.

In the end, I can honestly say I understood the user much better than before — even as embarrassing as it may have been for me. (Though I happily admit I safely escaped holding any Tupperware parties at home.)

You? Can you top that?

Archived article 25 comments

Techniques for designing with type characters

~ 15 April 2008 ~

After weeks of code speak, let’s totally shift gears and talk exclusively about visual design in all its splendor and beauty.

Typography and typefaces, without a doubt, are two of the most fascinating aspects of visual design. Great designers can execute great designs with typefaces and nothing else, if required, and certainly if preferred. Design legends Saul Bass and Paula Scher have proved this many times over, and they comprise only a fraction of a very long list of luminaries who can wield type brilliantly.

Examples of great design using little more than typography are virtually numberless. Some of the favorites I’ve spotted recently include designs by John Arnor G. Lom, Coudal Partners, and NB:Studio, linked respectively:

But of all the work I’ve seen recently, few have captured my attention as much as that of Veer’s Type City Prints. “Each portrays an urban facet, illustrated character by character with a typeface that evokes the image itself,” Veer’s website explains. “Illustrations are letterpressed onto archival, acid-free paper using brass dies mounted type high.”

Absolutely stunning.

Inspired by Veer’s work, I had the privilege of creating a Type City-esque design of my own for an in-house poster contest. Designed in tribute to one of the buildings that adorn the organization’s headquarters (and one of the most compelling edifices in the state), the entire design was created solely with characters from the Bickham Script Pro and Engravers MT typefaces.

I’ll speak more about the design soon, but for now I wanted to share a few things learned during my first attempt to design with type characters. Luckily, in the course of my project, I was fortunate enough to correspond with Veer’s Justin Lafontaine, the talented designer behind the Type City Prints. (Correction: Christina Huber’s artwork is also featured in the set. Thanks Anders!) Below is shared knowledge from our experiences.

1. Use characters from the subject’s description. What better starting point and technique for conveying meaning than to use characters from the name of the building, location, object, or person? “The first thing I did was spell out the phrase, such as locations for the buildings, and copied it a few times at varying sizes in both upper and lowercase,” Justin explains. “This gives you a really good palette to start from which you can quickly grab different sizes depending on what you need.” (Regrettably, I learned about this tip only after I had made substantial progress, and therefore my design uses random characters and lacks that extra bit of meaning I could have given it.)

2. Take advantage of symmetry for both speed and beauty. For objects or buildings that are symmetrical, use symmetry to your advantage for creating the design with less effort. As Justin describes, “I usually built one side, then flipped it to complete the building.” As a result, symmetry also enhances the aesthetics of your work. “The symmetry in these can be pretty beautiful.”

3. Scale the characters to convey perspective. Justin: “In lots of them I used the scale of the characters to give the illusion of perspective, like larger characters closer to you, and smaller as they become further away. That helped a lot!”

4. Repeat sections whenever possible. This is probably the most important tip. You’ll find sections of the piece which you’ve meticulously built can be copied and pasted elsewhere in the design, and the duplicated section isn’t really perceptible without closer inspection. This is a real time saver. “All you need to do is some minor swapping, and it looks like a totally new texture,” Justin adds.

5. Don’t attempt this in one sitting. I take it back — this is the most important tip. Not only is type character designing extremely time consuming, it’s also monotonous work that requires a constant zoom in, zoom out dance to get things right. My design required a total of about 16 hours to complete. That’s just two full-time days worth of work, but don’t even attempt to do it two days back to back. Spread it out over a couple weeks to allow adequate time for correction, detailing, and simply to give yourself a break. (Mine was spread over three weeks.)

In retrospect, type character designing isn’t for the faint of heart, but it’s extremely gratifying if executed well. (A big thanks to Justin Lafontaine for sharing his advice!)

Archived article 23 comments

Swissmiss, SimpleBits, Big Noob join Authentic Jobs

~ 07 April 2008 ~

I’m very pleased to announce Authentic Jobs has added three new partners: Swissmiss, SimpleBits, and The Big Noob, all of which now aggregate Authentic Jobs listings on their sites.

Swissmiss

If my header image is any indication, it should come as no surprise that I’m a fan of all things Swiss. (This is in part due to my being one-quarter Swiss, three-quarters Whoknowswhat.) However, selection for new partners isn’t based on personal preference but instead quality of content. And Tina Roth Eisenberg’s site has it in spades, with multiple daily postings covering an eclectic range of interestingness.

SimpleBits

Credentialed Dan Cederholm needs little introduction. Author, speaker, and occasional dodgeball superstar, I couldn’t be happier to have Dan join the team.

The Big Noob

Proprietors of all things geek (and great design), Brad Smith, Ryan Sims, and Keegan Jones render it honorable for one to be labeled “Noob”. Welcome aboard, guys.

Archived article (comments off)

Extensible CSS Interface IV: Testing for Extensibility

~ 01 April 2008 ~

This is the fourth and final article in the four-part series, “The Highly Extensible CSS Interface”. Markup and images for this article:

• View the full demo
• Download demo.zip (all files)

Finally, we’ve arrived. This concluding article provides the full demo, as well as a bookmarkable site that gives you quick access to all resources mentioned throughout the series.

Additionally, what follows below are 8 benchmarks to measure the extensibility of your site or app. I certainly don’t advocate that every site or app must comply with all of these benchmarks, but I do recommend trying to comply as best as possible with each of these when applicable to your project.

1. Translation

When I sat down to author this article, translation of all things was the first to come to mind. I suppose that’s because it’s been on my mind not only at work but increasingly as I realize just how global our economy is becoming.

Perhaps the easiest way to test for translation is to send your prototype through Google Translate. Here’s what the demo looks like translated to Chinese (Simplified). Fortunately, a fringe benefit of bulletproofing is that elements containing text are inherently capable of accommodating changes to the length of the text that occur as a result of translation.

However, bulletproofing alone isn’t always enough, as we must make smart choices about what will be image text and will not be as we design the layout. In the demo, only one phrase in the entire interface is image text — the logo. The rest is HTML text. This was done specifically to make translation as easy possible, sparing ourselves from having to create a set of graphics with translated image text for every language our fictitious app may be translated into.

In the end, you’ll have to decide on image text vs. HTML text based on the translation needs of your site or app, on how much typographic control needs to be retained through imagery and how much can be relegated to browser rendering, and so forth.

2. Text Resizing

This benchmark is fairly straightforward: Make it work for low-vision users, whose default text size may be different than yours. A general recommendation is to accommodate up to two sizes larger. You can also accommodate text sizes smaller than the default, but my opinion is that if a user chooses to go smaller than default, he or she accepts that things may not be legible anyway.

Testing for text resizing is pretty easy: Command/Ctrl + (in most browsers), and then analyze how elements containing text accommodate changes in text size. And if you’d like to explore an interesting technique for having the entire interface resize (not just text elements), check out Jon Tan’s Em & Elastic Layouts with CSS.

3. Resolution Dependence

I’ve talked about resolution dependence extensively throughout the series, so I won’t elaborate further other than to suggest you check out Richard Rutter’s list of resolution dependence techniques, which he refers to as variable fixed width layout.

4. Images Disabled

This one’s an easy step to overlook. Be sure to test how your layout renders in the absence of images, not only for reasons of accessibility but also to be sure background images have a supporting background color. In the example above, the Featured Member section is created with dark background images and white text. If I’d forgotten to add a dark background color, even though it’s not visible when background images are present, I’d leave users with white text on white background when images are disabled.

5. Styling & Scripts Disabled

Disabling styling and scripts tells us if we’ve separated presentation and structure properly, which yields a variety of benefits, not the least of which are accessibility and alternate device rendering (e.g. mobile).

As Dan Mall pointed out in Part II, the goal as it pertains to scripting is unobtrusive JavaScript, or the separation of JavaScript from the markup and CSS layers.

Two Firefox plugins for not only easily disabling images, styles, and scripts but also for inspecting and manipulating markup on the fly are the Web Developer Toolbar and Firebug. I recommend you install both. Additionally, there’s the IE Developer Toolbar (IE 6 and 7) and Safari Web Inspector.

6. Color Contrast

When you consider roughly 8% of the male population is color blind, you quickly realize a significant chunk of your user audience may have difficulty using your site if color contrast isn’t properly tested. (As an interesting aside, I’ve had at least one color-blind designer on my team for nearly the entire length of my career.)

The utility I prefer to use for quickly assessing how color-blind users will see my interface is Color Oracle. It’s free, very lightweight, and allows you to test color blindness in any software or window on your machine. Also give Pabini Gabriel-Petit’s thorough article a read: Ensuring Accessibility for People With Color-Deficient Vision.

7. Rebranding

Those of you who develop software that is licensed to other companies who in turn rebrand your software as their own will know what I’m talking about here. Inherent in the practice of web standards — and the practice of extensibility — is the ability to “reskin” an interface fairly easily.

To see what I mean, uncomment the following line of code in the demo to see a simple rebranding of the interface:

<link rel="stylesheet" href="css/branding.css" type="text/css" />

Again, this rebranding is rather minimal, but the point here is that by properly separating structure and presentation, changing the skin of an interface is relatively easy. Of course, you can really reskin the same markup by changing the CSS rather wildly, as demonstrated by the css Zen Garden project. My example pales in comparison, but hopefully you get the point.

8. Mobile

Lastly, I’d be remiss to skip mobile when speaking of extensibility. Regrettably, this demo is not a stellar example of mobile extensibility, as I’ve not had time to create a mobile-friendly version of the interface. I got lucky with iPhone (picture above) only because of the resolution dependence built into the interface, which works surprisingly well on iPhone. But if I had the time, I’d explore options for mobile adaptation, context, and all the other stuff you can read about in my book.

Signing Off

And so the series comes to a close. Before leaving, it’s worth stating these benchmarks are not all-inclusive. There exist other benchmarks that may be considered, but the ones I’ve presented here I feel summarize extensibility fairly well.

Thanks for participating in the series, either as innocent bystander or active participant. This is your last chance to call me out on anything that’s wonky or misleading, so please do so. Otherwise, happy extensibilitying.

Archived article 21 comments

~ | Archives | ~

“Moll’s blog is worth any web or graphic designer’s time.”

–Jeffrey Zeldman