I think the actual layout for this website has a bit more under the hood that deserves mentioning. The site served as a testbed for some webdesign concepts I firmly believe in, not anything really new, but more designers should paying attention to those.

Designer design. Writers write.

Simply put: if a designer is updating the website content, if someone is manually editing html files, then there is something really really wrong going on. The trouble is that, if you, the developer/designer of the site is updating content, that means the client, that owns the site is not. Which means that he will not go to that trouble of writing anything new on the site unless it’s really important,in other words, almost never. A site that does not reflects the owner’s voice or isn’t frequently updated is a dead website. I cannot believe the number of colleagues that still uses some kind of wysiwig+ftp tool to make sites: wake up, blogging’s been around there forever. Setting up a wordpress content manager takes no time.

This site is built using a Wordpress Multiuser installation, with the following plugins: Tiger administration (which only I can see), Yet Another Photoblog (for the thumbs pages), and a Scriptaculous library (that’s what makes my card fade, for example)

Do not measure in pixels, but in type.

In the classic days where typography mattered, everything was measured in picas, x-height, EM widths. Then came the pixel and some arbitrary font sizes based on obsolete html tags. For ages now, the pixel was an immutable common grid for everything digital. This is not true anymore. Newer OS (including Vista and leopard) use vector based UI elements, so that you won’t need to reduce the resolution of your monitor to have bigger letters. Many new generation devices, as the OLPC laptop or the iPhone uses a 144dpi screen. Because the pixel is getting smaller, does that means your site also will?

So there goes the pixel away, and we welcome the Em back. By using a type based unit (the Em is equal to the point size of the current font) you are not only getting a more flexible grid for your site, but also preparing the web for high resolution displays.

This site uses a almost Em only sizing, which you can see for yourself when you change the font size (crtl and + or cmd an + on your firefox). The exceptions are for the images, such as the icons for the header menu.

Optimized to 640px or 40″

I get upset when someone starts discussing about the fact that “our userbase is using more and more 1024 screens” or if we should design for which browser size. Following the past buying trends is antonym for getting ready for the future.

First because there is no such a thing as a typical screen size, as we move in a world of small-screen-phones and big-ass-table computers. Also, the fact that I have a lot of screen real state does not mean I am giving your filthy site much of it. Asking, as a designer, for my site to used in a maximized, toolbarless window, is at minimum, to be arrogant.

This site is not build on a fixed grid, but on flexible “I need a little more margin here please” set of rules that accommodate the content.

Invisible microformatting

For years internet visionaries have been predicting the day that the internet will be a very smart database readable by computers. The web reinvents itself every other day, mostly into stuff whose point is rarely understood by most people, even less by machines. That’s why microformats are important: a set of simple invisible tags that help your site be indexed by the next google bot, the next browser, the next operating system and most next big things.

The “card button” shows you my hcard, a set of contact information that can be styled into mostly anything using css, and understood by most computers.The “download as Vcard” link, for example, is nothing but a technorati service that automagically convert’s it to me. All entries on this blog use hAtom, that can convert any page in a rss-like format.

Aj…xed

Let’s move on, there is no such a thing as Ajax. It’s a term that normal users never need to hear and really power users understand simply as a bunch of other unrelated technologies. But the animation effects are cool. Click on the card again, just for fun.

Graceful Degradation

This site was built on a mac using webkit rendering engine that makes safari. It uses some cool, w3c-legal but rarely supported effects like drop shadows, and a Helvetica proprietary font that not everybody has. Also, some effects used, like png transparencies will be invisible for someone still using something as internet explorer 5. Yes, the site is not equal in evry user’s screen, but neither is every users computer. It’s good to relinquish full control.

Mac users, PC users, firefox users, Opera users, Internet explorer 5 users. The site is made to be good-looking on every platform, but there’s nothing truly wrong in making it even better if you use a more w3c compatible browser, a prettier font rendering engine or have some professional fonts, is there?

Download as quicktime

A reel of my work in interaction design and video until 2007.

To make the complex visible. to make novel information understandable, with minimal or no words at all. The following are a series of infographs, diagrams and maps that tries to show a different view of things you are used to see. Some where made just for the fun of it. some where donated to wikipedia’s open commons and there where selected by the community as the best of the crop*. Many made their own way to graduation thesis and books in europe, books on photography and a lecture in MIT.

