Our assumptions

We (both minube and us) put extreme attention to what information mattered the most and made it stand above the secondary data. These were our main assumptions:

• Price matters most than company.
• Price (usually) matters most than hours.
• There is the cheapest and then the rest.
• Airlines are better recognized by their logos/colors than by their names.
• Some things don’t need to be a in a filter: price ranges, airline, websites searched, etc.
• Those with flexible dates need a different way to look at it.
• It’s easier to redo the search than to refine through ajax.
• Flight and flight back are consecutive, so let’s show them consecutive.
• It’s likely that your choice will be among the first 10 results (although you may want to see more).
• White space helps people identify choices, it makes everything clearer.
• Boxes help you separate between different types of content.
• It’s better to show just the essential data.

Old and new versions side to side

Minube is always quesioning how they do things and how these things can be improved. I like to say that at Vostok we are not good at innovating but at improving. The old version was good. But good as it was it could be, and should be improved. Here you have both versions side to side:

Facts prove it

We know the new one is more beautiful and more honest. Facts prove it. Raúl (Minube’s CEO) told me about the A/B Test results and the main indicators doubled in the new one. You should check Raúl’s post in Spanish about it.

We both believe

It’s a great thing we have clients who share our believes. Working with minube is always of great pleasure. We have a relationship based on trust and shared values. They also think that beauty and honesty are two of most important principles of good design.

Paul Giambarba

(via Minimal)

(original at Homeowners Insurance)

We also have a promo code for a premium account at Filmin (any movie, any time anywhere) which we’ll give to the person who makes the best list (it’s ok to repeat some movie suggested by someone else). Easy peasy japanesey. A neat gift for little effort.

These are the movies/docs we have so far:

Kitchen Stories (Bent Hamer, 2003)

The Fountainhead (King Vidor, 1949)

Tucker: The Man and his Dream (Francis Ford Coppola, 1988)

Helvetica (Gary Hustwit, 2007)

Powers of 10 (and other films by Ray y Charles Eames, 1977)

The RTVE series ‘Elogio de la luz‘, each episode covering an architect

The Belly of an Architect (Peter Greenaway, 1987)

Sketches of Frank Gehry (Sydney Pollack, 2005)

Play Time (Jacques Tati, 1967)

Full disclosure: We’ve done Filmin’s web redesign and we love it (the service, not the redesign. Well… both). We’ll go into details in a future post.

… and the file (links to the one you have to use, 1024×1024 px.):

Enjoy it.

1. We live in an online world that needs a plug-in like Readability to make it bearable.
2. A divisive but exciting conversation thread powered by iA Oliver Reichenstein‘s image titled “3-5 words per line, just to make it look like paper? No NYT, this is NOT how it’s done”. Well done!

Readability (the service)

Readability, which you probably already know, is a free button for your Web browser’s toolbar that eliminates everything from the Web page you’re reading except the text and photos. You can get the button at the arc90 website. The idea is great. Nobody has said it better than NYT’s David Pogue:

Readability makes the world online a calmer, cleaner, more beautiful place.

But shouldn’t this make us happy? Well, let’s just say that we couldn’t agree more with yewknee‘s view on Ryan Catbird’s tumblr:

Very cool, excellent product, but I can’t help but think of how fucked up it is that this thing even needs to exist. Because here’s a novel idea: Hey Publishers: How about you just stop putting shit all over every single pixel on the screen?

Read the entire comment here.

Here’s a peek of how Readability works using an article from the NYT  Young Americans Embrace Rigors of the Bolshoi (and this newspaper is far from being the most cluttered one out there):

Before Readability

After Readability

So what has Readability done?

• kept the photo that illustrated the article
• got rid of all the mess surrounding it
• changed column width
• increased interspacing

So simple! And now you can even change your settings so that you can see links as footnotes. Here’s a demo in video:

All in all the design blogosphere has been kind of hectic recently. Perhaps the iPad has something to do with this. Javier Cañada (@javiercanada) tweeted a few days ago:

iPad means extreme segregation between good and bad designers. Those who don’t embrace true simplicity will fail miserably.

A great conversation on information design…

… taking place on the less expected place: flickr. This interesting discussion on information design and presenting online content had input from Khoi Vinh, Lukas Mathis, Wired Magazine, Adobe and Hoefler+Frere-Jones where the following topics were discussed:

• legibility Vs. ‘a look’
• replicating print
• scrolling Vs. screen to screen
• eye-scanning
• columns

iA has a great image in their Wired app article showing what a mess columns can actually be (look at all the zig-zagging going on):

Even though we’ve grown accustomed to reading this way, it doesn’t mean it’s the best way. It’d be kind of sad to realize that we arrived to the best solution back in the 1600′s.

A few days ago we read this tweet from @Gatada :

If you combine Readability with Instapaper you’re all set; enjoyable reading by your desk and on the move! + Don’t forget Dropbox for files.

He’s right. But we hate to conform.

Here’s Vostok’s take on the matter: a list of things that should ALWAYS be taken into account when thinking about online design:

are you mimicking print? why? if nostalgia is the answer: forget it.

are you drawing a clear distinction between ads and content?

are you taking care of line spacing and line length? what works best for what medium?

are you using columns? why? and how?

are you understanding and respecting the medium you are designing for? are you making the most out of its possibilities?

are you trying to fit the same amount of content of a 22-inch broadsheet into a 9-inch iPad screen?

Yeah, these are the ones for us. Are there any others we’ve missed out?

How much harm has eyetracking done to online newspaper design…

Marco, who also happens to be the lead developer at Tumblr, dealt with several issues when designing the iPad version of his product:

• Placement of the controls: follow Apple’s lead or do what he finds it’s better (standarisation over effectivity).
• Placement of the action buttons (not where they fit but at the specific spot where you are when you may need them).
• Text margins and line readability.
• Single column vs. multicolumn layouts.
• Color and brightness for legibility (pure black on pure white on a screen is an aberration, don’t get fooled).
• Pagination tap zones (and differences between iPhone and iPad).
• Tipographies.

I wonder why Mr. Arment decided to let the user chose between 6 different fonts instead of chosing himself the one or two he thinks it works better on that context. What do you guys think about this one?

UPDATE:

Marco just answered my enquiry through twitter:

Marco: Because the people who care about fonts REALLY care about them, and appreciate the choice.

I think Hoefler Text works best, so I made it the default. I take the default settings VERY seriously.

To make good use of Movida’s release, we helped BeBanjo in the redesign of their website and their branding. Our goal was to help explain their products better, and to create a simple yet handsome and extensible visual system to represent them.

We started off by exploring a western theme, lots of things fitted in without being overtly obvious: BeBanjo’s name, Spain’s history of spaguetti western cinema, and the folksy personalities of the team (in a good way!).

We presented a couple of options with a western theme (boots, cacti, banjos, etc) and they fell in love with the simple shapes of this hat:

So I made a family of hats made out of lines. However, when you use a dark background and clear lines they seem more complex than needed. So we added a simple rule:

In the end we decided on keeping the logos black & white, that way we can throw almost any color or texture and it still look goods (not that we would do it!).

Head over to BeBanjo.com to check out their brand new website and identity. I’ll talk about the website later!

Downolad the one that better fits your computer:

· Vostok Wallpaper 1280 x 800 (.png file)

· Vostok Wallpaper 2560 x 1600 (.png file)

Jamie Bolton artwork and movie posters

FFFFOUND! | Hello Mark – Alex Cornell

FFFFOUND! | Solar Eclipse on Flickr – Photo Sharing!

Japanese cooks who have special skills prefer knives without any ergonomic shape. A flat handle is not seen as raw or poorly crafted. On the contrary, its perfect plainness is meant to say, “You can use me whichever way suits your skills.” The Japanese knife adapts to the cook’s skill (not to the cook’s thumb). This is, in a nutshell, Japanese simplicity.

The piece, translated by Oliver Reichenstein is also part of a larger article about Japanese aesthetics published at the NYTimes under the title Beauty and the Bento Box where also John Maeda, Nick Currie and Denis Dutton go through the subject.

Worth reading.

The images correspond to El País, El Mundo and ABC.

These structures bleed consensus and politics from every pixel. I’ve been in a couple of these projects and I understand the politics behind a newspaper redesign. All the “we cannot harm our current readers” and “we need to find a spot for this and that” only leads to having the same again and again.

And the constant increase of screen resolution is not helping but increasing the damage. Remember when most newspapers went from 800×600 to 1024? Instead of using those extra pixels to make everything bigger and give some white space they came up with an extra column for junk.

Much has been said about how to renew online journalism. If they just started by questioning these obsolete structures… Jeez… I am so looking for the day when a big exec has the guts to get rid of commitees, consensus and departmental presence to make something different, some design where you see a strategy, a point, a purpose.

Minube.com is a traveller community where everyone shares their experiences, photos and videos. So you can plan a trip based on the experience of travellers along with minube’s flight and hotel search engine.

We’ve used a modular design that uses the entire width. Modules are easily interchangable, so adaptations can be done by adding, removing, and reordering whatever you want. Modules are also very comfortable to read on an iphone.

The users’ expriences of minube have been given prominence on the first shadowed module, which includes the destination search and all the relevant stats (users, experiences, photos and places). Minube is now pretty much self-explanatory, with a glance you know what is it about.

The new homepage is not only clean and lightweight on the visuals: thanks to minube’s stellar programming team, it’s now lightning-speed fast, loading in 1.2 seconds using our homebrewed tests. A very significant improvement over the 4 seconds of the previous version.

