Home

 

Looking for the DxF Conference?

 

 

 

Current selection

 

Next article

Previous article

 

Design

Lifestyle

Photography

Politics

 

Links mentioned in
this article

 

Keeping up with the Joneses Ornament Aug 16th, 2007

Very Important Note: At the time I wrote this, I did so without consulting anyone at Adobe about it. I did so for a couple of reasons, but mostly because I didn’t want anyone to get in trouble in the event any of my legal eagle friends at Adobe felt I shouldn’t have posted it. However, I felt this article was an important piece of Adobe design history that was better served by being out there in the world than not, so I went ahead and posted it anyway without consultation.

Since then, I’ve spoken to a few folks and found out a little bit more of how the CS3 interface overhaul came to be. While I won’t go into details, it turns out that indeed my Joneses concept sketches were an inspiration and a starting point for the CS3 design and engineering team. They took the ideas in Joneses, researched them heavily with customers, iterated on the ideas extensively and prototyped many different approaches before arriving at what you see inside CS3. I should also note that Flash picked up the approach, a mistake I’ve corrected in the article. I want to make sure I acknowledge those that made happen what I could not. I know exactly how hard their task was to make it a reality and what they went through in doing so.

So, I’d like to give a great big round of applause to: Chris Smith, Michael Ninness, Frederick Aliaga, Michael Coleman, Wilson Chan, Marianne Berkovich, Ken Moore, Elizabeth Smith, Eric Berdahl, Jesper Bache, John Fritzpatrick, Tim Beauchamp and Bill Bachman, with whom I go way back.

You guys deserve immense credit for pulling off a massive overhaul of the Adobe interface. I salute you!

- – - – -

Interface designers are limited by the constraints of technology even more so than other design disciplines at this point in time. That is to say, what is possible to design in today’s software is not nearly as far advanced as what other designers achieve in other design disciplines. Architecture and print have had hundreds of years to evolve their core design principles and the technology used to produce their work. Automobile designers are now enjoying a level of technological progress in their field that enables them to achieve amazing feats at a lower cost that still yields great design these days. That kind of progress is still evolving for those of us working in the technology sector.

Given how often I feel limited by what I’m able to do in my line of work, it was refreshing for me to install Adobe Creative Suite 3 and see that the Adobe design team finally implemented the kind of interface approach I had been wanting to do for almost ten years now. While I’m not privy to the intimate details that went into CS3, having left Adobe back in 2004 to start Involution Studios, I can give you some insight into CS3′s approach from my point of view since the interface concept is based off some early concept work I did.

Back in 1999, once InDesign 1.0 finally shipped, the first batch of the Creative Suite was considered complete by my measuring stick. I had begun the process of creating the Adobe common interface back in 1995, when I first joined the company. It was five years of the most stressful work I have ever done as an interface designer, even to this day, tapping me of pretty much everything I had. After five years and with InDesign on the market, I finally saw my work in a complete state. I had at least accomplished the main goal I set out to do.

During the months previous to that moment, I had begun exploring what could be done next. After all, at that point in time, the common interface approach I had been implementing with my design team at Adobe was already five year old thinking. Ancient in software terms. Archaic by today’s standards. I was ready to begin the next stage of the evolution of the Adobe common interface.

I had found the work that Microsoft had done in Microsoft Office 97 to be intriguing at the time. As with most work done at Microsoft, I found they had good ideas at the surface level, but had missed a lot of the small details diving deeper that really turn the corner when it comes to designing software applications. In this case, their configurable toolbars were used mostly as a means for action shortcuts, which led them to cram as many buttons on their default toolbar configurations as they could in an effort to expose more of the actions their products could perform. Further, while they had access to tear off a palette from the toolbars, they missed an opportunity to make the palettes work more dynamically from the toolbar itself without having to tear them off. More on that in a bit.

I found the concept of configurable toolbars to be a compelling interface device. Being able to shuffle controls and buttons around to allow users to create their own workspace was something we had wanted to do for a while at Adobe. Considering the enormous diversity of the user types we had for our products, configurability was always seen as a means to keep as many people as happy with the interface as possible. And configurability was always at the heart of what Kevin Johnston created when he introduced tabbed palettes in the first place to Photoshop way back in the early 1990s.

Another goal at the time for me was to go back to address something Joe Holt, one of the original Illustrator engineers, use to complain about in the work I did on the common interface strategy. He always felt there was far too much line noise and three dimensional effects, muddying the display of the products. At the time I came up with the original common interface strategy — remember, that was 1995, and I had just gotten started at Adobe — I was following the visual trends from Apple and Microsoft and was basically following what everyone else was doing. Everything needed to look beveled and chiseled. But after having gone through the common interface design process up to that point and looking back on it, I knew Joe had been right.

