The Vostok blog

This is the kind of stuff Mark tells you to justify his totally unacceptable levels of coffee consumption:

(original at Homeowners Insurance)

Hooray! We just got our copy of Designing Obama, a project that came out from Kickstarter in which we appear as Silver contributors, and it really is a great book. Here it is

We want to build the best list of design (interaction, information, industrial, product design and architecture) movies and documentaries of all times. Here’s the deal: write down in the comment section the name of a film or doc that’s somehow design related and, in return, we’ll give you a code to watch any movie in Filmin‘s (Spain’s best streaming service for indie film) catalog for free.

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.

Today we had some spare time to do an iPad wallpaper feauturing our 3-window rocket. Here’s how it looks and the original file for you to use it:

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

Enjoy it.

These past few days have been rather depressing. We feel this way for two reasons:

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?

These are @sebadog‘s notes on the presentation Javier and Mark did at the iPadMadCamp last Saturday. We think they’re great. Especially if you read the tiny letters on the bottom left hand margin  ;) You can see it High-Res here. Thanks for sharing this with us @sebadog. More to come soon…

Here is a great presentation by Harry Brignull about Eyetracking and why it is the perfect tool for misinterpretation. Check it out, seriously:

How much harm has eyetracking done to online newspaper design…

Marco Arment does a great job not only at designing one of the best apps for reading online (Instapaper) but also at explaining all the decisions behind the design. I strongly suggest reading Instapaper Pro 2.2.3 now available, which could also be tittled Instapaper for iPad: its design explained.

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.

Many of you may already know BeBanjo, the multi-talented Madrid start-up that develops software for TV and VOD operators. They recently released Movida, a web-based software that untangles the mess for international and multiplatform rights management.

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!

A simple wallpaper image with our three window rocket:

Downolad the one that better fits your computer:

· Vostok Wallpaper 1280 x 800 (.png file)

· Vostok Wallpaper 2560 x 1600 (.png file)