Creative Suite 6…not really

May 25th, 2010

Since Adobe’s Creative Suite 5 just came out, it is appropriate that I show this imagining of CS6. I created these drawings as brand guidelines for further development into other media.

The fundamental concept behind the designs is physical space, and the tension between flatness and depth. After all, almost everything Adobe’s software produces lives on flat, two-dimensional screens, and it seems that every iteration of their branding moves deeper and deeper into simulating three-dimensions. The most recent CS5 does it explicitly (and gorgeously, I might add), formulating their entire brand campaign around a big 3D  number “5″ with all sorts of realistic physical objects inside and around it.

This makes me think of something a drawing professor told me in art school: design inevitably follows the fine-arts, often decades behind. I suppose I didn’t get it at the time, but in the CS5 branding I see the references to Louise Nevelson’s painted wood collages, Robert Rauschenberg’s mixed media pieces, even Donald Judd’s shiny minimal forms.

Creative Suite meet Louise Nevelson

I’m not sure what artwork my own designs reference… I’m sure someone else can tell me that. But, from my perspective, the designs started with exploration of flat physical media, including scans of back-lit fabric, ink soaked paper, and other oddities. My own abstract drawings and letter forms were superimposed on this background, creating a tension between the flatness of the textures, and the dimensionality of the shapes.

The final layer came in the form of color inversion. The shapes that overlay the background images invert whats behind them, not only changing the color, but reversing their sense of space. The primary, light-colored backgrounds feel (to me anyway) essentially flat, referencing the flat paper and fabric I used to create them. The inversion turns that flatness into depth and space, as if the overlaid shapes are cutting a window into a different scene.

Essentially I wanted to bring Adobe back to its roots, and create a next generation that doesn’t just try to avoid its inevitable flatness, but addresses it in a thoughtful wat. I’m not sure if I succeeded, but if anyone from Adobe is reading I’d love to hear your thoughts.

HTML Wireframes and other Efficiencies

April 15th, 2010

Beginning the process of wireframing a new web project, I wanted to research some of the various software options that designers use. Browsing blogs and such I found that a lot of people use  Illustrator, Fireworks, Vizio, InDesign, etc; these are all tools not designed for wireframing. I also found a pretty neat online tool called Mockingbird,  a web application solely designed for wireframing.  I generally think moving our working process on the web and into the cloud is a good thing in the long term, and this particular tool was easy to use and simple. I was tempted to use it.

But then it occurred to me… why go through the process of creating separate documents at all, which, in the end, will be thrown away once the site is launched. For one person (or a small group) building a website, what is the benefit of creating these external documents? Does the amount of work required for these documents outweight the potential payoff? Why not wireframe directly in HTML?

Creating a simple, unstyled, local site outlining the entire interaction is not much harder, nor does it take significantly more time, than creating complex layered illustrator documents. And even if it does, the amount of time and energy it would have taken to translate the visual wireframes into living HTML is completely eliminated, thus saving much more in the end. If the point of wireframing is to aid in the refinement of the interaction and user experience, then why not use a medium that is interactive. Our ability to test and understand the user process is more direct when we are actually using the interaction, rather than imagining it while deciphering a flowchart.

The HTML elements, CSS positioning, and link structures can all be preserved, and the application can essentially be built before it is designed . Graphic art can then be produced with a fuller understanding of technological limitations and restictions, thus streamlining the often complex give-and-take of applying styles and designs to an interactive framework.

I think this realization falls under the general category of leanness and efficiency in production. I read an article on Web Designer Wall , Going Lean with Website Production, which confirms a lot of my instincts. The idea, generally, is to look at a process step by step, eliminating unnecessary parts and refining the way things are done so as to improve overall efficiency. In web design, I believe that means doing as much up-front usability and product research as possible,  eliminating unnecessary processes like static wireframing, and using trusted frameworks to eliminate errors, aid in extensibility, and improve accessibility.

Whoa! Psychedelic

April 2nd, 2010

My first post about art/design. Stepping away from the technology and math for a bit and into some art process experiments

I have discovered that, being relatively new to the world of digital media, I had become a bit trapped by the tools of the trade. Working in Photoshop and Illustrator all the time has tended to make my work look…well, like it came from Photoshop and Illustrator. Its very easy to get stuck in a box, particularly the big white box that sits on my desk, and the the sharp, shiny, pixel-perfect boxes I would use it to create.

So I am going back to my roots for a bit, into the world of physical things and processes. These are some experiments in do-it-yourself chemistry, using common household ingredients to create images. In this particular picture, the yellow pigment is the spice turmeric, used a lot in Indian cooking. The color changes and patterns come from reactions with  water, salt, vinegar and baking soda…mmm!

Yes, I’ve used my scanner to capture them… and yes I used Photoshop create the color inversions, but thats it I swear! The truth is, I think, that in combining physical and digital processes together, we can come up with creative solutions that wouldn’t have otherwise been possible.