Graphic Language of Ecology


We are working on a project for a company that measures resource usage in buildings and then implements improvements in order to make the building more sustainable. As part of this project we did a lot of research into the visual language that is being used by competitors. I found it striking how related the vocabulary is. Regardless of the brand behind the communication, the language was illustrative and relied on bold color, diagrams and icons more so than photography. Maybe it’s because we don’t know what the future will look like yet?

Dattner Architects Monograph No.2

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…

4 New Web-Typography Tips & Tricks

The other day I stumbled upon 50 Essential Web Typography Tutorials, Tips, Guides and Best Practices, an article on It is quite an amazing collection of best practices for web typography. There are a few tools and tips that stand out:


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.

Kim.Wendell Design is live


Our latest development 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.

STACKD article in Urban Omnibus


I’m proud to announce that STACKD is featured in an online publication called Urban Omnibus that intends to “increase understanding of the city we have and encourage ideas that can lead to a more inclusive, more sustainable, more beautiful city that could be.” We’ve worked hard in getting some of the kinks out of the system in time for the article’s publication and are keeping our fingers crossed that people will sign up and start using STACKD to build relationships with others in their building – or nearby. The article gives a bit of conceptual urban theory background to the project, how we originated the idea as a way to meet other businesses and where we think it could lead. Please let us know what you think, even the bad stuff!

Building a Digital Archive


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 to make the largest digital archive of Asian American art accessible for everyone to learn and enjoy.

Business Cards for SUPERMETRIC


Photo-63 It took us a while to come up with a new design and eventually we decided to keep a lot of the things we liked about our old cards.
—Turns out we like Cyan a lot.

Business Design Meets Interaction Design


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)

Designing for Interaction

Yesterday, I spoke on “Designing for Interaction” in the Urban Design Studio that Kaja Kuehl is coordinating this summer. The quicktime above is without any of my commentary so it may be a bit cryptic. The gist of the talk is that our surroundings can be understood as an intricate system of information. As designers we can have an impact on how people understand their surroundings. For example, subtle visual cues such as color and typography can help to find the right gate at an airport. The example I used in the video is in Madrid. The second part of the talk showcases four of our projects in which we designed how people experience information in a physical environment. The first two projects are exhibitions. One at Van Alen Institute and one at the Architectural League. Both of those are a few years old. The third project is a permanent installation in the Maria Mitchell Observatory at Vassar College. It is essentially wallpaper that completely envelops the entrance space with a large image. The closer you get to the image the less detail you can perceive. The last project is an installation at Rockefeller University acknowledging the Nobel and Lasker Prize winners this institution has produced over the decades.

Site Inspire, No.3

siteinspireBrandfields, a site we designed for Diego Kolsky, is featured at 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.

Time is Running Out


Only 24 days left to apply for this year’s Macktez Summer Stipend. For the fifth year in a row the tech consultancy has been offering $500 to support creatives and their ideas: those just taking shape and those gasping for oxygen with the finish line in sight. There have been some really great nominations and winners.  In 2007 Macktez helped Andrew Sloat finish his video project A More Perfect Union and just last year support was given to Nicole Kenney and her wildly successful Before I Die I Want To. How did we find this one? Because we’ve been Macktez’ ideas and illustrations partner on the project since it started.

Site Inspire(d)

siteinspireWhat a great start into the week! The sun is out doing it’s job finally and two of our sites, LACASAPARK, and VOORSANGER ARCHITECTS, are featured in the show case at this morning.

Inspiration (02)

It’s one of those dumb male cliches, that we love to spend hours at Home Depot. For me this is absolutely true, and these french guys here even make an art of it. Makeshift Guerilla art installations, just pure boy’s fun. They go by the name ENCASTRABLE (I’m pretty sure that means something sexual, as most french things — just to ponder a bit more on stereo types…) Click on the images to enlarge or check out their website — it’s fun!

[Via ]

Van Alen Calendar Relaunch


We have been working with Van Alen Institute for the last two years on a variety of web site related assessments and projects. 6 months ago we launched the first version of their current web presence. We are happy to report that on Friday, we launched an improved version of the calendar – a key interactive feature of the site. The calendar is now faster and more fun to use and displays multiple upcoming events at a glance. To a certain extent web sites are never finished. If you are really dedicated to creating a presence that will draw people back time and again then a site needs to evolve as users interact with it, provide feedback or new ideas emerge.

Stackd gets started


Have you ever had an idea for something and just never got it done because “work” was always in the way? Well we finally made one of those projects happen. It’s called STACKD and it’s meant to put people together for business, collaboration or anything else that comes to mind.

When we moved our office to a 20 story building last fall the elevators became pretty important. Sometimes they’re broken and a crowd gathers. Sometimes people post items that they have for sale. Most days you just squeeze in with a bunch of half-familiar faces and wait it out. It’s not a talkative environment but there are stolen glimpses. I’ve always been curious to know where people go and who they work for and so we built a website to facilitate that. It’s simple really. You sign up, list your company info and find others that work in your building. Once we get going we’ll add a way to sort by industry, post messages and receive notifications.

We’re planning to go knocking on a lot of doors in the next few days to say hello and let our neighbors know what we’ve been up to.

UPDATE: We’re gotten the first dozen signups and a little bit of coverage. Rob Levin of New York Enterprise Report posted earlier this week titling his write up “Know Thy Neighbor” which focused on the social aspect of the project.

© Copyright 2009 SUPERMETRIC FINDS . Thanks for visiting!