Page 1 of 2 12 LastLast
Results 1 to 10 of 17

Thread: March of the Menus.

  1. #1
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222

    March of the Menus.

    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.
    Matt
    ArtRage UI
    Ambient Design.

  2. #2
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  3. #3
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  4. #4
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  5. #5
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  6. #6
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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...
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  7. #7
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  8. #8
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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.
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  9. #9
    Join Date
    Mar 2006
    Location
    New Zealand
    Gallery
    View images
    Posts
    3,222
    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!
    Attached Images Attached Images  
    Matt
    ArtRage UI
    Ambient Design.

  10. #10
    Join Date
    Mar 2006
    Location
    Pacific Northwest
    Gallery
    View images
    Posts
    2,565
    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.
    Be well,

    "Teach, Learn, Thrive"~DM


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •