UX Design: The Art of Writing Annotations | Michael Lemma | Skillshare

UX Design: The Art of Writing Annotations

Michael Lemma, Designer & Photographer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (41m)
    • 1. Welcome

      1:55
    • 2. Annotations Intro

      6:25
    • 3. The Terminology

      8:03
    • 4. The Art of Writing Annotations

      7:25
    • 5. Creative Annotations

      14:18
    • 6. Dressing up your Annotations

      2:47

About This Class

If you're looking to get into UX design, there will come a point in the UX process to write annotation in your documentation, so others can read and understand how your design will function. This short class will explain

  • The Terminology
  • Setting up Annotation in your Document
  • Writing Annotations
  • Dressing up the Document

Note: If you'd like to use a design then go ahead a take my Wireframe class (if it's not available it will be soon) so you can use that design to annotate. If not, I have attached a document for you to annotate.

Transcripts

1. Welcome: Hello, everyone. And I just wanted to go over a pre introduction to the introduction. Ah, so you don't get confused. And I wanted to mention to you guys that I did this recording in a whole giant Siri's now not to make you information overload. I broke it up into several different courses. First, being sketch for beginners course. Ah. Then after that, it should fall through to the wire framing course, and then it should continue onto this course. So my introduction video, I'm gonna be talking as if I'm carrying on from a past lecture. Don't worry. Nothing is missing. Um, I'm just continuing from the wire frames course transitioning into this one. I just wanted to break it up, so there's no information overload. And so people who want to actually learn just only about annotations can watch this and just learn how to annotate. So this is your first time watching, and you just want to learn about annotations. You could just watch his class. I'll cover everything. Annotation wise, justic door, me talking about a previous lecture from the wire frames section. So if you want to go ahead and watch that go forward watch that course. If not, you know, enjoy this course really, really short, as you can see. Only a couple of lectures. But I just wanted to make that as clear and his parents possible. So you guys do not get confused. Ah, so there you have it. Enjoy the class. It should start next with the introduction. Really short lecture. And then we'll kind of dive right on into other elements of annotating. If you have any questions again, don't hesitate to ask if I haven't covered something. Or if you need me to cover something, let me know the comments and I'll do my best. Teoh. Update the class with that particular lecture. Or ask the questions you are. Answer the questions I should say that you have. All right, so that's it. Enjoy the class. See you guys in the next one 2. Annotations Intro: everybody welcome back. So now that we've finished our high rez wire frames, what comes next? Well, what comes next is to place and write annotations, and that is what this lecture is about. Annotations, just the placement of them. So what are annotations? Well, and my definition annotations of the ability to show and write the actions of your application or website in a written format. So that way, other parties can understand the functionality of the design. So what does that technically mean? Well, basically, we place little symbols and points on our design, and we write specific elements explaining what happens on that page. What's gonna happen next? What happens when you push the button and things like that? Just so when you hand it off to, let's say, a program or a developer, they understand and know from a written standpoint of what actually going to happen unfortunate, because it's a static image or it's just a J. Paige, you know, all they're going to see it's just a design. They're not gonna know what's gonna happen next. Unless you is that you exit Diner explains what your vision is behind it all. So that is Basically what in notations are the ability to write the actions of your application and website? So I just wanted to give a brief introduction just to that, and I'm gonna go ahead and just go right, and we're gonna go ahead and place some annotations around. I'm not gonna go ahead and write anything until the next lecture us. You can understand the written aspect of it. So I have here to application screens that we have from our previous designs that we've made. And I've created three. I'm sorry. Four circles, which I'm going to be placing around this, um, design. I put him in color just so they could stand out a little bit. So let's go ahead and places around. So the 1st 1 I'm just gonna place right here and just leave it there because that's gonna mark the background, um, should leave it more to the right because I'm gonna drawn lines. So one is going to be explaining the background of functionality behind it to we're gonna place next to the logo explaining everything on the logo. Three. We're gonna play some top of the sign in button, and then four we're gonna place on the sign up button, and those are all the placements that I can see that would be needed within this design. So let's go ahead and copy these now and let's paste them onto the next screen so we can place him in correct areas because this is alternative design. Um, again, you know, we can rewrite these or we can leave them as is. Let me just rearranges so they fit above everything or we believe him as is and not write any of annotations for the screen. But I do wanna indicate that I've placed buttons above and not below, explaining why on I'll do that in the written portion. So I have placed my four annotations on both screens on, and I would do this across all of them. So I've created over here a page separate rage excusing page called annotations, and I've gone ahead and copied the applications going and pasted it on here. So let's call this part forward, um, blogging and notations. And let's call this next one logging annotations presenting alternative. And I put that and just to give it some nice design essence and depending on where you work You know, you probably have to do this. You have to give it a title, put it on the page, make sure that the person reading it knows what page they're on and elements like that. I'm gonna go ahead and just make this about 25 I'm gonna make bold Please sit up here. And I'm just gonna copy and peace to this page. And there we have it. The last thing I'm going to do is I'm gonna make a line going from the actual designs onto the page because I'm gonna be writing or annotations next. Um, so that is ah, the way that we can do it. So let's go ahead and go toe arrow when a click and we're gonna draw, select my arrow, and I'm gonna go ahead and make the sickness bigger and make it a little bit darker. Bring that in a little bit, and then what I'm gonna do is I'm gonna goto one copy it, and then I'm gonna paste it again and move it next to it. So that way one represent one. So another way of doing annotations in this format instead of drawing the line which some people do and other people's don't, is we? We don't need tohave the line and we could just have the indication of the number going down the line. So instead of having any lines, we can go ahead and just do 1234 which could be relatively simple and then just write annotations based upon, uh, the numerical value. It really depends on your personal province. There is no right or wrong way to do it. Um, but I just wanted to make sure you guys were where every way possible to do it. It's good there. And personally, I like actually just having, you know, one toe, one on. Do you don't have to be numerical these congee, even Ah, letter format. This could be a B. See, dear one, a, uh, two b three c 40 Things like that. You know, it's totally up to you how you want to do it, depending on where you work or you're handing this off too. As long as we understand it, that's all that really matters. So there we have it. We have our documentation is now all set up. I'm gonna go ahead and just paste this here. And I'm just gonna go ahead and make this actual correct title. And there we have it. We have set up our annotations on the next lecture. When we're talking about the art of writing the annotations. I think I'm gonna break that up into two lectures and teach about the the terminology and things about writing. Um And then, actually, and third lecture will go ahead and execute the writing. So see you guys in the next one will be talking about the language of annotations. So you guys there? 3. The Terminology: everyone. Welcome back. We're gonna be talking about the terminologies, uh, that are used when it comes to writing annotations and pretty much a secret language of how UX designers used to convey their thoughts and ideas across into written language. So I have a list here of different types of terminologies that I personally use. There's a lot more that you can go look up, but these air the general ones that you probably are going to be using when you do write annotations. So I'm gonna go ahead and start from the top on the 1st 1 we have here is a user. Now, when you right, you notations. You never right in the first person. You always right in the third person. She never right. I were you You will always right. Um, as 1/3 person, for example, a user will tap on a button that will take him to the about page. You never say I will tap on the button that will take him. Take me to the about page or you'll tap on the button That will take you to the about wage . You don't do that because when you're conveying your thoughts of your application or your website you are designing for a user, even though technically you are yourself a user, you have to kind of think in that third person, um, mentality. So the next one we have on the list is on tap. Pretty straightforward and self explanatory, it is meant only written for use a usage of mobile design and tablet design. So I could say a user on taps. Ah, but in or user on taps on a specific area. So on tapping represents, you're basically saying that the user is tapping on a particular area, or there it's on your tablet or your mobile phone. Um, click is pretty straightforward on Click Represents just clicking just a fancy way of saying Clicking on It represents, obviously, the desktop. Ah, hover state for the desktop represents hovering over something. So for an example, I hover over this. This is a hover states, so it turns blue when I hover over it. That is what a hover state is. Tapping. State indicates the action of doing a physical tap on your phone or your tablet. Pretty straightforward and self explanatory. An active state for both mobile and desktop indicates, um, what page you are currently on or what something is being selected. So for an example, on my pages here I have an active state under terminology. The active state is the blue bar, and, it's telling me, is the user that I am on the terminology page? Pretty straightforward now called Action or C T. A. Is just another fancy word of saying a button. Um, in these general cases, you'll say, a user will click on the call to action that I'll take into the about page. Ah, this is a universal terminology that is used in the U X ah world. So, um, if you do see it, it's just a fancy way of saying a button. A widget can be used both in an application and a desktop. A widget is, ah, pretty broad sense of a turn, but it is basically a shortcut or an element that could be used in your designs. That pretty much can give you a set amount of information or, uh, could be generally a whole bunch of things. So to give you an example, um, you are on a desktop Web page and your cycling through a couple images that has a slighter with the three dots at the bottom. That's basically a widget indicating, Hey, you know, I'm sliding through these images. This is this piece is only here. You could have another widget that could tab through different pictures or videos. Um, so their specific little housed designs that are put into, ah, bigger sense of a design branding very straightforward Branding is an identity of a product . Whether it's of a company are, um is that a product or a company? S O, For example? Facebook's brand is the famous F, and the blue apples is They're very thin fonts and the apple logo. Eso There's a lot of different types of brands that are out there. Um, you know, brands could represent colors, styling, fonts, uh, all those different types of things. Imagery A Zilong It fits. It fits within a brand CMS, or content management system is something that a user uses from a back end standpoint. And when I say back in behind the scenes of a website or application, it indicates for that person who let's say, owns the website, they can go to the back end and make specific changes to their website on the front end. So, for example, to make you understand it, really simply, if you use WordPress, you would log in on the back end. And if you wanted to add a post to your block, let's say you can go in the content management system on the back end and add a new posting from that aspect to your block s. So that is what a content management system is. It's a system that manages all sorts of content, and I d or I eggs. Dia's interaction design they'd indicates the interactivity off your design, whether it's on a desktop or application s. So that could mean if you have a but in in that activates a menu that comes up from the bottom or the top or the side, or it jumps around on the page. It is interacting with the design, how the user interacts with the design. That's when an I. D. Is you're interacting with the design prototyping eyes, kind of some of the interaction design prototyping is you actually interacting with your design and showing a live version of what it potentially could look like or how it could potentially work you can go. A simple is using a simple PdF and just click through to show the states of everything. Or you can go as far as using envisioned or programs like actor that will actually be a live working version of your design, just not published for everyone to use. Responsive Design is basically taking a website and making it, um, uh easily accessible to the mobile phone. So website will, um, let's say, for example, if I want to go toe apple dot com instead of seeing something that I would see at my desktop, I would see a version of it on my phone, meaning that the website is responsive. So when I go to my phone and I goto apple dot com, I will see everything that I've seen on the desktop on the mobile version. A swell as a tablet version, usability indicates the usability of a device, whether it's a iPhone tablet, whether it's in the design, three usability off or the simplicity of your design. KP eyes or key performance indicators pretty much indicate elements such as analytics and things like that, um, not really associated with designs, but you might hear this a couple times and specific conversations that aren't really associated with you as the designer. But they could be associated with someone who is, let's say, a project manager, uh, or a, uh, manager or even a product. I guess designer and things like that kind of from a management system mostly used like analytics and things like that. So that is general terminology that is used when it comes to writing annotations. And what we'll do in the next lecture is actually start applying. Everything I have here toe actually written out paragraphs. So that's it. I will see you guys in the next one, and we'll be talking about how to write out these annotations. All right, so you guys there. 4. The Art of Writing Annotations: everyone All right, So let's start writing out these annotations now. Let's go ahead and start with the 1st 1 Go ahead and click and just start typing. So right now we have a background, and I want to indicate to the person who's gonna be looking at this, that the background has a image azi image, and it has in effect, so background will have a image groups and a effect, I should say, a blur effect of, and you can sometimes indicate your, uh, pixels or how much effect you've done. So in this case, if we go look, it's four pixels before pixels. Let's go ahead and make this regular and let's make this 14. Let's make it six. So background will having image and a blur effect of four pixels. Background user will not be people. Teoh Inter act with the background as it will be static. Not all right, so I've indicated that we have a background and it's going to be an image, and it has a blur effect of four pixels telling them that the user will not be able to interact with the background because it's going to be static. We're not moving. Let's generally what you're supposed to do when you're writing a annotation on the next one is a logos. I'm just gonna copy this and paste it down here, and I'm just gonna rewrite some stuff so I will write. The logo will appear from the spot dropping drop sliding down slowly to the middle on load unload meaning as the application loads. When user taps on the sign in C t A. The logo will slide. Swipe to the back, going off those right? So I've gone ahead and write written now to annotations, and I've just indicated that the local appear from the top, sliding down slowly to the middle. And then when the user taps on the sign in button or C T A, um, the logo will swipe to the left going off the screen. And now number three. The sign in C. T. A. Will be tapped on five User, and we'll take the user to the next to use her to the Sign in screen. User have the ability to sign in Baia e mail for social media, so I'm indicating that the user will have the ability to sign in via email or social media when they tap in signing button. And then finally, the sign up button. It's, uh, generally the same thing. The sign ups et a. Will be tapped on by the user will take a year to the sign up screen. The user will have the ability to sign up by email or social media. So just really small changes there. And that's generally how to write annotations. You're just explaining what's going to happen when you tap on the button. Um, you know, I can even go a little bit further and say Taking agent The tapping state will mean from it's color to a darker color so I could go a little bit further. Explain. You know what happens when you tap on it? Um, and there you have it. That's how to generally write annotations. The 1st 1 we indicated what happens with the background. We've said what the effects we've have indicate what happen with the logo. We indicate what happens with Sinan. We indicated what happened with the sign up. Generally, you don't have to continue and rewrite the's on the next one. The only ones that we may want to cover our three and four, which I could rename Wanted to. But I'll do that. I could do that later. Office coming. But I can go ahead and just copy these again, paced him in here and just rewrite them just to fit the reasoning behind everything. So the science et it will be tapped on. The user will take the user to the sign in screen. Use will have the ability to sign invite email, social media, The C T A placement has changed in this version to go with what's currently turning, and the same thing will apply in the next one. And sometimes you'll find that you'll be copying and pasting a lot or writing a lot of the exact same things. Just patting a few touches here, there. I mean, that was a really basic basic thing. I probably wouldn't have written that. I probably would have written something a little bit different, but you get the general idea. Um, yeah, I could say something like that. But in placement is easier for the user to access. Ah, the button place is easier for the user to access, and then I just and basically I could just copy and paste. And there you have it. That's how to write annotations. Really straightforward, really easy. If you have any questions, don't hesitate to ask. I'll be happy to answer them. See you guys in the next one. 5. Creative Annotations: everyone. And welcome back in this lecture, we're gonna be talking about more annotations, but more when you get to a creative portion of the process. Now, usually annotations were written in the wire frame process. As you saw over here mean we're making these. But now we're into the creative process and sometimes, um, depending who you're hating your files off to or who you're writing them for. You do need to write some annotations for a creative sense. Whether you're talking about styling Fong's things like that. I didn't mention that you can write that over here in the wire frame version, but generally you would probably want to go a little bit more in detail on the actual creative version. As we have here now, I changed all the colors of each individual element where number, as you can see on the board here to match each individual element will be talking about. I kept them all the same on this version only because I was talking more towards specific functionality of things. Now, this is gonna be more talking about the visual sense, so I really want to break it up so they can understand which sections I am talking about. So number one, we have the background Number two, we have the logo Number three, we have the sign up buttons and then number four. We have our social media buttons will be signing in with. So let's go ahead and start with number one. I'm going to just go ahead and delete all of this because I do not need it because I just copied it over from my previous art board. So I'm just gonna go ahead and delete that. So Number one is obviously on the background. So we're going to say now more of a creative language. Not so much of you X languages were just going to say a background image of food. Um, only food can be shown in background images because it is related related to the brand background image will have a boy of four pixels on will always have a where so elements can be seen visually on the log in page. So basically what I'm explaining is from from a visual sense that the background image has an image of food as we could see its blurred, and I'm stating that Onley food could be shown as a background image always changes to see as because it's related to the brand of the app. So in this case is Monica APP is called grocer. It's obviously related to food. So the branding is all about food, and we want to just show images of food. Um, I stated that the backer on image will always have a blur, and I'd specified what pixel ratio it is. So four pixels And, um, I stated that the blur was necessary because all the elements can be seen Ah, little bit more clearly if it was not available, uh, effect wise. So now that that is done, we're gonna go ahead and go into number two and talk about the logo. Um, now, like I said, I'm not gonna be so much technical, and I'm gonna be more brand mindset brand related. So basically, what I'm gonna say is, hey, look, we have a logo on here, want this logo to stay as is. These are the colors that we want. This logo is not gonna change, um, size, ratio, anything like that. It will always remain at this size on so on so forth. So I'm going to generalize that into just a little paragraph. So first I'll say logo will always remain white. Almost alternative color. That's a. In this case, the alternative color is black, so logo always remain white unless alternative color black. And sometimes what you could do is just take the hex code if you wish and pop it in there. Shown a white groomed logo cannot. And sometimes if you want to emphasize this, you do caps, and you could make it bold. And if you want, you even change it to read. Should you back to black change? Size color cannot change size, color, just size or color. You guys are color. Unless so, basically, I'm saying local lords remain white unless the alternative color is black, which is going to be shown on a black background. I'm sorry. A white background the logo and I'm emphasizing, cannot change size or color unless specified. Um, logo will always remain centred either on log and page. Whom page perished. Say, just top page Better logo. Will. I have three sizes that can be used, which is the food it's felt today. So 15 fix those. I'm just making this up so uh, in terms of sizing. So basically, I'm saying logo always remain white unless it's on black cannot change the size or color. Um, I'm a specified locals remain centered either on the logo page. Just stop page and a header logo will have three sizes that could be used, which has specified us followed. And I state that it's gonna be a 24 pixels, 60 pixels or 10 pixels. But, uh, so there we got that one night. So next we have the sign in and sign up buttons. Uh, so instead of saying c t a just more of a wire framing language, I could just say more. Just sign up, but signing slush. But in always orange, they're over Steve slash tapping state. It is white with orange text orange fun Funt to be used iss second because it froze. There we go s f you I regular at 18 pixels the sizing of the front and not cheap. And I could just italicize this just to make it a little bit more emphasised. And I could even make it bold. Oops. So basically, I'm saying, Hey, look, the sign in sign up buttons are always orange there hover state or tapping state meaning when I hover over the actual but on the desktop version or if I tap on it. In this case and the APP version, it will change to White with orange font indicating that I have pressed it on. The font to be used is called sf You. I regular and it's at 18 point pixels. Um, I'm saying the sizing of the font cannot change. And if I want, I can even just copy that and pasted in here if I just want to emphasize that it cannot changed. Last but not least, the signing buttons with social media, the signing, but things social media buy ins will follow their Sorry about that, so they follow their own brand. E example. Guru Plus is always bread Facebook, but it is always blue with now. I don't have the accurate colors to the actual branding Google plus and sign, and I'm sorry and Facebook. However you know when I do have this colors or if you do have those colors, I would have just put the hex code in here saying hex number, whatever 24 56 so that is usually something I will dio. Now. Here we go now. I can also say that, um, social media buttons can also have their respective Icahn's their brains. That's fine. And there we have it. So we've indicated that Hey, look, we have a background. It's blurred. We only use food images. We use our Blair pixels of four picks. We use hard blur of four pixels. We have a logo local always be white unless we use an alternative color, which is black. And that is only shown when there's a white background and the logo cannot change size or color on the specified. And then basically locals remain centered either way on the log in page desktop and header , and they'll have three sizes, which is 24 16 or 10 pixels. And then next we have our signing buttons, and I'm specifying that sign in buttons and sign up buttons are basically it was orange and their however state or tapping state is white with orange fun and thought is used or the fun that is used. It's called SF. You are regular at 18 pixels and the size and cannot change, and finally we have our branding and we could just say, Look, our branding buttons for social media. I have to follow the standards of the social media branding. Now, I could go a little bit further in detail and actually give a link where you can find the S F u. I find, um, you could put a lot of detail in here for whoever's reading it for them. It's really up to the actual, um, offer a person writing it themselves. Depends how much detail you want to get. That's totally up to you. All right, so that's pretty much it for the creative version of writing. You kind of have to split your mind in two ways. Uh, in the wire frame. You have to be a little bit more technical, whereas the creative one, you're just kind of saying it as is like, Hey, look, this is This is a food image. It's blurred background. It's black. That's that's it. Um, very straightforward, very simple. So hopefully that was, um, pretty easy to understand. If you have any questions, don't hesitate to write in the comment box and I'll see you guys in the next one. So you guys there 6. Dressing up your Annotations: Hey, everyone, welcome back. So just want to show you that I dress this up just a little bit, just so it doesn't look so plain and boring. So when you do make thes, you don't want to just throw him on a white art board. You just want to make him a little bit more dressed up. So add a little bit of a header up here. Ah, with the page number, a title and logo go down here on, then I just carried that through with different page titles and different numbers, indicating what page that you're on. That way, if you export this, um, you can then exported and save it into a pdf or whatever the case may be. So that's how you kind of dress it up a bit. It's completely up to you how you want to do it. If you want to follow a standard or a brand or things like that. Um, you know you can we go ast's faras aligning all these elements up such a C screens so they don't jump everywhere when you put everything together, so you want things to be in tip top shape. If you really care about having the details. Um, you know, matches you cycle through each page, even the annotations as well. Eso you want them all lined with Let's it is top line. It's a move that up and now we can see they're all aligned on the top lines. When I cycled through all the pages, they're exactly the same. The only thing I think left I would have to do is just move this over a bit. So it matches. Um, the spacing whips like thes. And there we have it. So that's kind of how you dress up your files just a little bit just to make him look someone nice. You can even go ahead and put a bar at the bottom over here, completely up to you on if you're running out of room, as always, you can click on the title and then dragged the art board down just to make room to give yourself more space to write. It's okay if that happens, cause you know, you have a lot that you need toe right out to make someone understand something. Eso just all these elements moved down and that's okay. All right, so that's pretty much it. I just wanted to get that across just to dress up your files just a little bit to make him look nice. In this case, we use Nice baby Blue Header. And then I used blue text as well as changing the front of the text titles and we'll logo will be the logo. Whatever that case may be. There you have it. All right, So that's it. Hopefully, that was a little bit helpful. See you guys in the next time I see you guys there.