New Layout Now Live!

106888
I’ve just updated HeroMachine.com with a new layout in response to the problems Google AdSense reported. Had I not made these changes, Google would have shut down my account and quite simply, I’d have had to close the site. There should be no effect on your character saves though, as always, hopefully you have text and/or image backups just in case. I confirmed this by loading previously saved characters using the new file.

I tried to make a virtue out of necessity, always keeping in mind while redesigning both the site and the apps what the best user experience would be and not just what would make Google happy. I hope on that front things are actually better now. Here are the major changes:

  • I removed the integrated 300×250 ad unit from all HeroMachine versions. The upshot is that you should have more space available to see your character, and you can now capture the screen in landscape mode without the ad being visible.
  • I also moved the controls in both HM2 and HM3 from the right side to the left. Partly this is to avoid having any clickable controls too near the ad in the right column, and partly it’s because it always seemed like that was a more natural place for them to be. I only had them where they were to make the ad more prominent (that was decided by UGO back in the day).
  • The page is now 1080 pixels wide, which along with rearranging the apps should result in keeping the work area the same as it was when there was only a single column in the narrower layout. The standard site-wide side bar is also now present on the character creation pages.
  • Finally, the forums now have the standard site-wide side bar. Hopefully that will help integrate the blog and forums more closely to foster cross-discussion and visibility of things like contests.

From a business standpoint, I do worry that the new layout will not pay out nearly as well as the original. If that’s the case I will have to try other ways to monetize the site so I can keep it going. That might include different ad placements, but it might also mean more radical changes like some sort of premium area based on a subscription model where no ads are served and the apps are full-screen, or making downloads available for sale, or even (as a last resort) going back to the pre-UGO days when there was a crippled version of the apps available for free and only paid users got the full slate of items. I’d rather not do that, but I have to pay the bills, you know?

Anyway, hopefully everything will work out fine and I won’t need to make any more changes.

If you run into any problems with the new layout or the new app versions, or if you’d like to let me know what you think of the changes (hopefully without too much cursing!), please let me know in the comments section.

About Jeff Hebert

Jeff is a 45 year old city boy who has somehow found himself located in Colorado, fulfilling his lifetime dream of making a living drawing super-heroes all day.

