SEARCH

MIX10 is Microsoft’s conference for web designers and developers. This year’s event will be taking place in Las Vegas March 15th-17th giving “designers and developers the opportunity to learn about Microsoft’s broad web platform and tools that help bring together clients, servers, and cloud services needed for creating great rich web applications.”

Me and Kristi will be hopping on a plane on Sunday to represent the Plexipixel team. We’re excited to meet and interact with other folks to get some insight on the future of web, and the continually blurring boundaries between content, media and commerce.

Some stuff we’re excited about:

• More details on the Windows Phone 7 Series (aka “Vicky’s next phone”)
• Bill Buxton’s keynote – last year I made the whole studio sit and watch the video from Bill’s Day 1 keynote because it was so inspiring. I’m sure I won’t be disappointed this year, either.
• MIXOnline’s secret den – Matt and I had a Top Pot Donut break with Thomas Lewis, the Director of the MIXOnline team last week. Apparently, his team is creating a cozy get-away with custom furniture. If the design inspiration is anything like their limited edition MIXOnline Sketch Book, you know I’ll be happy.
• Karsten Januszewski’s session “Incarnate: Behind the Scenes” – We built the Incarnate WordPress Plug-in (with Andy’s amazing WordPress expertise) so of course we’ll be there to support Karsten—but especially because he’s a super nice guy and an awesome client.
• Silverlight Games for Mobile – That’s what the agenda says…

Some peeps we’ll be partying with:

• Josh Santangelo of Stimulant
• Jon Rooney
• Paul Sanford
• David Shadle
• March Rogers
• you?

Here is a rare peak under the hood of the creative process behind our contribution to Zune: the game Sudoku. The game is available now as part of the Zune firmware update.

Challenges

As with all projects, there are a few parameters from the client and expectations for a successful product:

-    Create original art and assets for use with XNA development practices.
-    Work with Zune development team iteratively and remotely.
-    We would not be able to “preview” assets in real-time or use an emulator.
-    Design for localization (English, Spanish, German, French, etc).
-    Full traditional 9×9 grid and smaller mini 6×6 game play.

Wireframe

The objective of Sudoku is to fill a 9×9 grid so that each column, each row, and each of the nine block regions contains the digits from 1 to 9 only once. The Zune team supplied a basic wireframe and a few game play suggestions. Playing Sudoku on paper is a consistent experience, but playing online varies widely – with very few conventions. We started our design process by playing some of these versions online and thinking about extrapolating behaviors to the Zune controls.

Visual Concepts

The visual design was our major contribution to the project. There are already quite a variety of themes already on the web, so we tried to develop 3 very different visual directions for the Zune team to consider. Giving the concepts names – “Telephone” “Tron” and “Japan” – not only made it easy, but instantly crystallized the inspiration. It’s a technique that we plan to move forward with in future visual explorations.

Refining the Direction

The Zune team went with “Japan” and we collaborated back and forth on elements of game play and adding a little more visual distinction to the game. This included developing the menu style, refining the commit/notes mode interaction and the mini game version. During this phase, we iterated closely with the Zune team on image production assets (or sprites) for the XNA development process.

We affectionately refer to the final look and feel as “Genghis Khan” or “Indiana Jones” It was rewarding to see it come out last November… and who knows, hopefully we will get the chance to do more games like Sudoku.

- T.

Roshamboom began with just another fun distracting link from Jesse. Someone had taken the time to create a game of Rock Paper Scissors using 101 different gestures. Its tag line was “The most terrifyingly complex game ever.”  It was displayed in a kind of chart of what beats what, so you and a nerdy friend could memorize the 101 gestures and 5,050 outcomes and intrigue and baffle everyone that sees you playing it…awesome. This reminded me of my quest to produce the most difficult maze in history. Ah, high school.

Around the same time Jesse introduced us to this game, we were having a much belated wrap-up on a project that didn’t sail so smoothly: designing and building a load of Silverlight controls. Nobody in the design department was familiar with building anything Silverlight, but we were confident and optimistic. Our positivity died painfully. While working on this project the tension in the design loft grew arms and legs and ran around stabbing us all in the side with thorns. We could also hear screams next door from the dev loft. The theme of the meeting was how to avoid this monster tension in the future, and we all decided it was best to make a Silverlight GAME! For FACEBOOK! Because there weren’t any yet and we’re THAT GOOD! I believe it was Andy that suggested we build “The most terrifyingly complex game ever” in Silverlight. It could have been Lisa. Everyone agreed. Yes, this was the solution to our chagrin.

I took another look at the RPS101 website, and found that the more I familiarized myself with it, the more impressive it was. The creator didn’t just figure out the game, he gave it real hilarity. The ridiculousness of “Paper covers Rock” was furthered 5,047 more times in ways like “Monkey flings poop at King,” and “Queen’s bosom is Mountain.” Genius!

