[Discussion] UX/UI Design Guidelines

[echo6ix]

Opening this issue to start a discussion on any possible UX UI design guidelines to achieve a consistent, clean, and simple design throughout Stash. Full disclosure, I'm not a designer and I don't really know how to write design guidelines.

Some (hopefully) relevant notes I'd add to start this off:

• Keep Stash looking simple and remember it needs to scale to mobile viewports
• There are similar apps to Stash, but their UIs are overwhelming with their disorganized and inconsistent implementation of features. Stash can offer a rich feature-set and present it in a well organized and consistent manner.
• Don't recreate the wheel. Please use established sites like vPorn, xHamster, SpankBang, or PornHub for inspiration on an optimal UI. These sites make excellent use of screen real estate while providing necessary scene info, performer info, gallery info, etc.
  • Eg. Use of overlaying (z-index) HTML DIVs on scene thumbnails and performer thumbnails, where resolution, scene length, scene count, and performer fav'ing on mouseOver are all placed in overlays instead of stacking rows of text above or beneath the thumbnails.
• Design consistency between each of Stash's main sections (Scenes, Performers, Markers, Tags, etc).
• The filter container is Stash's version of the global search box. It should be viewable in each section of Stash from scenes to tags, and it's filters and parameters should adapt to the section it is located in.
• Increase simplicity through reduction of redundancy/reduction of duplicate design. For example the current filter container can be optimized as follows:
  • The grid, list, and wall view buttons that have icons do not require text labels. Text labels should be in tooltips.
  • The filter button, select none, and select all buttons can be minimized by using their corresponding icons (currently with Blueprint) and mouseover tooltip text label.
  • Those few modifications alone would allow the filter container to fit in a smaller viewport and just give Stash a more simplistic look without compromising any features.

Note: A compilation of UI UX related suggestions and concepts can be found on issue #108

[Leopere]

Please add this stuff when its solidified as a proper spec to #211 under an independent UI section.