HeroMachine Mini Layout

If you've ever wished you could influence the design of an actual Internet application, now's your chance! I am designing the next generation of HeroMachine Mini-applets and I want to hear from you about what you do and don't want them to be like. The goal is to create one basic frame that can be used for any of these smaller applets by changing just a few pieces of data (and of course drawing all new items).

Here's the latest version of the wireframe (a basic layout without any design elements applied) I am considering for future "HeroMachine Minis" like a Face Maker, Alien Creature Creator, or what have you:

The gray area would be for a 325x250 ad. Below that are general function buttons that affect the overall applet. The only "new" one is the "preview" button, which will remove everything except the current creation, shown full-screen. I might even include some zooming type of feature on that screen. Below that in light green are the various item category buttons (for instance "Headgear", "Undershirt", and so on).

The right side of the applet is for actually creating your image. The row of six small rectangles is for item previews, like you have in HeroMachine 2.5, so you can see a set of items before having to pick one. The currently selected item would be highlighted in white. You can scroll up or down an entire set of six items by clicking either below or above the green scroll button, or more than one set by dragging the scroll button itself. The green arrows at the top and bottom of the scroll bar allow you to scroll the preview boxes up or down one box at a time. Clicking on a preview box will select that item and put it on the dark yellow canvas area, applying the currently selected colors to it.

Below the preview boxes and the canvas area is a row of buttons that let you affect the current item or the entire image. Items can be moved up or down in layers, like in the current HeroMachine 2.5 application. You can clear the current item, clear all items, or clear just the currently selected item. The blue and yellow arrow buttons let you select the next or previous item in the set, acting like the left and right arrows that were previously integrated into the component selection boxes.

Below that row of buttons is the scaling control. This will let you stretch the currently selected item sidways or up and down. You can move the current item around on the canvas by clicking and dragging it.

Finally, to the right of the scaling control is the color selection area. The number of color boxes here is flexible. You can potentially set two different color areas as well as the line color. Selecting a color area tab will set that as the active region.

That pretty much covers it. I'd be delighted to hear any suggestions or concerns you might have about this proposed interface -- features to include that aren't there, features currently there you think would be useless, overall layout, anything goes.

4 Responses to HeroMachine Mini Layout

  1. The Doomed Pixel says:

    I’m loving the sizable items and the line color. The only thing I think would not work out so well is the click and drag for items. I think that adding those on would make the program a lot harder to work with (TOO much freedom).

  2. Jester says:

    Yes, I agree with Pixel. The click-and-drag would really only make unessescary complications in my opinion. It might be nice for certain things, like companions or background items, but the need to move objects around would probably make the program too difficult or annoying for users who don’t want to have to go through all the trouble. However, you may be able to overcome this by having objects automatically “spawn” in the proper place, and maybe even have a sort of “lock in place” option for users who don’t want to move objects at all.

  3. Jeff Hebert says:

    It’s a feature that’s easy enough to turn off if need be. I mostly want to have it in there because a) a lot of people have asked for it in the past and b) it’s pretty necessary for the Face Maker applet. Seeing it used at the Ultimate Flash Face site really opened my eyes (so to speak) — it makes the whole program much, much more effective in that instance. For cars and heroes, maybe not so much, but for faces definitely.

    Note that one key component in the main HeroMachine app it would be great to make movable and scalable would be insignia. You could add the logo to a helmet, shield, belt buckle, or what have you for a really nice effect.

  4. The Doomed Pixel says:

    Yes, I can definately see that. So make movement an option that, say, would only work for things like insignias, but for shirts and stuff I would go without.