Project

General

Profile

principles

  • *its about the image (not about the ui)! *
    • serve, don't distract
    • be in the background
    • peace, balance, beauty

derived rules

  • serve, dont distract
    • every graphical element needs to justify it's shape
    • solve functionality with gestalt effects rather than with explicit graphical elements
    • e.g. no frame borders, but put things close to each other and far from the rest (law of proximity).
  • stay in background
    • very little colors
    • just enough contrast, not more
    • hide unnecessary functionality
    • minimal screen real estate taken by controls.
  • peace, balance, beauty
    • bauhaus
    • simple shapes, few shapes (equilateral triangle, sphere, square, 3:2 block)
    • few lines to form a sparse grid over the whole window (use law of closure to create the impression of a unified gui)
    • few aspect ratios (1:1, 3:2 as the perfect fifth in music or most slr images)
    • symmetry (left/right panel, nav<->histogram)
    • rather whitespace than controls, to create some quiet around the image.

Bauhaus Widgets guidelines

Appearance

  • Minimal graphical elements
  • Consistent look&feel and interaction
  • Widgets and labels
    • Go in separate lines, so that translations don't screw up alignment (e.g.: (1.0.3) module title)
    • Or labels go inside the widgets (e.g.: (1.0.3) any slider, any combo box)

Behaviour

  • Single-click
    • Slider: changes value depending on where the user is clicking (normal slider behaviour)
    • Combo Box: opens combo box
  • Double click
    • Slider: resets to default value
    • Combo Box:
  • Mouse wheel on hover
    • Slider: increments/decrements by a predefined value
    • Combo Box: cycles through entries that have effect on the image
  • Secondary-click activates a more manual selection
    • Opens fine-tune menu
      • Click accepts (alt: Enter)
      • Secondary-click again cancels the action (alt: Esc)
      • Mouse wheel keeps on-hover behaviour
      • Slider: hovering has effect on the image
      • Combo Box:
    • Enables typing choice
      • Note the scale/unit for numeric values. if useful values are something like 0.002 then we need to change the unit or scale (it's bothersome to type)
      • Enter acceps
      • Esc cancels

detailed guidelines for plugins

TODO:
  • borders around image in dr mode (=>peace)
  • allowed gui elements
  • reset labels
  • double click resets
  • arrangement and proportions (resetlabel, fixed size | gui element) => minimal grid raster
  • font (labels and buttons same color)

list of offenders

  • Simon: ZoneSystem: aspect frame used for containing the b/w image should inherit image's proportions in order not to waste space above & below the b/w image.
  • Simon: This and other plugins feature unnecessary borders around UI elements. Just get rid of them (I proposed batches but ongoing discussion whether we should inherit the grey border from histogram or not. We don't need it in my eyes.)
  • Simon: plugin focus needs some love in my opinion, both the visual and functional part. A plugin should get focus immediately when changing no matter what. On the other hand it still should be able to enable a plugin without forcing an expansion. The visual difference between focused and defocused plugin should be more clear to allow fast distinction.
  • TODO: individual plugins/gui elements and how they don't follow the above

Concrete Rules

  • DT is designed to work on fullscreen, or any windowing method that puts the mouse boundries where DT's window boundires are (see panel-switching borders if you don't understand this)
  • Avoid too-small UI elements that need precision clicking, especially if they unfold menus
    • example: the borders that show/hide panels (being in the border of the screen helps)
    • offender (but doesn't matter) (1.0.3): plugin presets from the visible icon (right-click anywhere on the plugin's widget unfolds the same menu)
  • Avoid redundancy
  • hide unnecessary functionality
  • minimal screen real estate taken by controls.

Spaces and separations

  • Avoid drawing borders. Instead make a change in background color or just leave a blank space.

Widgets

  • nonmoving switchers: for any given toggable/switchable UI element, the switcher item should not change place then the UI element is switched on or off.
    • example (1.0.3): any single plugin, the switcher item is the title
    • offender (1.0.3): "more plugins"
  • avoid too deep submenus, and having to click too many times to get to something
  • double click on a slider resets it to the default value

Also available in: PDF HTML TXT