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