In December 2010, we wanted to serve our community by donating a major brand overhaul to a local, non-profit organization. Grand Rapids Children’s Museum was the perfect fit for this work. Their focus on child development and creative play outlets were incredibly inspiring to us, and we wanted to give them something back for all of their efforts.

We created a fresh, new identity that reflects elements of GRCM’s old identity and stays true to their brand. Custom, childlike typography was hand-drawn to give a sense of friendliness to the identity. To convey GRCM’s expertise on the Value of Play, we juxtaposed a regal serif (Eames Century Modern) against the organic type. This typeface is a modern variation on Century, a typeface often used in children’s schoolbooks.

A colorful block pattern was established in the identity and was repeated throughout the rest of the system. Not only do these colorful squares reflect the tiles of GRCM’s iconic outdoor mural, but they also represented the diversity present within the Museum walls. GRCM is a safehaven where nationality, gender, and age do not exist, and a place where the local community can unite in the joy of childhood playtime and learning.

Brochures

Stationery System

Magazine Advertisement

Entrance Signage

Outdoor Banner

Admission Sign

Sponsor Sign

Bathroom Sign

Read more about the Children’s Museum website here.

Related Links

www.grcm.org

Grand Rapids Children’s Museum (GRCM) advertises every year in Solace, a semi-annual premier West Michigan magazine. After Icavia was given the opportunity to rebrand the museum, GRCM wanted a fresh new look given to their print advertisements, too.

This fresh new messaging features a quote from one of the most advanced thinkers of all time: Albert Einstein. He was often quoted describing how playfulness and imagination were far more important than pure knowledge, and that creatively bending knowledge through imaginative means was of the utmost importance. The folks at GRCM are true experts on play, imagination building, and child development, so the quote from this expansive mind was an apt fit.

Check back soon to learn more about the GRCM rebranding and to view examples of our work.

MyGR6.com is a community-driven experience which invites Grand Rapidians to speak their minds—in only 6 words—about why they love Grand Rapids, Michigan. Though most of the graphic design elements were determined in-house at Amway, Icavia was responsible for the UX design and technical implementation of the digital experience.

The key feature of the site includes the ability for users to enter 6 words about their love for Grand Rapids. After the responses are submitted, they are updated in a live stream so that users can always see what others are saying about their great city. Each user can then print out their 6 words and showcase them in a window, their car, or on their desk at work. Their responses will be judged, and 6 winners will receive prizes that amount to over $10,000 each.

Surprisingly (even to us), it required a fair amount of technical wizardry to execute this twitter-esque campaign. Some of the technical achievements that were implemented include:

• ASP.NET MVC 3 and C# with Razor Markup
• HTML 5
• Mobile friendly (iOS and Android)
• Email verification with a print-ready page to share your 6
• User Experience (UX) tracking

Icavia was recently given the opportunity to refresh Artistry.com, the global brand site for Amway’s flagship cosmetics line. Not only was a bright and enlightening visual direction integral for the site’s success, but also interface compatibility across a diverse range of traditional and mobile devices.

It seems everything digital thrives in the “now” moment. Users relish the instant gratification associated with immediately accessing information via mobile devices (iPad, iPhone, etc.) Often, brand sites offer a limited experience for mobile users; however, the new Artistry.com provides a uniform, fully-functional experience to all browsers and mobile devices. The site was not only optimized for web users, but also for iPad, and iPhone users.

The Dilemma

While working on the launch of the Icavia.com website, we were committed to fulfilling our creative team’s vision and decided to use embedded fonts with @font-face. Soon after, we came across an interesting new dilemma. Not only did our embedded fonts render noticeably different between some browsers, but we also saw inconsistencies between operating systems.

In a less than pixel perfect world most of these minor differences can be overlooked without breaking a sweat. As a developer for a company that takes pride in their work, I have come to the conclusion that in the real world minor indifferences can become the weak link in an otherwise strong design. This is especially apparent when trying to vertically align text within a parent element.

As you can see in the screenshots below there is a small difference not only in the legibility of the text but also, and more importantly, in its position.

See it for yourself

As I was debugging the cause of this issue I decided to create a simple demo to test the nature of multiple fonts between browsers and operating systems. In the demo I remove all extra spacing from each elements and allow the font to dictate the height of each element.

View Demo

It seems as these differences can be boiled down to the font rendering philosophy used by each OS.

• Apple’s end goal is to preserve the design of the typeface at any cost.
• Microsoft’s end goal is to improve readability even if it effects the true nature of the typeface.

The difference in philosophies causes some fonts to be rendered noticeably different between operating systems.

Apple’s philosophy allows for a true depiction of the designed font and scales the font naturally. This comes with a noticeable side effect of allowing the font to dictate the descender and ascender heights.

Microsoft’s philosophy doesn’t represent a very accurate representation of the font and forces the font to fit within the pixel grid. This allows for a consistent vertical alignment of the font but at the cost of changing the properties of the font itself.

A Simple Solution

The true representation of fonts within OS X caused an issue with the vertically aligned nature of our menu. I first looked into a server-side solution to the problem by detecting the operating system used by the user and adding a few custom styles accordingly. We quickly realized that a server-side solution would break due to the nature of cacheing and WordPress. A client-side solution was the only possible answer. After some research into client detection I found a code snippet on quirksmode used to detect the browser and operating system of the user. Using this browser and client detection methodology I created a simple jQuery plugin that can be used to add a class to elements based on the client being used.

Download Plugin Demo

//Example Use of Client Plugin
$(...).fixClient({
    os: ["mac", "windows", "linux"], //excepts string, regex or array
    browser: ["firefox", "chrome", "safari", ...], //excepts string, regex or array
    version: 3.6, //excepts string or numeric,
    filter: function(){}, // custom filter function
    cls: "fix-client" //class to add to match
});

Client Plugin in Action

Below is the snippet of code used to fix the rendering issue described above.

//Fix Menu for Mac
$(...).fixClient({
    os: "mac",
    cls: "fix-mac"
});

Related Links

• Web Fonts at the Crossing
• Font Squirrel : @font-face generator
• W3C Fonts Module

There are already a few clients for the Harvest time tracking service available on iTunes, including an official one from Iridesco, but none that were all that simple. Our goal with this app was to distill its purpose down to its purest form – the ability to quickly add, view, and edit time entries and move on. You can view the Harvest Lite product landing page, or get it from iTunes now.

If you’re interested in trying it out but don’t have a Harvest account, get in touch with us at support@icavia.com. Or, you can sign up for a free account at Harvest – it’s a great service that we highly recommend.