Django Sketchnoting Challenge | Sara Peeters

Speaker 1: Good afternoon everyone and welcome to the Sketch Noting Challenge workshop. My name is Sarah and I'm very much looking forward to draw together with you today. The way we are going to organize this workshop is as follows. The first half will be mainly on Ludform, where I will talk you through some basic drawing principles. You can draw along with me during this part and by this get some drawing practice already. In fact, I will leave gaps of up to two minutes in between to let you try out some of the stuff I'll show. If you are not into video tutorial kind of learning but rather want to go at your own speed, feel free to do so using the PDF tutorial posted in the Slack channel of this workshop.

Speaker 1: The second part of the workshop will be project-based, where you will draw a Django-related sketchnote of your own with my help and guidance. To participate in this part of the workshop, you can join me on Gypsy or post your questions in the Workshop Slack channel. So let's get started. If you don't have paper and pen ready, I would advise you to go get it now while I go over the introduction. A couple of sheets of printer paper or a notebook both will work fine for now. We might want to get some colour pens as well for use during the project. Together with this workshop, I want to open up the space for sharing your work and learning from others. Sharing your work is not obligatory.

Speaker 1: But I will make sure that if you choose to share a drawing, however basic or advanced it may be, you will create a positive environment for it. To do so, you can use the Workshop Slack channel or Twitter. For Twitter, make sure to use the Django com and sketchnote challenge hashtags So, the style of drawing that we are going to use in this workshop is not this realistic figure drawing you can see here. Our style will be much more symbolic, somewhat like the picture of a cat you can see here. Everyone can very quickly see this is a cat. And your brain and memory will work with this cat as they do with other pictures So having this cat in your cat related notes will attract people's attention, provide meaning quicker than if it were just text, and will help them

Speaker 1: remembering it better Even having this cat in your non-cat -related notes will have an effect, as cats tend to always do. This way of combining text with simple symbolic illustrations is called sketchnoting. Sketchnoting has gained a lot of popularity over the recent years and has found its place in a family of visual facilitation, graphic recording, visual storytelling, and so on. The drawing skills we will learn here and the practice of visual note-taking and sketchnoting in general can be used on a lot of different occasions. both for oneself to actively listen and remember better, or for others to convey ideas or teach concepts. Here are some examples.

Speaker 1: The first one is a couple of travel sketch notes from a tip to Scotland I did a couple of years ago. And I keep these sketchnotes together with my photos from the trip to get a more complete picture when trying to remember it. Another example is the sketch by Denise Yu on Linux namespacing. Now it is both possible to draw such sketch notes for oneself or for others to give an overview of a topic you want to teach or write a tutorial about. The next example is a set of visual Django cheat sheets I created. So here's the request response cycle one and the templates one. And on this page I have the class-based views.

Speaker 1: The last example I want to show you are the wizard scenes by Julia Evans. As you can see throughout the examples, there is no rule as to how much text and how much images you should use. So sketchnotes don't have to be really heavy on the images. They can also have more text and just a couple of images in between if that's how you like it. So let's not lose any more time and get sketchy. But wait, where do we start? Lots of engineering concepts are not straightforward to visualize. If I would tell you, for example, to draw me classes and functions, you would very probably and rightfully ask, how do I do that? Well the good news is

Speaker 1: things can often be built up of circles and rectangles. And those are not too hard to draw, or at least we can easily practice that. So to warm up, let's draw some circles and rectangles. What I expect you to create is something like this. So you don't have to draw strictly circles and rectangles. You can mix it up with ellipses, parallelograms, etc. And we will take 30 seconds time, starting when I have my timer ready, which is

Speaker 1: And our first 30 seconds of drawing time are already over. I hope you've warmed up a little bit by this exercise. And we'll continue with the next part. Now let's start with an easier example that shows how things can be built up from circles and rectangles. You can draw along with me. We started with the word code, which symbolically is often represented by this combination of characters. As a web developer, this might suit me well. And I can easily draw a screen around this with some rectangles and a circle to end up with a nice illustration of wrap-related code.

Speaker 1: But what if you want to represent a different kind of code? A specific language even. Another way I draw code is by drawing a file and writing an extension inside. This is again done with a rectangle with one corner cutoff and two more lines over there. Then I simply add the file extension, for example . py inside With this, we can now draw different kinds of code. Next, let's draw the verb coding. Programming, implementing something, that's something we can use. For that, we might want to use a laptop. And laptops are very easy to draw with rectangles and deformed rectangles. So here's the laptop from one side. Let me add a symbol right here as laptops with some brands tend to have.

