Draw

Dev

Draw 1.0 This browser-based sketch pad was developed as a proactive design+code exploration to test the limits of minimal UI/UX in a drawing interface. It emphasizes smooth interactivity, accessibility, and clarity - delivering a tool that feels elegant and distraction-free.

↓

To draw: Tap anywhere in the box.

Built hands-free with voice direction using ChatGPT o3

This prototype served as both a design system test and an exercise in real-time UI responsiveness. The experience of building it hands-free with voice direction via ChatGPT o3 further demonstrates how AI can complement rapid prototyping.

  • Canvas API: Used HTML5 <canvas> for live drawing with mouse/touch support.

  • Custom Cursor: A dynamic brush-size cursor appears on desktop for intuitive feedback.

  • Undo Stack: Path memory is stored and rebuilt dynamically with command+Z and Undo button.

  • Export Feature: Saves canvas as a transparent PNG using canvas.toDataURL().

  • Accessibility Additions:

    • Right-click panel to toggle brush size

    • Touch support for mobile and tablets

    • Modal-based confirmation to match UI theme (replacing system alerts)

  • Auto-Fade Toolbar: The UI fades away during drawing or after inactivity for a cleaner workspace.

  • Loader UI: Custom black/white corner-dot animation styled with CSS only.

Acknowledgments

Agency

Fatoe

Team

Mike Orduna - Design + dev

Tools

ChatGPT o3 - Dev
Sublime Text - HTML