Thursday, March 15, 2007

Hello again - Check out this flash site

I've been totally swamped doing Flex prototyping and stuff at my job. So no time to fool around with new concepts. A couple of days ago, a colleague of mine forwarded a link to this totally kickass beautiful Flash site. I love how this guy has made these organic images sort of melt onto the screen. And his use of subtle text effects is really nice. Enjoy!

Friday, February 16, 2007

Some books I'm currently reading

I'm currently part of a small team who are working on web applications. We're charting somewhat new territory in that we want to use the latest learnings from Web 2.0 in terms of simplicity, fonts, etc. And we also want to introduce dynamic transitions where appropriate. Yet we still need our applications to convey a feeling of professionalism and polish. The applications will be experienced via users' browsers, but should feel as smooth and natural as the desktop experience on a Mac. It is a balancing act!

Whenever I start a new project or job, I love to grab as many books off my shelf (and from bookstores) that pertain to the work I'll be doing. I then devour them. Sometimes I'm re-reading books I've read many times before. Other times, the material is brand new.

The books I've been reading lately have been mostly DHTML/CSS references (often published by O'reilly). In addition, I've been reading more remedial but essential works to remind me about some of the core principles of user interface design. Two books in this genre that I just re-read and that I'd like to recommend are Don't Make Me Think by Steve Krug and Designing Interfaces by Jenifer Tidwell. The Steve Krug book is short and easy to consume and full of very good common sense web application design advice. And Jenifer Tidwell's book provides a survey of numerous user interface design patterns dealing with all levels of user interface concerns, such as: navigation, widgets, and even colors and background textures. These two books should be mandatory reading for anyone building user interfaces today.

Two more esoteric (to some people!) books are the two I just bought that deal with the design of digital graphic motion. The first one of these two that I read was Type in Motion 2 by Matt Woolman. This hardcover book contained tons of inspirational examples of web sites, ads, network id spots, and other media - all using digital motion graphics. As the title suggests, most of the examples in this book deal with text in motion. (Since many of the user intefaces I'm designing these days leverage moving text, I thought this book would be a great reference for me.)

The other book in the digital motion space is another book by Matt Woolman called Motion Design: Moving Graphics for Television, Music Video, Cinema, and Digital Interfaces. I'm going to start reading this book this afternoon. It covers more ground than the Type in Motion 2 book. And this book seems to contain more of the theory behind when, why, and how best to use motion in digital art and user interfaces. I'm really looking forward to this book.

I've been looking for good references on digital motion for some time now. It seems like there just aren't any books that cover the world I live and work in - where application user interfaces and digital motion graphics merge. Maybe there are some in the pipeline just waiting to be published. Or maybe I should consider writing one! Anyhow, for now the best books that I've been able to find that deal with digital motion graphics are the ones by Matt Woolman.

Wednesday, February 14, 2007

Web App Landing Page Animation





I just created this simple animation for the landing page of a web app for our design group. It will likely change tons, but I wanted to capture this first effort.


The idea (like with many animations I've been doing lately at work) is to created an animated sequence that is interesting and that teaches the person watching the animation at least these things:


1) What kind of information can you find here
2) What is the "personality" of the site (happy, cool, designery, wordy, etc.)
3) Where are the top-level buttons/affordances to use to navigate the site.

I don't really know what are the "best practices" when it comes to moving text, morphing it, etc. But I do know that these animations catch the user's eye. And that if designed correctly, they can bring a sense of excitement to the experience as well as provide the user with an idea of what they should click on first to start their journey at your site.

Tuesday, February 13, 2007

What is organic motion?


What is organic motion? I think that animations like Samurai Jack and colors like Genndy Tartakovsky uses are very organic. And I'm noticing that more and more network id spots - especially the ones on food network - project movement and shapes that remind me of nature and of Art Nouveau design.

I'm trying to learn how to mimic this sort of stuff. Make choreographed movements within web art that make you want to come back for more. The hope would be if I can get a grasp of how to do this well, then it could make its way into "user experiences" I incorporate into the web application design work I do at work and for clients.

Here is a running organic motion web experiment I did. Short but sweet.

A few snippets of Flash tricks

I quickly put this together one day to capture a few Flash tricks that I had discovered and that I wanted to be able to show people. The page is DHTML but each item it shows is some Flash code.

Here the a link to some snippets of Flash.
Just getting started.

My name is Scott. I'm a user interface prototyper for Intuit. What that means is that I get paid to create running "concept car" versions of potential future products. I also create "test driveable" versions of next generation applications - mostly web applications.

People are then paid to sit down and use these prototypes. Their actions and impressions are recorded. By cranking out lots of prototypes in a very short time, we are able to iterate on design ideas very quickly and with little cost to the company. The result is better thought through and more refined designs for final products.

My background is in software engineering. Almost 18 years of it at this point. (Here is my resume.) I've split my time between distributed computing, object oriented design and programming, database programming and user interface programming.

I've got 2 patents. One is for declaring the dynamic interfaces of web services. It is known as CDL or WSCL (like WSDL but it is dynamic). I invented it by myself while contracting at HP. But somehow mysteriously tons of other names (most ending in PhD) piled onto the patent, and I was demoted to one of the co-inventors! A lesson learned.

You can find WSCL here at the w3c.org site. What's cool about CDL/WSCL is that it preceded the more widely used languages such as BPEL. In fact, it may have been the first language for describing the "dynamic" aspects of a multiple-step web service.

The other patent I've got is for this little JavaScript trick that I came up with in the late 90's. I'm sure everyone knows how to do this now, but back in 1997/98 when I figured it out, it was slightly unusual - and therefore patentable.

For the last several years, I've focused in on trying to become very good at the user interface work. For the last 2 years I was part of Adobe's user experience team - where I created prototypes for them using mainly Flash and some DHTML. I was part of the team that redesigned Acrobat 8 and Reader 8. I wrote most of the DHTML that powers the "Getting Started" screens that come up when you first launch these products. I think we should have used Flash instead of DHTML....

In January, I was hired by the User Experience team at Intuit. I'll be doing work similar to what I did at Adobe. But I'll also will be more involved from a "design" perspective as well. I'll be using Adobe Flex and Flash most of the time. But will likely be doing lots of DHTML and Ajax also.

I love the work I do. And since I'm always playing "catch up" in terms of learning about design (typefaces, color, digital graphic motion, icon illustration, etc.), I'm always learning. Its not a bad way to make a living.

Now about the blog. I intend to try to record learnings and cool experiments here. Maybe what I learn and share could help others who are also trying to get their heads around how to create kickass user experiences on the web. Maybe I'll meet a few people along the way. Who knows.

Well, that is all for now. Stay tuned, and thanks for visiting!