Speaker 1: Behind this laptop you can draw a person with some circular lines to represent someone coding. And here's a laptop from the other side, showing the screen and the keyboard. The screen can now again be used to add a symbolic representation of code, for example by adding a code file extension The next step in our code-related vocabulary might be to draw a server. A server also consists of rectangles as it's just a box of certain dimensions, perhaps with some buttons at the front Once this is ready, you can now send stuff to the server by drawing a simple arrow, from this computer over here or from the other one at the top. And we can censor

Speaker 1: from the server to the World Wide Web by drawing a bigger arrow away from the server. I wish it always went that easy. So there's already a lot we can draw based on circles and rectangles. But what if we want to draw a concept that's a bit more abstract, really complex? We will come back to our classes and functions example later, but for now let's take an easier word. Conference. Let's suppose I want to draw a conference, but I don't know where to start. There's an easy trick for this that we as developers know very well, and that's Google it. Now as with coding problems, the thing is to know how. And for easy representations of things, the keyword to use is icon.

Speaker 1: So here's my Google Image page for conference icon. So I think I can draw something like this, right? It's again mostly rectangles and circles. There's a standing rectangular shape in the middle, a horizontal rectangular shape on top of them. And there's two circular or bandit shapes representing the person standing behind the desk. And a couple of more lines for the microphone. Ready is my conference icon drawing. Sometimes icons are a bit too simplified though. If you want a little bit more complex drawings, you can try the words clip art or cartoon. Cartoon in particular is useful when you want to draw famous people or politicians and you don't know how to characterize

Speaker 1: them. Now we've got this icon representation of our conference, which is easy enough to draw. But if I draw a conference, I often want to stress the community, get together part of it. So I want to draw people, which brings me to the next topic, drawing people. The easiest way we all know to draw people is stick people. Stick people are very versatile. We can band them in different directions to make them jump, walk, or even run. Or is that one more kickboxing? Before we continue, let's take 30 seconds of time to draw some stick people.

Speaker 1: There are more ways to draw people though, and one easy alteration you can make is to give your stick person a body, which can be rectangular, elliptical, or something in between Or what did you think about a heart-shaped person? Let's again take 30 seconds to draw some of those.

Speaker 1: Time's up. Another fun and easy way to draw a person is star people. Star people are drawn by drawing a star while replacing one bend with a circle for the head. You can again play around with the shape to make a star person run, hold something, or sit down and meditate. Let's take 30 seconds time to draw some star people.

Speaker 1: Time The last and perhaps the easiest way to draw people is tooth people. Tooth people exist of a basic tooth kind of shape with a head on top. The cool thing about tooth people is that they are easy to draw in crowds. For example, here is a row of tooth people. And here is a bunch more of them. Now I just have to add some attributes such as a megaphone and a banner to make a protest. I will give you again 30 seconds to draw your own crowd of two people.

Speaker 1: Time's up. So now that we know all of those ways to draw people, let's take some time and add more people to our conference and make it more like the conferences we remember from before our 2020. You can now take one and a half minutes time to draw some situations that come to mind when thinking of a conference. Meanwhile, I will play a stop motion video of a conference situation icone.

Speaker 1: Now let's get back to our protest we've drawn before. If we want this image to convey more meaning, it might be a good idea to write some text inside of that banner. However, there's one important rule about writing text in boxes, that is text first, box later. For a protest, this means we better remove our banner and write the slogan first. For example, fight climate change. Once this is done, we can add our banner again around the text, this way making it easier for everything to fit in. So here are some other boxes with text inside. You can take 30 seconds to draw your own boxes around text.

Speaker 1: So now we've drawn things and people and we've added some text to provide more meaning to our illustration, but we haven't talked about faces and emotions yet. So let's do that now. Everyone can draw a face with two eyes, a nose, and a mouth. But what if you want it to be a bit more expressive? First thing, let's have our face looking around a little bit This can be done by drawing the whole face in the top, bottom, left or right half of the hand. Mind that it often looks better to have the whole face visible, even if the person is looking left or right So this often looks better than this. The next thing I want to show you is an emotion matrix for drawn

Speaker 1: faces. The empty matrix looks like this. On top, we have three possible mouth shapes, and on the left, three possible eyebrow positions. I'll give you 30 seconds to draw the empty matrix.

Speaker 1: Times up. Let's go on to fill this matrix Filling the matrix requires repeating the mouse shapes top to bottom and repeating the eyebrows left to right. Like this we get different emotions from scared laughing over angry laughing, really worried, really sad, and very angry. Looking at this matrix can therefore help you draw more expressive faces. I give you 30 seconds to finish your emotion matrix.

