Explore how your product should work, before building it.

Sketch.systems helps software designers think about complex product behavior. Sketch out states, add prototypes, and clarify questions quickly.

Work through your product's behavior, step-by-step.

Brainstorm possible states of your system and type them out into a spec. The simple, Markdown-like notation is as easy as jotting down ideas on a whiteboard. It’s great for pairing sessions or team meetings.

Link your states together with transitions, triggered by events. You can click on event names in the generated diagram to walk through the system and make sure you’ve got it right.

As you make changes and improvements to the spec, the diagram is automatically updated. States can be nested to make the system easier to understand and remove repetition.

Envisioning how the UI should look in each state can help makes things less abstract. Add an optional prototype using Javascript, HTML, and CSS. You can make anything from simple visual representations to production-fidelity demos.

Save your sketch and share it with your team. The simple notation and diagram are accessible to everyone involved in designing your software product: engineers, designers, QA, managers, and clients.

Tutorials, sweet tutorials.

What folks are saying…