So given the configurability of the Microsoft Office approach and a desire to reduce interface noise, I set about creating a few concept sketches for the next stage of the common interface. One that I wanted to convince the product teams at Adobe to adopt.

Thus, the Joneses was born. (That was my personal codename for the work.)

Figure 1

Figure 1. A general overview of the idea behind a configurable interface for Photoshop with less line noise.

 

Figure 2

Figure 2. Palette’s would be able to be accessed from any icon placed anywhere on any toolbar by the user. This would allow people to place icons wherever they chose in order to create a unique workspace.

 

Figure 3

Figure 3. Palettes would also be allowed to be combined to give people a means to collapse similar functions to be accessed by a single icon.

 

Figure 4

Figure 4. With this new interface structure in place, a user could even configure Photoshop to have a much different layout, accessing palettes only when they needed to.

 

Figure 5

Figure 5. A quick screenshot of Photoshop in Creative Suite 3 to use as a comparison.

 

The first thing you’ll note is how dated the screenshots look. It was always a thorn in my side that the interface for Photoshop back in the 1990s was always limited to pixelated 1980s design aesthetics given the Photoshop engine itself could do all this amazing pixel level compositing and painting operations. But that’s part of the constraint of being an interface designer. Technology at the systems level always lags behind technology at the application level for a variety of reasons that are not worth diving into in this article. Suffice it to say that the Photoshop team had no desire to recreate the core graphics engine to work for the operating system, so we were largely at the mercy of whatever Apple and Microsoft could do at the time.

Back in 1999, while sketching out this concept, palettes had no means to “stick” temporarily on screen while being used. They were either there or not. The kind of interaction needed to make Joneses viable had not been programmed to my knowledge. In order for that to happen, you had to have what I termed a semi-modal state; something that was modal and self-contained like a dialog box, but did not lock out the user from the rest of the interface or require an explicit click of an OK or CANCEL button to dismiss. With this approach, the user clicks an icon, the palette pops open and sticks, the user interacts with it while keeping the palette on the screen. As long as the user clicks and tabs inside the palette itself, the palette would remain on the screen. Only when the user clicks off the palette or hits the RETURN or ESC keys would the palette disappear.

When I pressed the Photoshop team back in 1999 to add this new type of interaction behavior, they balked. Part of the reason why is simple: most Adobe products have very heavy and intricate keyboard interactions. Learning how to use Photoshop is a lot like learning how to play the guitar. How people use their hands with the keyboard and mouse creates a certain feel, and they learn to use it in ways where their behavioral patterns become unique to their means of interacting with it. To introduce this new semi-modal state would require going into the code to rework all of application’s core interface pieces, something that was very risky. If not done properly, the whole approach could break one of the core foundations the product gained it’s reputation on.

In the end, I couldn’t convince enough people at the time to take the risk or invest in the kind of resources that would be needed for a Joneses type of interface overhaul for Photoshop, which I was hoping to use to push the rest of the Creative Suite as well. As such, I decided to leave Adobe back in 1999 with the core pieces of the common interface completed and implemented. I took some time trying my hand at Internet companies during the late stages of the dot.com boom, only to get convinced to come back to Adobe by Mark Hamburg to get Adobe Lightroom off the ground in 2002. (Who am I kidding? I didn’t need a whole heckuva of a lot of arm twisting. Getting a chance to work with an engineer as smart as Hamburg on any project is a no brainer.)

But I did enough pushing to convince the team to let one of Photoshop’s long time über-engineers, Seetha Narayanan, create the code to allow this new semi-modal interaction method to work. To try out the new behavior and see how it felt in real usage, the Photoshop team isolated the semi-modal concept into what became the Palette Well and the pop-up slider controls in version 6.0. While it appears the Creative Suite 3 approach uses an entirely different code base from what existed only in Photoshop to execute on the new interface approach, the end result appears to be what I was looking for back with the Joneses.

The concept of the Joneses and what you see in Creative Suite 3 is basically the same: create the ability for people to configure their interface in a way they prefer to work, while giving them quick access to other features at an iconic level if so desired. Although I have to say I’m disappointed that Creative Suite 3 falls short of letting me arrange icons for palette access horizontally as shown in my Joneses concept sketches, but that’s a minor nit. As far as I can tell, that’s the only thing missing functionally between what I was aiming for back then and what finally shipped this year.

