EightShapes/contrast-grid

Wireframe UI

Closed this issue · 3 comments

Wireframe UI

@nathanacurtis here's an idea for the Color Entry UI:
screen shot 2017-01-06 at 11 06 20 am

Also posted to 8S slack.

@nathanacurtis here's a medium-fidelity wireframe. I leveraged eightshapes.com for colors and an initial palette. Some notes:

  • I think it's best to load with a default palette rather than an empty state. That way we don't need an empty state tutorial or instructions.
  • The "Defaults to inverse of foreground colors" would be the placeholder attribute of that textarea. The generator will use those background colors only if there are valid values in that textarea, otherwise it will use inverted foreground colors.
  • The "Generate Grid" button isn't really needed, the grid can update on keyup as values are entered into the textareas. Do you have a preference for that behavior? Keyup vs. Button Click?
  • I didn't populate every contrast value and badge, but obviously, they will all be populated.

screen shot 2017-01-09 at 10 20 45 am