Over the last 10 months we worked with the Y Water brand to design packaging for their broad market launch. The first products to arrive in stores within the next few weeks are pouches sold in cartons of 5. We generated all design from the core concept that engaging a consumer has to go beyond applying design styles to a product. We put ourselves into the mind of a 7 year old and came up with as much fun stuff to make out of the packaging as we could. Each pouch has a “lens” in the center. This shows off the color of the organic, low calorie drink but also acts like a magnifying glass. We printed tiny bugs and ants on the cartons so kids can take the magni-pouches and try to find them all. The cartons become thumb wrestling mats when you and a friend stick your hands inside. We’ll show you those next time.

The brand launched to much fanfare as a new concept in children’s beverages in 2007. Yves Behar of Fuse Project designed the first bottles. Kastner and Partners supported Y Water with communications and advertising.

Jorge Luis Borges once wrote a very brief story about map makers who, in a quest to replicate the details of the original perfectly, created a gargantuan map the same size of the country they were illustrating. I’m always struck by how difficult it is to show an image of a website one a website. Should I make it small enough to show at once and loose the details in the typography? Should I crop in to a detail and loose the overall impression? Here’s my newest contribution to the problem: excitingly tilted in a a constructivist 2.0 kind of way. Terrible, isn’t it.

Oh, by the way, take a look at the new website we designed and built for Kliment-Halsband Architects. We did the first one four years ago and they came back to us to rejuvenate. That felt good. Portraits of the partners were shot by the amazing Francois Dischinger.

About two years ago we designed a new website for Dattner Architects. The second part of the job was to help the New York firm put together their second monograph, which took considerably longer but just hit the street and we finally hold it in our hands!

We liked the idea to create two pieces that would showcase the company’s work in the distinct nature of their medium, and at the same time allow them to reference each other through a mutual graphic language. Front and center, book and website refer to the wide range of public and private projects Dattner Atchitects has realized over the years — in lieu of a title, the full list of their their fields of action is stacked in large letters, filling the entire available height and marking the sections projects belong to.

Get “Dattner Architects” from amazon. Funnily enough, at amazon there’s an older design of the cover showing up for the book which they took from the publisher’s catalogue (and which we really really liked because it was a little more mysterious). take a look…

Using a custom font as opposed to a system font has been a huge issue for web designers for a long time. Luckily there is sIFR and cufon, 2 methods we use to realize dynamic rendering of fonts on web sites. The latest browser generation (at least Firefox 3.5 and Safari 4) support the @font-face CSS rule which forces the font to download to the clients computer. The result is quite amazing but the results vary widely between browsers.

-

Speaking of sIFR and cufon, there appears to be more fish in that pond: FontJazz and facelift both offer custom font rendering but in very different ways. While FontJazz appears to be a cufon clone (which appears to work on many, even old browsers), facelift renders images in real time. Not sure if I am tempted to try these approaches as cufon works pretty well for us.

-

csstypeset is a nice tool that allows you to format small snippets of text using system fonts. On the left you have a WYSIWYG editing area and to the right your CSS code is generated. Bookmark!

-

Today everything is about em in CSS, no px anymore. Yeah, I know, how nerdy can it get. But seriously, this online tool helps you convert to em easily and thus enables you to create better stylesheets.

Our latest development KimWendellDesign.com just went live this week. We created this slick portfolio website with blog navigation in mind. Content is clustered into three different categories which can be switched on and off in real-time without re-loading. Content boxes can be re-ordered and – on click of a button – reveal detail overlays featuring a multi-media viewer (image slide shows or video clips). The team at Kim.Wendell Design, a rendering and animation firm, uses a custom CMS tool to manage content. Enjoy and let us know what you think.

Almost 3 years ago we started a project with the Asian American Art Centre (AAAC) in Chinatown to develop a digital archive. Impacted by 9/11, the AAAC received funding from the LMDC to help preserve and document the history of Asian American art in the US over the past 60 years. More than 1,500 files from over 170 artists form the basis of the digital archive. Together with AAAC’s team and professional archivists, we developed and implemented the archiving and cataloging software. Once the back-end was in place, archivists added content such as photos, scanned images, letters, and press articles. Finally SUPERMETRIC designed and implemented the front end of artasiamerica.org to make the largest digital archive of Asian American art accessible for everyone to learn and enjoy.

Duane Bray and Ryan Jacoby of IDEO spoke last night at an IxDA New York event. The venue was Bloomberg HQ on Lexington and 59th. In case you are unfamiliar with IxDA, it’s the grassroots equivalent of a professional organization for interaction designers. The website serves as a forum to pose questions and answers. The group organizes great talks by influential people who are broadening the understanding of what interaction design is. This was the first event I attended and I’m glad I went for a few reasons.

1. I got a glimpse inside the Ceasar Pelli designed Bloomberg building – an overpowering but exciting onslaught of information design and a great example of an open plan office.
2. The food was great.
3. I bumped into at least 4 other faculty from the Design&Management Department at Parsons. It was great to see that they care about their subject and attend events like this.
4. The talk was fun and pretty inspirational in a very pragmatic way. The IDEO process of combining business people and designers on one team in order to create a market ready product just makes a lot of sense, so no surprises there.

