Close

So, how can we help you?

Tell us a little about you and your project and we will get back to you quickly.

Send
Where We Are with Languages

March 7th, 2012 Josh Olson Josh Olson

We’ve been getting a bit behind with our coverages of the development of Languages, alas! So let’s do a bit of catch up to bring our coverage back into real-time.

Last time we talked about how to build a fantasy app by using magic. That led us to a list of features to put in version 1.0 and wrapped up strategic design. Now we can rocket on to the second stage of our process: interaction design.

Interaction Design

Screen Shot 2012-03-07 at 9.43.52 AM

The purpose of interaction design is to design the app’s interface while focusing on the ways in which the user interacts with it. Thus it’s not simply spatial—figuring out what buttons go where; but it is also temporal—related to the user’s experience over time. Interaction design demands an empathetic imagination, because the interaction designer must always bear in mind, as they are putting down buttons, the ways in which the user will interact with the buttons. Interaction designers must be able to look at what they are designing from the user’s perspective.

The way we did the interaction design for Languages was typical for us. First, I did a first draft of the interaction design in OmniGraffle (which is an excellent tool for designers). Then I presented the draft to the team. We then went into a cycle of design and iteration that is still ongoing. Generally I make a first pass at a design and then Jeremy refines and massages it to perfection—all amidst a vigorous feedback loop.

Screen Shot 2012-03-07 at 9.44.24 AM

Here is one of our early wireframes of the primary dictionary interface. Things have changed a lot since this iteration.

We decided to start the app off with a home-screen that would be a bookshelf containing all of the language dictionaries. The idea was that users would tap one of the dictionaries to access it (a la iBooks).

Visual Design

Although we are still wrangling with interaction issues, we have also begun the third and final stage of design: visual design. This is the part where we make the app real pretty. This is also the part where we make the app delightful and add those little touches of fun and humor.

We do visual design in the following steps. First, we decide on a visual theme; in the case of Languages, we decided on a physical dictionary metaphor. Second, we decide on a color scheme; in this case we decided to go with earth tones with a brown emphasis. Third, we decide on fonts. And finally we roll up our sleeves and begin thrashing away. We decided to have Jeremy take the lead on the graphics for the dictionary, while I got to design the shelf (Christain, one of our interns, has been designing the icon).

Screen Shot 2012-03-07 at 9.50.10 AM

Behold, the shelf!

As things stand now, the shelf is basically completed, with only a few minor refinements left to do; meanwhile the dictionary interface is in a state of flux due to some revolutionary and very exciting insights that Jeremy recently had. He’s going to talk about all of that in an up-coming post.

clicking on ".more" toggles class "visible" on "#popover" clicking on ".page" removes class "visible" on "#popover"