We tweaked the colors and buttons some more, and came up with the idea of assigning a different color to each tab.

Around that time, we also came up with the name “Locomotive”. We liked how it related to the Rails world, and evokes something powerful enough to pull a lot of weight. I remember how I used to play Railroad Tycoon (now renamed Railroads) as a kid, and went looking for locomotive inspiration. The Golden State Locomotive was a perfect mascot: sleek, powerful, and has a beautiful retro art-deco feel.

Since I can’t draw anything more complex than a modal pop-up, the very talented Emmanuel Grard did the actual vector rendering of the locomotive.

For the front-end site, we knew that we wanted something that matched the back-end’s colors and style. But I went too far in trying to keep things simple, and the result looked uninspired and dry.

Thankfully Didier wasn’t afraid to call me out on it and push me harder, and so the second version was completely different, and much more promising.

But something was still missing. The design felt flat and lacking impact, and more importantly my girlfriend didn’t like it (Dribbble might be nice, but no one beats girlfriends when it comes to giving out criticism)

It was also clear that the site didn’t evoke the Ruby universe enough. It was time for a bold move.

Applying a single gradient turned out to make a huge difference, and all the other elements started falling into place. A few tweaks later, Locomotive’s home page was finally good to go.

By the way, you might have noticed that the site doesn’t have any navigation. I liked the idea of the homepage being self-contained. I think it encourages people to scroll down the page, while reassuring them that they won’t need to browse through dozens of pages to find the info they need.

So there you go. I encourage you to give Locomotive a try, and await your feedback on the design and general user experience.

Kayboo home page

This was a very quick project, as Kayboo already had a previous design coded out before deciding that it wasn’t up to the task. The deadline was tight, but I managed to come up with a new design that set the right tone, while being flexible enough to let the site grow in different directions if needed.

Kayboo dashboard

I took care of the dashboard area, providing Kayboo with a basic layout and widgets they could reuse throughout the site. And I also designed the logo, with a chronometer to symbolize the time users will save by using the site.

Edeneo homepage mockup

After mutliple back and forths, we finally setteld on a black and blue color scheme with green accents. The black would give the design the right atmosphere (and would evoke security and seriousness), while the blue would evoke heaven and match well with the name. And of course, green is the color of hope, and also fits in with the “garden of Eden” theme.

Document management interface

Although a lot of time was spent on the front-end, getting the back-end right was even more important. Thankfully, establishing strong design guidelines in the first phase made it easy to move faster and get the back-end UI done fairly quickly.

The page you see when someone you know has passed away. Not an easy thing to design.

Logo design is not my specialty, but once I scribbled this concept on my pad I knew we had to use it. It’s an angel, but it’s also something else… Can you spot it?

It might not be the FedEx logo, but it's a start

]]> http://www.sachagreif.com/edeneo/feed/ 0 http://www.sachagreif.com/le-monde/ http://www.sachagreif.com/le-monde/#comments Thu, 06 May 2010 10:07:51 +0000 Sacha http://www.sachagreif.com/?p=350 It’s not often that you get an opportunity to work for a brand like Le Monde, and especially on such a project. At a time where the news industry is trying to reinvent itself, I was hired to design the newspaper’s new iPhone/iPad application [iTunes link]. 

Although I worked on both platforms, I will focus here on the iPad part of the app, since it has more features.

Disclaimer: the following images are photoshop mockups, not actual application screenshots. But they are still fairly representative of the finished product, which you can check out on iTunes.

The iPad app's bookshelf/kiosk metaphor lets you quickly scan recent editions

Although my worked needed to follow existing brand guidelines, I was left fairly free to design the overall look how I wanted to. I chose to move away from bright Web 2.0 colors and use a dark theme to give the interface a serious feel while using the strong contrast to put the newspaper’s white page forward.

The split view is one of Apple's most useful UI innovations

One of the challenges at the time was designing for the iPad, a platform that nobody had ever seen or used. After watching the keynote a dozen time and going through every article I could find on the subject, I decided to pick up a few of the new iPad UI elements such as the bookshelf metaphor or the split view.

The page preview pop-over lets you quickly scan through pages

I also came up with new ways to use the iPad’s larger screen, such as pop-overs for navigating within a page, and previewing other pages.

I just wish I could’ve exercised more control on the finished product, and taken more time to polish the application. As is usually the case when working for large and complex organisations, there were a lot of external pressures, but altogether this was a great experience, and I have no doubt that the iPad is leading a revolution in the way we use and relate to computers.

I came in mid-project, with a strong visual identity already established by previous designers, and a lot of share-holders invested in the project. All this added to the challenge, but it was worth it as the app was very well received by the site’s community, and quickly climbed the rankings of the french app store to reach number 7 on the free apps list.

Although I’m not a logo designer by any means, I also created the new logo for the site.

Packaging Specialties home page

Product page

Rollip lets you upload and photo and apply an effect to it. But where it differs from the hundreds of similar sites already online is that instead of featuring cheesy effects like speech bubbles or a fake painting frame, its effects are actually useful. Like many photoshop actions, they let you emulate the look of cameras like the Lomo, special films, or techinques like HDR.

Rollip's first effect

The results are actually pretty good, and I could see how this service might be very useful for someone who doesn’t have Photoshop or just doesn’t want to spend hours browsing Deviantart for that perfect action.

The only thing I found disapointing is that none of the effects seem to have a name. You just pick them by clicking on a picture. This is good since it lets you pick an effect without knowing anything about photography, but on the other hand it’s a lost opportunity to educate people like me who have no idea what those effects are supposed to be (other than “pretty”).

In fact I’d love to see a short blurb about each effect explaining what photography technique it recreates, and when in time it was used. This would be invaluable for people trying to make sure that all their photos match a certain period in time.

Other than that, I liked the site and I have 15 invites for accounts with 30 free credits included to give away. It’s simple, just go to http://www.rollip.com/pro?coupon=sachagreif and sign up!

Registration Confirmation Screen

It was successfully used to register people at a number of different races, and as you can see even little kids were using it to sign up. This was a very good learning experience for me, because I got to see people using something I made, and got real-time feedback on what was working (or not working) in my design.

So simple kids can use it

]]> http://www.sachagreif.com/race-registration-kiosk/feed/ 0