Website design a drawing guide for Web flow charts



editor’s note: the author of this paper is designer Felix Ding, Ding Yu. In the early days of the author’s design career, contact flow charts began. A good flow chart can be used to understand requirements, parse complex business processes, and also facilitate interactive design.

in order to maximize the value of the flow chart, this paper focuses on the analysis of the start and end tags, interface, dialog box, decision points, conditional branches, sub process, jump point, description, system behavior and visual vocabulary.


in the early days of my design career, I started drawing flowcharts. At the very beginning, the flow charts I drew were mostly simple. There were not many nodes in the graph and the logic was straightforward. Therefore, until I joined Alipay Chinese – the largest online payment platform, I realized the usefulness of the huge complex flow chart. In Alipay, the business requirements and process complex, change rapidly, makes the understanding of them itself is a very challenging job. It was at this point that I began to rely on process diagrams to understand requirements and use this method for interactive design. Gradually, the process shows its appeal: product managers love it, and even engineers use it to guide development.

in the fall of 2008, I summed up my experience as an article entitled "a little bit of experience in drawing Web flow charts" published on my own blog. The article immediately drew wide attention. A variety of recommendations, reprint, discussion and follow-up articles, online and offline frequently appear, and even some people in accordance with the methods mentioned in my article produced a set of flow chart template. Today, this article, published four years ago, still brings a lot of traffic to my personal homepage.

however, there is a serious problem with the above article, which makes its content misleading: it does not use the visual vocabulary used to describe information architecture and interaction design. Frankly speaking, when I was writing, I didn’t notice such a well known vocabulary, but created my own vocabulary and introduced it to the public. Therefore, some of the content of the article does not follow the Convention, and it is not appropriate from the point of view of DRY (Don, t, Repeat, Yourself, and do not repeat yourself). A year later, I did point out the problem in another article, but unfortunately this has not attracted much attention as it did last time.

in addition, it has been several years since the article was published, and I have accumulated a lot of new experiences and ideas. I hope to share it with you, especially English readers.

so now, as you can see, I’ve completed the English edition, a little bit of experience with the latest picture Web flow chart, and provided a homemade matching template download.

content summary


Leave a Reply

Your email address will not be published. Required fields are marked *