June Watercolors

6 months into my watercolor sketching resolution, and still going strong.  June had me working on an eclectic array of subject matter, from the abstract to the ridiculously illustrative, and utilizing different paper sizes and media (salt, frisket, and more).  Some of these pieces took me the full hour, and others took a scant 5 minutes.  Which ones do you think took the longest?

A linear abstract using frisket and broad washes

Continue reading →

May Watercolors

This installment of watercolor sketches is a bit different from those of the previous months.  Due to extra time I spent on four paintings while on a trip to Hawaii, there are less sketches in total.

Scenic Paintings of Hawaii

These are more fully realized paintings done on an Arches 10″ X 14″ 300lb cold press watercolor block.  It’s my favorite painting paper because it’s sealed along the edges to other pieces on the block, so that warping is minimized, and it is sturdy enough to double as an easel.  While I’m pretty happy with these, I may go back over a few of them to add more contrast.

A painting of trees in Kona area done at sunrise, with the volcano in the background

Continue reading →

April Watercolors

April showers bring May flowers.  As you’ll see from this month’s selection from an ongoing watercolor sketch project, I was inspired by the stormy skies.  Although I said I’d be continuing on a jump rope thread from last month, I got diverted to a series I can best describe as “fun with frisket masking,” sketching lightning, lava and more.  Check them out after the jump.

Not all watercolor sketches need be serious: here is a little humor piece from Easter.

Continue reading →

Designing Kinect-Based Experiences

More than 10 million Kinects have been sold since the depth- and gesture-recognition Xbox accessory first launched in November (selling so quickly in its first 60 days that it beat out the iPhone and iPad for a Guinness Book of World Records award).  Given that it’s aimed at a much larger consumer audience than the Xbox has been, and with Microsoft’s announcement of an official Kinect SDK on April 13, it’s likely more of us will be designing for Kinect-based interfaces in the near future.

I recently partnered with two talented developers to prototype a Kinect-based experience. We had the opportunity to observe more than 30 people use the prototype, which allowed for some great, ad hoc user research.

After the jump, you can read my takeaways and design recommendations based on observations of our experiment.  I’ll also try to post any new Kinect info I might gather from MIX11 next week.

Continue reading →

March Watercolors

It’s time again for a watercolor progress update.  I’m not going to say much in advance about this batch; I continued on a couple of threads from last month (monks) and ended with a thread I’ll likely continue with next month (jumping rope).  In general, this batch is much, much looser than the last two, as I was trying out a process of 15-minute sketches.  Share your thoughts!

More Monks

This is another Avatar-the-Last-Airbender-inspired piece. A monk manipulating fire.

Continue reading →

February Watercolors

It’s time again for another batch of art from my watercolor sketching new years resolution. I’m now going to post my updates at the end of every month.  Here are the sketches from February, complete with salt, snow and monks.  This batch is a bit more fanciful than my previous ones…let me know your thoughts!

A simple texture experiment to simulate a forest canopy using salt, warm green and cool green.

Continue reading →

January Watercolors

My watercolor sketching resolution is (thankfully) still going strong. I’m learning and creating on a very rapid cycle.  And now it’s once again time to share the progress!  From here on out, I’ll share the updates at the end of every month.  For January, I created 19 pieces, 3 more than the 16 I was aiming for. I’ve also included more specific learnings under each image.  Perhaps in the future I’ll also drop in some tutorials.  In the meantime, you can jump to the end of this post to see a list of the supplies I’m using.

A huge batch of yellow flowers had sprouted up in the local orchard. I tried to simulate their texture by spattering paint with a toothbrush, but I had already laid down too much base green and no yellow popped through. I was also afraid spattering the already-painted backhoe. Next time: spatter on to a very light base color, and do this before adding any other elements.

Continue reading →

New Years Resolution: Watercolor Sketching

