Design of Smart Image Crop, my cropping app

[Buckethead]

Hi all,

I'm working on an application to crop sprites according to the size of the biggest sprites, so the animation won't jump. It's an upgrade of an java app I did a while ago:
https://github.com/Sanderdl/SmartImageCrop

I'm redoing it because I want to add some new features and learn Electron in the process.

The designs are done in Figma which you can find here:
https://www.figma.com/file/QOjzmAWjVqKI4QSdOzDeMPWe/SmartSpriteCrop?node-id=0%3A1

If you want to edit the design in Figma yourself you can download it here:
https://github.com/Sanderdl/smart-sprite-crop/blob/master/design/SmartSpriteCrop.fig

Please let me know what you think.

[Gurok]

You probably want "overwrite original" instead of "override original" for the output files

I don't think it's really clear what constraints does. A preview of what happens to the first frame might help here.

Along similar lines, it might be good to show the colour of the top-left, bottom-right, etc. in the first frame when choosing an auto-detect option under "Background color".

I wouldn't use "Save cropped sprites" as a heading beacuse you're not choosing whether or not the cropped sprites are saved but how. "Output file location" might be better.

"Sprites are overwritten" isn't really appropriate because it hasn't happened yet. Maybe "sprites will be overwritten" or "overwrite source files" or even just "overwrite".

Your wizard seems to only have one real step (the middle one). I'd consider removing the previous/next all together and just show enable options when at least one file or path has been chosen.

I would right align the navigation buttons (previous/next). It keeps next in position when there's no previous button and it's also consistent with how most desktop OSes present wizards.

[Buckethead]

Great suggestions! I'll see what I can do to make things more clear.

I don't think it's really clear what constraints does. A preview of what happens to the first frame might help here.

This is used if you have an animation that should go to from one side to another. For example if a character bends over to the right to pick something up, you don't want to crop all the sprites from the center. I hope that makes sense. It's even hard to explain in text.

Your wizard seems to only have one real step (the middle one). I'd consider removing the previous/next all together and just show enable options when at least one file or path has been chosen.

I would right align the navigation buttons (previous/next). It keeps next in position when there's no previous button and it's also consistent with how most desktop OSes present wizards.

Yeah I was thinking of having everything on one screen and having the crop button disabled until all the steps are completed

[Buckethead]

I did some redesigning. There are now just two screens and you advance to the next after selecting sprites. Here are some images for people who don't want to open up Figma:



I also started working on the actual app. I've made the first screen and you can drag and drop files on it like in this screenshot:



Still not sure how to convey what constraints do. Maybe some sort of animation to display what will happen. But that's for later.