Archive for the ‘Technology’ Category

State of the Internet Infographic

Monday, February 8th, 2010

via State of the Internet Explained In One Giant Infographic [PIC].

Augmented hyperReality

Monday, February 8th, 2010

via YouTube - Augmented hyperReality: Domestic Robocop.

Twitter Code Swarm

Saturday, February 6th, 2010


via Twitter Code Swarm on Vimeo.

Realism in Applications

Thursday, February 4th, 2010

iPad Apps

…one of the things our grandchildren will find quaintest about us is that we distinguish the digital from the real.

via LukeW | iPad Apps: Physicality and Heightened Realism.

Google Tablet

Tuesday, February 2nd, 2010

Google Tablet

Mockups of what the Chrome OS Tablet UI might look like have been posted to Google’s Chromium Projects site.

There’s also a nice video on YouTube showing off some of the concepts for the tablet UI and several interactions.

iPhone Telephoto Lens

Tuesday, February 2nd, 2010

iPhone Telephoto Lens

via UrbanOutfitters.com.

Wearable Gestural Interface

Monday, February 1st, 2010

‘SixthSense’ is a wearable gestural interface that augments the physical world around us with digital information and lets us use natural hand gestures to interact with that information.

more on s i x t h s e n s e

OSMF Player Skins

Monday, February 1st, 2010

Recently, I had the opportunity to create some skins for Adobe’s Open Source Media Framework (OSMF) Flash Sample Video Player. Even though this was a quick project, I thought I’d put together a post that talked a little bit about the OSMF, the sample video player, and give a summary of how the whole thing went from design to final deliverable.

OSMF LogoWhen I first heard about this opportunity I was a little worried about how difficult it might be to implement any designs I might come up with into the video player. Then I learned that Adobe was working with my friends at RealEyes and that I had a chance to influence the way the skin template for the video player would come together. I was sold.

The nice thing about this project was that a lot of the functionality had already been thought through, so it was purely a design and implementation project for me.

The Design Phase

Every project starts by getting everything that’s in my head on to paper via sketches and notes. I also try to get inspired in some way. Between my sketchbook and some inspiration, I can start to formalize ideas and develop some themes based on goals for the project.

OSMF Sketch

Initially, I struggled with designs, mainly because when I think of a video player, I think of something that should almost be transparent or evident only when I need it to be. At the same time, these skins needed to represent different levels of customization that can be achieved with the OSMF Sample Video Player.

The way I broke through this was to draw inspiration from the visuals that would be displayed through the player e.g. movies, anime, TV shows, etc. I began to explore the idea of having the video player fit the content it would be playing. That idea was carried through the sketches and into some more polished design comps.

Lunar Theme

Cascade Theme

Patina Theme

Core Theme

Formula Theme

Diode Theme

Amulet Theme

I always try to give my designs names to capture a concept and for easy reference, so we’re not referring to things like, “that blue one with the dark glossiness”. The designs that were chosen to move forward with were Formula, Core and Lunar.

In addition to the initial designs, there was also some time spent on developing some color variations. I tried to narrow down the colors to a minimal color scheme of 1-3 colors to make it easy to customize the skins. It was color theory class all over again.

Core Theme Color Variation 1

Core Theme Color Variation 2

Core Theme Color Variation 3

Core Theme Color Variation 4

Production and Implementation

After going through a round of color variations and picking the final designs I got to switch into production mode. I do all my designing in Fireworks, so I brought the designed assets into the Flash skin template that RealEyes was working on. States, animations and other visual design elements were also added once I had the necessary assets in Flash.

All along the way I was testing how the designs looked in the player itself. As I started putting the skins together there was a great deal of collaboration between myself and RealEyes. The result was a skin template that had a nice structure, but also allowed a wide spectrum of customization. You can use a skin and make minor changes to colors and fonts, or you can dream up something completely crazy and implement it very easily. It was pretty fun to work with actually.

Wrap Up

RealEyes kicked ass bringing this thing together and I appreciated them using me as a sounding board for ideas around how the final skin template should work. Adobe’s OSMF team let us do our thing while giving great feedback and direction all along the way. We all wanted people without any programming knowledge to be able to jump into a template and bring their designs to life as easily as possible. I think we achieved that.

You can learn more about Adobe’s Open Source Media Framework on the website. Check there to find out where to access the skins and sample video player.

Your Mom’s Next Computer

Sunday, January 31st, 2010

No, the iPad isn’t for everyone. But I’m going to go on record as saying that, for non-computer-geeks everywhere, the iPad is going to redefine computing.

via Ethan Nicholas on TechCrunch

A Universal Language for Touch?

Friday, January 29th, 2010

It appears there are several new gestures being introduced on Apple’s new iPad. Luke Wroblewski pointed out some he saw in the keynote.

iPad Open StackSince other companies are sure to duplicate the efforts of Apple, it seems their needs to be a universal gesture language or set of expectations that is consistent from device to device. For example, a simple interaction performed on computer is to copy/paste something. You know, Command + C/Command + V. I know I can do that on a Mac or a PC. So, there’s bound to be expected interactions like that for touch.

We’ve already seen things like the swipe, pinch/zoom, rotate and other interactions for touch begin to become a standard, so things are already going that way. Will Apple be the one to determine this language? Will other companies adhere to the same gestures Apple is introducing?

Will nobody care and just do what they want? That kind of scares me as a UI designer because I always leverage things that people are familiar with before trying to reinvent the wheel for the same interaction from application to application. However, I always run across new delightful interactions that really make the experience unique. The thing is, I usually have to discover those and, in a world without tool tips, that discovery is not always something you can rely upon.

Would it matter if everyone did their own thing? Everything in the physical world is interacted with differently, but there are some base level expectations of how you might interact with an object. Would it be wrong for touch interfaces to do the same thing? I imagine it would be some kind of hybrid.