[Feature Request] Make better use of space in the user interface.

[carlsmith]

I've been really getting into Piskel lately, and spent some time tweaking the UI. I just hacked it with Tampermonkey, but am interested in doing it properly and submitting a PR.

There's a screenshot below. I didn't really want the Filename, Create Sprite, My Gallery and User buttons at the bottom of the right-hand panel, but it was the best I could do with browser hacks. Ideally, they'd be in their own little titled section, just like Layers, Transform and Palettes (Maybe named Account), and I'd change the actual buttons to be exactly like the ones in the Transform section.

The main aim of the changes was just to make better use of the space, mainly getting rid of the banner across the top. I also made the background black, so that the black edge every physical panel has looks more like part of the UI, which creates a bit of space between the buttons and the edge of the screen. I also think black and gold imply a restricted palette, which feels appropriate.

If I made a PR, which changes would you like to see in it (if any)?

[juliandescottes]

Thanks for the suggestion @carlsmith , that's interesting.

From the screenshot:

• I really like changing the coordinates / size color to gold, makes them popout a lot more
• we can make the background a bit darker to improve the contrast but I'd like to avoid going to pure black.
• not sure about moving the top bar to the right column. I already find it too packed as it is now :). The top bar also gives some consistency between the editor and the rest of the piskelapp.com pages. Maybe we could just have a "fullscreen mode" where the top bar gets collapsed completely to the right, as a single menu button that would show on click the title of the sprite + links to all the actions currently available.

You can send a PR for the first items. For the top bar work, let's iterate a bit, because the code is split between this project and the piskelapp.com repo (https://github.com/piskelapp/piskel-website) so modifying this will be a bit more tricky :)

[carlsmith]

Thanks for taking the time to look into it @juliandescottes - much appreciated.

Changing the coordinates to gold is an easy edit, so I'll start with that. It'll let me get a PR done before looking at anything more involved.

Personally, I really don't like having a gap above the pen-size widget, or above the five icons on the right hand edge, and think it looks nicer if everything is level at the top and 'drips' down like paint.

I'll get my laptop set up, and push the gold coordinates. Then we can work through the rest of the items, and you can let me know which are worth working on.

[carlsmith]

I finished playing with Tampermonkey, and started working on the code properly.

In Tampermonkey, I managed to move the buttons from the top bar into the Export tab, just so they'd still be available. The screenshot looks really cluttered, but the plan is to create a new tab named Account to spread things out.

I'm still pretty new to Piskel, but took a guess at what the new Account tab would contain, and came up with two sections, containing five buttons altogether.

    Sprites
    -------------------------------------------------------
    [ New Sprite ] Create a brand new sprite for your collection.
    [ Clone Sprite ] Create a new sprite from this sprite.
    [ Clone Frame ] Create a new sprite from the current frame.
    [ Manage Sprites ] View and manage your sprite collection.

    System
    -------------------------------------------------------
    [ Exit ] Log out of your session on this browser.

My version of the editor looks like this now:

[carlsmith]

I really like changing the coordinates / size color to gold, makes them popout a lot more

That's sorted in the PR.

we can make the background a bit darker to improve the contrast but I'd like to avoid going to pure black.

The black really grew on me, but that's cool. If you let me know what you think it should be, I can change it. I'll just tweak my version with a browser extension :)

not sure about moving the top bar to the right column. I already find it too packed as it is now :). The top bar also gives some consistency between the editor and the rest of the piskelapp.com pages. Maybe we could just have a "fullscreen mode" where the top bar gets collapsed completely to the right, as a single menu button that would show on click the title of the sprite + links to all the actions currently available.

Having a fullscreen mode, and only showing the top bar outside of fullscreen mode, sounds like a prefect compromise.

The title is currently in the top bar, and it's not obvious where else to put it. Moving the Create Sprite, My Gallery and Sign Out buttons into a menu works well, but it means the user's name is no longer visible in the main UI. Maybe the title and author (username) should be rendered as gold text at the bottom, with the coordinates, in a monospace font, to create a little metadata section there.

[juliandescottes]

Hey thanks for sending a first PR!

The black really grew on me, but that's cool. If you let me know what you think it should be, I can change it. I'll just tweak my version with a browser extension :)

I think you made a good point, and we can go for a darker shade of grey, just not completely black. Something like #0c0c0c ?

The title is currently in the top bar, and it's not obvious where else to put it.

We could have it on top of the animated preview? I imagined the fullscreen UI looking something like the screenshot below, with the user's avatar that should be in the top right gold button.

took a guess at what the new Account tab would contain, and came up with two sections, containing five buttons altogether.

I'd love to have the clone etc.. features in the editor, but I think they are "File" level actions and should rather be merged with an improved "Save panel" (which is currently terrible).

I think I would prefer to keep account level actions (go to gallery, log out, soon preferences) in the top bar (or in fullscreen mode in the small menu button)