What I most loved about the approach back then is something that I can now finally experience in CS3. The maximized screen state where the palettes exist on the screen and force the canvas to never go behind or cover up the palettes. Yet, the palette wells can be resized while adjusting the palettes themselves to one’s liking, forcing the canvas to never intrude on the palette screen real estate. I find this method of working alone to be worth the entire upgrade to CS3.

So, some things take time I guess. It’s just part of the life being an interface designer so early in the field’s technical evolution. But in the end, it warms my heart to see the concepts from the Joneses implemented in Creative Suite 3. I’m especially happy to be able to use it since I’m now on the other side of the wall.

Now I guess someone over at Adobe needs to get the Dreamweaver and Fireworks teams on the ball and do the same thing.

 

Bullet

Standards rant

Repeat after me Separator Standards do not block, impede or otherwise hinder innovation. Businessmen, engineers or product managers who only care about how they want to implement technology or only care about their own bottom line are the ones doing the real damage in the larger economic picture.

Design by Fire strives to be as standards compliant as humanly possible in spite of the fact that those in charge of developing the technology, the browsers and the operating systems can't seem to to code to the W3C specification with 100% compliance.

However, even though I'm a firm believer in standards, I'm beyond sick and tired of trying to figure out what works and what does not work according to the W3C specification. So while I make every attempt to do the right thing, occasionally I'll just do what I have to get the thing working. In other words, if you run any Design by Fire URI through a code validator and find invalid markup or css, please don't bother sending me an email.

With that little rant out of the way, here are some good articles about the benefits of web standards.

And of course, there's Zeldman's Designing with Web Standards, which is easily one of the best reads from both a practical and technical point of view on the subject.

All of these sources discuss simplification of code, rapid development, smaller file sizes, faster download times, better accessibility for a larger set of users, easier code maintenance and platform scalability - all benefits of standards at a technological level. There's also some ROI discussion on using standards.

Really Simple Syndication is still a pain in the ass

Here's the RSS feed.

RSS Feed
Design by Fire RSS Feed

You should know the drill by now.

Andrei Michael Herasimchuk
Designer

Updated 2010 Separator The quick and dirty summary is that I am largely considered one of the first official interface designers hired by Adobe Systems. That is, the first one hired to do nothing but interface design across the professional product line. I worked personally on the interfaces for Adobe Photoshop, Adobe Illustrator, and Adobe InDesign.

Andrei

One of these days, I'll convince Adobe's legal eagles to let me write a book about all that I have been through while working on those products. I just doubt they'll agree to it in my lifetime. Until, then you'll have to be satisfied with the History of Photoshop, an article written by a long-time friend of mine, Jeff Schewe.

Work

Director, Design Team bullet Twitter
March 2011 - Present

Sr. Director of Product Design
Applications bullet Yahoo!
September 2009 - March 2011

Chief Design Officer, Co-Founder bullet Involution Studios
July 2004 - September 2009

Project Lead, Adobe Lightroom bullet Adobe Systems
December 2002 - June 2004

Director, User Interface bullet ePeople
April 2001 - December 2002

Director, User Interface bullet Impresse
January 2000 - April 2001

Director, User Interface bullet Mambo.com
August 1999 - January 2000

Senior User Interface Designer bullet Adobe Systems
August 1995 - July 1999

Co-Founding Member, Director bullet Specular Int'l
June 1990 - August 1995

Play

Having the opportunity to work on Adobe Photoshop and Adobe Lightroom has given me a chance to explore photography in way I would not have had access to otherwise. You can find samples of all my personal work on this web site, and unless otherwise noted, everything here is photographed by me.

For a short period of time, I was exploring a screenwriting career. I had a script optioned by Hyde Park Entertainment (a division of MGM), a studio that has since gone under. I even had an agent in Beverly Hills for a short period of time.

I enjoy playing poker on the side and find the game infinitely fascinating. I have made the final table in a few bigger tournaments. One at The Hall of Fame Poker Classic and the other at the Bay 101 Open, but no World Series of Poker bracelet for me yet. I have had the opportunity to play against some world-class poker professionals and have gotten crushed by them.

In my off time I play bass guitar and far too many video games.

Publications and Awards

Industry Awards bullet 1995-2000
Adobe Photoshop, Illustrator and InDesign have won far too many awards than is possible to list here.

The History of Photoshop bullet February 2000
An article written by Jeff Schewe for Photo Electronic Imaging Magazine. This covers the history and development of Photoshop. A copy of this article can be found here in PDF format. You can also find another copy on Jeff's web site, Schewe Photography.

