https://sketch.systems Sketch.systems Alpha Sketch a system 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. List some statesAdd transitionsRefine the modelAdd a prototypeShare the URL 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. [https://sketch.syste] This is a real link--open it to play around with this sketch. --------------------------------------------------------------------- Tutorials, sweet tutorials. * Five-Minute Introduction A short intro to the basics of using Sketch.systems. * Simple Search Bar Learn how to design a search bar interface using states and events. * Building a Prototype Understand the technical details of building a JavaScript prototype with Sketch.systems. * Designing Behavior Learn to model a system from multiple perspectives and introduce logic and decision making. * Building a Visual Prototype With Images A quick intro to adding images from tools like Sketch or Photoshop to your prototype. * Embedding Figma Files Here's how to hook up frames from Figma to states in your spec. * Sketching an iPhone Lock Screen Sketching out the iPhone lock screen as an intro to thinking about product behavior. * Parallel States Learn to use parallel states to model independent behaviors within a single system. --------------------------------------------------------------------- What folks are saying... * This is really elegant. It has a simple, markdown-like syntax for sketching out app behavior. Brilliant. [0f7uxgao_b] Allan White Lead Designer, Datica Health * Cool tool for sketching states of a software product. Has some overlap with the UI shorthand I use for new projects. [n3uSJI7z_b] Ryan Singer Product Strategy, Basecamp * It's exciting to see state machines become more explicit in the design tools and visual programming space. [RwwbnNpi_b] David K. Web developer, Microsoft * Maybe I'm late to the party here, but @sketchsystems looks really interesting. Nothing else like it, and genuinely filling a workflow problem no one else is trying to solve. [dnh2fshY_b] Jim Collinson UX/UI Designer, Maidsafe * This is a very useful tool. Tried documenting a simple production system behavior. Took less than five minutes! [PMXUwjNd_b] Kapil Reddy Staff Engineer, Helpshift * Now this looks very promising! Sketch.Systems allows us to use Markdown to describe the behavior of a system, while building prototype user interfaces on top of it. [vitaly] Vitaly Friedman Smashing Magazine * I really love the sketching attributes here. You can add some information in text form, see it as a diagram, play with it, and then add a prototype and correlate real behavior with the diagram. An excellent example of using the computer as a tool to aid human thinking. [AWseKQ1G_b] Adam Solove Frontend, Stripe * I've often thought that formal methods would be super handy on the front end, and likewise, I've also thought that formal methods folks could also learn a ton from UI folks. Great to see some work done towards bridging the gap! [brendan-20] Brendan Zabarauskas Software Engineer, YesLogic --------------------------------------------------------------------- Examples * Animated Button A simple animated button component, showing how statecharts can help with tweaking CSS animation values. * Button with Mouse Events A stateful button hooked up to mouse events in the prototype. * Mobile App A more complex sketch of an entire mobile app. * Table Behavior Exploring behavior of a table UI, with attached static mocks for each state. * Map Search Map-based search UI, with each state referencing Figma mockups. --------------------------------------------------------------------- Frequently Asked Questions Are these statecharts? Yep! Sketch.systems sketches are based on the statechart formalism developed by David Harel in the 1980's. For more details, see: * Harel's original 1987 paper, which describes the formal semantics * Harel's reflections, which provides historical context on the motivation and development of statecharts in the aviation industry * Samek's Practical UML Statecharts in C/C++, which focuses on technical implementation for embedded systems * Horrock's Constructing the User Interface with Statecharts, which is about exactly what it sounds like Does Sketch.systems support transition guards, transition actions, or extended state variables? Nope! The focus of Sketch.systems is on big picture sketching for communication and thinking. Supporting guards, actions, and variables would require turning Sketch.systems into a programming language IDE, which we feel would detract from its usefulness as a sketching tool. We recommend focusing on the big picture, using comments and transient states to capture logic at a high level (see designing behavior for more details). Then, once you've settled on the big picture and want to implement, do so directly in your production platform and language(s). Isn't there already a tool that has "Sketch" in the name? Yes, there are many! Back in 2000, @Last Software released "SketchUp" (a 3D modeling tool), in 2004 Alias/Autodesk released "SketchBook Pro" (a pixel editor), and in 2010 Bohemian Coding released "Sketch" (a vector drawing tool). In 2007, Bill Buxton (of Xerox PARC and Microsoft Research fame) wrote an entire book on the subject of how sketching fits into product design called "Sketching User Experiences." In it, he defines sketches as quick, timely, inexpensive, disposable, and plentiful--with a clear vocabulary, distinct gesture, and minimal detail. There really isn't another word in the English language that captures those qualities besides "sketch." We wanted the name of this site to do exactly what it says on the tin. Its purpose is to help you think about and explore how a system should work, with a simple vocabulary and quick, non-precious nature. That's sketching. Hence, sketch.systems. Can Sketch.systems analyze my statechart? Sketch.systems lets you explore sketches by clicking through the diagram, but it doesn't do any automated analysis to determine, for example: * whether every state is reachable * if loops exist * the number of "paths" between two states If you're interested in doing such analysis, we recommend looking into formal analysis tools like TLA+ or Alloy. Here are some resources to get you started: * Lamport's TLA+ video course * Wayne's Learn TLA+ online book * Wayne's Formally specifying UI blog post, which uses Alloy to analyze a Sketch.system sketch. Does Sketch.systems support parallel states? Yep! See the tutorial for details. --------------------------------------------------------------------- Keep in touch. Sketch.systems is designed and built by Kevin Lynagh (@lynaghk) and Ryan Lucas (@ryanlucas), with help from Nicki Vance (@wootbeep). Join our product design newsletter for thoughts on building new tools, links to interesting articles and papers, screencasts, and more. [ ] * [ ] I agree to my personal data being stored and used in order to receive this newsletter. * [ ] I agree to receive information on product design & development. [ ] [Subscribe] (c) General Reactives LLC HelpContactTermsPrivacy