Like most people, I started the New Year with a handful of resolutions, many of them likely to be forgotten by February. I am happy to report that at least one of them is still holding up. Specifically, my resolution to create four watercolor sketches per week, with the goal of filling one Moleskine watercolor sketchbook every two months. While painting has always been a passion of mine, I can get paralyzed by the desire to create a finished, beautiful piece.  Time commitments, expensive supplies and weather are just a few of my excuses.   To help me address this paralysis, I’ve made sure that my resolution emphasizes “sketch”  (for me, anything taking less than an hour including setup/dry time) over “painting”, which lets me focus on generation vs. refinement.   In this sense, it will help me exercise the same set of skills I put to use when I brainstorm and do early prototyping for work projects.  I also learn something from each sketch. And, best of all, I’ll end up with a bunch of sketchbooks full of colorful artiness! And, of course, some documentation.  Here are scans of sketches done to-date:

A bench. Some colorful leaves. It was cold.

Continue reading →

Surprise and Delight…at the Dentist

Recently, I went to the dentist for my routine cleaning.  Like most folks, I abhor going to the dentist, because I can count about a bajillion other things I’d rather be doing with 45 minutes of my time.

But at this last appointment, I found myself pleasantly occupied by this handwritten list taped to the overhead lamp:

Continue reading →

Free jack-o-lantern stencils inspired by Angry Birds

After downloading and playing the awesome Angry Birds: Halloween edition, I was inspired to do something Birds-related on my own. My first idea, for a Big Fat Red Bird costume made of paper mache, came to me far too late to act on and would have been near impossible to maneuver. I wanted something simple, craft-y, and shareable. Something that could spread some Halloween cheer and be used by my fellow Angry Birds fans.

Thus, I submit to you 7 homemade and FREE jack-o-lantern patterns of my favorite Birds characters. Included in this batch are the pig, the normal red bird, the giant red bird, the yellow bird, the blue bird (you should get 3 pumpkins for this one!), the egg-laying bird, and the bomb bird. Sorry guys, I left out boomerang bird. It’s just not my fave. Read the full post for instructions.

New stencils update! I’ve made additional stencils for Bubbles, the orange bird; Stella, the pink bird, and Al, the boomerang bird; as well as the cast of birds from Angry Birds Space. Find them here!

Continue reading →

Update to Simulated Drag-and-Drop: Create a Fail State

In my earlier post, “Simulated Drag and Drop with Catalyst,” I showed how a horizontal slider could be used to demonstrate some drag-and-drop interactions.  In that case, I showed how a successful (accepted) drop would behave.

There will be cases when you want to demonstrate a failed (rejected) drop.  In this update I’ll show you how simulate a draggable element resetting after it’s been rejected from a drop zone.   This tutorial assumes you’ve set up your file the same way as in the previous example.

What we want to do:
  • Create two states–one in which we can drag the slider thumbnail over to the drop zone, and one in which it’s back in its original position
  • Be able to repeat the behavior without having the refresh the SWF.

Continue reading →

A Squirrely Catalyst Demo

Over the past weekend, I put together a quick and dirty (and cheesy!) Flash Catalyst prototype, to show off the capabilities of this application to my colleagues.  The end result seemed worth sharing.

Here’s a screenshot of, and link to, “Squirrl,” an imaginary web app for finding and stashing tchotchkes.  Its purpose is to demonstrate PSD > Catalyst import, quick component creation, data lists, and custom/generic components. Though this is a mid-to-low-fidelity prototype, there should be enough to fiddle around with.

Continue reading →

Simulated Drag and Drop in Catalyst

(Check out my follow-up tutorial showing how to simulate a drag-and-drop with a fail/reset state)

Recently, I was asked if I could help someone build a Catalyst prototype to help them demonstrate drag-and-drop functionality.   The current version of Catalyst does not yet support this as one of the built-in interaction types.  But, since my goal is to help my peers get on board with using prototyping tools including Catalyst, I set out to find a way to simulate the nature of drag-and-drop using the tools available in the application.