Ian, Stephanie, and I had fun designing the controls and working out the functionality. Inspired by airplane safety information cards and the ViewMaster, we all came up with different screens and eventually married them all to create what is online now. I believe it was Matt that suggested we ask Lisa’s friend’s class of 2nd graders to draw some of the more appropriate gestures, which Stephanie used to design the ranking system.

We showed it to the creator, David C. Lovelace, and he had this to say:

“Roshamboom is awesome! Everyone at Plexipixel really did a great job with it. RPS-101 took a year to develop on my end, so I was impressed at how well its complexity was preserved in this very engaging, addictive new version. I like the “view all” functionality, the challenge history, and the interactive way it publishes match outcomes on your page. It’s just brilliant. I can finally play this game the way it was probably meant to be played — not even I can really be sure! — since I never expected anyone to actually remember all 101 throws, and certainly not all 5,050 non-tie outcomes!”

Hooray!

Interactive projects start innocently enough… a few wire-frames, examples of related functionality, some polished comps, maybe even a robust prototype or two. But the reality is that folks want to fast-forward to the end… and that is when the real work begins.

“You know… I will know when I see it, feel it, hear it and can play around with it. Then I can show it to a few others and let them do the same. Then I can give you feedback.”

You know what? They’re right.

You can call this Client-Doesn’t-Know-What-They-Want syndrome, but I prefer to use a phrase lifted from the 9/11 commission: “Failure of Imagination”. And it is a condition that affects everyone in the industry, whether designer, programmer, manager or client.

Historically, the technology has not been there to support this cut to the chase.

A console game needs character art, game play mechanics and level design before someone can “play around with it”. Ask any game developer, and they will admit they (or you) really don’t know if a game is fun or not until all the pieces are in place together.

In interactive design, tools and platforms such as Flash, Java Script, AJAX, Wordpress and Facebook offer the potential of near-instant feedback and execution.

As an interactive designer, I used to chalk it up to the world being impatient when a client wanted to see the final version right away. But then I realized – I am just as guilty. We designers don’t imagine – we try out 14 different color schemes or 22 ways to situate a 3rd party logo on the header. Then we show clients the best two options to choose from.

In my experience, I see the processes proposed early in the days of the internet dying out. Stepping clients through rigid or formal phases and methods is tedious, but also has a dangerous consequence – it ultimately may not serve the end product.

Let’s consider a practical example where you are the client: apartment hunting.

“Like New Unit. 1200 square feet, 2 bedrooms, great location and easy bus access.”

Ever looked for an apartment without seeing it? You feel blind no matter how much hard information is given without “checking it out” or experiencing it yourself firsthand. Before plunking your money down on that space, you want to know exactly “What it will feel like.”

So how do we face this challenge in the interactive world?

We can’t build apartments, townhouses and residences in every locale and possible configuration looking for the exact right fit.

I don’t have the silver bullet (I would love to hear your thoughts), but here are some initial ideas (and a few hard realities).

- Acknowledge Customers Always Expect More. We are a service industry… and like drive-thru espresso, high speed internet and call ahead restaurant reservations, (we as) consumers expect service to get quicker and better.

- Trust. This is earned and not given. I think most designers try to play this as a trump card, but I find it more effective as a gentle reminder: “You hired us for our talents, right? We’re in this with you together.”

- Don’t Ignore Steps. You may choose not to expose every scrap of an idea to the client, but trying to ignore things like project objectives to start working on visuals will always come back to bite you.

- Learn What Not To Do. As GIJoe would say… knowing is half the battle. Learning how NOT to repeat prior disastrous paths is step one in repeating success.

- Iteration. Personally, I have found this to be the most successful. I have worked with and under a number of processes (Agile, Scrum, Daily Check-ins, rapid prototyping frameworks, a combination of all of the above, etc.) In the end, it simply comes back to executing an idea and proving it works.

- T.

Anyone that creates a product of ANY kind needs to know the answer to this question. Admittedly, it’s a bit of a no-brainer. From websites to winnebagos, the more you know about how your product will be used, the better off you’ll be. It’s always interesting to take a look at a product that, in my opinion, completely missed the boat when it came time to decide on a visual identity. The people behind FABULOSO didn’t only miss the boat; they forgot to buy a ticket.

I’ve walked by this product six times in the last three days. It’s currently sitting on the sink in our design studio. EACH time I pass it I wonder if someone has set out a tasty beverage they’re wanting to share with the rest of us. See those apples and pears on the label? Yum! Looks fruity and refreshing. And the new, easy grip bottle? Reminds me of a jug of Ocean Spray. From the see-through plastic to the 2-liter lid, Fabuloso sends off enough “DRINK ME” signals to make me parched every time I walk by it. I’m tempted to gulp it down even when I know what it is. And what it is is toxic.