Here are my notes (and like I said, no big surprises just a lot of things that clearly make sense)
- Go where people are rather than expect them to come to you
- Consumers expect a conversation with brands not just a monologue.
- The big question on clients’ minds today is “How do we grow without alienating the existing client base?”
- Incorporating the human perspective opens the room to a new approach
- In the current climate companies want to know how to leverage existing assets
- Map the business impact
- Follow the money (value chain and user experience)
- Map the competitive set from a user experience standpoint and from a business standpoint
- Draw the income statement (variable costs, fixed cost, income)

]]> http://supermetricity.com/2009/07/17/business-design-meets-interaction-design/feed/ 0 http://supermetricity.com/2009/07/07/site-inspire-no-3/ http://supermetricity.com/2009/07/07/site-inspire-no-3/#comments Tue, 07 Jul 2009 16:30:21 +0000 Marco http://supermetricity.com/?p=643 Brandfields, a site we designed for Diego Kolsky, is featured at siteinspire.net this morning!

What’s remarkable is that the site has been up for almost 3 years now. It was one of the first projects where we replaced Flash animation with Ajax, and created a custom CMS controlled back-end to feed the site. It’s really nice to see that both, the design and the technology of those virtual things we create hold up for a while.

Just in time for Spring hitting the streets last weekend, our designs for the second series of “Rockefeller Scientists’ Pioneering Discoveries” posters was installed outside the Rockefeller University’s main gate on York Street and 66th St.

The 12 posters are mounted back to back and break down into two different color gradations looking from the south and from the north. To create a consistent look for the extremely different scientific images in the backgrounds, we applied a monochrome half tone screen raster.

This very coarse dot screen (ca. 3 dpi) creates an effect of transformation for the passerby: the closer one comes the more the composition breaks apart into the primary elements it consists of — a little like looking through a microscope…

Using sIFR on foamex.com (rendering VAG rounded)

A while ago we came across sIFR, a method to render any font on a website using Javascript and Flash. sIFR works pretty much this way: you download the package, copy the Javascript into to the appropriate folders within your web project, use the included .fla file to create the master font for the web (obviously you need to have the font installed on your computer) and copy the exported .swf file into your web folder. sIFR takes text from your standard HTML markup (e.g. inside a <h1> tag) and substitutes each character with a Flash character. This is done after the page is loaded (the JS is placed before </body>). If Flash is not available on the target device sIFR nicely degrades to HTML. It’s a solid method but somewhat tricky to install and has a couple of other disadvantages. We always found that the rendering was not as good as using images but we never upgraded to sIFR 3 which seems to be better in this regard. In terms of cross-browser compatibility sIFR did a good job but character spacing is a little bit off between IE and FF/ Safari which makes it difficult if you want to control line breaks.

Using cufon on a transparent div

Recently I stumbled upon a new method called cufón and I decided to use it for a new project. The installation of the demo was really easy and results looked totally the same on all browsers. The method sounds more complex in terms of what technically happens but neither the developer nor the end user notices any of this. Cufón consists of two modules: a font creator converts a font into VML paths (I am using this awesome site) which are then put into the web directory of your choice together with one more JS file. Just like sIFR you are using regular HTML markup and apply a special CSS class to the parts you want to be picked up by cufón for font substitution. Just like sIFR, cufón will also degrade to HTML if scripts are disabled on the target device.

The results are amazing: it’s super fast, excellent rendering and works on all browsers and platforms. The only disadvantage is that text is not selectable as every single word is put in one <canvas> tag. In IE 6 where <canvas> is not available a different method is used which allows to select text but only one word at a time. We are currently developing 2 new projects using cufón and we will post results here as soon as we go live.

Update: There is quite a bit of write-up on the net comparing different font rendering methods:

• http://www.erenemre.com/2009/03/cufon-vs-sifrwhich-one-is-better/
• http://chriskjennings.com/2009/02/introducing-cufon-sifr-alternative/
• http://stackoverflow.com/questions/692990/sifr-vs-cufon-vs-typeface-js

For about 4 years I have been going back to the Nike-ID website, debating over and over with myself which model, what materials, what colors to go with (they make you pick the color of two pairs of laces!) and finally what-the-hell to write on the damn thing. I guess I was just never enough of a sneaker head to get custom made shoes all the time, so in order to not waste the one time I would, I simply I never did.

But then, a couple of weeks ago, we voted to drastically cap our advertising budget at SUPERMETRIC. We canceled all TV spots and print ads (world wide) and decided to exclusively invest in viral marketing from now on. And suddenly I knew what I had to do. I knew my mission, and I knew what the title of that mission was — JUST DO IT.

Oh the shallowness of advertising. But at least I got a nice pair of shiny green sneakers out of this…

When Voorsanger Architects approached us to redesign their website we were immediately intrigued by two things:

First of all, their unique architectural language is applied to a great variety of projects with an amazing consistency of style and a subtle instinct for the ‘genius loci’.

Secondly, Voorsanger Architects understand the importance of good photography as a main ingredient to communicate and market their work in the best way possible.

It was clear that the new web site’s most important characteristic would have to be to play up this equation. A full screen image is the base layer for each screen and navigational elements, and text content are added on top of it in semitransparent layers. The main navigation appears and disappears intuitively as the user’s focus shifts between browsing the main menu and exploring the content of a section or project. Each element only comes into play when it is necessary for the immediate logic of a user interaction.