You Don’t have to understand music to appreciate it.

JAM with Chrome


Google’s does it again with JAM. I love the interface design and how easy it is to start a jam session. I wish toys like this were around when I was first learning how to make music.

 

About the project:
“JAM with Chrome is a collaborative live music experience in your browser, that makes use of several web technologies and Google products, to allow you and up to three of your friends to jam together in real time. We’ve combined these technologies to bring you the complete JAM with Chrome experience. When you play the instruments, your browser will tell other users browsers which notes to play, how to play them, and how to animate the user interface.”

 

Visit JAM with Chrome »

Read case study »

 

Lovely Music Videos



Resolution Independence

Interface design is rapidly shifting towards a resolution-independent model. As mobile devices, and screens of all sizes continue to increase pixel density we can no longer rely on 72 pixels per inch (ppi) as an interface design standard for the web. Retina displays pack up to 326 ppi, which render legacy web graphics fuzzy and pixelated. It’s not a good idea to simply “up-res” raster graphics because higher resolution raster graphics generate too much overhead causing slower load times, even for users with high speed internet. Luckily, different vector-based solutions are making it easier to implement resolution-agnostic interfaces.

Unicode symbols were among the frist web graphics to be vectorized, which evolved into dingbat fonts, which paved the way for the now mainstream icon fonts. Icon fonts are great for certain interface graphics, but doesn’t promise to be a perfect solution for every graphical need. You still have to deal with font-smoothing and anti-aliasing issues for different browsers, causing icons to render slightly different depending on which browser is rendering the font face. SVG offers a more robust solution over icon fonts for a number of reasons, but icon fonts are still a good alternative for most interface icons and pictograms.

It’s no doubt that resolution independence has become a key factor in creating responsive web designs. Tools and technical standards will always evolve, but great design is timeless. It’s a delicate challenge to gracefully adapt to emerging technologies while also remaining focused on using design to communicating effectively.

Here are a few of my favorite fonts and vector resources for resolution responsive icons:

Modern Pictograms

modern

Pictos

pictos

Entypo

entypo

IcoMoon

icomoon

Fontomas

fontomas

Font Awesome

fontawesome

Iconic

iconic

The Noun Project

noun

Copy Paste Character

copypaste