Speaker 1: Faces are not limited to humans and animals, by the way. You can add faces to things as well. Here are a couple of examples. What thing would you want to give a face? And which emotion would it express? Let's take 30 seconds to do our thing with a face.

Speaker 1: The next thing I want to do with you is a drawing concept challenge. We already have the words coding, conference, protest, let's challenge ourselves and dwell some more concepts. Every prompt has a harder, more abstract word on the left and an easier word on the right. The easier word can be used by kids that might be following along or people who are getting a bit tired by now. Also, the challenges get harder as we go, so if at some point you want to switch to the easier prompt, that's completely fine. After drawing time, I will explain how I've drawn the abstract prompt. It would be really cool if you feel confident to share your images from the challenge in the workshops

Speaker 1: Slack channel or on Twitter. So that I and others can see the diversity of possibilities to draw concepts in a short amount of time. If you do so, especially on Twitter, please use the DjangoCon and SketchNode Challenge hashtags so people can find it. Our first challenge is deployment and the easier prompt is smartphone. So let's take one minute time to draw deployment or smartphone. Or both, if you have time

Speaker 1: We hope we do now. And time zone. We've seen an easier representation of deployment already at the beginning of this talk. Being a laptop, a server, and an arrow in between. But if we want, we can make this image more complex, for example, by adding our

Speaker 1: version control system to the mix I've used GitLab here, but you could use a GitHub logo or just a plain Git server depending on your stack and drawing skills. This is another valid representation of deployment. But we could add even more to this picture. For example, a code review cycle, as you can see here. And I've stopped at this point, but this doesn't have to be the end. You can add containerization, continuous integration pipelines, or even specific git commands and code review rules at relevant places in the picture to make it more detailed step by step Our next challenge is diversity or for the easier prompt wheelchair. So let's take one minute time to draw

Speaker 1: diversity, wheelchair, or both. At this point, I want to remind you that you can Google the words with icon attached to it. to um to find easier representations of the words if you don't have ex uh if you don't have inspiration from yourself. Yeah , I think it's a good idea.

Speaker 1: and times up. If I have to draw the diversity, I tend to keep it very abstract. Therefore, this is my go-to image for diversity. It's a bunch of people with differently shaped heads. The advantage, I think, is that this image represents a lot of different forms of diversity. It can at the same time mean people who have different types of brains, different opinions, look differently. have different emotions or have different bodily functions. If you want to go less abstract and for example focus on the inclusion of people with disabilities You can easily add some attributes to this image to do so. For example, here I've added a wheelchair and a guiding stick for a blind person.

Speaker 1: But if you want to go very concrete and for example draw the inclusion of women in tech, you could draw some women's faces But you would have to take care to make your women more diverse too. These women are not very diverse. So I'll add some more to improve that. That's not perfect, but definitely better So the more concrete you want your diversity drawing to be, the more detailed you also have to be able to represent different features of diversity. So if you are not that confident yet, drawing different faces and other attributes, you can exercise that of course. But in the meantime, you can also think of more abstract representations that will help you out. Our next and last prompt, classes

Speaker 1: and functions. The notorious classes and functions is back. And as an easier prompt, we have a robot. So let's take a minute to draw classes and functions or robot or even both if we have enough time. We

Speaker 1: are halfway too And time is up. For this, I've started from the idea of a cockwheel to represent a piece of logic. I went on to draw a function as something which contains a piece of logic and has an input and an output.

Speaker 1: For a class, I first saw it as a box to put different pieces of logic that belong together inside. But a clause is more than that. A class is also a blueprint, a description that can be instantiated with specific values. So I made my books into a stamp to represent this as well. Then as a bonus, I added an instance of my class where specific color values have been used. And this is how, for this challenge, I have drawn clauses and functions In another situation, I might draw it differently, and you might have drawn it completely differently as well. I'm looking forward to see different images from the challenge on Slack and on Twitter. This has been a quick-based, shallow introduction to sketchnoting.

Speaker 1: If you want to learn more, here are some resources. Be sure to check out the YouTube channel of Let's SketchTech. They did an amazing online conference around this time last year and recorded all the talks and workshops. So that's pretty cool. There are endless books around sketchnoting. Choose one you like. I don't have recommendations to give. What I do want to recommend though is an online resource called LearnUS Sketchnoting Guide. We just build up like a self-based course with lots of exercises. Thank you for listening and drawing along and see you in Jitsi for the interactive part of the workshop.