Fabuloso is a multi-use cleaner, a product that’s supposed to get rid of soap scum and make your linoleum sparkle. It’s not supposed to look drinkable. And yet it does. It looks like something you’d pour yourself a glass of after a trip to the gym. It looks like it replaces electrolytes. It looks like the drink a thirsty child would grab if they were all out of Sunny D. It’s suffering from a serious design problem. To be fair, the makers of Fabuloso have designed their product with a child safety cap, but if it didn’t look so appealing, children probably wouldn’t reach for it in the first place.

Do the makers of Fabuloso want their product to appear fruity and delicious? I’m sure they don’t. A design team made some poor decisions in portraying what the product is used for. It’s a mistake that could have serious consequences.

By fully understanding how a product should be used (and in this case, how a product SHOULDN’T be) a designer can make solid choices that help eliminate any confusion as to what the product is. They can ensure the choices they make will be perceived accurately, in accordance with the product’s intentions. A big reason many of us got into design in the first place is to make the world a little less confusing, and products like Fabuloso are a great example of the power that design has on our senses and perceptions. No one should get thirsty when they see something toxic. Designers can communicate a lot better than that.

For the record, I’d much rather have my multi-use cleaner look like this. This doesn’t look thirst-quenching. Not in the slightest.

Check out the Arbito/Danny Kass Nike collaboration. It’s HOT! HOT! HOT!

Read more about the collection and animation on Arbito’s blog.

In mid November I took a trip to San Francisco for the Adobe MAX conference. I left a few days early so that I could attend ADIM (Art Directors Invitational Master class), a pre-conference event hosted by Russell Brown an adobe tips & tricks master! ADIM is basically an annual outlet for graphic designers to break away from their daily grind, to network, to dress up in crazy outfits, and to create a fun theme based project that uses the latest and greatest techniques and technologies being used in the field.

This year’s project, based on the theme Jurassic Safari, was to create a lenticular poster using Photoshop CS4’s impressive new 3-d tools. When it was time to show off what we had created it was clear that some of the ADIM veterans had been working on their projects long before the conference had even began. Maybe next year I’ll come more prepared because the creator of the best project won a copy of the Adobe Master Suite collection! The Adobe MAX conference kicked off with an over the top keynote session introducing new Adobe products and new technologies. The session was set up more like a concert than a conference with an exciting light and screen display and an impressive DJ. The keynote also featured guest appearances by Bud Albers, the CTO of Disney Interactive and the first lady of California, Maria Shriver, who declared that she thought she was at a Star Trek convention, which for a good number of the software geeks in attendance was most likely a compliment.

The next few days at MAX were filled with plenty of sessions showing off the new features found in CS4. A few of my favorite new CS4 features: Photoshop’s content aware scaling tool; Illustrator’s use of multiple art boards and blob brush tool; and Flash’s object based animation and bones tool.

One of my favorite sessions was a presentation by Simone Legno, the uber talented creator of the popular brand Tokidoki, who talked about his career path and the inspiration behind a few of his many awesome characters. It was especially cool to hear Simone explain his thought process behind the creation of my favorite Tokidoki character, Sandy. Sandy, as Simon explains, is a naïve and vulnerable little girl who protects herself from a scary world by wearing a cactus suit. Sandy is one of the many endearing characters in Tokidoki’s collection. Simone Legno’s illustrations have made their mark on today’s popular culture, and his amazing success story is such an inspiration to a young designer like me.

Overall the Adobe MAX and ADIM conferences were a great experience, I learned more than my brain could possibly absorb, made some talented new friends, and came home with almost 15 pounds of swag!

We had a great visit the other week with some lovely people from Adobe who were looking for some design-house feedback for a future release of Creative Suite while they were in the Seattle area. We had a lot of fun and it was an honor being ask our opinion of what should be included in the next version of such a great and epic product. But we really enjoyed the compliment we were paid afterwards. They seemed really excited about how we embrace new technologies and express creativity, the collaborative way we do it and even said that we were in the “upper echelon”!

Sometimes it’s nice to have a reminder step back and admire our vision of working with great people to do great work.

Those Hiberts are busy!  Snaggs will be in a group show at Giant Robot New York with Le Merde and Scrappers from June 21 to July 16. 

Arbito has a print in the “Now Showing” Poster Show at Cosh in London.  The show runs through June 13th, 2008.

Kristi and Matt created the animation, designed and developed the original Photosynth site a few years ago (it’s morphed a little since then).  Photosynth was developed in conjunction with University of Washington and Microsoft researchers and Seadragon technology. 

Photosynth technology was used in the “CSI:NY” episode last night with just a small amount of Hollywood magic.  It’s a pretty crazy application so it might have seemed like a bunch of hocus pocus, but nope…  It is actually that cool.  You can even download a demo of the application and try it out yourself.