Ultimately, the simulation had to:
  • Allow a piece of artwork to be dragged from one location to another
  • Upon release of the artwork, trigger a state that makes it appear as if the artwork has been successfully dropped inside of a zone.
  • Allow the artwork to be dragged at an angle (given the setup of my peer’s UI)
After a little investigation, I found that hacking a horizontal slider element would be the best way to achieve these goals. It gives the visual illusion of drag-and-drop, and triggers the “dropped” state upon mouse up of the artwork.

I created this “Trip Packing List” demo to show off the basic idea.  Click and drag the bikini artwork from the “Clothing & Accessories” module and release it (while still holding the mouse cursor over the artwork) when it slides over the empty square in the “Packing List” module.

Continue reading →

Custom Tooltip Prototype in Flash Catalyst CS5

I’ve been playing around with ways to simulate rich tooltipping with Flash Catalyst CS5.  I decided to create a prototype around the idea of having a geotagged, map-view showcase of my watercolor paintings from around the world.   In this prototype, I focused on simulating rich tooltips that would contain their own gallery controls to view each location’s artwork, as well as trying to simulate simple tooltips with a datalist element for the large gallery view.

Continue reading →

Shoe Buying & Augmented Reality

Finding the right pair of shoes can be a nightmare. It doesn’t matter if you’re concerned more with style or just have foot-structure needs, the act of buying a good pair of shoes can seem like an endless game of roulette.

Zappos.com, the popular online shoe retailer, has helped make this easier on the shoe buyer. With hassle-free returns and free shipping, you can try on–and send back–an unlimited number of shoes until you find the right pair. Many orders get upgraded to one-day shipping. And you can print out shipping labels and mail back using the same box, making Zappos shopping a timesaving alternative to the hours spent in a shoe store.

Zappos encouragement of try-on-and-return has helped catapult them to success. Many people will tell you that Zappos doesn’t even sell shoes, it sells customer service.

So we won’t argue that Zappos’s gets a gold star for encouraging returns. But I’d like to point out this kind of service only addresses the question, “How do we help customers return shoes that they don’t like?” Perhaps they should perhaps be addressing the question, “How do we help customers find the right shoe, on the first try?”

Continue reading →

Using 99Designs to Get VisDs to Think More Like IxDs

I recently indulged my iconography hobby by entering a contest on 99Designs, the crowdsourcing design website. I like to engage in these competitions for a few reasons:  the short timeframe forces me to hone my conceptualization and visual design skills, I get to work with people I wouldn’t otherwise get a chance to, and I get to try on something new.  The prospect of a decent cash prize doesn’t hurt.

99Designs’s contests make it easy for me to do all of this, without the hassle of vetting freelance clients. All I need is for someone to post a project, and participation is just a matter of judging the design brief, uploading a few files, and checking on the contest holder’s feedback and ratings.

The contest I recently participated in was for 3 application icons.  Instead of just diving into the work, I approached the problem from a more methodical standpoint.  I started with a word brainstorm, followed by a validation card sort, lots and lots of sketching, and final design with the promise of future A/B testing. Certainly this approach is only scratching the surface of what constitutes interaction design but, nonetheless, the resulting icons were an immediate hit. I came away with a win and a great reference.

A snapshot of my process for a recent 99Designs contest

It’s important for visual designers to approach projects with an interaction design mindset, especially when the product will be the whole of, or part of, a website, application or interactive piece.  Sometimes, though, designers either are afraid that these methods will take too much time, or they just don’t have the experience with a user-centered approach.  Yet there’s a growing need for designers with hybrid interaction & visual design skills, so we need to find a way to make the process more approachable to them.

99Designs is well poised to make this happen. As of this writing, there are more than 60,000 designers registered on the site, and, at any given time, there are nearly 200 web, UI or related interactive contests running. If 99Designs just tweaks their contest structure to support a process of discovery, sketching and validation, they could educate these designers and add lasting value to the work they produce.

Continue reading →

Post navigation

Newer posts