Our favourite detail is the realtime display of travellers’ experiences. we wanted to display a thriving community with user participation on the homepage.

Raúl (CEO of minube) has a great post on the redesign and evolution of their hompage.

Google Maps 19th century (via GMM):

Vintage Google search:

(via Ilustrae)

It’s no secret we’re huge Swiss nostalgics, and this is a little homage to one of our favorite typefaces, Helvetica. We hope you don’t mind us being retro-stylish once in a while!

To check it out in action just set ‘Helvetiplanet’ color in your preferences. Don’t have a Planetaki account? Sign up here, it will take you less than a minute, really.

In the movie business, screens and interactive elements have a very low priority in the grand scheme of things (with a few notable exceptions).To really sum it up, there are just three considerations.

The first is to do somethign that sits with the look and feel of the environment and set. The nature of the film always dictates. If it is in the future, then the desire is generally to have a different way of interacting or displaying things, than is currently the norm. It is a small way of differentiating the interfaces. The reality is that these systems might already exists, but are not widely used or known about outside of labs or specialist groups.

The second is the worst part. Prior art. Some of the people involved, directors, production designers, producers, bring with them their own biases, pre-conceptions and pragmatism that can result in less than satisfactory interfaces in the films and content on those interfaces. It is not uncommon to hear people day “I want it like it was in that movie” whether a good example or not. People try to play safe at times and it is not always easy to overcome.

The third and most important part is that the interfaces are there for only two things. Set dressing and story. Irrespective of design and plausability, if they tell the story they are deemed a success by those commisioning. CSI might seem implausable in action and stylistically but they do one thing and one thing well. Tell you what happened or what they have found. This can lead overall to interfaces and systems seemingly doing some very unrealistic things, but in the end the story is all that matters.

Mark Coleran

“How it would be, if a house was dreaming”

The conception of this project consistently derives from its underlying architecture – the theoretic conception and visual pattern of the Hamburg Kunsthalle. The Basic idea of narration was to dissolve and break through the strict architecture of O. M. Ungers “Galerie der Gegenwart”. Resultant permeabilty of the solid facade uncovers different interpretations of conception, geometry and aesthetics expressed through graphics and movement. A situation of reflexivity evolves – describing the constitution and spacious perception of this location by means of the building itself.

It was designed by Daniel Rossa – rossarossa.de and produced by urbanscreen.com.

(thanks, Sergio)

They designed the exhausting multi-touch interface for Minority Report and more recently the intensive data panels at the last Star Trek movie. There is a very interesting interview to the guys in charge at the Flash Blog (Adobe). Yes, they do almost everything in Flash :)

I wonder how the specs are decided:

• realistic vs. futuristic
• intuitive vs. cryptic (hacker-style command line)
• resemble something existing vs. completely innovative
• real data (from the movie) vs. fake content (and data in small type so nobody can read it)
• user executes commands vs. user dialogues with an artificial entity (HAL)
• …

How many movies do you recall where interesting user interfaces appear? Would you help me make a list (and then make a collaborative post out of it)? Ok, here I go with the first that come to my mind:

• Minority Report (multitouch)
• Red Planet (augmented reality devices)
• Star Trek (intensive data displays)
• 2001 (HAL, natural language interaction)

More?

A lot of designers want to increase the line height or padding in order to make the interface “breathe.” We deliberately don’t do that. We want to squeeze in as much information as possible above the fold. We recognize that information density is part of what makes the experience great and efficient. Our goal is to get users in and out really quickly. All our design decisions are based on that strategy.

Irene Au, User Interface Director at Google

Approach B

Yes, it’s true that a team at Google couldn’t decide between two blues, so they’re testing 41 shades between each blue to see which one performs better. I had a recent debate over whether a border should be 3, 4 or 5 pixels wide, and was asked to prove my case. I can’t operate in an environment like that. I’ve grown tired of debating such minuscule design decisions.

Douglas Bowman, Former Head of Visual Design at Google

Which one would you take?

(thanks, Missha)

I’ve spent most of my time to study the basic shapes, this in order to focus on those meaningful details which give meaning to those qualities we live our daily lives with and —somehow— help define ourselves too.

The Context of Form is a short (therefore very good) essay by De Gregorio on how form can be function. Please, read it.

My favorite definition/description/whatever goes like this:

Information Architecture: how it’s structured
Interaction Design: how it behaves
Information Design/Visual Design: how it looks

These definitions are not mine and I cannot recall who wrote them first. I’d appreciate any feedback on it. I am also aware that the boudaries between concepts are not clear at all, especially between the last two. They tend to overlap a lot.

They come just in time for something we have in mind at Planetaki. Thanks, Jorge!!

Well, Cowicide decided he had a fever and the only prescription was… More Cowbell!!

(original location here)