Tate Kids

TATE KIDS

 

Tate Kids Blog

Archive for May 2011

DESIGNING A USER INTERFACE

Posted 20 May 2011 by Hannah

We’re almost finished with AirBrush now. It seems like only yesterday we were just messing about with webcams and doodling on pads trying to figure out how it would work. Time flies! I may shed a tear… nah. Too exciting.

Today I want to tell you about the user interface that Plug-In have come up with. User Interface means the bits and pieces that are on the screen that tell you what does what, what has done what, and what happens next. Here’s the first ever idea for AirBrush…

Image of first ever user interface for AirBrush

Told you we were doing lots of doodles. Look at this happy little feller!

No he hasn’t got a whirlwind coming out of his hand – that’s supposed to be paint. He looks like he’s enjoying himself! You can see the buttons that allow you to change the colour, shade and so on. Here’s the next version:

Image of the second design for the user interface of Airbrush

He's even happier now he's got a lightsaber.

This is what it looked like when we put it in the computer. Look at the edit button. I wonder what that was for?

Image of the third user interface

Wahey, it's Dom! Wave hello Dom. Hello!

By the magic of computer technology, our pal the stick man has turned into Dom. Those buttons are still the same though…

Dom has magically metamorphosed into Richard!

Here’s the first significant change – the menu has moved to the left. This makes the drawing area more square and a better size to work with. Also you can see that the design flourishes are starting to come in, with a nice pink eraser and some paint splats! This makes it feel a lot more like something touchable – and as you’re really using your hands with this game, it’s a great fit.

Richard is really good at keeping very still, it seems.

Here’s a refined version of the last design. Now it’s easier to tell which setting you’ve selected.

Still holding that pose!

Now there are a second set of buttons on the right. These are the more technical ones, and the ones on the left are more about the art-making fun times. Keeping them separate should make it easy to find what you want to do!

In a somewhat remarkable switcheroo, Kat appears in a shower of purple glitter. Hi Kat!

This is the final version! All of the designs are fully sorted now, with button sizes and positions decided (and the eraser now doesn’t look like a great big giant one next to the brushes). Done!

It’s not long until the game launches now, are you getting excited to play it?

Tags: , ,

6 comments, Add your comment »