MyPaint/GUI Brainstorm

Also check the GIMP UI brainstorm for inspiration from the GIMP world. There are also some interesting Krita design documents.

Elegance is Simplicity
The Interface should be simple. It should communicate a lot of information clearly and must also reduce the number of times the user clicks to accomplish something.. Everyone should be able to look at the interface and intuitively be able to use it. We want to attract a lot of users and deliver a product that is elegant, beautiful and great at what it does.

Appearance
The interface must be aesthetically pleasing to the eyes, while delivering unsurpassed work-flow and organization.


 * Has to be consistent
 * A key to intuitively learning new features of the program is how they follow a consistent "mentality."


 * Think out of the box
 * There are other programs out there that aren't for image creation that offer neat ideas for work-flow.
 * eg: Firefox's tabbed browsing

Colour Wheel (classic colour theory)
A new colour wheel concept that is rooted in classic colour theory. It simplifies the selection of colours and offers quick and fast ways to put palettes together. (Proposal by Sean J MacIsaac)

''Interesting mockup, Sean. I like the idea to offer a visual "guide" to color theory concepts. And predefined color palettes might have their place in MyPaint. What I don't like is the additional concept of foreground/background color, and in general I think the proposed interface expects a bit too much planning from the painter. Saved ("preset") palettes would be an absolute must-have, but having to load them seems cumbersome. I'd rather show (some of) their content directly there along with their filename. And when I saw the T-Buttons, I thought it would be great to have your palette organized in rows, which you can remove and add back from wour working palette as a whole instead of individual colors. Thanks for your input. Matumio 19:53, 10 May 2009 (UTC)''

''I hope I addressed some of your concerns with the updated mockup.
 * some of the chages I made are:
 * I'd rather show (some of) their content directly there along with their filename:
 * Done
 * I thought it would be great to have your palette organized in rows:
 * Done
 * I like the idea to offer a visual "guide" to color theory concepts
 * That colour wheel would offer way more colours, I was just limited because I am working with inkscape, creating a colour array is not possible unless done manually. It would look more like a rainbow or closer to your "Wheel" color selector.


 * note: I am very exited about doing what ever I can here, I have been painting digitally for a long time and found short comings in many applications due to workflow related and efficiency issues--I am looking forward to helping in anyway I can.
 * Sean May 12th 2009

Color Mixer
Here's a change to the Mixer to make it even simpler.

Color Popups
see MyPaint/ColorSelectorUsability





Brush setting dialogue
Suggested updated brush setting dialogue:

Separate the normal brush list window completely from the process of creating new brushes -- instead keep that as only a "dumb" selector (which can thus have a pop-up nature, see Color Selector Usability brainstorm). ). Use the brush settings window as a stand-alone "brush editor". Therefore it should also have the "new",button now located at the bottom of the brush selector (not seen in mockup).

At the top of this window is a list of current brushes (further decoupling it from the brush list window) so that it is possible to see which brush is currently being worked on.

The graphic brush stroke updates dynamically to show the effect of the changed setting. Maybe this area can also double as an draw area for creating a graphic for a new brush?

The idea is to bring forth only the settings which are most often used, such as radius, opacity, smudge and eraser (for example) and give the opportunity to hide away settings which are less used and/or more complex to understand what they do. Such complex settings are hidden in tree structures which can be retrieved by clicking the small arrows.

Each slider setting has a [...] button that links to the detailed tablet-sensitive settings. The green/grey (R)eset-button is green if a setting has changed from the default, either in the slider or under the [...]-button, grey otherwise. Pressing a green button will turn it grey and reset everything related to that slider to default.

The buttons (Basic), (Extended) and (Full) dictate the complexity of the dialogue. The modes dictate how much of the tree structure is visible by default. One can always show things manually, but pressing the mode button again will return to the default visibility.


 * In the (Basic) mode, only top-level settings are shown, all other sliders are in the tree are closed, regardless of their status.
 * In (Extended) mode, top-level sliders + all tree structures which were changed from the default will automatically be visible (the image mockup is not really correct, in extended mode the "radius" sub-tree would not be visible since neither of the items there have been changed).
 * In (Full) mode, finally, all sliders will be shown, regardless of if they where changed or not (this is like the current dialogue).

