search

toolness / p5.js-widget

A reusable widget for embedding editable p5 sketches in web pages.
https://toolness.github.io/p5.js-widget/
GNU Lesser General Public License v2.1
162 stars 44 forks source link

Style the widget #15

Closed iamjessklein closed 8 years ago

iamjessklein commented 8 years ago

The widget could be styled so that it's designed in thematic harmony with the p5 IDE and website. In order to start this, I broke down the anatomy of the widget to understand all of the different components and what role they play in terms of provide feedback for users:

4a34cff2-3e0f-475b-a247-36028af7df6c

iamjessklein commented 8 years ago

Building off of the widget that's currently implemented, I did a few iterations on the style.

Here's the current implementation:

screen shot 2016-04-09 at 10 12 29 am

Here are my first iterations:

Option A: widget-a

Option B: widget-b

Option C:

screen shot 2016-04-09 at 1 51 54 pm

Please provide feedback on this invision mockup.

iamjessklein commented 8 years ago

Here's what option b would look like in context: artboard 5

toolness commented 8 years ago

Option B looks awesome! I thought that #14 was this issue, so all commits related to this referenced that issue instead--so look over there!

I'm going to mark this as fixed, and we can address individual styling bugs in separate issues.