Let's talk about flow charts. In the last video, I talked about site maps versus flow charts and how they're not the same. Sometimes people will say, "Oh, you make a site map or make a flow chart," and they'll see it ambiguously as if they're similar, but they're really not. When we talk about flow charts, we're talking about these diagrams that have rules or logic to them. I think of them more of an engineering sort of thing and that these shapes that make up the flow chart actually have a lot of meaning. That they're universally known as having that meaning. Instead of just putting squares everything, if you put a diamond or a triangle or a circle or different shapes, essentially, they will have different processes or meanings.
I would say the tool to use when creating flow charts, just right out the bat, is probably called Creately. This is Creately. You have various diagrams you can choose from. A flow chart, block diagrams, data flow diagrams, network diagrams, entity relationships, use cases, concept and brainstorms, mind maps here, which I would say these two are the closest thing to what would be site map, but all really are under this thing of Creately.
Creately can go and do all of that. This is what Creately's interface actually looks like. You have the different shapes that you can set up here. Start and end point, you have an input and output, you have a process, you have a decision. You can see how this is set up, where I can drag shapes here, and I can move them around here. It automatically connects the lines. It's a very, very great tool.
Here, you can see, start and I can move this around and change colors, of course, and do all of that. Then I get into a decision and I know that's a decision based on this diamond shape. If I wanted to go and apply this to my application, I could say that, well, there's actually a flow that the user must go through. I must onboard the user. Well, I would need to create a flow chart to go in and do that so they know exactly... I do step one to step two, or I could go over here to step B because I could make a different decision with that. That's what a flow chart can go and do and Creately's a great tool to go and do that. It's fantastic. You can share this and export this.
The next one though, when you get into these screens, and this is really for iOS or even for your mobile responsive web design, you can use these screens to represent, or connections, to represent data and actual flow that the user is going to take now. Where Creately was a diagram still, and it was business logic or system logic, Overflow is the actual screens and how they connect. You can see this top-down diagram and see the flow and the possibilities of ways this is connected.
Now, what's really cool about this, and at first, when I first found out about Overflow, I was like kind of less excited because I had to go in and drag all of these lines. Then when I changed my stuff, I had to go back and draw the lines again. But Overflow now integrates with Adobe XD, so you get immediate connections between your screens. If you're in there in prototyping Adobe XD, and then you want to export this or sync this with Overflow, there's a plugin for Overflow in Adobe XD now, and you can connect them. A really cool thing. We'll be making a video series on actually how you go and do this with Overflow in Adobe XD.
Those are your options for flow charts. Again, at this point, this isn't really that tool. It's really Creately or it's... If you're needing to make a flow chart, or if you need to make a site map, it's Mind Note or Coggle, and it's getting these ideas out. Even if you're just drawing them for now, you're just drawing lines, you're drawing connections, whatever it takes for you to get to that next step, that's what we're after with these processes.