Human world migrations

Based on a buckminster fuller world map that has almost no distortion on land based distances, this is a map of the how, when and why humans colonized the world, based on mitochondrial evidence. Also plotted is where the ocean was ice during the last ice age, so you can see how the Great Britain was reached by foot. And note that as you can see from the temperature grid, humans migrated more when it was colder, seeking better lands.

The map of the oceans

Being a south american I’ve been always fascinated to views of our world that did not centered in europe (as the mercator) or put north as “up”. This one is centered on the antipode of Urumqui, most remote city from any sea in the world. This map was donated for the wikipedian community (where it was chosen ‘featured image’) and someone there described it as “When dolphins become ultra-intelligent, their world maps will probably look something like this.”

Running in the rain

“In a near future, you will be able to write a doctorate only with images.”
Gui Bonsiepe

There is a mathematics book from the 19th century that proves all Euclidean theorems using shapes and colours as nouns. Running on the rain is an exercise on visual rhetoric.
The question itself is a popular saying that states that if you run under the rain you will get more wet than if you walk. This may be true, but you also get home faster. So the question is: is it worth running in the rain?
The insight was to represent all variables in this equation graphically. Speed, distance from home and even how much water you get per second are drawn as lines of constant sizes. This way time could be calculated geometrically. The total amount of water is finally calculated as an area, and by comparing those areas one can reach the final (and rather obvious) conclusion:
If you’re surprised by rain, run.

Download as quicktime

A video about how technology may affect certain cultures, and what could be changed in the computer as it is today, so we will not need to change the cultures themselves. How to sell computers for monks is a proposition that designers should start thinking about the laggards, the last people to adopt technologies, as benchmarks. Because if we can fit their requirements of a non-intrusive and fail-proof equipment, then we will build a better machines for all of us.

If you like this you can see a first video draft (with a different script) here:

Le button is one single button that can transform any surface in a radio tuner. It allows to use any printed page as an link to an internet audio file which you can stream to your headphones. And because it’s able to save any pattern in it’s internal memory, you can re-save those links in any surface you can look at. how much can you do with a single button?

Experiment. learn new tools. the following are a series of experiments I did when I first started exploring an isight iMac with quartz composer, a node-based visual programming language for open-gl effects. all movies are around motion detection, and video interferences.

If you are a visual artist with a mac and an iSight camera, I recommend playing with quartz composer for a fun time. Below are the source files for the projects:

download quartz source files

Digital tools are great but they lack the refinement or the sensibility of the classical drawing tools such as pens and pencils. Mélange is an attempt of bringing those together not by simulating how ink flows in a paper but by bringing the digital screen over the canvas.

How do you freeze a moment? those two videos were made during my studies at the École Nationale Superieure de Création Industrielle in paris, and where meant to represent two distinct feelings. Both clips were made during my stay at l’Ecole nationale de Creation Industrielle, Paris, but not necessarily for the school.

In between the days

In between days” is about being into a daily routine while your mind wanders throught so many images and new ideas. It’s a mashup of many clips in a music by the coral sea..

Come Here

The second, “come here”, is a work of love about missing something for long and then having a concentrated overdose.

Free music might change our culture. But only if it creates a culture.

We live in a funny paradox. You can hear any music, from anywhere, given you already know it, or at least know how to spell it in a search engine. As a result, most of downloads are the famous artists seen in MTV, which makes the MTV guys very unhappy, as that´s precisely what they don´t want you to do. And at the same time, thousands of ignored musicians out there are actually asking to be heard, but remain in oblivion.

The result: recording companies prosecute people who can´t understand what they have done wrong (we´ve all always heard music for free after all), independent unknown artists who remain unknown artists, and radios plays old music as if nobody had done anything different in the last 10 years. It´s a everybody lose game.

That´s what radio Jaba it´s about.This is not a radio, nor a website, but it isn’t exactly a software neither. At least not yet: right now, it’s a conceptware, a proposal, spoken as an existing software, to stimulate discussion about the future of free music.

Radio Jaba is a mp3 player for exploring the musical world. You let him guide you, and he will give you information about the music you already own, bring you discussions and opinions about that musician, history on the albums, background for any musical genre, meanings, lyrics even translations for that song. You take the control and guide it, and it helps you make new unsuspected connections between musical genres, explore unknown realms of music, and get to know novelties uprising anywhere in the world.