''A problem might be that the full view of this dialog will not fit on any screen vertically. --Matumio 08:39, 25 December 2008 (UTC)''

Context Pie
Horizontal movements change the brush size, vertical movements the opacity. The inner button of each piece opens some dialog, the two outer buttons immediately select something, eg. the most recent two brushes or colors. Open Problem: visualize the opacity/size that is really chosen. Size could be solved by changing the cursor shape.

Also, it might be better to have multiple small submenus instead of a big one that contains everything.

Misc
A "cropping frame" would be useful when saving/loading images. With the infinite canvas, this would crop the area outside the frame when you save to "flat" fileformats (PNG, JPEG, etc). Saving to PSD should keep all image data outside the frame, but set the canvas-size apropriately. When loading these fileformats, the frame would be set to the visible area of the file. (PSD:s would have layers sticking outside of the frame, while "flat" fileformats would only have image data inside the frame.) The frame could be visualized as a "walking ants" line or a semi-transparent black mask outside of the frame. It should be possible to toggle the viewing of it, and to resize/ move the frame freely.


 * This is a known missing feature, see also this bugreport

---

A layers window for viewing and managing your layers. (By Clement Skau)

Changing the windows from regular windows into pop-up windows when in full screen. This will prevent the taskbar from forcing itself on top of the canvas. (By Clement Skau)

View the size of the brush when the size is changed (Key d an f).

Use Space for translate picture.
 * Already done in SVN, not yet in a release though.

Save the workspace (place of windows, size, organisation...).
 * -Actually, it does this already...
 * -Ok, place of windows is ok, but not the size (on windows XP)

A Full Screen feature under View menu. And hiding the menubar also. Just infinite canvas on desktop!
 * Version 0.5.1 already has that.

A version for MacOsX ???

Implementation Plan
What is our time-line for ideation of the interface all the way to execution of it?

Goals
 Have a highly efficient and aesthetic interface  Tabbed canvases implemented Dialog behavior Interface Elements Appearance and Behavior  Collapse button behavior and appearance Button behavior and appearance Edit field behavior and appearance</li> Drop down behavior and appearance</li> Listbox behavior and appearance</li> Editable row behavior and appearance</li> Focus box behavior and appearance</li> Popups behavior and appearance</li> </ul> Layers behavior and interface</li> Palette behavior and interface</li> Colour mixer behavior and interface</li> History behavior and interface</li> Navigator behavior and interface</li> Tools Menu behavior and interface</li> Tools Dock behavior and interface</li> "Save and Crop" behavior and interface</li> "Open" behavior and interface</li> </ul> </ul>

Deadlines
<ul> Have a highly efficient and aesthetic interface When? </li> <ol style="color:#515876; list-style-type:decimal-leading-zero;"> Commit Design of Interface by When? </li> <ul> <li>Commit Includes review of design and any last minute revisions</li> <li>Commit Includes public release of all necessary working files</li> <li>Commit Includes colours</li> <li>Commit Includes size and dimensions</li> <li>Commit Includes fonts and their sizes</li> <li>Commit Includes interface elements paddings and margins</li> </ul> <li>Tabbed canvases implemented When? </li> <li>Dialog behavior When? </li> <li>Interface Elements Appearance and Behavior When? </li> <ol style="color:#767da0; list-style-type:lower-greek;"> <li>Collapse button behavior and appearance When? </li> <li>Button behavior and appearance When? </li> <li>Edit field behavior and appearance When? </li> <li>Drop down behavior and appearance When? </li> <li>Listbox behavior and appearance When? </li> <li>Editable row behavior and appearance When? </li> <li>Focus box behavior and appearance When? </li> <li>Popups behavior and appearance When? </li> </ol> <li>Layers behavior and interface When? </li> <li>Palette behavior and interface When? </li> <li>Colour mixer behavior and interface When? </li> <li>History behavior and interface When? </li> <li>Navigator behavior and interface When? </li> <li>Tools Menu behavior and interface When? </li> <li>Tools Dock behavior and interface When? </li> <li>"Save and Crop" behavior and interface When? </li> <li>"Open" behavior and interface When? </li> </ol> </ul>