Resource Class: How to Use Think Kit

1. Introduction: Hi. I'm Max. I'm a software engineer at 53. Today, we're going to be focusing on Think Kit, which is a suite of tools that we've released in Paper geared towards structured visual thinking. The Think Kit at its core is three new tools, the diagram tool, the fill tool, and the cut tool. What we're trying to do in this class is get you familiar with some of the core features of Think Kit, and how you can really use them to present your ideas, get your ideas down, make them look nice. One of the things that's great about Think Kit is that when you use it, it takes most of that work out of your hands and allows you to broaden your visual thinking toolkit, and think about more how you want to present your ideas rather than the dirty work of actually making them look nice. Throughout this class, I'm going to be demonstrating to you the ins and outs of the Think Kit tools through my own work, so you can see how I use it. This class is really for anyone, whether you're a mobile designer using this to wireframe the UI for your new app, or whether you're in marketing just trying to spice up the next presentation for your big client. The project for this class is to create a diagram showing a daily habit. You can take this project in a lot of different directions, whether it's how you spend your free time or how you get to work, but the main thing we want you to get out of it is to practice communicating your ideas visually using the Think Kit tools. All you'll need for this class is your iPad, the new version of Paper which includes the Think Kit tools for free, and a stylus if you want or you can just use your finger. You can finish this project in actually just a few minutes. You'll see later on that I'll do just that. You can spend more time on the project if you want, but remember this isn't about getting your idea is perfect, it's just about communicating them well in a visual manner. A really great project is going to communicate an idea simply and clearly using colors that work well together and shapes that aren't too busy. There's no limit to the number of ways that you can present what you're thinking, whether it's a flowchart, a Venn diagram, a pyramid chart, or even just a simple square, the important thing is that you find the structure that fits your idea. 2. What's onscreen?: When you first open the app, you're placed in the home view. This is where you can see all the journals you've created. You can choose to give them a different cover sheet or change their title. If you tap a journal, you're taken into what we call the butterfly view. This is where you can see all the pages in the journal and all the creations that you've added to that journal. You can always tap the plus button if you're out of pages to add a new one. You can use the share button here to share an idea to Mix, share the entire journal as a PDF, or share that page specifically to any social service, printing service, or just your camera roll. If you decide that you want to remove a page from a journal, you can tap the X button and delete that page. If you decide that you want to duplicate a page and maybe save the original copy, you can hold down on the plus button and hit duplicate. To edit an idea, simply tap on it in the butterfly view and you'll be taken into the canvas view. You can swipe up from the bottom of the screen to pull up your tray and change tools or color. When you're done editing, you can simply pinch out to return to the butterfly view. To return to home view, simply pinch out again. This is your private space where you keep all your personal journals. If you swipe up it takes you to the public mix space. You could see you have three stacks. On the left, is is all the ideas that you've created and shared on Mix. This middle stack takes you to your stream where you can see the creations from all the users that you follow. If you tap an icon, it'll take you to their profile card and you can follow them if you're not already. If you're using Think Kit to collaborate on an idea, following your collaborators is a great way to keep up to date with revisions and changes that are made to that project. The third stack is ideas and creations that you have starred. When you see an idea that you particularly like, you can star it and it'll show up in this stream for you to look back on later. Right now in the mix stream, you're seeing a combination of both illustrations and Think Kit diagrams. I'm going to start off just by showing you guys where Think Kit lives within paper. So, here I'm at my home screen in paper with all my journals, and I'm going to open up a new one, to show you guys Think Kit. So, Think Kit at its core is, three new tools; the diagram tool, the fill tool, and the cut tool. These live in the same tool tray as the five original tools, so you might already be familiar with what we call the essentials kit, the five original tools of paper. You have the fountain pen, the sketch brush, the marker, the roller ball pen, and the watercolor. You have a color mixer over here which allows you to nicely plan the colors, or you can pick your own. You have your palettes where you can store colors that you've created in the past. Think Kit, we introduce three new tools, the diagram tool, the fill tool, and the cut tool. These two tool sets work together to allow you to create a visually appealing way to communicate your ideas. The diagram tool allows you to create nice structured shapes, whether they're rectangle, a triangle, or a circle. You can long-press on these to move them around if you want to reposition them. Another thing you can do with the diagram tool is create arrows. Let's say we want to make a flowchart through these three shapes. It's really easy to do with the diagram tool. The fill tool has a few different aspects to it. One, it allows you to quickly fill in these smart shapes that you've created. Anything that has been corrected by the diagram tool can be easily filled with just one click. It also allows you to make more abstract shapes on the same background layer that the smart fill happens on. With the cut tool, you can quickly reposition smart shapes or cut out larger areas of the canvas and move them around. I'm sure you're already starting to think about how you can use these tools to create diagrams and wireframes and flowcharts. Now I'll give you an example of how I've used Think Kit in the past, I'll go up here to my mix stream, and you can see some of the ideas I've created, this one is one I created for 53's Community team to communicate one of the more confusing aspects of Think Kit. Making this with Think Kit tools was pretty straightforward. As you can see, the only shapes on here are really rectangles and squares, and those are super quick and easy to make with the diagram tool. After that, it was just a matter of using the cut tool to position them as I wanted, and then the fill tool to add color to it. This was a really quick and easy way for the community team and I to communicate this relatively complex idea about some of the features in Think Kit. Here's an example of how a user used Think Kit to present a slightly less serious idea. We see hot water, ground coffee, and pressure, and how they interact to make either brewed coffee, espresso, or just steam. This diagram is made up of a few really basic aspects that are easy to do with Think Kit tools. Simply create a circle, cut and paste it around, and then fill in the areas with whatever color you want. Then you can just use the diagram tool to create arrows to whatever area you want to call out and add labels and text. In this case, the project was more of a UI wireframe. Creating a design like this with Think Kit makes it easier and faster to get your ideas down on paper. If you make a mistake, it's really easy to fix. You can just pick up the shape and adjust the layout, or just fill it with a different color with the fill tool. This is a really important part of the design process, is not having to worry about making mistakes and having to go back and carefully erase or redo what you've done. Here's an example of a flowchart that was made with Think Kit. You can see it was really easy to make. Just make one rectangle with the diagram tool and use the cut to copy and paste it all around the canvas. The diagram tool can be used to easily create arrows from box to box to guide the eye along a flowchart, and then the fill tool can add color. After cutting and pasting the boxes around the canvas, it's really easy to add the arrows to guide the users' eye. Just draw a line from one box to another with the diagram tool and the line will autocorrect and snap so that it doesn't overlap any of the boxes. Adding an arrowhead is as easy as just tapping that end of the arrow. So, that's an introduction to the Think Kit tools, and how they've been used so far. In the next video, we're going to get into more of the specifics of how these tools can be used. 3. Key Features: So, let's start off with a diagram tool. One of the easiest things you can do with a diagram tool is make really quick flowchart. So, you can start just by dropping off some rectangles, which are of course automatically corrected to be nice squares and rectangles. We can add some circles and triangles, some more squares. Then use the diagram tool to create the actual flow through the chart. Just draw a line quickly from one to the next and then tap to create an arrowhead. We can do this throughout the whole diagram to indicate the flow from shape to shape and snake around the entire diagram. So, now we have our flowchart and we can use the fill tool to add a little color. So, you just select the fill tool and tap on the inside of any smart shape and it will fill the entire shape with that color. Of course, an important part of diagrams are labels. So, you can use the diagram tool to easily create handwriting which will not be recognized as shapes. This is a nice way to quickly add some information to a graph or a flowchart. If you want, you can use some of the original essentials kit tools for a slightly different look in your handwriting labels. The Cut tool can be used in a few different ways. If you want to reposition the whole graph, you can just draw a lasso around the entire thing and move it down towards the center of the screen. Or if you want to simply adjust the layout of a single element, you can tap on the smart shaped to pop it up and place it back down on the canvas. You'll notice in this flowchart that, although we've corrected the shapes to be nice rectangles and squares and circles and triangles, we've left the ink looking pretty organic. The width of the stroke, just like some of our other tools in the essentials kit is based on how fast you're drawing. So, we don't change those aspects of the stroke when we corrected into these nice shapes we just move the stroke itself and to the shape. So, that was a quick example of using the diagram tool to create a simple flowchart but there's a lot of other use cases for the diagram tool. You can use it to quickly create a pie chart. Just draw your circle for the pie. You can straight lines to bisect the pie segments and then fill them appropriately. You can also use the diagram tool to sketch out something like the food pyramid and fill each level with a different color representing the type of food in that level. Another common example of a diagram is the Venn diagram. You can easily use the circles to create one. Create the first one and then hold to pop it up. Tap with your other hand to duplicate it and then drop down the final to create a Venn diagram. Of course, we can use the fill tool again to fill the different areas representing the different quadrants of the Venn diagram. The diagram tool makes it really easy to lay out the basic shapes and structures of your ideas. As we've seen, there's three basic shapes that the diagram tool recognizes. You have squares and rectangles, triangles and circles or ovals. So, the shapes that you draw with the diagram tool we call smart shapes because we've added a lot of functionality to make them a lot easier to work with than normal Ink. One of the most basic functionalities of smart shapes is that you can pick them up and moving around with the Cut tool. If you place a smart shape on top of another existing smart shape, they merge. You can see the animation that indicates this action. Then, when you try to pick them up again, they'll be picked up together. Once you've merged two smart shapes, you cannot separate them, except by undoing. A great example of when using merged shapes is useful is for a Venn Diagram. So, you draw your two circles and then you want to move the entire diagram to adjust its layout on the canvas. You can tap any of them with the Cut tool and the entire diagram will be picked up, allowing you to place it wherever you want. Another interaction between smart shapes is what we call nesting them. So, let's say you're trying to design a UI for a website. You have your basic window and then you have these elements within that. We're nesting these shapes within the main window so that if you want to adjust the position of the window itself, the shapes within it will be moved with it. So, we have our main window which we can adjust the layout of, but we can also still move each individual nested shape without moving the others. This is really great for doing things like designing a UI, because you can adjust the positioning of each of the sub elements without having to ruin what you've already created with some of the more major UI elements. When you're dealing with smart shapes it's important to keep in mind that the borders are the most important aspect of the smart shape. If you're using the erase tool near border, be careful because if you get too close to it you'll notice the smart shape flash. That's an indication that the smart shape has been destroyed and you can no longer pick it up by tapping it with the Cut tool or fill it by tapping it with the Fill tool. So, we've shown all of the shapes that you can create with the diagram tool. But an important aspect of communicating your ideas visually is indicating a relationship between these aspects of the idea. You can use connectors to do that really easily. At its most basic, you can simply draw a quick line from one shape to another and it will snap to the snap points on that shape. You can leave it as is, or you can tap the blue arrowheads before they disappear to add arrowheads and the color of your ink on either end. The blue arrowhead indicators will show up automatically when you draw a line from one shape to another. But you can also make them appear on any line you create with a diagramming tool just by holding it down at the end. Here we can create a swirly arrow and have the arrowheads appear just by holding down at the end. You can also take advantage of the diagram tool to easily create straight lines, like a pair of axes to draw graph. Simply draw the right angle and hold down at the end and the axes will automatically correct to straight right angle. This can be an extremely useful tool for quickly creating axes for a graph using the Fill tool to create the data. 4. The Tools In Action: The project for this class is to create a diagram showing a daily habit. I've chosen to create a pie chart which indicates the proportion of my daily liquid intake. I'm going to create a large rectangle for the background of my diagram. Then I'll create the circle for the pie chart and position it appropriately in the lower left corner. I will create a large narrow box for the title up top, and then in the remaining space, a box for the legend. I'm going to fill the background with a light gray. Then, using the Diagram tool, I'll create my title on the top box. Then, because I made it a little too far to the left, I'm going to cut it out with the Cut tool and drag it more towards the middle. Back with the Diagram tool, I'm going to slice my pie chart by creating straight lines from the center to the perimeter. I'll fill them with three different colors appropriately. Now, I'm going to create my legend in the right-hand box. I create a square and then duplicate it three times so that they're all the same size. I can use the color picker here to grab the colors I recently used and fill the boxes appropriately. Then, with the Diagram tool, I'll label the three portions of my daily liquids. There you have it. 5. Conclusion: So, what we've done today is introduced you to paper and how to get around the app itself, but also three new tools that make up thinking, diagram, fill, and cut. You even saw me use these three tools and some of the features that I walked through to create a diagram of my own. Now it's your turn. Create a diagram about a daily habit of yours and share it in the project gallery. I'm really looking forward to seeing what you create and the ideas that you share. Our goal, we think it, is to make it easy and fluid for you to communicate your ideas visually. So, have fun with it, and happy thinking.