Stipple: Dot Display

Type: UI Design for Stipple’s Javascript-based “Dot Display”
Employer: Stipple
Tools Used: Adobe Photoshop
Details: Stipple’s “Dot Display” was a way to add tags to an image and display them on hover, allowing users to discover products, people, and notes within an image. Product Dots linked to Amazon, People Dots linked to Twitter or a public Facebook profile, and Note Dots displayed additional, miscellaneous information. Also included was a Metadata Dot (in the top right-hand corner, the Stipple S logo) which displayed available metadata embedded in the image.

Pre-Hover:
Pre-Hover

On Initial Hover:
On-Hover

Dots on Hover (this image shows all types at once, but a user would only see one at a time):
Dots Hover

Editing Mode:
Edit Mode