March of the Menus.

[MattRage]

Hi all.

Well, I decided it was about time to post something interesting and I thought I'd give you a peek at some of the early design sketches for ArtRage. When I'm doing this kind of interface, I tend to go through a bunch of variations on a concept until one just happens to look about right, and I keep the lot, which probably explains why I end up with a few hundred layers per UI outline doc.

It's all done in Photoshop, and I've even given up on my luddite ways and started using layer effects rather than doing all the effects by hand (though a specular highlight or two is done with manual processing). I won't go in to the paper sketches, they tend to be pretty messy and the precursor to sitting down for an evening of pixels that ends up with something like this.

So without further ado, here are 8 steps in the development of the ArtRage 2 menu bar. I'll do more interesting UI elements later.

[MattRage]

Step 1.

This is pretty basic, it was just an experiment with a different bevel model after the ArtRage 1 menu. It's still way too large, and introduced me to the annoying problem of what do with the space above the grip if the grip is inset.

[MattRage]

Step 2.

Menu 2 shows a bit more detail. The first one got discarded before I could be bothered doing the text. Menu 2 is a step towards completion but still has that annoying blank space above the grip. I tried extruding the grip so that the whole menu could be retracted and leave just a tiny spot visible for clicking when it was off the screen. Menu 1 couldn't do that.

[MattRage]

Step 3.

Okay, now I'm playing around with my bevels. For a while I experimented with a flatter look to the UI. I kept the grip extruded (can't see why now that I look back at it) but changed the shading on the bar itself. In a way, I still like this model, as bevels tend to take up way more room.

Interesting note: The File Menu isn't flush to the left of the menu because I got lazy and couldn't be bothered coding alpha blended highlights. That's a bit silly really, as I did them later for all the OK/Cancel buttons which, as you may have noticed, highlight alpha blended corners without a problem.

[MattRage]

Step 4.

I shifted the grip to see if I could fix the space problem above it. Still didn't like it though, it just made more sense in the middle and allowed for a neat division between menu buttons on the left, and action buttons on the right.

The font has been the same all the way through, that much I fixed on pretty early when I did contact sheets of a couple of hundred fonts to get a feel for what I wanted.

[MattRage]

Step 5.

Here's where it started to get serious. My flat style evolved slightly and I added a 'holder' for the grip so that it wasn't so intended and rounded. You may notice that I also made it smaller. Looking at the size I decided to take up less of the screen and have a narrower horizontal margin around the text to see what it would look like. The three slots at the right hand side are for the close/minimise/window buttons. I regretted those soon after I did 'em...

[MattRage]

Step 6.

This is actually one of my favourites. The flat look really stuck with me for a while as I worked on things, and it was really only when I set to work on the colour picker that I decided to go back to a lighter colour and bevels. I just realised that the drop shadow changed too. Some of the earlier ones had pretty small shadows, but I decided to make it float a bit more.

This is the first appearance of the final shape, with the extruded 'handle' for the grip bezel.

[MattRage]

Step 7.

Ah, so close. Slightly larger menu here (I think I bumped the layer down a few pixels, the top margin is a few pixels larger than it should be). Big problems here: The grip is too wide and the divider to the right of 'Help' is too close to the extrusion. So, I moved on.

[MattRage]

Step 8.

And here we are, the final menu. The bevel was fine tuned to make sure the menu looked a bit whiter (there was a bit of manual tweaking in there). The bezel changed to the ArtRage green I fixed upon at the time (cyan is so old hat).

One little detail you may spot is the use of the space above the grip for a mini-progress bar and activity indicator. That may make it in there one day (I shouldn't be giving this away, should I? ;) ).

Secret Note: The menu resizes itself on the fly. We're working on localised versions at the moment and the menu quite happily expands horizontally to make space for longer words where required, that's mirrored in the spacing of the buttons on the right which is why they are split in to 3 blocks.

Hope you enjoyed this little trip through the horrible mistakes of the design process! ;)

[Fashmir]

