Author Topic: How to save more screen space:  (Read 774 times)

Sasha

  • Newbie
  • *
  • Posts: 25
How to save more screen space:
on: July 29, 2020, 11:27:48 AM
The new interface in the current beta is nice, better than before.

There is however much more that you can do to save valuable screen space:

- add the option to remove the undo redo buttons on the bottom left corner, they are unnecessary when you use gestures, which probably most people do.

- remove the big fat menu bar on the top of the reference panel. The options can be replaced with gestures, like double finger tap to flip and pinch out to reset the view, or any other gesture that makes sense here. No menu/toolbar necessary.

- the color panel is too big, make it possible to change the size. Another great option is to have the color Toolbar that is on the left visible in full screen mode, which would save even more space, or make it detachable.

- the brush settings have TONS of unused space! You can make the whole panel smaller, or USE the space for something like sliders, that would make adjustments faster.

- layers waste even more space than the brush settings, it’s  crazy. Remove the blending modes and opacity from the layer panel and move them to the layer options. Opacity could be replaced by something like press+hold+slide On the Thumbnail to left and right to change opacity without the slider.

Make it possible to dock a minimalistic version of the layers to the right edge and hide all options behind the Thumbnail of the layer. A small eye icon can toggle the visibility. A plus sign can pop up all options for adding new layers, adjustments , groups and effects. ( I illustrated a minimalistic panel on the screenshot below)

- Additionally, it would be nice make to have the option somewhere in the settings to make the whole interface smaller, but all the other points I mentioned above are more important.

Tip for the UI designers from another designer: Only use screen space where ABSOLUTELY NECESSARY, and don’t leave space empty. Infinite painter and craft pro are doing a good job with the minimal UI, You can learn from that. Remember, this is not a photoshop clone on the iPad, so make the interface more intuitive than Photoshop and use logical gestures as much as possible.  ;)




Now, the killer feature for a streamlined UI is this  8):
A gesture ( like tap or swipe with 3 or 4 fingers, or something else) that activates a customizable dashboard which temporarily darkens or blurs the whole screen And displays all the panels, options and tools That you change and use frequently. That way you can basically stay in full screen mode all the time and when you need something, like Changing the layer or manipulating the brush settings, you just do the gesture and everything you need is right in front of you and disappears when you continue painting. Similar to what The app craft pro is doing.
Last Edit: July 29, 2020, 03:30:59 PM by Ben

Lucky Clan

  • Administrator
  • Hero Member
  • *****
  • Posts: 1429
    • Lucky Clan homepage
Re: How to save more screen space:
Reply #1 on: July 31, 2020, 03:34:32 AM
Thanks for your suggestions, they all make sense.
We will consider implementing them in version 3.1.

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #2 on: July 31, 2020, 05:45:24 PM
Cool. I just noticed that  the perspective tool is also wasting a lot of space. Actually, you could put all the options into a horizontal toolbar at the bottom (or at the top) and it would be completely out of the way:

Last Edit: July 31, 2020, 05:47:17 PM by Sasha

Artsketch

  • Newbie
  • *
  • Posts: 14
Re: How to save more screen space:
Reply #3 on: August 01, 2020, 09:05:53 AM
I avoid touching the display and prefer the pencil or the trackpad cursor.

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #4 on: August 03, 2020, 04:08:50 AM
I just noticed in a YouTube video that you previously had the reference view right, it was perfect, no clutter, no menu  bar at the top, why did you change it?


Lucky Clan

  • Administrator
  • Hero Member
  • *****
  • Posts: 1429
    • Lucky Clan homepage
Re: How to save more screen space:
Reply #5 on: August 03, 2020, 05:53:42 AM
We implemented it first as a separate option. But then integrated it into general "Panel" solution which has opaque navigation bar.

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #6 on: August 03, 2020, 04:01:43 PM
Unfortunately, that was a step backwards in this case  :'(

Lucky Clan

  • Administrator
  • Hero Member
  • *****
  • Posts: 1429
    • Lucky Clan homepage
Re: How to save more screen space:
Reply #7 on: August 03, 2020, 04:35:03 PM
I will consider making a transparent nav bar...

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #8 on: August 05, 2020, 05:54:05 AM
You SERIOUSLY  need to rethink the global panel Implementation. They are good for layers, colors and brushes, but bad for everything else. For most menus, panels just don’t make sense and are getting in the way. Let me explain why:

1: They take up too much space. They have to be moved around, sometimes resized, and they are always hiding parts of the image, which forces you to zoom out to see the whole image. And what happens when you zoom out... A huge empty area appears that is not used. This means, for all filters and adjustment menus, the panel does not work:





2: many of the panels only contain a handful of options, some of them as little as only 2. Putting those few options into a panel is unnecessary, they can EASILY  be arranged in a less intrusive way. And they don’t need to be able to be moved around by the user, place them fixed where they don’t distract so that the user does not have to constantly move them out of the way.







3: you also implemented panels into the tools. This only makes sense when there are specific options for the tools that need to stay on the screen because you change them very often. But that is not the case, none of these options need to stay on the screen. Some are already accessible through gestures or the left Toolbar (which means you have the same options twice on the screen ), and the others are usually not changed frequently (the ones that under certain circumstances may be changed more often,  like drawing mode, can be placed into the quick menu, so the panel does not to be open anyway). That means, instead of a permanent panel that needs to be opened, sometimes resized or scrolled, and then closed again, a temporary popup right next to the optiOns icon makes more sense and is more convenient.