[carlsmith]

I took your pointers, ran with it a bit, and created a mock up . The background is darker. Let me know if it's not right.

So, in fullscreen mode now...

• The PIskel logo drops down to the top of tool picker.
• The User button becomes the top Menu button, but with the user's avatar (bordered in white) as the logo. This makes it stand out (especially to the user), while keeping it consistent looking.
• The title drops down to a new box above the animation preview. I added an icon for the save-status, that could change colour, just to see how it looked, but think a simple asterisk might be prettier and leave more room for long filenames.

In the screenshot, you can see that my version has a few other differences, like the keyboard icon is on the right, and the frame viewer doesn't have the scrollbar and pointer. These are just things I did with Tampermonkey. I'm obviously not thinking to submit a big PR for a UI overhaul. We can step through each thing one at a time and see what sticks.

To some extent, I'm just trying stuff out, but tried to take on board the pointers you gave me. Thanks again for spending your time on this. It really is appreciated. I love the software, and would really like to pitch in.

[juliandescottes]

Thanks for the new mockup.

• the title looks nice at this spot, I agree the asterisk will be better. Maybe we could try to invert the color scheme for the title? Gold background, black text, see how it looks.
• we can go a bit darker with the background if you want (looks like this is #191919)
• the keyboard shortcuts icon looks fine on the right, but is there a rationale behind this change? I thought it was good to have it next to the tools because the first thing you might want to remap are the tools shortcuts.
• tools/panels moved to the top: I think I still prefer the centered version. I feel it's less packed, but it's hard to be objective about this one. I think we should leave it out for now. Maybe I can try to poll on twitter, but I don't usually get a lot of feedback :)
• finally for the user menu/panel, how is it working in your current version? does it open a sidepanel or a menu similar to my screenshot? If it's styled to look like the pref/resize/etc... then I think it should open the side panel. But what is the content in this case, only links as in the menu?

Let's merge the background color change, to get this out of the way.

Then focus on getting the title+userbutton to replace the top bar. That will be a big change, and I'm hoping we can actually use it as the default rather than having an optional fullscreen mode that will be harder to maintain in the long run.

[juliandescottes]

To some extent, I'm just trying stuff out, but tried to take on board the pointers you gave me. Thanks again for spending your time on this. It really is appreciated. I love the software, and would really like to pitch in.

No, thank you for contributing! It's really inspiring to see your motivation with Piskel. And I'm sorry for not being super responsive, I'll try to get better at this :)

[carlsmith]

Hey @juliandescottes - I'm going to be a bit on and off too. It's no problem at all. I understand it's something you have to find time for. It's late here now, so I'll make a PR tomorrow for the background, and respond to your other points properly then.

Cheers dude.

[carlsmith]

the title looks nice at this spot, I agree the asterisk will be better. Maybe we could try to invert the color scheme for the title? Gold background, black text, see how it looks.

Good idea. That should look really nice. We'll give it a go.

we can go a bit darker with the background if you want (looks like this is #191919)

Cool - no worries - will do.

the keyboard shortcuts icon looks fine on the right, but is there a rationale behind this change? I thought it was good to have it next to the tools because the first thing you might want to remap are the tools shortcuts.

There was no good reason for moving the shortcuts thing to the other side. I was just trying stuff. It's fine where it is, and what you said about having it next to the tools makes sense.

tools/panels moved to the top: I think I still prefer the centered version. I feel it's less packed, but it's hard to be objective about this one. I think we should leave it out for now. Maybe I can try to poll on twitter, but I don't usually get a lot of feedback :)

Personally, I much prefer the tools near the top, but if you prefer them centred, I'd rather go with your judgement. You designed the app after all. It'd be interesting to see what polling users on Twitter would reveal, but unless there's an obvious preference, leaving it as it is would be fine.

finally for the user menu/panel, how is it working in your current version? does it open a sidepanel or a menu similar to my screenshot? If it's styled to look like the pref/resize/etc... then I think it should open the side panel. But what is the content in this case, only links as in the menu?

In my version, the user menu isn't implemented yet. The mockup is photoshopped in places. In practice, I have just shoved everything into the Export menu for now (there's a screenshot in one of my previous messages above).

My best guess at the moment for what would go in the new menu would be something like this:

Sprites
-------------------------------------------------------
[ New Sprite ] Create a brand new sprite for your collection.
[ Clone Sprite ] Create a new sprite from this sprite.
[ Clone Frame ] Create a new sprite from the current frame.
[ Manage Sprites ] View and manage your sprite collection.

System
-------------------------------------------------------
[ Exit ] Log out of your session on this browser.

[carlsmith]

I'm focussing on the docs at the moment, which I'd really like to put some time into and do well, and none of this UI stuff is show-stopping - the current UI is perfectly fine - so while I'm happy to discuss it and make PRs still, I'm not really thinking about this stuff at the moment much to be honest.