how to put everything together

And, mainly, it analyzes your library to bring you new music, that you might want to hear, and mostly important that the artists want you to hear. This last piece of technology has been already explored in many softwares out there, like iRate, Gnomoradio and Indy.tv , to name a few. We´ve seen them, tested them, being inspired by them and hope for their future. They´ve done the technology right, but that´s not enough. It´s not about just downloading unknown mp3 to user´s HD´s, it´s about making a community. Bring information, bring people together, give them navigating tools and they will make you a community. It´s not just music, it´s about a whole free

Read more:
What it does?
And how will the musicians make money?
Criticism on similar programs
Related Technologies
Meta: about the project´s design
Download Now!

Mind the pad is a mind-tracker application-concept for cell phones and PDAs that is at the same time a scribble & write sketch pad, an address book, agenda and file organizer.
The main principle behind the application is that information is not saved on a fixed location, but is stored as separate pieces that are auto organized as the user reach for it. Each piece of information, or meme, is a small text file along with a drawing (superimposed over the text), which can be linked to images or any file. Upon reading the user may underline some words and they will be transformed on special index words. When the user clicks an index word all information is re-organized and every data containing this index will be joined. Consequently, the user will be able to bridge ideas and concepts while searching for different data or files.

Each index is also associated to data fields as email or telephone number, so his address book is seaming less joined into the idea flow.
As the user does not need to previously organize it, information can also be inserted by medias such as voice and images. With a built-in text-to-speech technology, he may insert multiple, unrelated, voice memos during the day, which will automatically be converted into easily retrievable, therefore useful, data.
If the hardware has a camera, Mind the Pad becomes even more powerful. The user may add a voice comments to each photography he takes, that will be converted in an associated meme so he will be able to navigate thought his image library much in the same way his brain works when he is telling a story about a trip: by bridging and information association.
Later, the user can use the built in optical character recognition, to retrieve information about some images. Then he may quickly photograph an advertising, a note on the wall or a business card to insert the information about it.

Experiment the Alchemy!

Can we map something as subjective as tastes? Alchemy of juices is a interactive infograph that is helps to choose a juice made with various fruits, by selecting either the fruits, the feeling or the taste. At the same time it tries to foresse those tastes and feelings of juices you mix there, based on user input from previous juices. Just as an alchemic diagram it’s about being a somewhat misterious but beautiful infograph.

Yes, we’ve got bananas, and thousands of other tropical fruits. And it is not amazing that in any casual restaurant in Rio de Janeiro you may ask to mix peanuts, banana, and amazonian fruits like Guaraná and Açaí. Best of all, they’ve got creative names: this one for example is called viagra. Watermelon and lemon is called “Sexy juice”. For some unknown reason we have to agree that there is something extremely sensual in that combination, even without tasting. Juices are more than just taste; they bring back memories.

The Alchemy of Juices is an experiment on information architecture which tries to reveal the most information possible in a visually simple and dynamic diagram. The main target is not to be easily readable at first, but to become intuitive once the logic is learnt.

The result is a rather mysterious-looking schema that allows the user to seek for juices based on a sensation or a fruit, to share experiences with other people, to guess what will be the result of a any mix, even to know what fruits you expect in this time of the year. All in one non polluted screen.
Once I head a teacher that, whenever asked how to know if a curve was correct would answer. ‘If it looks beautiful, it’s probably the correct one.’ Alchemy looks as an occult symbol: even though you don’t understand it, it’s attractive to look.

muvuca is about connecting distant friends through some kind of non verbal sharing. throught their avatar on the movie screen they can sense that their friends have a common focus of attention.

It’s a virtual movie theather, where all friends watch the same movie at the same time. The avatar, controlled by a puppet-like remote, allows the users to hav movements without sounds to allow silent comunications. Also, it can act as a passive microfone transforming the audio in semi controlled movements from the avatar.

Also see this Bill gate’s comment on the project

watch the animation!

(turn the sound and move the mouse)

Animation based on experimental photography on a scanner. They where achieved rotating the object (my own face) during the scanning process. Later the best results were redrawn on vectors and animated. A colored rectangle rotates and follows the mouse, revealing the colors on each animation. This was my first experiment on interactive animations.

Below are some samples of scanner photography.

Enter the maze