Design Graphics, Cover Story bullet June 1999, Issue 46
This article covered the work I did on the redesign of the professional product line while at Adobe.

Collage with Photoshop bullet 1994
This book features 14 digital artists using Photoshop and Specular Collage. I'm only mentioned in the prologue, but the book was created to promote Collage and what digital artists were doing with it at the time. I'm still fairly proud about the book and the work produced inside of it.

Education

Amherst College bullet 1989 to 1990
Left Amherst College to start Specular Int'l

The Hill School bullet 1984 to 1988
College preperatory school.

Contact

andrei@designbyfire.com bullet To avoid getting tagged by my spam filter, be sure to create a meaningful subject line.

Colophon and other details

Design by Fire v4.0 Separator A quick overview of the design and implementation of DxF for those who care about such details.

Browser Support

If you are viewing Design by Fire in either Firefox or Safari, congratulations! You are experiencing Design by Fire in the manner it was intended. If you are using Internet Explorer 6.0 or less, you have my sympathies as you are getting a version slightly less dynamic. The reason for that is due to Microsoft's lack of support for the CSS property "position: fixed;" plus a few other things.

Get Firefox

Bottom line, Internet Explorer promises to fix these things in version 7, so in the meantime you can either download the beta for IE7 or switch to Firefox.

Typography

If you have purchased the Adobe Creative Suite, you should have Helvetica Neue installed in your font library. If so, then you are reading Design by Fire as it was intended to be read. For everyone else, you are either seeing Lucida Grande or Arial.

Fonts

Clearly, Helvetica Neue is far superior.

As for the logotype of Design by Fire, it's set using the classic Bodoni typeface, complete with ligature for that extra flourish.

Content Management System

This version of Design by Fire is managed using WordPress. So long MovableType.

Copyright Information

Design by Fire is ©copyright by Andrei Michael Herasimchuk. All rights reserved.

You may not use any material, articles, logos, essays, technical illustrations, photos or any content from this site without expressed written permission.

Design articles

This page intentionally left blank Bullet Oct 31st, 2008

Keeping up with the Joneses Bullet Aug 16th, 2007

Introducing Spivot Bullet Mar 5th, 2007

The unfortunate death of Helvetica Bullet Oct 23rd, 2006

An Open letter to John Warnock Bullet Aug 28th, 2006

Convenient Lessons from An Inconvenient Truth Bullet Aug 2nd, 2006

The kids aren’t alright Bullet Jul 17th, 2006

The Culture of Fugly Bullet Jun 25th, 2006

Please make me think! Are high-tech usability priorities backwards? Bullet Oct 10th, 2004

Rebranding the World Wide Web Consortium Bullet Sep 30th, 2004

You say toe – may – toe, I say [expletive] that Bullet Aug 17th, 2004

Gurus v. Bloggers, Round 2 Bullet Jun 20th, 2004

Design Eye for the Usability Guy Bullet May 18th, 2004

Et tu, Brute? Bullet May 6th, 2004

I would RTFM if there was an FM to FR Bullet Apr 30th, 2004

The Art Center Design Conference, Part III Bullet Apr 27th, 2004

Gurus v. Bloggers, Round 1 Bullet Apr 9th, 2004

The Art Center Design Conference, Part II Bullet Mar 31st, 2004

The Art Center Design Conference, Part I Bullet Mar 29th, 2004

Redesigning Google’s search results page Bullet Jan 25th, 2004

Lifestyle articles

Welcome to the new school, same as the old school. Bullet Jun 19th, 2006

Bubble Boy at the Bay 101 Shooting Star Bullet Mar 1st, 2004

Beginner’s Tips for Poker Bullet Jan 31st, 2004

Crucial mistakes against Scotty Nguyen Bullet Dec 10th, 2003

Photography articles

Santorini in black and white Bullet Jun 17th, 2004

Santorini in red Bullet Jun 9th, 2004

Santorini in blue Bullet Jun 8th, 2004

The Art Center Design Conference, Part III Bullet Apr 27th, 2004

The Art Center Design Conference, Part II Bullet Mar 31st, 2004

The Art Center Design Conference, Part I Bullet Mar 29th, 2004

Party like it’s 1999 Bullet Jan 10th, 2004

An Oakland Rave Bullet Jan 10th, 2004

Random favorites from the shoebox Bullet Jan 10th, 2004

Portraits of Donna and Alexa Bullet Jan 10th, 2004

Politics archive

How terrorism works Bullet Sep 10th, 2004