We have just updated our site!
We’ve been working on this new version 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…
Before/After
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 holding the thumbnails have been through a diet! Many UI elements have been removed for cleaner and simpler navigation. Here’s a quick comparison:
All of the buttons have been removed but the functionalities are still here, they’ve just moved to a more logical place. Also, the cross that indicated that you where not logged and had only partial access to the simulation is not here anymore. This limitation is now shown with semi-transparency of the thumbnail and its holder (not present in this screenshot).
The login form (at the top of every page) is now hidden and accessible via a click on the “Log in” link. No extra click, though: your cursor will jump in the field automatically.
You now have a direct access to our tree at the bottom left of the homepage, faster! You can also search, with suggestions!
We worked on icons to illustrate the header’s menu items.
On to the browse page!
Not much to say here, simpler, clearer, nicer. The RSS feed is clearly shown and you can subscribe to our newsletter, this is new!
We used to have a 3×3 grid of thumbnails, 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 regular page.
The big new thing here are the price buttons. We used to be quite shy about our commercial activity. We now fully admit it, which is a good thing!
You can notice the “age bar”, allowing you to know who the simulation is intended for. Another new thing is the suggestor: simply click on it and you’ll be suggested similar 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 subscription 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!
Switching from a dual color theme (blue for light simulations, orange for dark ones) to a single an more universal gray one. Every component has been rethinked, here’s what what they look like:
A technical point of view
Of course to end up with this UI and functionalities, you need some lines of code. Here’s what lies behind the site you see when browsing:
- PHP5: my favorite back end language, in its last stable version,
- PostgreSQL: I’ve always preferred 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),
- swfobject, to embed Flash files the right way,
- TwinHelix’s PNG fix. Because we love 24 bits transparency but some browsers don’t.
- A pimped out version of the PHP Layers Menu System, for the tree,
- AMFPHP, for Flash remoting in PHP,
- ActionScript 3 and Flash, to make things move!
And to write those lines of code, you’d better have good tools! Here’s what we used:
Of course we also used Illustrator and Photoshop, 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 feedback please drop it there or on the site’s dedicated page. We love feedback.