Speaker 2: Hello everyone. I hope you enjoyed drawing some easy drawings in the first part of the workshop And I think we can go on now with drawing something more, something bigger, a little bit more complex. Um so let's um think about a project. Um we can draw uh like you can draw about that's related to Django maybe a project um about some um to draw some you could draw something about Django itself but also about something your some project you're making with Django or something about uh the uh about this conference.

Speaker 2: It could be lots of different things and feel free to ask me any questions if you have if you are stuck somewhere or if you are looking for IDs I'll I'll glad I'll be glad to answer them

Speaker 3: This must be super frustrating for you because we're all sitting here drawing and

Speaker 2: okay. That's great. That's great. That's great.

Speaker 3: Well, uh I'm I'm going to show uh what I drew so everyone else uh can follow along or can can uh feel empowered to show something.

Speaker 2: Okay, that's great.

Speaker 3: I I do the Django request and response cycle.

Speaker 2: Okay.

Speaker 3: And um Yeah, I mean this is not the best representation, but it is my representation and uh I I have a workshop tomorrow, so I might even use this in my workshop. I'm I'm not sure.

Speaker 2: Okay I'm not seeing the drawing. Is that right?

Speaker 3: Well you can't. I'm sorry. I'm holding it up to my camera. Can you see the camera now? Let's try again. All right, so maybe this isn't working.

Speaker 2: Oh, I'm sorry. Maybe I posted on the

Speaker 3: I'll put it on the Slack.

Speaker 2: Maybe you can post it on the Slack channel. Yeah, that's great. Thank you so much.

Speaker 3: Yeah, thank you. That was that was amazing. And uh I just drew for half an hour and that was so quick.

Speaker 4: Hi. Um

Speaker 2: Hello.

Speaker 4: I at least from what you showed us, I tried some thing. I'm not sure If it's good or not? Uh the wrong one, right? Let me see. Let me see. This one, okay. Can you see this?

Speaker 5: Uh I'm seeing the drawing, can you see it, Sarah?

Speaker 4: I can't hear you.

Speaker 2: Yeah, I can see it.

Speaker 4: What do you sing? Is it about If I if I give you nothing ,

Speaker 5: I was wrong with

Speaker 2: that. If you give me nothing, there's There's also no words on it, so it's pretty hard for me to guess.

Speaker 4: Okay, so okay, then I try to add some more wordings. Okay, yeah

Speaker 2: that would be great. A title would be great.

Speaker 4: Okay.

Speaker 2: I think.

Speaker 4: Ah yeah, okay, title? Okay I must say this is sometimes the hardest thing when we show find a title or a naming for something

Speaker 2: Yeah, that's true. Naming things is hard.

Speaker 6: Okay, so if nobody has more questions, I think you can share your drawings in the Slack channel that will be up All day if you want. So thank you. Yeah, thank you so much Sarah for for your talk. Really great. So see you guys.

Speaker 2: Bye.

Speaker 3: It was a it was a great talk. I enjoyed it very much. Thank you for uh showing us how to draw things. It was super good

Speaker 2: You're welcome. Thank you for joining. Hi Tina.

Speaker 6: Hi. We really had fun today. So I drew uh drew a couple of things and I'm also drawing uh one last challenge you've uh proposed and I'll be posting that on either Slack or Twitter.

Speaker 2: Okay, that's great, thank you.

Speaker 7: Hi Sara, I got a small question for you. Um I think you have scheduled some talks already and I wanted to know do you have um a specific uh specific organization or something uh when you want to sketch note uh talk uh according the page I mean uh do you you organize things in a precise way or nothing at all

Speaker 2: Um I um like um for um for starting a sketch node I usually start um there's two ways I I start like there's one um when I have the title and then I just do it like like this uh from top to bottom left to right the way we read And there's another way, which is also quite easy, which is you put the title in the middle and then you go somehow around it. And for knowing how how big or how small to make your drawings, I I usually take note of how long the talk

Speaker 2: is going to last. And I try to um I try to keep track like if someone is talking like five minutes about it or 15 minutes, that's a big difference, then I I draw more of this topic, but um for the beginning I think that's not important. You can always take an a another page if you if you don't have enough space. But um yeah if you want to um have it just fitted just on one page then um you have to take a little bit notice of of how long is this person talking about this topic or how important is it to make to know how how big you you can draw it? Does that answer your question?

Speaker 7: Yes

Speaker 2: Okay, thank you.

Speaker 7: Thank you so much. It was amazing.

Speaker 2: Thank you for following along. Okay, everybody's gone. Bye-bye.