Possible new HM3 layout

Out of the blue, I got a fantastic set of potential layouts for the HeroMachine 3 interface from all around awesome UI Guy Jim Marcus. You can see some of his other stuff at LiquidCrack.com. Here's what he had to say about this redesign:

What I was trying to do was to keep the interface professional and recessive, so that the characters would pop. I wanted to try and make it feel very much like an application that might run on the desktop. I also think that the comic loving community is savvy and might enjoy a nice dark interface.

Here's the basic page (click to embiggen all of the screen shots):

I think it has a very clean look to it, and everything seems to be organized rationally. The space is used well, and everything seems to fit. I especially love the various "View" options below the character canvas, that's awesome. The space for the ad in the upper right corner is perfect and I don't feel like it's intrusive any more than it has to be.

If you can't tell, I like this proposed treatment a lot. I definitely want to hear what you all think, though, and after the jump I'll post the remainder of the screen shots. I'm going to put them in as a gallery, so just click on any one to see it at the larger size. And please, let me know in the comments what you think, what you like, what you'd change, and so on.

34 Responses to Possible new HM3 layout

  1. Looks nice! I like the idea of gridlines for lining up items. Might want to have an on-off switch for that. Even though gridlines are good, they can also distract from the design process.

    I agree with the dark colors. Neutrals such as black, grey, and even off-white work. I’d still have the “mirror / flip Item” button as part of main menu.

    Also, an “Undo” button! Don’t think I can ever say this enough, but thank you, Jeff. It’s obvious you enjoy what you do and have a seemingly unlimited capacity to care and share. HM is one of my favorite webhaunts.

  2. Tim says:

    Hellyeah Jeff! This layout looks much better! I say run with it. πŸ™‚

    Although will there still be an alternate save feature, to save a character’s code (like in HM 2.5 and below) to a word doc, notepad, etc. Many of us are accustomed to that method, and I would love to see it return.

    Reason being, with HM 2.X, I would frequently make changes to previously saved characters and I just like to have the character codes on my computer for safe keeping.

  3. Kaldath says:

    I noticed a lack of the Color All Skin, and Color All Hair buttons. I think those two buttons need to remain in any interface redesign. While I don’t use the color all skin button all that often, I do use the all hair button all the time. Other then that I think this looks real nice.

  4. The Eric says:

    I like it, and a better load menu would be a GREAT help. But i find the buttons in the lower left of the Transform menu odd, what are those?

    Also, would it be possible to add “lock” buttons like “lock location” or “lock scale”?

  5. Aaron says:

    yes good idea roll with it

  6. Danny Beaty says:

    Works for me, although I would like to see a “Multiples All” button so I wouldn’t always have to click on “Multiples”.

  7. Jake says:

    Looks very sleek. I think the buttons we have now should definitely be transferred to the new version though. Also, I think it would be great if each individual item had its own name displayed. It would really help in recipes as well as discussing works on the forum.

    My only suggestion would be to make the custom color more eye-catching because it is still very easy to miss.

  8. NEON_N64 says:

    It looks very sleek and professional but a little generic. (And it looks almost identical to my current Opera Skin πŸ™‚ )

    Overall, I like it.

    Ok, I know we’re supposed to discuss about the layout, but I if you’re going to make some changes, I think it is worth mentioning.

    The numerical values on the scale control don’t update when you select a new item. Let’s say that your currently selected item has a size of x=100 and y=100, the pointer will be at the center of the graphic and the values shown will be x=100 and y=100. If then, you select an item with a size of x=200 and y=200 the pointer will move to the bottom right of graphic but the numerical values shown will still be x=100 and y=100.

    I find this quite troublesome and I have the impression that maybe it can be fixed easily.

    If you could fix that while implementing the new layout I would really appreciate it πŸ™‚

  9. CPrime says:

    Um… I noticed you demonstrated the mask option, but where exactly is the mask button?

  10. hobbit4hire says:

    I like it! It does looks very sleek. I like the way some of the drop down menus open compared to the last one.

    I do agree however that you shouldn’t lose any buttons from the original. I also like the gridlines in the background but it would need to be able to be turned on and off. You know just as a tool and not a background so you could use it to line something up then turn it back off.

    I also kinda miss the magnify button on the older version for doing work on smaller areas or detail work that isn’t around the head.

    A lot of stuff others said I agree with too. We do need an Undo Button and ya some lock buttons would be cool.

    Actually, it would be really cool to be able to see the whole character at a decent size all at once while you work on it. It gets really tiresome going back and forth or up an down all the time. Like usually when I’m using the rotate or resize tool I can’t see the item I’m changing that well if at all. Of couse this probably has more to do with computer screen size or how the browser opens the page or something. Anyway just thought I’d vent about that.

    So ya love the new look. I’ve been playing with this thing since the first version. My sons and I love it and HM3 is the best yet. You can do so much with it!! I think I’m about ready for some contests now.

    Anyway thanks and keep up the great work.

  11. Nick Hentschel says:

    In general, the layout looks promising. it is convincing enough, in fact, that I had to resist clicking on the “X”/”Close” marks on some of the boxes! Those functions that have been kept, are effectively streamlined, and it looks like it can be added to without much difficulty. And ANY layout will seem like an improvement if the reliability bugs can be cleared up.
    Those are the “pros.”

    The “cons” are, that I, too miss some of the added features from the Alpha version, such as Flip Item, Copy Colors, the Close-Up function, and the expanded color palette, ALL of which I found useful. However, I suspect that many, if not all, of these features might be re-incorporated relatively easily; as I said, the layout you’ve created is efficient and lucid enough for that. (Or perhaps, you just didn’t include them in the preview, and their addition is already planned on?)

    One aesthetic note: the sleek, “tech” look of the layout might appeal to some, but not others, who’ve come to expect the cartoony/Comic Sans look of the old program. Not any more or less poualr overall, either way, but maybe you can’t please everybody. (Perhaps, down the line, a selection of “skins” might be possible?)

  12. Mark says:

    Jim did an awesome job on these! The interface is clean, the controls appear intuitive, and the help menu is fantastic. I espcially like the Paint feature shown in the fourth pic which can easily replace the ‘color all skin’ and ‘color all skin’ buttons. I think the paint feature is an improvement. I’m not sure all of the previous comments got that.

    I agree with the previous comments about the flip button. That feature is absolutely essential. Perhaps there is still a button for it and I’m just not seeing it in the pics. Personally, I would put it on the transform tab.

    I also agree with Tim #2 about being able to save the text string. My game group used that feature in 2.5 to share characters, and we all kinda miss it.

    Finally, I’ve said before that I am in favor of moving the Save/Load/Export etc buttons onto a tab and using that space to list the items in their layer order. I reiterate that now, but I won’t belabor the point.

    Overall, fantastic work Jim!

  13. NEON_N64 says:

    Mhh… ok… let me see if I got this right…

    FLIP: To the sides of the numerical value of the rotation… are those Vertical AND Horizontal flip buttons?

    PAINT: It would be the substitute for the “Color all” buttons right? But I see that there is a Pattern tab AND a “Metallic gradient” option. How does that work? Doest it mean that we will be able to have 2 patterns per item (one of them being restricted to metallic gradients)?

    MOVE: Does clicking on the central button changes its value? Or do we get to write the number?

    LAYERS: Below the layers options… what are those 3 buttons? Is one of them the “Outline Character” button?

    And… this is mostly about the “Skin” of the current version right? Meaning that for now there won’t be much additional features or big changes right? Those will come up later when you do the new code with all the features that you previously shown us (like the list of items).

    So… Am I getting it right?

  14. Jeff Hebert says:

    This isn’t necessarily complete it’s just a wireframe. The intent would be to port over all the key buttons and functionality.

  15. Cliff says:

    I am in the minority here, I don’t like it. It is MUCH harder for me to see being a legally blind person. Maybe if the thing could be made larger.
    And is it just me ore are their less color options?
    One thing I loved about this version was I could see it better .. plus all the stuff you can do with it. Also kinda sad that all of Hammerknights tutorial will be made redundant before its all posted. But if you work with him I suppose he might be able to make one for the new system, sicne it seems like that is what we are going to.
    Oh well. Things change , often wehter i like it or not.

  16. Reid says:

    I like this proposed interface a lot.
    A toggle for grid lines would be awesome
    This new interface gets my vote

  17. Shade2075 says:

    This looks a lot more user friendly. A larger font would be nice, but for the most part the layout seems to be more clean cut.
    @Cliff The layout will only make some minor revisions necessary for Hammerknights guides. The most it would do is just clean up the over look of the system, none of the buttons overall functions would change.

  18. Nick Hentschel says:

    If all the functions are being ported over, then everything’s probably cool. Also, thanks to NEON for pointing out some things I’d overlooked. But Mark may have a point about the text string; I used that quite a bit in 2.5.

  19. The Imp says:

    Honestly, I don’t see much difference apart from moving stuff around and changing the color scheme. I like the current version just fine. But maybe I’m just not understanding the way the new interface would work.

  20. NEON_N64 says:

    Indeed, something similar to the save string would be amazing.

  21. Cliff says:

    OK now after the initial shock is off … I’ll try to be more constructive and open minded in my comments.
    Initially It does look nice.
    Although not really sure why dark equals sophistication.
    All the text is hard for me to see
    if it is made bigger, that might help me,
    or at least make it where I can copy and paste text (from the Help) into an email so I can blow it up my size. But often on apps like this I can’t highlight and copy it.
    The buttons I guess I would just eventually get used to where they are positioned, so I could just hit the right ones instinctively once I got used to their new positions.
    The ‘Save’ function’s White on Grey is difficult for me to read. the White on Black less so.

    Colors seem limited
    if these are the colors to be used,
    they all seem pastel
    and less variety
    will there still be Reds, Oranges etc and skin tones, and gold, browns etc?
    I think I see a slide bar under the color grid, so I am suspecting/hoping that will include much more colors.

    If the veiws added a close up on other areas than the face, that would be great!!! Anything to help me see it better.

    Not sure what the 3 buttons under the Layers abd Mask are. The middle one iis head and shoulder silhouette. can’t make out the left and right of it.

    Of course need the Flip button, but you assure us all the old will be on the new.

    if you do add the file info stream, please don’t lose the JPG, that is what I use.

    AH while we are at it, if you do make the switch, and maybe even if you don’t …. can you make it where we can work IN Widescreen?
    I hate having to put an object off panel then switch to widescreen to check placement and go back and forth till its in place.

    All this said, and me trying to be open to the possible change, I am looking at the old verses the new …
    I really can’t begin to tell you how much easier it is for me to see it as it is right now. the black text on orange really works for me. and I don’t think it looks unprofessional in the least.
    I say, if its not broken, don’t try to fix it.
    but it is your creation so what you say goes.

  22. Chisoph says:

    I think the view buttons are normal, face, widescreen and, for loss of a better term, tall screen.

    I really hope you do put this version into HM3.

    P.S I like the warning before you delete all. Even if you don’t take this one, could you at least fix the normal one to give a warning? If not, move it beside a less important button, instead of flip. Maybe into the transform tab?

  23. Nick Hentschel says:

    In the end, fixing bugs and malfunctions takes priority over any aesthetic changes. If that comes with the new layout, I’m happy! But there’s little need to make any layout changes for their own sake.

  24. Rendu says:

    Have to add my vote against the grey-on-grey color scheme and small font. VERY difficult to read. I prefer the icon-besed buttons.

    And while we’re talking about re-designing the interface: the “bulls-eye” design of the re-sizing screen isn’t terribly intuitive. Might I suggest having a shaded rectangle running from the lower left corner to the intersection of the scales to indicate the starting “100% X, 100% Y” position.. with the rectangle changing size as the bulls-eye is moved.

    I also would like to see the return of the text-based save, allowing one to e-mail editable versions of designs.

  25. Nick Hentschel says:

    This grey-on-grey thing seems to be awfully fashionable right now: my iTunes just updated, and the only visible change was a transition to a similar color scheme.

  26. Wolvie316 says:


  27. spidercow2010 says:

    Overall, I’m liking it, and don’t see major problems making a transition.
    Except that my eyes aren’t what they used to be, and maybe white-on-black rather than grey-on-black would be nicer, with the currently clicked button being a-color-on-black or black-on-white or something.
    And I concur with Cliff(#21,pgrph.7): “…can you make it where we can work IN widescreen? I hate having to put an object off panel then switch to widescreen to check placement and go back and forth till it’s in place.”
    And where will that ‘flip’ button go?

  28. kruger says:

    Hey guy, did the Hero Machine works well on linux?

  29. derp says:

    add a tactical vest or bulletproof vest that you can customise (modern ones)

  30. Me, Myself & I says:

    The grid lines are a great idea, I agree being able to turn them on or off would make them incredibly more useful.

    I would definately keep the “flip” button as well.

    An “Undo” button is something I would certainly welcome.

  31. Todd stevens says:

    Will u keep all of your stuff u currently (and more) things u have

  32. MetallicaFan says:

    I like the potential new look, particularly the grid-lines.

    What I’d really like to see, however, is a feature where you can lock items together. That way when you build an item, you don’t have to reposition every piece if you move it.

  33. Rendu says:

    Having played with HM3a a bit more over the last few weeks, some general suggestions:
    1. An “undo” button (even if it’s just the standard “Ctrl+Z”) is a must!
    2. Either re-instate the “reverse colors” button from HM2 or use differing defaults for Colors 1 and 2. It’s hard to guess which slot is which on an unfamiliar item.

  34. Me, Myself & I says:

    I agree that an undo button would be a great feature.