THE COSMONAUTS

We invited Victoriano to come over and have a coffee and he made some pictures of us in exchange. Too bad Timo was in Germany that day. Here are the pics:

Today is Canada day. We salute all canadians around the world especially our own Mark McKay who’s in Canda right now and will be there for a month. We’ll sure miss him.

So, to commemorate such a grandiose day here is our favorite canadian hymn ‘Canadian, please’ by Gunnarolla. To celebrate, people have been remixing the original video.

Very sharp article by Alberto Romero (Denegro) about the use and misuse of available space in Gmail for iPad: Back to sidebars and popups.

It left me thinking about Planetaki and its iPad version, whether it should have a sidebar or not.

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

(original at Homeowners Insurance)

Hi Everybody,

I just wanted to say thanks for sending a t-shirt all the way to Alaska! You have a great portfolio. Keep rockin’ the minimalism.

Mikaela

No, thank you Mikaela!

Hoverboard. Nils Guadagnin. Back to the Future!

And if you believe (as I do) that Back to the Future is one true source of innovation and inspiration, check this delightful poster by Justin van Genderen:

In the end we came up with a pretty good compilation of design films. Thank you. We’ll make a selection and post the final movie list soon. Finally, I guess you’ll all agree with me that Mr. Guersenzvaig deserves that premium account. Congratulations to you, sir!

We hope you’ve all made good use of those Filmin codes and that you’ve liked the experience.

Alicia Chen did the Chinese (Mandarin) translation of Planetaki and now it’s available for you to use.  You can switch languages from the “preferences” link on the top right-hand of your planet. FYI: Planetaki is also available in Spanish, English, French, Italian, Galician and Romanian.

Here’s the announcement in video. Enjoy (especially after 32s).

Thank you Alicia :)

We’re looking to translate Planetaki to the following languages:

• Russian
• Hindi
• Dutch
• Arabic
• Greek
• Turkish
• Korean
• Polish
• Slovenian
• Bulgarian

Planetaki’s a small startup with little funds so we can’t pay you for your job, but we’ll give you a cool gift and you’ll have your name on the credits :) If you’re interested give us a shout hello@vostok.es

So far, the lanaguages available are:

• Spanish
• English
• French
• Italian
• Galician
• Romanian

And the ones that are in process, and you’ll be able to use soon, are:

• Chinese (Mandarin)
• German
• Portuguese
• Euskera
• Catalan

This is the kind of mess you get when you create an account at Eskup and first log in:

For those of you who don’t know, Eskup is a kind of social network, twitter-like, microblogging plattform which merges Elpais.com content with user generated microposts. Kind of like the dull answer to “how do we, newspaper, take advantage of social media?”

El Pais seems pretty excited about this. Their excitement is directly proportional to my skepticism. They’ve done a great deal of programming for this and they’ve taken risks, which is good. But they URGENTLY need to rework the design and functionality so the product is more understandable and easy to use. Otherwise it will be another missed atempt at redefining online journalism in Spain.

My name is Timo Taglieber, and I’m developing the Planetaki iPad App for Vostok. I came to Madrid just for this project, and it’s been great so far. In the following, I’ll describe some of my experiences here as a developer.

Before starting my ‘mission’ here at Vostok, I had a bit of experience with the C language, and felt comfortable with Python, Java and PHP. So naturally, it was time for something new. I had no contact whatsoever with Mac development, and took the opportunity to dive into it.

I recently bought an iPod Touch, so that at least the iOS and its user interface wouldn’t be completely new to me. Now it was time to go behind the scenes of shiny buttons and polished layouts: I started to build the iPad Application for Planetaki.com from scratch. Here are some of the obstacles I encountered.

Problems and solutions

• While the web version of Planetaki is rendered by browsers, we wanted to build a native interface. This means that some things you take for granted when web designing simply don’t exist on the iPad. Where you just scroll down in your browser window to read the content of your planet, I created a table view with customized cells for each blog post. Since there is no automatic rendering of flowing text (we can’t know the height of a post beforehand), a few tricks were necessary: The HTML content of a post is injected into a web view, and those objects are capable of determining their height with Javascript. This allows us to dynamically redraw the scrollable list of posts with correct proportions.
• Before testing on the actual device, we weren’t sure if the planet screen with its many web view objects would render fast enough. Luckily, it did. As soon as the loading of images in posts will be implemented, which is notorious for being slow on the iDevices, we will see how good this solution really is – Fingers crossed.
• Multithreading was another new thing I had to dig into. The user interface can’t be blocked while new posts are being downloaded, so this needs to happen in the background. After messing with notification sending between threads, and thinking about smart ways to design all that, I read some really good advice: One usually doesn’t need as much concurrency going on, as one initially thinks.. So avoid the traps of thread programming wherever possible (Thanks, SQLite.org!). Using a NSOperation and keeping it small and simple was the way to go.
• Memory management is tricky if you have to do it manually. There’s no garbage collection with iOS, so the retaining and releasing of your objects has to be balanced. Occasionally, you have to make sure there are no memory leaks in your code, and if otherwise, get rid of them. It can be done and you get used to it, but it certainly adds to the overall complexity.

