Zen and the Art of Making Things Easy to Use

or, one man's mission to make the internet age work for us, not against us

My Goal

I seek a world in which all interfaces excite, rather than intimidate; a world in which we can experience the internet age as a utopia rather than a burden.

My method is simple — draw the audience in with a story that resonates and never make them wonder what to do next.

Naturally, that is easier said than done. It requires intense attention to process and detail, since cutting something out of a design often takes ten times the consideration as putting something in. Interactive projects, especially those with many stakeholders (such as the departments in a large company), will tend toward feature creep and visual clutter.

To overcome this, the technical mind has to push aside it’s expertise and see the world through the eyes of the non-technical end user. Everything that does not help the user towards their goal must be ruthlesslessly cut. This has always been key to good interactive work. As we move towards an era of perpetual information overload, it becomes absolutely essential for survival. I can do this for you.

My Pledge

I will take the time to learn about your business, your customers, and (most importantly) the customers you’d like to have . I want your business to grow, and will work hard to make sure your web presence thrives.

Selfless Naiveté?

Selfless? Not really, it’s just good business sense. Long term client relationships are mutually beneficial. When design is well executed, your business prospers. As your business grows, so do your design needs. As we move to the launch of a project, I begin to do discovery on improvements for the next cycle.

When you are an established client, I have already spent the time to understand your needs and adapt to your working style. This cuts down lead-in time to the strategy and implementation phase.

Resume

Curriculum Vitae

Skills

Technology

• Photoshop — Expert
• Illustrator — Expert
• XHTML & CSS — Expert

• Flash — Working Knowledge
• InDesign — Working Knowledge
• OmniGraffle & Visio — Working Knowledge

• Javascript — Learning
• Actionscript — Learning
• XML + XSLT — Learning

Specialties

• Art Direction
• Interface Useability
• Typography
• Logo and Corporate Identity Design
• Clean CSS Layout

Environments

• Mac Preferred, but Windows Capable
• PHP or Rails Environment Preferred, but I can work around .net
• Comfortable with SVN – based workflows

Education

BFA in Digital Media — Otis College of Art and Design

Employment History

Senior Web Designer

2009 – Present — MTV Networks

• Art Direction, Usability Design and CSS Layout for user driven comedy video portal atom.com and related marketing collatoral

Senior Web Designer

2008 – 2009 — JibJab Media Inc.

• Art Direction, Usability Design and CSS Layout for consumer facing entertainment portal jibjab.com along with supporting applications and widgets

Senior Web Designer

2007 – 2008 — Interactive Digital Publishing Group (formerly VSI)

Led a team of 3 other web designers and provided art direction and css layout architecture for several projects:

• User Interface design for large portals and web applications ( including the complete redesign of a webmail application interface )
• Concepts and graphic design for marketing collatoral ( online and print )
• XHTML / CSS standards – based template systems
• Flash interface layout and animation

A Word About This Website

**Nerd Alert** The following section is heavy on technical details

Proportional Zooming Layout

The Problem

During the pre-production phase of this site, I found myself thinking about the aging baby boomer generation, many of whom are facing the reality of lowered visual acuity that tends to come with age (unless you’re really lucky genetically, years of staring at TV and computer screens takes a toll). This is a major problem, since the average screen density of monitors is on the rise (my laptop screen is only 17”, yet can display the same standard resolution of a 24” screen just a couple of years ago).

As screen density goes up, the physical size of a pixel shrinks and so does everything on the screen that is based on pixels. This often shrinks the size of text below a comfortable reading size for the many folks out there without perfect 20/20 vision.

The Solution

This portfolio doubles as a demonstrated solution to the above problem. The entire site uses em-values to layout all content and navigation elements, including their containers. Suddenly, everything on the site is proportional and scales with the base font size.

This basically allows the website to zoom completely (IE7 style) in all browsers, including the popular gecko and webkit-based (Firefox and Safari respectively) ones. Suddenly, your fancy new high density screen is an advantage, instead of a liability. Zooming the text on a high density screen will allow a web capable device’s rendering engine to create sharper, higher resolution text as you increase the default text size.

The Trade Off

No solution is without a few drawbacks, and much of the underlying technology in popular web browsers today is obsolete, making workarounds neccessary to push the web forward. In this case, the trade off is a few extra <div> wrappers in the markup.

However, considering the benefits of the technique, I think it’s worth at least the demonstration. The only practical drawback to the (minimal) added markup is the potential for slowdown if this layout were used on a site with heavy javascript dom manipulation, as it bloats the dom tree slightly.

Also, since I like to build for today, but with the future in mind, this is a technique that gets better with age. When CSS 3 becomes widely supported by browsers and other user agents, the multi background module will allow these same techniques to be even more flexible with no extraneous markup.

The Fun Part

Open the site in your preferred modern browser, such as Firefox or Safari, and use the following commands to change the text size and see how the layout stretches to match:

Mac

Increase Text Size — Command – + (plus)
Decrease Text Size — Command – - (minus)

Windows

Increase Text Size — Control – + (plus)
Decrease Text Size — Control – - (minus)