In Stores Soon

I’ve been look­ing for ideas for my 2010 greet­ing card and finally found what I was look­ing for. Dur­ing the process I devel­oped sev­eral iter­a­tions that didn’t made the final cut, I selected two of them that are not that bad but not good enough for prime time!

The “ad” version


The “flashback triptych” version

Since it’s a trip­tych it needs more space, so I set up a ded­i­cated page… Go see it!

What now?

The actual greet­ing card will be posted in January!

eduMedia ’08

We have just updated our site!

We’ve been work­ing on this new ver­sion for about 9 months and now it’s here. The URL hasn’t changed, but the site has!

Let me show you what’s new…


The site used to be designed for 800×600 screens, it is now for 1024×[anything], so the UI is wider and not as high as it used to be.

First thing you can notice: the blocks hold­ing the thumb­nails have been through a diet! Many UI ele­ments have been removed for cleaner and sim­pler nav­i­ga­tion. Here’s a quick comparison:

All of the but­tons have been removed but the func­tion­al­i­ties are still here, they’ve just moved to a more log­i­cal place. Also, the cross that indi­cated that you where not logged and had only par­tial access to the sim­u­la­tion is not here any­more. This lim­i­ta­tion is now shown with semi-transparency of the thumb­nail and its holder (not present in this screenshot).

The login form (at the top of every page) is now hid­den and acces­si­ble via a click on the “Log in” link. No extra click, though: your cur­sor will jump in the field automatically.

You now have a direct access to our tree at the bot­tom left of the home­page, faster! You can also search, with suggestions!

We worked on icons to illus­trate the header’s menu items.

On to the browse page!

Not much to say here, sim­pler, clearer, nicer. The RSS feed is clearly shown and you can sub­scribe to our newslet­ter, this is new!

We used to have a 3×3 grid of thumb­nails, we now have a 5×2 one. That’s less pages to browse in some cases!

The media page

It used to be a popup… Nasty. We all decided to avoid it and go for a reg­u­lar page.

The big new thing here are the price but­tons. We used to be quite shy about our com­mer­cial activ­ity. We now fully admit it, which is a good thing!

You can notice the “age bar”, allow­ing you to know who the sim­u­la­tion is intended for. Another new thing is the sug­gestor: sim­ply click on it and you’ll be sug­gested sim­i­lar simulations.

Again, icons. In the tool box:

Every other page has changed, but I’ll let you go and see that on your own! The biggest reworks have been the sub­scrip­tion or the “about us”, if you’re interested.

Our simulations

Not only did we change the UI of the site, we also redesigned our simulations!

Switch­ing from a dual color theme (blue for light sim­u­la­tions, orange for dark ones) to a sin­gle an more uni­ver­sal gray one. Every com­po­nent has been rethinked, here’s what what they look like:

A technical point of view

Of course to end up with this UI and func­tion­al­i­ties, you need some lines of code. Here’s what lies behind the site you see when browsing:

  • PHP5: my favorite back end lan­guage, in its last sta­ble version,
  • Post­greSQL: I’ve always pre­ferred it to its more famous friend MySQL,
  • CSS, lots of them. With Eric Meyer’s reset,
  • JavaScript, based on the nicest lib: MooTools (for Ajax and visual effects),
  • swfob­ject, to embed Flash files the right way,
  • TwinHelix’s PNG fix. Because we love 24 bits trans­parency but some browsers don’t.
  • A pimped out ver­sion of the PHP Lay­ers Menu Sys­tem, for the tree,
  • AMFPHP, for Flash remot­ing in PHP,
  • Action­Script 3 and Flash, to make things move!

And to write those lines of code, you’d bet­ter have good tools! Here’s what we used:

Of course we also used Illus­tra­tor and Pho­to­shop, for the graphics.

Clap, clap!

Heads up to the team, I think (and hope) we did a great job!

As always, if you’ve got feed­back please drop it there or on the site’s ded­i­cated page. We love feedback.

Apple Touch icon

I’m home, sick, so I’ve had time to do some­thing I should have done ear­lier: add an Apple Touch icon to the site. So here’s what it looks like!

Despite what the offi­cial docs say, I’ve fol­lowed Play­ground Blues’ advice. So my apple-touch-icon.png is 158x158 pixels.

Geeky post? True.

MobileMe UI chops

As you prob­a­bly know, MobileMe (by Apple) is online, and for you UI design freaks here’s food! The URL might change so I stored it

The file is a huge PNG file (32×6042) with UI ele­ment chops. Enjoy a (remas­tered) preview:

Cubik. Font preview



Aest. Font preview

I’m cur­rently work­ing on a font, here are some of the first characters :


The ‘A’ glyph might remind you of the Ramm­stein logo…