Game design and programming. While figuring out an algorithm for building a maze with only one right path, it became clear that in such a maze the walls would be a labyrinth of it’s own. Then it was a natural evolution transforming it into a maze whith special stairs and bridges so you could walk over walls or on the ground.

For centuries labyrinths have been used for meditation. Taking the longest route to go through a short distance, priests would use that time to pray and think. Back then, no one had invented traffic jam.

I also used my long hours in traffic jams to read and think. So I found some funny things about them. The first is that in a true maze (a labyrinth with multiple ways) every point is reached through one and only one way. Another, is that to build one like that all you need is to start with a open circle and draw lines starting from another line and ending anywhere as long as it does not cross or touch any other. And finally I’ve realized that in a maze built like that, not only the space between, but the walls also form a true maze. Beyond programming the algorithm, I drew the character animation.

The rule of thumb in the first year of college is: bend the rules to see how far they can go. The teacher asked the students to build a game with resin pieces, just so we would know how to mould in resin. We added dry ice, acr ylic tubes and a laser beam. Laser Chess is a strategy game for two player s. Each one has four semi-spheric pawns (molded after a hlf cutte billir ball) with a mirror face, and the game objective is to reflect the central laser beam until it hits the opponent’s goal, an acrylic tube which glows red when illuminated. The game was constructed on a 1.2 m (4 ft.) high table with a space under which there is a blue light and a solidified carbon dioxide vapour. For the laser beam we had to unbuild many laser pointers until we figured out how to make it work with ordinary batteries. The final presentation was held in a dark room, with techno music and purple lights.

How the table was made?

It was a rather big game, a tabletop size. It had a wooden structure, covered in the outside with plastic (polyesthyrene if I remember well) sheets

How you make the laser visible?

If you don’t make the laser visible you will be rather disappointed, having to search for where theÊ red point had gone since you moved the mirror. You need particles in the air, and anything from clapping a chalkboard or smoking on the board will do. We decided to use dry ice, as we didn’t have a smoke machine to spare, and the dry ice provides a quite simple set-up: just drop it on water. If you see closely there is a ditch around the table, it’s where we filled with water and dry ice. Be careful: the dry ice doesn’t give much smoke so make the ditch as small as possible to get the dry ice inside, but not too deep. Remember to make it impermeable, with plastic sheets and resin. We put a blue snake lamp for the effect. yes we could have used a smoke making machine, and we kept promising we would someday. But we never did, you know how those things go… Also: remember the thicker the smoke there will be a decay in the laser, as you can see one picture. It can be a part of the game rules, as you have to hit the goal, but you have to make the laser travel less than x meters or it will weaken too much

How you made the laser pointer?

That’s amazingly more easy than it seems. We bought a couple of cheap laser pointers from the street vendor and opened it up to figure it out. I was a first year student, and my only experience in electronics was making cardboard lanterns with two A batteries. If you can build a lamp, you can build a laser pointer: open it up, put some cooper cables where the batteries used to be and link them to some AA batteries and add a on/off switch.

What about the pawns?

Those round pawns are made of semi transparent resin (so they look cooler when hit by the laser). We used a halved billiard ball as mold andÊ asked a local glass shop to put the mirrors on it.

Those yellow lines looks so cool!

Thank you buts that’s more due to the lighting than from the lines themselves. We had a black wooden board painted in black, masked and sprayed up the lines. We used a neon colored yellow, nothing special. But put it under a ultraviolet lamp (those that you see in night clubs, I hope they aren’t exactly the cancer emitting ultraviolet types) and the yellow neon will look infinitely cool. We also painted ourselves in invisible paint that shines on that lamp and put some techno music to impress our teacher

did it impress your teachers?

No. He was expecting us to make lego stack able bricks. The only thing stack able were the round pieces and they were merely complementary. But all our colleagues loved it.

What are the goals of the game?

They are two acrylic tubes, folded in heat in a L shape. We drilled two holes at the sides, and put it trough it, so when you hit the bottom the whole stick lightens up

Were there any game rules?

Well yes but I suppose you will want to make them yourself. Ours were not very imaginative: each turn you get to move and rotate one pawn, in order to try to reflect the laser to the opponents goal. If you move into an square occupied by an opponent, you capture it, which means the two pieces become one big non-reflective piece you control and can use to block the laser.