Thanks Matt. That was fun to see. I've done a fair few interfaces myself in the computer game industry. Mine were done while I was also cranking out game graphics and animation on very short production cycles, so they're pretty basic. Interface creation is definately an art and you are very good at it. Thanks again for this insight.

[Aged P]

Hi Matt,

After all your protestations of not painting, the truth becomes clear.

What you are doing is virtual sculpture, that's what makes the whole appearance of ArtRage so "Cool".

[drzeller]

I really love the rapport your team has with us and each other, and your sharing of stories like the one above.

Besides being a good tool. ArtRage also brings us a friendly forum for learning and sharing. It is the least "offensive" (sensitive, cranky, personal attacks, etc) forums I visit. Lot's of encouragement and constructive feedback, too.

Your team's openness about ideas, things you've tried, and what's to come, and your continue active involvement with the forums, really help build a community.

Keep these behind scenes insights coming!

D.

[justG]

Hmm... Cyan is old hat, but bevels aren't? =] I really love the flat look; I can see why it stuck with you for so long. Speaking of personal preference, have you given any thought to giving ArtRage a modifiable GUI, making it skinnable?

Thanks for the glimpse behind the scenes. Hope the "small town feel, big city appeal" thing continues as you gain more exposure. Hrm. I'm almost inclined to keep ArtRage a secret. Unfortunately, I can't stop talking about it. =]

- Gita

[MattRage]

Thanks for the comments everyone. I shall put some time in to capturing the process the canvas controls went through, boy did that one take a long time. The only element of the system that was original and still remains would be the pop out sliding paper for layer addition...

And hey, bevels are old but there's still space for doing 'em well ;) The flat look did appeal to me, but getting it working with the free-floating canvas controls and the corner 'pods' proved tricky, I was never happy with the results. So we innovate in small ways, replacing cyan with a lime green...

As for skinning. That's a tricky one and we've talked about it a fair bit here. The problem is that not all of the UI is built off bitmaps. A large proportion of it is built dynamically using procedural gradient effects, shadows, cutouts, and other items that are rendered on the fly by cunning and rather spooky interface rendering code written by Andy. AR2 contains a few more bitmaps, but AR1 had huge swathes of UI that used no bitmaps. This is partially why the app is so small, much of it is defined mathematically.

That means that the process of skinning the product externally would be rather difficult as the resource script would need to be adjusted as well as bitmap alterations being made. Maybe one day, though I confess I have a nervous twitch that shows up whenever anyone talks about it :)

[justG]

Thanks for the response, Matt. Perhaps a compromise could be reached. Don't make the application user-skinnable, keep it "closed." But perhaps you could include a couple extra themes, and each would have its own resource script? Like a web site that lets visitors select a colour scheme or a new theme from a drop-down menu on the homepage or by clicking a coloured square somewhere -- y'know, just a couple different options.

Thanks for reading,
Gita

[hanzz]

Skinning can be fun and usefull, see winamp for good results, mostly.
Other than for such apps, I find different looks distracting,and confusing.

The main focus should be on features,not found in other programs.
no offence meanth to anyone, just my opinion.
The program looks very attractive as it is.

[justG]

Oh I absolutely agree that ArtRage is very aesthetically pleasing, and my request wasn't an effort to denigrate our beloved UI designer's work. =] I was suggesting it purely from a usability standpoint, meaning perhaps a theme for those who require high contrast to make sense of things, or a minimal (dare I say, flatter?) one for those whose screen real estate is at a premium. There was a request for a Pocket PC version of ArtRage in another thread, and if I remember correctly, the response said something along the lines of ArtRage's GUI elements overlapping at any resolution lower than 800x600. My thinking was that a minimal theme + built-in custom resource script might address that concern as well.

Of course, given my druthers, if I were allocating developer resources, something like this would definitely not be high on the list (blending tools and watercolours do come to mind, however).

I hope that clarifies things a bit. If I just wanted a pretty ArtRage, I've already got that! =]

- Gita