Skip navigation

Here’s another video with the Qt demos we worked on, running on S60 3.2, 5.0 and Maemo 5. Get Qt here.

Beware: catchy music.

So the push n900 people contacted us and we are back on the game. Apparently one of the winner withdrew so lucky us. They selected the etch a sketch project, that simply consists in choosing a picture on your n900, sending it to the little robot thingy using the bluetooth, and watching it doing the hard work for you.

Now it’s comes the hard part. Did I say hard? I meant fun part. It’s time to roll up sleeves and get the idea out of the paper. We’re getting all organized, and I hope to have more news soon.

This is a piggy bank for the anxious. If your one those people that trust your money in the capable hands (?) of these pigs, but not knowing how much you have inside is giving you psycho thoughts of baseball bats smashing piglets skulls. Well we had you in mind when we thought of our piggy bank.

This piggy was one of the ideas we’ve submitted to push n900. The idea is simple, hacking a piggy bank you’d be able to see how much you’ve saved so far and some extra info.

We put together a little presentation for the judges of push n900

And a video

This is my personal favorite from the 3 submission, but that’s mostly because I’m interested in doing my own piggy bank to match a cute GUI. Thinking x-ray vision!

P.S.: By we I mean me, jeez, annieC and calega from wouwlabs.

The thing about crappy videos is that if the subject is interesting you love them. This is one of those cases, at least for me. Weather running on a N85! Soooo cute!
Weather on N85

And so it happened that one day I received the briefing of a life time: “Choose any of this simple applications and make it pretty. The idea is to have a graphic interface that would challenge Qt so that it could be improved. The end result has to be a demo to be shipped with Qt as an example”. Imagine that! Do something cool, don’t worry about the possible limitations of the technology, we want to really push the envelope. The downside? Have it ready by the end of the week.

So I put a team together – me (graphic design), Tâmara Baia (interaction design) and Ian Moreira (motion design) – and got to it. The process was simple: choose the application > bash it > define new solutions for the features > put it back together > send it to the development team.

Choosing the applicationOriginal application

From all the available demos we had one of our favorites was a weather application – simple and full of graphical possibilities for weather icons are diverse and fun. The application we chose was already working, displayed real time weather info and a four day forecast of the list of cities available. It had simple static icons. In short, I was designed by a developer – it worked but had very little appeal – therefore it was perfect for our purposes.

Bash it

That was the easy part. Criticizing other people work – specially the GUI of a developer – from a designer’s perspective is just too easy. The application worked fine, but had poor tiny graphics. There was also too much info in every screen but the important info – such as current temperature – were very timidly displayed in a corner. There were no use of gestures what’s or ever, no touchscreen interaction as it relied on the options menu for navigation.

New solution for the features

We didn’t change the features much, just reorganized the priorities. We decided to keep displaying one city at a time, but user could have as many cities as he wishes and use a gestures – slide left or right – to navigate through his list. We also got rid of some info – such as the weather forecast label, and hid the 5 day forecast in the options menu, as a total different mode so user could choose between 5 day forecast mode and city list mode. We put a lot of emphasis on the graphics – very big and complex animated icons. Since there were a great number of types of weather, we made a list, and combined the icon pieces to create all the possibilities. The only feature we really added was the night view – night background, the moon and stars, acording to the time at the displayed city.

New application

We ended up with: A bright yellow sun, a colder one for cloudy and rainy days and a moon. Displaying the different moon phases was another feature we thought of – but due to the little time  it was not implemented, yet (fingers crossed). There are three types of clouds  and three layers for every type – to give a little depth.

To make it fun, we decided to put all the icons hanging on a string, like little stage elements in a play. From the string to the idea of making slide down from the top of the screen and bounce cutely in the middle of the “stage” it took seconds. Then all sort of animation ideas came up, but the little time kept us concentrated on the transitions animations.

All clouds

Speaking of transitions, one of our challenges was how to change from a cold rainy night background to a bright sunny day one. That would require a full screen animation and we know that it takes a lot of processing and it could make the application too slow on s60 phones. Well, they did ask for a challenge, so glued all the background images together with sticky-tape and hope for the best.

Put it back together

There was little time, so the task flow was all pencil and paper. Ian started the flash mock up while Tâmara mapped all the types of weather and I worked on the graphics – first the UI items, then the icon pieces (once Tamara had finished the looooong list of types). We ended up with a flash mock up, displaying a list of 3 cities, with the larger number of examples we could provided – night and day, sun and moon, clear sky and animated snow. There was no time to include all possibilities in the mock up, so we focused on the extremes. At the end I put all our ideas together in a product backlog format – even the ones we knew there would be no time to develop, just in case.

Send it to the development team

The development team received a prioritized product backlog, the flash mock up, all the chopped down graphics, some graphics and animations specs, spec for all the types of weather pieces combination and the randomness with thought would be fun to have, and a storyboard for the features we didn’t include on the mock up due to the lack of time. We also had to work very closely to the development team as they put it all together. Mainly to provide the info they lacked and to do some graphics and animation QA along the way.

Once it was all done and ready we’re all very happy with the results, so Tamara came up with the idea of making a video, showing – in a very short 45″ – all the process in the design team.

That was another team effort, with Ian leading the motion while learning his way around aftereffects. We used a video of the actual final version of the application, running, available for download with Qt 4.6 as an example of its capacities (I’ve got to tell you that it runs beautifully on the 5800 we had available to test – just lovely).

The song is “The Sky and the Rain”, performed by Snooze, a local band Ian’s of friends, and it makes the video look even cuter. Now we’re thinking of a full version of the video, but that’s for the future.