Whimsical - Flowcharts and Wireframes

1. Intro: Hello. My name is right. Well designed. Doing tools. This first year you're talking about physical and online software. That last collaboration. Wire frames, site closeness of other upcoming features. Simple. And I think you're gonna love it, so let's jump right in. 2. Whimsical Intro: Let's start off by signing in. You don't have any counter ready. You can say that, but I have already created one. So I'm gonna sign in. And what we first see is our landing page here where we're actually in the Examples folder currently where we've been given three examples that we could look into. We'll look in those in just a second here, but you clicked the plus. You can also create another folder where you could actually store your boards inside of that for starting a new board. We have two options currently, that's a flow chart and the wire frame that we have to upcoming boards that the sticky notes and the mind map. We have four free boards that we can create with this free version. The examples don't count as those free ones, so we could still create four more. If you actually go into one of these examples, you can look inside of it and you can see that it's actually been pretty populated with actually some stuff we're going to build. But you can move around here and you can actually do these things around, and you can actually change the text there fully creditable boards, which is pretty cool. And then to exit this, you just go up to the left hand corner. Click examples and that'll take you back to this page here. So let's get started. Let's start off with first creating a flow chart and then next will move on to creating a wire frame. 3. Flowchart (aka FC) Starting: So to create a new board, we select which one we want to create. In this case, I want to create a flow chart. So select that one. And here I'm presented with a blank canvas and right off the bat, I can actually in her name. Let's call this one, uh, sandwich. You'll see why in a second that I named a sandwich, But then I clicked return and it created that on the left. We have our toolbar. We're gonna look at all these different individual pieces as we go through creating our sandwich flow chart. 4. FC - Shape Tool and Tool Bar: start off with the shape tool, and that is the top option on the toolbar. It's also keyboard shortcut s for ad shape. Click on that. You see that we have a variety of shapes. These were actually flow chart symbols. And if you do a Google search for flow chart symbols, you can see what each of one is named and what the purpose of each one is. In this case, we're going to start off with this pill shaped one, which is actually called a terminate, which is sometimes at the end of the beginning of a flow chart. So if I click on that and I could drop that on my campus, you'll see that has a bunch of options. We get into that in just a second, but if I click away from that, you can see that now. Un selected that. But I can also click it to select again. Then I could move it around and position at whatever I would like to. Also, when it selected, we had the option of re sizing its If I hold shift and move these handles around resize it constrained, but I can also not you shift I can shape the size of. However I would like to. So I'm just gonna leave at this for now on. Then let's talk about what all the different options are on the toolbar above it. 5. FC - Shape Tool and Tool Bar pt2: So the two barb of allows us Teoh add text to our shape. We can also change the shape so you can select one the other shapes that we have we can also add color to it. So say I want to make it yellow, for instance, we can choose to have a fill color to have it with outlined also have a dashed the ability duplicated to add a comment And then we could just insult like that shape there. So it kind of moving down here spittle texting that. I'm gonna call this one start since this is the start of my flow chart. Once I got into the text mode, you could see that there text editor allows me to change the size of the text. I can also make a bowl talaq turn those on and off so you could see I have a right options and here as well, how my Lyman is and also how the alignment is from the horizontal alignment and the vertical linemen. So now that I have, uh, that quick off that to un select it 6. FC - Connectors and Shapes: one thing I really like about whimsical and makes it also really fast. Is this idea of what I'm gonna call auto connectors. But it's really just generating a quick connection to a new shape. It's gonna make a duplicate of the shape I've already started with in this case. I had this yellow pill and having over one of these you can see it's gonna create another one of those. Click that and instantly I have another one. And this one I could actually had text if I wanted to. Of course, I could change the shape, the color and all that which we're gonna do in a second here. Next part is going to show you that once we have these selected, I can actually do this problem. Do auto to create a fork off my shapes here. So I click on that. And now I actually have to, in this case to starting points. I'm gonna call the 2nd 1 All Stars is my alternative starting point. This is really relevant to what we're making currently, but we'll called two different start points nonetheless. So then I give this little space here. You can see that move these around these were continuously connected to the shapes of their shapes. Once we create these connectors, so a position that about their this shape actually don't need another one of these shapes. I'm actually gonna change this one into another young and maybe make it green on making this into a diamond, which is also called a decision, and I might hold down shift, and I can resize that a little bit bigger, and I'll kind of center that here, actually, person text in that. I'm gonna call this one hungry. So now we have to make a decision here. So you come in to start in this one. The first question we're asking is, Are you hungry? De select that? 7. FC - Add Connector: I want to create two new shapes. I'm actually add two rectangles, so I could also do keyboard truck that are in this case. I'm just going to select on that when I'm gonna drop one appear and gonna call this one, make lunch Now, I could also choose to duplicate this one right here so I could just duplicate that like that. You can also, if it's selected, you can see that you could tells you hear that you cannot do it all and dragged its Give us a little hint there. Why, however, over this. So if I were to click on this whole down ought and then I drag that down. This case I'm holding shifts that drags it straight down. So that's the other way to create that as well. So I shall delete this one that I had made over here, and I'm gonna call this one, go for a walk. Here's my options. And next thing I do is that I was showing how we over over one of these You can see that we have these connectors, but this kid's actually didn't have those created here, So actually add some of them so the next time I'm gonna look at is called ad connector or keyboard shortcuts. See? Click on that. And what I can do is I can click on the shape I want. And then I could just drag up to the other shape. I want to connect automatically. I'm able to add some text in this place. I'm gonna add Yes, I am hungry. So therefore, I'm going to make lunch. Also, when you make a connector, you can cover those. So they say, I wanna make this on green. You could make him a dash line. Still sort some of the options you could do as well and the different place of where the arrowhead is. So you can have this on the front, um, versus the too. We can also have create elbows and these make different shapes kind we have over here already and again. We also have duplicating and adding a common to that. We'll talk about at the comments a little bit later on. So phenoms Gandhi select that now I also want to create connector between this option. My no option now somethingto also, you can also do instead actually going over and using the ad connector tool is if shape is close to one of them. If you just click on the over over this, I click on that. It's gonna make a connection to the nearest shape. In this case, it clicked and made a connection right there. So that was great. Now, if I want to add text, you could see that distant pop up automatically. So if I just double click on it sometimes it doesn't work right away. But I have to get in there and double click on it. And there we go. There's my text. This is my no option and slept on the gangs. I want to cover this one. It's called Spread and no space it appropriately. So now I have the option. If I'm hungry, yes, that I make lunch. If I'm not, then I will go for a walk. 8. FC - Add Text: So I'm gonna scroll over a little bit here and for that of a mashup laptop on my lap on the track pad. I'm just using two fingers that allows me to score around my campus. I'm gonna actually add another shape. I'm gonna add another decision. Time and I could have just copied, uh, duplicated the hungry one in this case, I decided just to drop doing in there. And I'm gonna make sandwich an option to make a decision upon. Now. You know, wife named this canvas. I mean named a sports sandwich. This case again, I would make a connector somewhere here. I could make a connector to that click off bad. If I double click on this, then let's see. Yes, that's what I'd like a sandwich option. Let's cover this one. Let's make this one orange for our salmon there. So something else someone Teoh talk about adding was the text tool. So add text keyboard shortcut t So select on that one. This case I can drop that down and say, maybe this is a note to myself. Should include a list of sandwiches. So that's just something that note to myself if you slight. The skin you see over here on the right, We had this little hand like and drag around. This actually allows me to therefore make this into a paragraph where I could then have multiple lines of text. I'm gonna center these. I could make a little bit smaller, maybe even make a little bit. That's probably good. And then I just slide it up. So maybe this is a note for myself that during the unlisted kind of sandwiches, and that's something I could think about. 9. FC - Add Icon: the next two we're gonna look at is add Icon. I find this tool great. I've uses when a bunch when I'm making flow charts. This case is keyboard shortcut X. So click on that. And in this there's a ton of icons that we could use that are included with whimsical, and I could search for icons. Let's first start off the goingto animals in nature and you can see that clearly I have the option, which is the multi colors you can see there are colored. I can also have just a solid Phil, or it can also have a lion version of that. So we'll go back to the multi color and I like this crab here. So let's click on that. And then I give move my here. I clicked to drop it right there. And, of course, again you can also then resize is to whatever size I'd like. And you also have these other connectors as well, just like we did on our shape. So we can also create this in this case, looks like one ought to connect to my image, but I'm just gonna slacked off that we were there at any time. You can also go and decide that you want to switch what kind of color and you have. So you want just to fill the lion Subjective, multicolored. You can also rotate it. You can also have no color at all. So I could change it to, like, a solid feel like that. For instance, get a command Z and go back to my multi color like this with the different colors in it. We can also change, or I conserve going here and see if we can go in there. And maybe we wanted something different. So But I'm gonna keep the crab for now. So than me. Un Select that in the ad icon, you can also search for something as well as I had mentioned. So if I go in here and I wanna search for search for sandwich and see what they have here. So as I start typing, you see, we already have some options. This case I want I like this one, but I'm gonna want just a single still of that. So click on that and then I'm gonna drop that over here somewhere. So this case I do want to be different color since is the veggie sandwich. Let's make bag green Perfect. Just like that. But maybe this is a crab and veggies. So there we go. Now crab and veggie sandwich. In this case, I'm actually gonna add a connector to it. So sandwich hope we do this as a text to. So I'm gonna slide this over. Let's let the crab over. And I was, like, this year to put Yes. So, big lunch? Yes. Sandwich. Yes. I'm gonna have a crab and veggie sandwich. Sounds great. 10. FC - Upload Image: next tool I'm gonna show you is the upload image keyboard shortcut. I This allows me to upload an image. In this case, I have one of my desktop right here this delicious vegan veggie sandwich. So it's click on open that this also has the handle. So if I hold down the shift, I can then drag that into resize it. Let's make a little smaller. This option here actually allows me to have a frame or no friends. So I could have a little border around it or not. I'm just gonna keep it a little border, and I'm going to slide that above here. Then I'll scroll up a little bit to show that, And this way I can reminded of what kind of delicious sandwich I'm gonna have for dinner here. 11. FC - Add Link and Comment: so the final tool in the toolbar is theatric. Think key word shortcut K Click on that. This actually allows us to add a external link to our flow chart. Much you could open new tab. I'm gonna look for this fiscal Xhaka lease. And Santa Cruz is a great sandwich place. Here we go. So that I'm just gonna select your ill going to then copy that, go back to my Salinger and then I'm just gonna paste that in here. Oops, I wanted paste. Here we go and add. So first it drops a little symbol here. I can do that. Out of the way. There you can see we have. This is the flavor Khan from the website so that we have that little symbol. And if we were to click on this, of course, what's gonna happen is it's gonna launch the website just like that. That's pretty cool. Also in this option, if I go back to this when I click on the flavor com part, we click on the camera. We actually have the option to have the thumb now, which we have now you have the desktop head, which puts just a part of the page in there. We can also select to have the full page, which in this case is fairly long. So if I zoom out a little bit slide because that is all the difference, the whole menu, this is the whole page. I was there, and way can also have the option of the mobile versions of that or removing the snapshot, I guess unless you're gonna thumb now version, which is another option, which is a little bit smaller version of the website. Just That's kind of the small version of the Websites had, So I like that gives a quick little snapshot of it, and I think that's kind of perfect there. We can also duplicate this and also comment like other parts that we've seen. So this case, actually, let's add a comment that this allows you. See, this is the first comment on the page. There's a number one gonna say great place to eat and it truly is that so hit, send And there we go Now I've added a comment to that. So whoever is also part of this board that's part of and whimsical as well. They can also see this comments that they were to click on it. They can see that they can also reply that they could say that, Yes, they've been there, and it was a great place indeed. 12. FC - Closing: great. Well, that wraps up the left toolbar. As you can see, there's a lot of options that we could do when we're building are flow charts to exit this flow chart. We go to the left, a little menu here we click on that, and then we can just go back to examples, and we can also switch to different boards of in my have even create a new flow chart or create a new fire wire frame. This case, I'm just quick, back and seconds. Come back to my landing page here. Remember to call this your dashboard where I could see all the different examples that I have. 13. FC - VUI Challenge: look, he says time for a challenge. And this challenge is to create a voice user interface for any type of device that you might have or you could just choose one I actually having Alexis. So I'm going to give a quick example of creating one for that. We're going to do that, of course, using a flow chart, since that's what we're working out right now. So I'm gonna click on new flow chart to open up a blank canvas, and this particular skill I'm gonna create is going to called Ricky. And this is gonna be a skill that allows me to actually book a auto Ricky. So when the small kind of three world cars to pick me up and drive me someplace around in the city there, So it's kind of a the uber version of a other rickshaw. So let's get started, and you kind of see what I mean, and I'm gonna have you create your own skill. Doesn't have to be what I'm doing. But I thought at least we'd have a starting point there, So I'm gonna start off with going to a rectangle here, and this is just going to be how I invoke the Alexa skill you can also, when you create to get into creating voice user interfaces, when you use something like Alexa to invoke, and you could just invoke it with a while, with or without a request, in this case, I'm just gonna have it without a request. So you just actually opened up the scale first, and then you can make your request. So let's call this one, Alexa, uh, rips open, Rick. And there we go, of course, can hasem the options. So the first option gonna have is location that I would want to goto. So once I opened that back and then say location is 100 Main Street and that's in any town , California, it's going there. So in this case, I'm also gonna go a little further over here, and I'm gonna drop one of these right here, ads in text. Then we'll call this one user input. So this is something that the user is saying. I'm gonna color these ones read. There's a good read for it. I'm gonna shrink this down a little bit. I'm actually gonna copy this one. I call this one Alexa Output This is something that Alexis would say back and let's cover this one. Let's make these ones yellow. Then I'm gonna drag holding down Ault and shift to make a copy and constraint going straight down. And I call this one system logic says it's something that happens in the background. Let's make it these ones blue actually gonna select all of these. I'm going to eat these all outlines. There we go. Economics is you can see I can change some these options by selecting multiple things at a time and then make my selection there. So this case, actually, both of these or something that I'm usually and put something color both these red and both outlines that there we go. The next thing I want to add is the option of saying I didn't say a request right away, so Alexa would actually ask me what location I want. So I'm going to click and drag this down here. And then this is Alexis would say she would know what time it was in the days she in this case, it's good morning, and where would you like to go? This, of course, is going to be looks out, but so put that in there, and then this kid is going to connect her to that A little more space and still no click on this. It is a tricky. So I had to get the right. There we go. The right double click to get the text things started. So this kid was gonna put User doesn't specify location right away so that it happens. And since I've been specified fire location, this case, then Alexis is gonna ask where I want to go. So I'm gonna copy this one here, all in shifts. Slide it over this one. I'm gonna state what's happening in the background. So check for available Ricky's against Ricky's or the auto rickshaws. So in this case, this one that she's going to be blue, I am gonna connected this way. Actually, there we go. So in this case, this is where in the background, the skill is checking to see if there's available Ricky's. So therefore, flexibility to respond with what time I could be picked up, for instance. So I don't go too far at this. I just want to kind of give you kind of basic idea. You can obviously take this really far. And I m excited to see what different, uh, and Alexis school you come up with or could be Google home. It could be Siri on iPhone. It could even be a toy that uses voice. It doesn't matter what you choose, just the idea that you're doing a voice user interface on using a flow chart to show the many options that the user might be presented with Great thanks so much. 14. Wireframe (aka WF) - Intro: next up, we're going to looking at creating a new wire frame. So click here and this call this one Twitter because that's what I'm going to be rebuilding . Here is for the example. The first thing we're gonna look at is add frame. So we're going to skip Adam. Let for now go right down to add fraying, which is keyboard shortcut f Click on that. You see, we have a variety of different frames that we could add. I'm just right for the window. So I'm gonna be doing the desktop version of it. So I just drop that down there and there we have it. Our frame. We can also double click on this. If we want to change it, we're going to say I call this one main and then zoom out a little bit. This frame can also be resized so I can stretch it. How? Right? Like do so if I want to do ah, particular size frame. Um, it's going to do 12. 80 by 1964 you see down the bottom. Here is where I saw the size on this. I can also add a comment to it if I want to, But for now, I'm just gonna leave it like that 15. WF - Add Element: Let's go back to the one we skipped over here. Add element. Which keyboard? Shortcut e If I opened that, you see, we have a whole bunch of different elements that we could choose in this case I'm gonna directing. Which happens to also be keyboard shortcut are So I click on that. No, Drop it somewhere. I'd like to I can see that this also has a editor toolbar here, similar to what we had in the flow chart videos where I could change the shape of this particular one to the pill shape or to a oval. Also go for a fill versus outlined versus dash. She's your color. This case I'm going to go for a yellow. I can also at icon duplicate and common on that. So we'll click off of that. I was gonna position this appear, and then I'm gonna drag out a little bit to make it about the size here we're gonna do next is actually gonna be size. It's a little bit more down this way. And then I'm asking you to click on this and I'm going to a Mac Ault shift drag or option shift drag on a PC dragging that down here. Chicken little gap. White bar here might change that down the road here. But for now, that's fine. Drag this down and I'm gonna make this gray. So we already have something happening here. So now when I grab and circle or oval and I'll go down here too. Uh, Circle. Actually, I would rather have an avatar. So this is keyboard shortcut. A, uh, circle was keyboard shortcut. Oh, but avatars What I'd like for this case thinking Drop that and then I'm gonna shift drag that to make a little bit bigger, and that's gonna make this white as well. If you want something to see here, it's kind of falling behind the gray one. If I right, click that and you bring the front that actually lifted on top of those making position is wherever I'd like to kissing it may get a little bit mawr into the top area. Just like that. Maybe strict out tiny, but it's kind of big. So there we go. 16. WF - Add Connectors and Add Text: this ad connected really fast. This promise that you might use more often in the flow chart board. But just to give a quick example, you could actually click on it here. And then I could drag out. So say I went toe, attach it to another shape. I could add, Texan here, sample seems kind of ah, straighten out like that. But you have. I want to drag it and have it touched. Something else like that. I could make connections of this. I'm gonna delete that one for now. And actually, what I want to go to next was add text, which is keyboard shortcut t, which, as a sounds allows me to add text. So this case is gonna put the word home here. I think that and this is going to go at the top here. We're gonna have our navigation. So actually, I want to do now is I want to select these three items. I'm gonna drag him down a little bit here, and then I'm gonna move the home up into that section to make actually a specific knave area, and I'll leave it right about there. Sounds good. I'm gonna wanna do It's also duplicates I had duplicate for another one here. I'm gonna make this one moments and I do another duplicate. I can drop that call this one notifications. That and one MAWR. We'll call this one messages familiar with Twitter. You understand you've probably seen these all before, but clickable together. That gives me the option to group. In this case, I just want a line than make sure they're center in line, which look like they are. But just in case I moved, any which doesn't seem negative, said, making kind of also distribute horizontally, spaces them out evenly. That's great, Perfect. So we're done adding text for now. 17. WF - Add Icons: next thing we do, we're gonna add icons, which is, uh, keyboard shortcut X here before I do, I want to go over to, uh, Twitter here, which were currently making a version of that. This is what I haven't logged in right now, But you can see we have the icon, and then the navigation at the top. The woman cream has a few more. Once I were the law again, you'd see those ones, but you get the idea, Uh, we log in. This would actually be a little picture of a home, and so we're gonna start adding those I could see already. Also coming back to this is how small the circle here is. This is West. Boss is one of my favorite friend and developers that we're looking at right now. And he has some great classes like this. CSS grid, which is great one there. So check that out if you have a chance. Anyways, back over here. What? We're working on this saying we got shrink this down a little bit because it's kind of big to what we just saw there. So that's probably better for now. Soas faras icons opened this up here. I can, actually, uh, if I wanted specifically that Twitter icon, I could search for Twitter here and actually have one. And I could drop that right here. That works that good. Maybe I want to change the color that Let's make that green. Maybe change this year to also be the screen color because we're on the home page right now , so that makes sense for moments. That was a little lightning bolt. So if I go back to at Icon, I could look up. Might mean. And sure enough, they have one. You have that one there. Next for notifications. I'm gonna need a little bell symbol. So, Bill, I'm sure not. There we go. You can, of course, re sizing these. I'm just gonna drop it as the size they are. That seems to work right now and then for messages. I'll need a little envelope symbol here. So if I hit X, you see that opens it up like that as well. And, uh, we got looks like we have some different choices. How about we just grabbed that one? Just drop it in. There we go. There's an envelope. So right away we have our different tabs again. Like I said, you can zoom in a little bit. That seems a little big. You can shift and drag it down to resize. Maybe these roll like a tiny bit big, so you can decide that you want a smaller friends since, like that and there we go, that is adding icons. 18. WF - Add Link: next, we're gonna use the ad link. So I'm gonna zoom out very little bit. And so click. Add link. How about we just go that calm? Maybe it's allow us to if we wanted to click on this because we wanted to go right to the site. So that way we could see, uh, what we're trying to do create Here is a copy of Twitter. So just like in flow chart when we use that looked at that board. If you click on this, we have options to make it a thumb now, which is a quick little screen cap of it. In this case, it's not too interesting, but you can get the idea. We can also decide to dig the head of the websites or the upper half of it. This case again, it's not doesn't seem very interesting. A slide after the side here. See if this is no still not much there. Way outside the mobile versions of it, I cannot remove the snapshot which brings it back down to just the little of using the leave a con from the Web site as something that we can click on that to move it around, but like, say, if you click on this, it'll open it up. So they click on that. Of course, we go to here where I'd actually log in. But if you were logged in, there were launched the site where you wrap. And so that way you could check out what you're trying to make you and that is ad link, which is also a keyboard shortcut K. 19. WF - Upload Image: now for the next partner show you, which is upload image keyboard shortcut. I have actually showing you a version that I've got a little bit further with the Twitter clone here showing that I've made one called Desert Life is the name of this Twitter account. And so, God, gone on at a lot more text, some other feels like search. And these were all built the same way I had built the original parts. Eso nothing new on these ones. But what I want to show over at image with Zoom in a little bit here. I could actually place an image here, for instance. So maybe I went to look for a quick search desert scenes looking for images and maybe I like this one here. So let's see. Click on that one. It's gonna copy image, go back to this one here and then I just paste that image Here. This is where I can do a full frame or have a little border. I'm gonna go for a full frame, drop it there and right about there. And there's our ad image. Of course, you could also upload from the desktop to wonder if you had some folder you had the pictures in. But I try and get a quick idea what it looks like to add an image and has kind of matching color theme there like it. 20. WF - Share: last thing I want to talk about inside of wire frames was sharing. I have created here something go over to this little paper airplane. I can see that we have share export and print. If I click on that, we could get a share of a link. So once I got that, I think I could put that in the email. For instance, I could also export this, which will save it to my desktop, for instance, or toe specific folder. I can also do a copy of the image, which I could then paste into again into email, and then it goes to print this out. So this is a great way if you'd like to actually share what you've done here, and that's all for wire frames, thanks so much. 21. WF - Challenge #2: and now it's time for the challenge. I share with you some different tools they could use to create a wire frame. And now it's up to you to take one of your favorite sides, whether it's Twitter, Facebook, instagram or any website, really, and make a recreation of it. This is about doing something that's really fast. No need to really dive into making elaborate thing. We're just doing wire frames as a way to get ideas out. You could even create a whole new idea if you like Teoh, I look forward to seeing when you come up with things again. 22. The End: I really hope you like this video. See to from or design doing tools as well. It's designed doing methods coming future. See that?