27 Responses to New Layout Now Live!

  1. Looks good so far – I have just two bugs to report and maybe a suggestion (sorry):

    1.) When you want to use the “copy point” function, it doesn’t work since the popup window with the hint dialog is in the way and a grid covers the working area too. Also the hint dialog lies behind the item selection menues. Here’s a picture of the bug:

    Copy Paint Bug Screenshot

    2.) The same kind of bug appears when you try to use the masking function:

    Mask Bug Screenshot

    3.) Nor really a bug and I don’t know what the other users think about that or how easy it’d be to “fix” it, but when I use the headview or the widescreen view the character is not really centered. So I’d have to move all items to get what I want.

    Headview Screenshot

    Widescreen Screenshot

  2. Works pretty well- MadJack basically covered the bugs that I’ve noticed. Though perhaps the colour ‘squares’ could be rearranged? Maybe vertically or something, similar to the old arrangement, but on two ‘rows’, since they currently look a bit disorganised as the rows don’t match up any more

  3. Just a heads up, I am Near sights, and the layout of my room and where I have my computer means that my monitor is about 5 feet away from where I sit at my Keyboard as I result I use larger screen resolutions then what is the normal default. So when I look at the new Page Layout the side bar is not on the side, but instead it is on the bottom of page beneath all the normal content. I can live with this as I know where it is if I need to use any of the links in it however as you have your ads placed in that sidebar anyone who prefers larger text on screen then is normal will likely have the side bar booted to the bottom like it is for me and there goes your possibility of ad clicks from those people. Not sure what caused this in the new layout as before the refresh the sidebar was perfectly placed.

  4. Uhhm, hope I’m not too annoying but I’d have two more suggestions. (Please ignore them if I’m getting too cocky.) ;)

    1.) In regard to usability I’d suggest to switch the positions of the buttons for “masking” and “flipping” as well as the buttons for “all layers down” and “one layer up” (see picture) since it seems like that is a more natural place for them to be (at least for me).

    Suggestion Transform Area

    2.) Did the item previews became smaller or is it just me? Well, since you already talked about expanding the previews box (I know that means editing every single set file which I’d be glad to help with), I thought about a way to use the free space beneath the previews and increase the size of the previews at the same time. Here’s what I came up with. (This way related items in groups of 12 would stay together.)

    Suggestion Item Previews

  5. Good ideas, Mad Jack, thank you for that and the bug reports.

    Characters in headshot and widescreen modes should now be centered. Mostly.
    Screens and warning dialog box are no longer covering the important bits.
    Swapped button locations on the Transform tab per your suggestion.

    I’m not ready yet to decide what to do with the area below the preview boxes. I might need that space for some sort of promotion if ad revenue plummets and I need to do something like premium user areas. But thanks for the mockup, that’s pretty much what I was thinking if I do end up expanding the preview area.

  6. Well, since you’re so outgoing – how about switching the positions of “Rotate” and “Move” back to the way it was before? Otherwise I’d have to readjust and I’m essentially a lazy guy, you know. ;)

  7. Well, actually cool, but the only thing I don’t quite like is the colors section. It was pretty logical – the greens, the blues, the reds and so on. Now it’s some crazy rainbow. It will take some time getting used to it. Still not an impossible task, so no big deal…thanks for the efforts.

  8. Oops, forgot about the colors. I’ll go in and rearrange them in a bit so they’re back in proper order.

  9. OK, colors are rearranged, hopefully in a better order, and the Rotate and Move controls are swapped like they used to be.

  10. I’m having trouble with the export option. When I hit export everything disappears and nothing happens. The image does not load on my computer.
    Did you make changes to that at the same time when the rest of the layout changed?

  11. Export hasn’t been working in chrome since their last update. Should be working in other browsers though.

  12. Export was working on Chrome fine yesterday. I had some trouble with that before, but it sorted itself out. Until today and the new layout, that is.

  13. Griff Charleston

    Okay been using HM3 for awhile and from the pictures that other people have posted the new layouts but for me…. it’s the same layout (buttons on the right) but the Ad has been moved and the whole thing is shrunk. which is quite annoying. I am just wondering why the new layout is not on mine……..

  14. Griff, try a forced refresh (shift refresh probably). Your browser has the old version stored locally that it’s using instead of the one on the server.

  15. What version of Chrome are you using? I’d bet it auto updated yesterday.

  16. Griff Charleston

    That did’t work but I cleared my history and it fixed it. really like the layout, although it’s different with the buttons on the left, it’s a good different.

  17. the new control placement will certainly take some getting used to. Been using HM3 since before it’s public release and I find myself automatically sending my mouse to where things used to be without thinking about it. It certainly is disconcerting for the time being until I unlearn the old placement and relearn the new!!

  18. So when do you find out if GOOGLE the overlord approves?

  19. I’m not sure AMS.

  20. but where is the contest list

  21. Right hand column, harshit, right where it was before.

  22. BurnedSmackdown

    The new layout is a bit too small

  23. This is something that popped up before the new layout, but this seemed like a good place to comment on it anyway:
    For some reason, the WordPress toolbar interferes with the save function in HM3 (haven’t tried in HM2 yet). When I try to save a character with a name that has the letter ‘n’ in it, typing ‘n’ does not in fact type the letter, it opens a drop-down window from the WordPress bar’s “talk bubble” button (don’t know what it does or what to call it, other than it has an incessantly buffering drop-down and makes it ear impossible to type aythig with a letter ” i it). O techical difficulties i commets I’m just makig a poit. :)

  24. Oh shoot, Timedrop23, you’re right, I forgot about that. I thought I had a plugin to fix that for a while … I’ll check into it.

  25. For now, till Jeff fixes it, log out of the forums before using the lab–I forget who gave me that hint, but it does seem to work.

  26. I have notice the lack of a login button on the sidebar that used to be there before the site refresh

  27. Maybe a little late, but I’d like to share my thoughts on the new design.

    I like the way the ad is now outside of the actual plugin. The right-to-left reversal doesn’t bother me.

    The item thumbnails on the left are too small, with wasted empty space below. The other functions on top of them are definitely too small. I don’t think the multiples/singles button needs to be under the color, transform and pattern tabs. The “clear pattern” button is also too small.
    The new layout for the color tab is too narrow for it’s new height. The buttons on the left could be moved to the top, and the color swatches extended to the full width of the tab. Also, whether pre-set colors or custom colors has been selected should be more clear.

    Oh, another thing – you shouldn’t be able to change grouping by click on the text instead of the buttons. That one gets me a lot.