Resources

A few words about the resources i’m using:

The IRC-Channel #iphonedev on freenode.net turned out to be quite helpful. Don’t be scared by a rude tone and people throwing ‘RTFM’ around, there are actually some seasoned developers how can provide new insights and perspectives. Sometimes, just not being alone with a problem is enough drive to keep going and eventually crack it.

Programming books (Objective-C, Cocoa) didn’t really do it for me. They seem to cling to successive example apps which they develop throughout the chapters, making them more and more complex. What I was really looking for were minimal examples, solely focused on one problem at a time with any other clutter removed. It sounds simple, but there are way too few of those around. I’m the type of learner who seeks those example to compose my own solutions bit by bit, instead of reading up on something for hours first. You might call this the ‘Google Generation’, but this method is quite efficient for technical things.

What’s next

As the project keeps growing, also does the overhead of maintenance and administration (probably true for most complex system). The cogs and screws of the machine need to be readjusted constantly. I’m happy that at this point the basic infrastructure works, and all basic problems are solved. You can see a schematic overview of the units of Planetaki for iPad below. The light gray boxes are external libraries, and PlanetUpdater is the background process mentioned before.

Now we ‘just’ need to do visual fine tuning, complete the communication with the Planetaki API, do some testing, and prepare for submission to the App Store. Stay tuned!

Written by Timo Taglieber

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 recently noticed that some people miss filling a gift card when sending flowers through floresfrescas.com. We know they miss them because some users later complain about not having that option. This is the solution Mark Mackay came up with:

These are some of the principles we’ve applied here:

• Place the alert as close as possible to the spot where the decision has to be made.
• Add visual feedback that something important is going on (the message flashes) so it is noticeable.
• Change the form (size, color and text) of the confirmation element to make sure the user notices the alert

Here’s the full scene:

If we knew that not noticing the cards was too frequent we’d consider haing another step in the process just for filling the cards. But we are unsure about that and there is no easy way for knowing this (no, usability tests don’t work for that because users pay extra attention when observed). So instead of redesigning the process making it more effective and painful we went with this “user interface hack”.

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.

It all came to be  with one of those ‘on the spur of the moment’ Twitter event kinda things. We ended up hosting a private reunion to talk about interaction design with some of the best senior designers out there and had loads of fun in the process. How cooler can it get?

Here’s video proof:

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.

Fishy….fishy….Just a few hours after yesterday’s post on cluttered screens and what a huge fail we think they are, Apple announced their Reader service on Safari 5. Now seriously, the service is neat, elegant and simple. Check it out.

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?

WARNING: Here comes a rather technical post. Stay away if you are here just for the fancy videos and occasional eyecandy…

As part of the rebuilding of Planetaki we’ve switched from MySQL databases to MongoDB. It is quite a big change and the results are already noticeable. You can feel the wond in your face when in front of your planet. It’s fast, very fast.

Sam wrote a post about how it’s all set up. The techie inside you will enjoy it. Here are a few excerpts:

Planetaki caches huge amounts of data from posts all over the internet resulting in very large rows. The result is that the traditional database caching and optimisation techniques just aren’t as effective, and Planetaki was getting progressively slower and harder to manage.

[...]

Planetaki now uses a hybrid solution for storing data. The complex feeds and their entries are stored in MongoDB, and user data is stored in a traditional Postgresql database. This allows us to split the system into two parts, on one side we have the feed “reaping”, and on the other the website which mainly accesses the tables of data.

Read the full article: Planetaki powered by MongoDB

Two days ago the winners of the AbreDatos challenge were announced. We’re celebrating that MisParadas.com a web app created by our favorite developer, Sam Lown, and Vostok’s own Mark MacKay, came in second. The team was granted a prize of  2,000 euros. Not bad for a 48-hour hackathon ;)  The winner, Infocarretera.com, an app to keep track of traffic incidents in the Basque Country, received 3,000 euros. Congratulations to them!

MisParadas.com tells you, for any given bus stop, at what time the next bus will arrive. It was developed by  Sam Lown, Fernando Blat, Christos Zisopoulos, and Mark MacKay for AbreDatos.