3.2: just like I mentioned above, all tool panels have only a few options. But the tool options are not accessible anywhere else, you only find them hidden behind the panel, that needs to be opened first through an icon on the left. But these options are important. Those are actually options that need to stay on the screen, but not in a panel, a panel is completely unnecessary. You could easily put the options into icons on the left , which is a great solution for all panels that only have very few options. Please Don’t hide these few options.






The main Solution
For all other panels, filters and adjustments, Like I already suggested above for the perspective menu, moving the options to a horizontal toolbar at the bottom solves all the problems, saves lots of screen space and keeps the options easily accessible (instead of hidden behind the 3 dot menu icon).

Last Edit: August 05, 2020, 06:00:30 AM by Sasha

Lucky Clan

  • Administrator
  • Hero Member
  • *****
  • Posts: 1429
    • Lucky Clan homepage
Re: How to save more screen space:
Reply #9 on: August 06, 2020, 04:09:56 AM
1. Making big vertical side-panel taking the whole height makes sens, however it may not look good in vertical orientation. Current solution is maybe not perfect, but it is not bad for sure.

3. Tool options are in panels, however if panel has not been moved after showing, it behaves like popover, so they are auto hidden when you start painting. Besides tool options for some tools can be used very often.
Converting panel to bottom toolbar - we will not do it for sure. Bottom toolbar sometime looks good, but it has the big problems:
- how to add new items when toolbar is full of controls?
- there is not much space on small iPads (like iPad Mini) in vertical orientation

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #10 on: August 06, 2020, 05:43:43 AM
I did not mean to do a full vertical side panel, there are not enough options to fill it, so it does not make Sense, that would be even worse than panels. A panel does not make sense either though, because of the reason I mentioned (it forces you to zoom out a lot to see the whole image).

You only have these 3 options:
Panels
Vertical side toolbar
Horizontal toolbar

Since panels and vertical toolbar don’t make sense , only a horizontal toolbar at the bottom is left for adjustments. Because all the options that you have there are mostly horizontal sliders, and only a few, not many, they easily fit down there. And then you only have to zoom out a little bit to see the whole canvas while making adjustments.

Problem 1: how to add new items when the toolbar is full?
Solution: first of all, which of the panels has more than a handful of items anyway? Almost all of them have very few, so that’s not even going to be a big problem. But let’s say there is one with many items. How to add more? Easy: make it swipeable to the left/right, and you have a whole new page to fill with new items. Put the less important ones to the second “page”, but they are still just a quick swipe away and easily accessible. (Even better, let the user arrange the items how he needs them)
Another solution: put the text/ description above the Sliders. That saves a lot of horizontal space without making the toolbar much bigger.

Problem 2: not much space on small iPad in vertical orientation
Why is that problem bigger with horizontal toolbar than with panels??? The opposite is true,  Panels are vertical, and take like half of the display when in vertical orientation, they are terrible in that case for small iPad’s.
Solution 1: when the items don’t fit into the horizontal toolbar when in vertical orientation, you can do what I mention above, make a swipeable Toolbar.
Solution 2: make 2 rows when in vertical orientation. Even a few  rows in vertical orientation  take muuuuch less Space than one panel.

So, there you have easy solutions for your 2 small problems. I don’t understand how you can accept the many problems that panels have, but not even consider the very few and easily solveable problems of horizontal toolbars, when they make much more sense than your other options. Procreate has horizontal toolbar for all adjustments , and people love them. That is good and thoughtful UI Design (although they could certainly do it better too).


3. Tool options: My main point here is, for tools like the move tool, they  should not be hidden behind a menu in a panel. These options are needed, you change them often. They need to STAY on the screen. You already added an options icon to the left side. Remove that, and place the options that are currently in a panel add them as  icons to the left, like I illustrated in the image. There is no reason to hide them in panels.

I am an experienced UI designer so this all is common sense  for me, but Artstudio team, PLEASE  be more thoughtful with your UI. There is so much potential for your app. You have the best functions, now it’s just the UI that’s holding you back  ;)
Last Edit: August 06, 2020, 05:46:41 AM by Sasha

Sasha

  • Newbie
  • *
  • Posts: 25
Re: How to save more screen space:
Reply #11 on: August 08, 2020, 12:31:59 PM
Any feedback on my last comment? Tell me what you think.

Lucky Clan

  • Administrator
  • Hero Member
  • *****
  • Posts: 1429
    • Lucky Clan homepage
Re: How to save more screen space:
Reply #12 on: September 18, 2020, 05:56:24 PM
Sorry for delayed answer, but we were extremely busy to finish everything.

Procreate is one of the very few apps that keep using horizontal bottom toolbar. Apple don't use it at all in their big apps like Pages or Numbers, but they use vertical toolbar and popovers a lot. Procreate always try to limit available options for their adjustments, so horizontal panel can work. And they have to put double effort to support horizontal toolbar - check their Liquify or Color Balance filters, horizontal toolbar is designed separately for vertical and horizontal orientation.
Artstudio Pro has also iPhone version, so it would be a triple effort. And we have many more options, so keeping horizontal toolbars woud need much more time to implement...

I agree tool like Move should show its options in the left panel. And we will do it soon. We already improved that for Select tools, and for Transform.