Intro to Rapid Prototyping: Learn the basics | Evan Kimbrell | Skillshare

Intro to Rapid Prototyping: Learn the basics

Evan Kimbrell, Director at Sprintkick

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
11 Lessons (1h 9m)
    • 1. Welcome to the class!

      1:39
    • 2. First thing to do

      1:05
    • 3. Terminology A-Z

      11:29
    • 4. Wireframing vs prototyping

      5:46
    • 5. High fidelity and low fidelity

      6:13
    • 6. Why do we wireframe?

      9:21
    • 7. Picking a tool

      7:13
    • 8. K.I.S.S.

      4:37
    • 9. Following the construction path

      17:42
    • 10. The class project

      2:14
    • 11. Keep the learning going

      1:33

About This Class

Have you recently heard someone say "Lean UX", "Wireframing", or "Prototyping" but weren't sure you knew what they were talking about?

Well, congratulations you're normal. The term "User Experience" is a fairly new word, and its' two-letter abbreviation (UX) is even newer. A lot of people are out of the loop with this new development, don't worry.

In this class, we're going to cover the basics of UX and prototyping to get you up to speed. We're going to cover all the terms, what they mean, and go over examples so you can better understand how modern UX works.

At the end of the class, you'll be ready to jump off and start learning more in-depth information about UX and Prototyping or just feel confident in your ability to converse and understand UX terms.

What we'll learn: 

  • What's the difference between User Interface (UI), Information Architecture (IA),  and User Experience (UX)? What's a storyboard? What does "interactivity" mean? We'll cover all of these terms and several others.
  • Whats the difference between "high fidelity" and "low fidelity"? When should we use each?
  • Whats the point of wireframing? Where does it fit in the development process?
  • Standard practices for efficient UX.

What you'll do:

For our project, we have a scavenger hunt that utilizes all of your new knowledge. You'll go out and find a wieframe or prototype of a popular website or mobile application that you use everyday. When you find one (I'll bet you $5 that there are many), you'll get to share with the group and discuss.

Transcripts

1. Welcome to the class!: Hey, guys. I'm Evan Kimbrell, and I'm the director at Sprint Kick, which is a Web and mobile development studio based out of San Francisco, California So the name of this class is intro to prototyping. Learn the basics. The idea behind this classes that I'm gonna teach you the absolute basics that you need to know to understand prototyping now prototyping can mean a lot of different things. What's interesting? Wire framing? What's the difference between prototyping? What's Low Fidelity? What's High fidelity? Hopefully the end of this class, I'm gonna quip you with the basic knowledge to answer those questions, but also to understand what is prototyping and how does it fit into the development cycle off Web and mobile applications. For those of you who want to move into knowing you X or even programming no one got a prototype is a really helpful and I would say essential skill. And even if it's just the case that you need to familiarize yourself with the process, it's very popular. And startups, I think prototyping is also probably the answer. Like the title says, we're really just gonna cover the basics. We're gonna talk about the context of how it works when you use it. What are the main terms? We're gonna lecture on crash course terminology. Hopefully, at the end of this pretty short class, you should be up to speed with what it is and feel confident pulling a conversation and moving on to learning more in depth techniques and skills with the guards. A prototyping. Hey, guys, I hope you're excited to learn because I'm excited to teach this click and roll. We'll see you inside. 2. First thing to do: Hey, guys, welcome back to the class. So I have an assignment for you really quickly. I want this to be the first thing you dio eso at the bottom of the skill share page. It says discussions, the clip discussions, and then you can click new post. I want you right now to go and do that and introduce yourself. You don't have to tell me a lot of information. You can just say your name or your from. But what I'd like to actually hear from you is one. What do you struggling with? And to what are you looking to get out of the class? I think this is something that helped immensely with the class. I really like to make my classes as engaging as possible. I respond to everyone, and I want to make sure that as I'm teaching, I'm meeting your goals and I know exactly what I'm trying to fix. Okay, so this is the first thing. Just go down to the bottom of the page. Do that now. Don't skip it. You can skip it if you want, but I think you'll miss out. All right. Seeing the next lecture 3. Terminology A-Z: Hey, welcome back to the course in this lecture. I'm gonna go over and a kind of a crash course style. What are the major terms and terminology that you need to understand so that you don't get lost? And so also, when you are using the resource is or doing your own research, you're better equipped to understand what actually is happening and what people are talking about. So there's a lot of terms that are tether floating around, and I swear they're actually like multiplying. But if you got to a point where I said something and you said huh um, don't be surprised, Honestly, I every day here, some new term that I actually had not heard. But the point of this lecture is we're gonna try to go over them so you can get a good understanding. You don't need to understand them exactly to the t we just again. We're just trying to get through these quickly so you get the most out of the course. So let's just jump in. If you're ready to listen, pay attention because I try to go pretty quickly because I wouldn't waste a lot of my time or your time explaining these in depth. It's very easy to get bogged down, and a lot of these are not particularly important. You just got to get the gist of it. So let's start. Here's a big term that you probably heard all the time. User interface. It's often referred to just as you I, but it's It's not really a very ambiguous word, but you need to understand what it is. Otherwise. You'll get confused with some of the other terms, so you are again just means user interface. What that is is when using a website using a mobile application. What are you looking at? The buttons, the graphics, the images, the text. What's your user interface? That thing that you interact with you click on, you, scroll through, you move around. That's the interface that you, as the user, are gonna interact with. That's how we get user interface. It's a very broad term. Just meant Teoh described whatever you interact with, it's not meant to describe things that happen in the background. Ah, it's not really meant described any other part of the application, just the things that we would consider on the surface layer that you load in your browser, you load on your phone. The second term is user experience, also used as you X. Now I'll admit, this is a word that seems to be changing definition. Every day it runs seems to use it differently, but again, you just kind of need to understand roughly what they're talking about. Now user experience is meant to differentiate from now. User experience is meant to differentiate itself from user interface. Computer user interface is just the physical thing that you see. Where is user experience is meant to be that, but also to include a lot more. So you X is meant to include a whole lot Mauritz, meant to include graphics. It's meant to include interactivity. It's meant to include user flow. It's called user experience because it encapsulates a lot more, and the best way of summing it up is that it. It covers all of what a user will experience when they're interacting with your website or mobile application. Now, when a user hits your page and they need, they have a goal in mind on day have to complete tasks to get to that point. That entire process is called the user experience. So someone who calls themselves aux specialists or user experience specialist someone who is skilled in figuring out how to get that person effectively from point A all the way to Point B without frustrating them with getting them the information they need and understanding generally how users and consumers, what are the pitfalls and websites that get confused in on what are the areas that they, you know, they actually and one of the areas that they actually can complete well now nowadays, also, you access starting to describe people who not only understand user flow, interactivity and buttons, but also people who do graphic designs. A lot of times you hear someone who is a designer who could do use their experience and can do pretty much everything that you would consider on the front of your website, and they'll call themselves a U X person. I use user experience whenever I'm being lazy, and I just want to say like all that user experience and I invite you to be lazy with me as well. Now number three interactivity. What does that mean? Well, you would have actually caught this word that I used previously in the previous lectures really know. What it means is that in a website, the things that move the things that you click, the things that have actual functions was that's interactivity. Things that allow a user to interact with the Web site and not just plainly browse it. Not whatever is an extension of just a design that's generally what we refer to his interactivity. It's it's very simple. Someone interacts with this that you remember. User interacts with the website and the things that he interacts with her she interacts with. That's interactivity. Now individual interactions will call interactions. Interactivity is just a general general description of all the possible interactions on a website. When you click a button, it asked for more information. You give it your information. That's interactivity. When you click a button, it loads an image for you, and you can do something with that. That's interactivity. Number four site map. A site map is a tool that we're actually gonna cover later. How to build what it is is a visual representation of all the pages in your website or mobile application. And what's the rough relationship between them now? If you've seen these, they look like hierarchy trees. They look like you'll see little boxes with lines connecting them. And that's just a high level Understanding of the front page will go to the secondary pages , go to the third page, and the third page might have a link all the way back to the homepage. That's helpful from a project standpoint, to understand what are all the pages that we need, And it helps you really to make sure that you don't leave out something. So typically, site maps don't include backend functions. I don't talk about like servers or information being stored information being sent up. But sometimes there exceptions, and I've seen people include those in sight naps. Usually you create these, either with just a pencil and paper. You can do it in a wire framing tool. You can also do it in any type of specialty software and their specialty software that will do this. Number five storyboard. Now this is one of those funds, and you probably heard of it. It's actually a trick if you've heard storyboard. We're not talking about websites or mobile applications anymore. Storyboards. Air actually traditionally used with film when What they are is a visual representation of how an animation or a movie shooting scene, how it progresses from beginning to end. Now it's not necessarily something that transfers over toe websites directly. Occasionally you might hear it be referred. Teoh, when you're talking about an animation on a website back in the days and we use Flash would often have flash animations, and the animations could play almost like a trailer or something. In that case, you would use a storyboard for our purposes. That's a word you can pretty much throw away, but you just need to know that they're not talking about websites Number six persona since one that if you've ever read anything about user experience, easier interaction, you probably heard this word persona is a designer or developer kind of buzz word for a type of common user. Now, persona would be a way of building, say, like an archetype of a common user. On DSO you build a persona around that user, so ah, persona around, a user might say how old the user is, what they're trying to get out of your website, how they heard about your website, how familiar they are with technology. There's a lot of different traits that you can attach to them. So I'll give you a fakes persona someone who comes to you to me, looking for business courses. Here's a persona we could make up. We could say Maybe they're 25 to 35. Maybe they're employed at a technology company on. Maybe they came to this website to see if they could find a course on Excel. Okay, that would be a persona, and that's a very specific one. But you would make lots of these because their tools to help you understand how users will potentially interact with your website. And what are the potential pitfalls based on what their needs are? We'll talk a little bit more about personas later. Right now, you just need to understand that's really all it is. It's a mental exercise. Number seven information architecture. It's often referred to as I A. This is something that's actually a little bit more obscure and actually pat yourself on the back of you. Heard of. This one is particularly common. There are people who are consultants at information architecture, but it's a very broad based term. But what it means is how is information and content displayed on your website? That's basically what it means. And the easiest way of explaining it would be. If you're looking at a website, someone might have decided where the logo goes. They might have decided where the headline goes in. The tagline goes. You might have decided how long your headline should be. They might have decided the description text. Where should that be placed? What colors that be placed in, Um, how important is it to be on the front page? This is the second page Information Architecture is the organization of information on how to best set this up so that users can efficiently and effectively digest this information. And last but not least, what is responsive design. Now I think this is very useful termed, understand, but it's not necessarily relevant to what we're doing in this course. It's helpful because it's very much a common term nowadays, and understanding what that roughly means is gonna make you more equipped to understand interactions. You have later with graphic designers and developers, because it's a question in a term that almost always comes up now in product development, about responsive design is when you design a graphic. Now a responsive design is when you design a Web page and a layout for a Web page, and that design itself is responsive to other screen sizes. Eso What does that mean Now? If I drew out a website and I drew it the way that I see it on a browser, if I develop that and designed it in a way that if I were to take that website and open it up on my phone, the images, the graphics, the tax, the layout would automatically conform to the smaller screen on my phone. Now that also goes for other things like iPads and responsive Design is typically designed for tablets, and responsive design is typically made for things like tablets, phones and browsers. Not a hugely important term, but it is something that you should know. Okay, so that's my version of crash course terminology. Hopefully you learn something. If you didn't, I'm sorry, but you're ahead of the game. If you guys have any questions. Clarifications, make sure to post in the group discussions to me. Private message. I know I went over this really quickly, but that's because I just want to get you guys to the actual meat of the course quickly. But if you if you kind of lost, step anywhere at any point, just let me know. All posts. Another update on Beacon. Go out of that one. 4. Wireframing vs prototyping: Hey, guys, welcome back to the course in this section. We're gonna talk about what's difference being wire framing mock ups and what's a prototype ? Each word has a different meaning, but they are kind of overlap. I think it's really important to get this out of the way, so you understand what it is I'm referring to, because, really, they're three different things. So what's a wire frame? A wire frame is also known by other names. No one name is a skeleton, but what it is is it's a visual representation of the layout of your site or your mobile application. Wire frames often look like they're designed with wires, and that's where the name comes from cause you're gonna look at it. Looks like it was designed with wire on a piece of paper. Now, often you'll see, is that it is their design nowadays, with a sketchy kind of style where it looks like it's hand drawn and it has rough edges and lines aren't perfectly straight. And that's a very popular convention now. Wire frames they're not meant to be pretty. In fact, actually, they look kind of ridiculous when you see them. The point is, though, that they're meant to show the organization of your site application. They're meant to show. What's the actual layout of where everything goes? Sometimes a wire frame will have copyrighting. We'll have text in its We'll have headlines already written into it now. Sometimes they also don't. Sometimes they have generic text like Laura Ipsum or just gibberish. Now why that is that some people decide to put riel actual content into their wire fame and why some don't. That's an entirely different point, but we're gonna cover that later. Wire friends. They often look like placeholders for an actual website, but when you do look at them, you do get a vague understanding of what the site should look like because they always use very common elements that are used across every single page. We'll cover later what common elements are, but if you've seen a wire frame, you'll recognize it because they look like pretty much any website or mobile application you've been to, and they have basic things that you see across all of them. Sometimes a wire frame will have a little bit of color in them, but for the most part, wire frame does not concern itself with graphic. So that's what a wire frame miss. And if you've been paying attention to the visuals in this lecture, you can see roughly what they look like, and I'm sure you've probably seen them. There's a really actually famous image that floats around and bring it up. Right now, this is actually the first wire frame for Twitter. As you can see, it was actually written out, and we'll cover later what the popular ways that people wire frame but one of the most popular ways that people do this is actually just with a pen and paper. Now, this is a great example of what this actually ended up becoming. It's interesting to see this is, like the very beginning, the genesis of this thing that we all use called Twitter. Now a prototype. It's quite a bit different. A prototype is an actual simulation of what your application is going to do, and in many cases it's actually a reduced version of the application that you're going to build their meant to look as close as possible to whatever application or idea or website that you're gonna launch orbit. So generally the biggest differences between the two and at least for year purposes for understanding. This is that prototypes usually have some level of graphic design done, not always the case that the entire pages designed into end. It might be something very quick, but it usually has custom graphic elements used in it. And secondarily, it's a prototype has some interactivity now. Wire frame. When you look at it, you're not usually able to click on buttons to scroll through the page two, Um, open up something, whereas a prototype in most cases you can do that, and so they actually are simulating some of the actual interactivity of the site. With a prototype, you can usually click things you can. If it's a mobile application, you can tap things that's called tap enabled. Um, and you can usually go and explore the site map in a prototype. The biggest limitation of a prototype, however, is that it's usually a surface level demonstration of what it's like to use the application . And it doesn't usually do the heavy lifting that you'd expect with most applications. So it's not going to doing a lot of background calculations. It's not going to saving information, creating user accounts, etcetera, etcetera. What's a Marca? Well, I use this incorrectly, and I'm gonna be using this incorrectly throughout the entire course. I don't memorize this one, but it's a useful word to essentially describe both of them. Now, if you sketch something out on a page and it's meant to represent the site you're trying to build, that's a mock up. Now, if you used a tool to actually build out wire frames on, it's supposed to represent your application. That's also Marca now if you built a prototype and that also looks like your application. But it's not the complete whole shebang that is also a mock up, And so, throughout this course I'm gonna be referring to things in general as mock ups. They're not specific to whether or not it's a wire frame or a prototype. Either one could be a mock up. Generally, a mock up means that it's it's just a simple or version. It's not the full version, but I'm not discriminating between which one when I use that word 5. High fidelity and low fidelity: So in this lecture we're gonna talk about what is low fidelity mean? What is high Fidelity mean on how does that relate to what you're trying to build, and how do we make a decision as to which one we need? So first off, let's just to find them lo fidelity High Fidelity. Well, what is fidelity mean? First Fidelity in this case just means accuracy. And when I say accuracy, I'm talking about how accurate is the mock up to what you're actually going to build? At the very end, a lo fidelity would mean low accuracy and a high fidelity would mean high accuracy. Now again, this is accuracy based off of how real it looks compared to your final product. Wire frames, if you haven't already guessed, are low fidelity. They're low fidelity because they don't look very similar to what you're in product will look like. They're really more concerned just with layout of information on and figuring out how every single page of your site or application are organized. They don't deal with graphic detail. They don't deal with button designs, colors pretty much a lot of things that you would have in your final product. Now, prototypes are much higher fidelity and well, that's really because they're much closer to what the final products gonna look like now. The primary reason why prototypes are considered high fidelity is because usually the difference between the two is that they use design, and they actually have some interactivity built into it. Your final product will have interactivity. Therefore, a prototype of your final product that has interactivity very close. It's very accurate, has high fidelity. So if your mock up looks more like a skeleton, maybe it has some color. Maybe it doesn't. Maybe it has a has a layout, but maybe they might change if it shows where buttons are, but they don't necessarily do anything again. Then this is low fidelity. Okay, so the key here is that it lacks graphic detail. Now let's understand the differences between the two with regards to how you would use them . They're both quite a bit different, and they're both used for different use cases. So understanding what they're used for is really help. If you just want to help convey an idea you have, if you need help wrapping your head around an application or site idea where you just need an accurate, um, way of getting an estimation. Then chances are you probably are fine with a low fidelity mock up. Well, it's nice to show a graphic designer high fidelity mock up. Chances are, by the time you approach a designer, you're not gonna be able to be in a position to have a high fidelity Marca. Now remember. The difference is that high fidelity mock ups usually have graphic design. So having a high fidelity mock up by the time you reach a designer, it's not always the case unless you have some design skills yourself. Typically, graphic designers are gonna be perfectly fine with the low fidelity mock up because it is their job. Remember to determine the look and feel and to make everything you just made look nice, pretty and sparkly Now. Similarly, a developer really only needs in low fidelity mock up to wrap their head around. What exactly is going into this application and what's the general scope Now? There is one really important difference or one different exception on, and it's worth understanding this now. When a developer looks at a low fidelity mock up, it's not going to give them any information about the design of the site or the interactivity of the site. So if you're trying to build something that has a lot of interactivity, a lot of buttons, a lot of calculations, a lot of things that move around and you plan to have complex design, then Jim Piccoli it's best to have a high fidelity mock up when you go to get an estimation . Now, best practice for this would be to tell the developer upfront this is low fidelity and give them a verbal description of what the interactivity is going to be and how complex do you think the designers now in a later lecture? We're actually going to talk a little bit about any annotations and how you can pass its information off efficiently to your developer generally, what kind of information you need to include now in the case that you have complex interactions or complex designs on your website. A developer needs to know that because that could dramatically increase the amount of hours and time it's gonna take to build your application. Now low fidelity mock ups. They require significantly less time you can from start to end, crank out one of those in 30 minutes and actually do it quite well. Lo fidelity market apps in general. Also, they don't really cost any money. I mean, the only money you're gonna need to invest in this is perhaps a subscription to a wire framing tool. If you don't want to do that, you can use a pencil and paper, or you can use one of the free tools listed in this court. Low Fidelity mock ups also allow you to have less pre thought and pre planning up front because they deal with less detail. You don't have to be as detailed yourself. So a lot of things you don't necessarily have to think of and think about when you create a low fidelity or high fidelity. On the other hand, this requires a lot more thought and a lot more money up front. You need to think about what happens when I click this and what happens when I move this over here and what happens when I log in and I do this and this and this. These are all things you have to plan out, and also in order to make it look accurate look like your final product. You're gonna need some design done now, unless again. Your designer. This means that you might have to hire someone out. If you plan to make a High Fidelity prototype plan to spend some money, you get these. Donna's Cheap is $50.100 dollars by buying a template or buying a u I kit. But you can also get it done for a lot more. If you want to go custom, some designers could get very expensive. High Fidelity is great if you are trying to simulate a real product, and the person that you're showing it to has a higher barrier of acceptance. In other words, they need to see something that's more polished mawr, riel and more professional. If you're pitching an investor trying to get a pre sale who are just trying Teoh even pitch a client or your project manager, chances are you probably need a Mawr High Fidelity version of your mock up 6. Why do we wireframe?: Hey, guys, welcome back to the course in the structure. We're gonna go over. Why do we wire frame and why do we prototype? Just talk a little bit about the use cases that you would use wire frames and prototypes and why they're useful and why. There's something that any experience entrepreneur product manager they used, probably on a weekly, if not daily, basis. So there are two main reasons why someone would build a wire frame or build a prototype. So number one is internal communication. Now, internal communication can refer to really anyone who's in your organization. Anyone you already work with can refer to a co founder, developer, a designer, anyone that you need to communicate effectively with, and that someone that you generally consider that's on your team Now. In general, you use wire frames and prototypes because you need accurate estimates and timelines for any new product, launch or feature launch. You don't want bombs that are going to explode on you later. You want to know as much as you can now about what it's gonna take and how long it's gonna take. You might have an idea for a feature product, even a change to your already existing website application. Now, you really need to be able to say and articulate what exactly it is that you want to change or add. Okay, So imagine you're talking to a team, mate, and you say, Hey, I want to add a photo album feature to our application now in your head. What does that mean to you? It probably makes perfect sense in your head. Right, Because you came up with the idea. You said it. You already have an idea of your head. What? It looks like how it works. And that's how you kind of communicate it. That's just a verbal description, though. Now, if you said that to a developer, what would they think? They probably think Now, if you said that to a developer, what would they think? They probably think? How many photos is it show? Where does this system get the photos from? Where are we gonna display this? Is this a big feature? Is this a separate page entirely? Those are the questions that immediately go through your developers head because you have not explained to them what it does. You just said. Basically, this is what it is now. If you said that to a designer, what would they think they probably think? Is this a light box? Um, is this a motile? Is this a pop up? Is this something that loads right there in the page? What pages? Even go on. How do I access it? What's it supposed to look like? Is it supposed to look like everything else? Is it a separate page? Those are the things your graphic designer would think about now. Anybody else in the organization co founder, Project manager. They're probably gonna have similar questions to their Probably don't wonder what it looks like. Probably gonna wonder how big of a feature it is. Is it gonna disrupt any of the other features? Is this a really important feature? Is this something that we're really gonna push hard with a wire frame? Or better yet, a prototype? You could just say here, this is what it is. This is what it looks like. This is where it goes, and this is what it does. Another example of how you would use wire frames and mockups and prototypes in internal communication would be that if you needed some type of pre approval before you went off and actually did something. Now anybody who has a boss or anyone who has a team, even underneath them, you know that you need approval. You know that you need the group on board. So now it's a really hard to get all of these people on board. If you're just giving them a verbal description again, not everybody understands exactly what you mean. Also, when you tell someone this is what it is, it's abstract. They don't know how serious you are. They don't typically take it very seriously. Also because they just assume that it's kind of 1/2 baked idea. It is much easier to say no to a verbal description, that is to say to a natural prototype, When someone sets you down and says, This is what I want to dio What do you think? Much harder to say? No, it's much easier to understand, and that's why it's much easier for you to say Yes, The second category is external communication. Now this deals mainly with anybody who is not party organization. Anyone that could be in your business ecosystem could be customers, clients, investors outside design firms outside development firms really consultants, contractors, Really Anything without a prototype for a wire frame, you might think that you're gonna get hamstrung by trying to show your potential customers or potential clients something that doesn't exist yet. Sometimes when you're building something, it's very hard to understand what exactly does and what's the value in it. If you can't actually see it, it's very hard, especially if you're trying to show it to, say, a customer who's not an expert in your field. They don't exactly understand your idea perfectly, and so it's very hard for them to visualize just based off of a verbal description. Now, these are the weaknesses that you would want into if you're just doing basic idea validation without actually building something now, in the scenario where you're showing a prototype wire frame to a potential customer, you're gonna get much more authentic feedback and authentic responses from them. You just give them a verbal description. It's really hard to tell whether or not they really like the idea whether not they supported and whether or not they understand. It was a little bit of bias going on, because if you just describing it to them. They're usually nicer. Then you would think also a lot of times they just have a hard time understanding what it is. So let just say yes. Keep in mind a lot of products and APS they're really hard to explain. So in less year, a wordsmith or someone who can really wrangle the English language or whatever your languages you might actually really struggle to explain to a layman, a normal customer, what exactly it is that you're trying, Teoh, Get them to buy now. Another form of external communication where prototyping would come into play would be like , say, if you're communicating with the designer or developer there outside your organization and you want to know for effect, how much is this gonna cost and how long is it gonna take? It's very similar to internal communication, but here you have different kind of forces going on. When you're working with an outside contractor, they're gonna try to bid you, and they're gonna try to squeeze you in terms of the price that they're gonna give you in the timeline they're gonna give you. Now if you cut out all the ambiguities and you show them exactly what it is. It's much easier to not only price compare and timeline compared between contractors, but it's much easier to say to them. I know what this roughly should take, and I know what this roughly should cost. And if you're serious about getting something built outside of your organization, that's really important knowing exactly what it's gonna cost and how long it's gonna take again, you don't want to blow up later. So maybe another reason why you would want to use a prototype is that you wanna pitch an investor or you wanna pitch a client and you want to do that before you actually have the product. And before you actually put the money up to get it made. Now, investors, they do invest in products and ideas that are not yet built. That actually happens all the time. Now what? They don't invest in our ideas that are just that just ideas on a daily basis. They probably here hundreds of ideas. Now, if you're gonna throw your idea into that pool you wanted to stick out, you don't know if they're actually gonna remember that. You don't know if they're actually understand it now. If you show them what you're trying to propose, they will understand almost immediately if there could investor or at least have a much better opportunity to understand it and remember it. Potential clients and enterprise customers. They're the exact same. When you say you have something you want to sell them something you're not ever really sure if they understand exactly what it is that you're trying to sell them, they also keep in mind that cannot sign on the dotted line that can't sign your letter of interest, your contract for sale if they don't have something tangible toe look at to understand what they're getting. Also, keep in mind that the person you're selling Teoh might not actually be the person who makes the actual final decision. They probably have bosses to now imagine how hard it is to pitch an idea verbally to that person and then have them go up the chain and do another verbal description like that telephone game. Whatever you tell them gets watered down repeated, and it's totally different by the time it gets to the person who says yes or no. So give them a tool to get their job done and you'll find that it's really quite easy to get. Yes, it now. Last but not least, you can always use prototypes and wire frames to pre validate ideas that you have to save you a boatload of cash than time and investment. I always know if your ideas a refundable if their purchase herbal if they're just good in general. But building a prototype can allow you to lease, simulate customer interactions, investor interactions and at least use it as leverage to recruit other people to work with you. So that's why people use prototypes and wire friends. There's a lot of different reasons, and I think that at least one of those will apply to you. They're, in my opinion, a really awesome way that you could take your idea and make it actually look and feel riel , not only just for your purposes, for obviously anyone that you interact with on a business standpoint, 7. Picking a tool: Hey, guys, welcome back to the course in this lecture we're gonna talk about What are the tools available for you for making prototypes and wire frames and what criteria you should use when you make a selection? Now there are seriously, like, Aton of these services out there every month. It seems like a new one comes out. Everybody has their own personal favorite. Um, it's worth noting that they all kind of do basically the same thing. Every single one is going to be slightly different or have a different feature set. Now. Some tools focus on being able to make low fidelity wire frames. Some of them are gonna focus more on the prototyping aspect, and some of them are gonna cover both. Now there other, less conventional ways of making wire frames and prototypes. I'm going to cover those just really quickly, so there are a ton of them out there. There's pot blue, there's I plots. There's balsamic. There's Paedo Co. Just in time. No one called sketch map. There's a lot, a lot, a lot ones out there. Azure is a popular one. Visy. Oh, now personally, my favorite is balsamic, but the problem balsamic is that they only do low fidelity wir franc. I do like them when I make low Fidelia wire frames because they automatically have the sketch application in them. And in my experience, they are the easiest to get up and use they take. It takes the shortest on a time to understand how to use balsamic and the shortest time to go from opening the application to pushing out a product. Also, our clients like it quite a bit because it actually does look kind of cool because the widest feature set it's also cheaper than balsamic. And it's also gonna allow us to do some the proto typing that we need to do. Now. I'm picking something that has a wider feature set because, um, wire frames of all over time you'll build them. They'll get more complex and you'll push them all the way from being wire frames towards being more complex and more interactive prototypes. Now, Ideally, you want to keep this all within the same application, so plan for one that has an extensive runway. Paedo Co. Is not free. There are free versions out there. There's even an open source service that they allow you to make wire frames, and it's for free. But this one has a free trial on most of these. Do you have free trials? It's just still better than the other ones because the amount is the lowest. It's not like balsamic, which I think is $80 or something like that. So again, first off, I want you to look for whatever has the most feature coverage. Look for something that not only allows you to make quick and easy sketch wire frames, but also allows you to add some interactivity at some graphics allows you to connect pages between the two again wire frames. They evolve over time. You're not just gonna make one iteration of it or you might, but it's nice you would go back in and add more and more and more as you feel comfortable and as your needs progress. Second off, look for something that has a feature that allows you to share easily with other people. Now that's incredibly important, because getting user feedback while you're doing this wire framing prototyping process can be incredibly helpful. You can use users you can use your friends. You can use your colleagues any bit of feedback helps you get out of that kind of echo chamber in your head, and it subjects you to other people's opinions, and it always ends up that you end up with a better final product. If you do that now, last on. I think this is probably the most important. Find one that is deployable. Know what I mean by that? Now, if you're using a wire frame tool, prototyping tool and you're using it for, say, a website is does that to allow you to publish that online and unload it like it's a website? No. Why is that important? It's important because when you go into user feedback when you go and you show it to a client or a user, your friends, you want it to it operate in the environment that the final products going to be used in that allows you to get real feedback. That's much, much, much more authentic. It's also gonna allow the other person to get it a lot more. You would be surprised the difference between showing someone a website on a browser and showing the exact same website on a pdf A browser feels mawr riel, your feedback is gonna be much better and your final products and me much better. In the case of mobile applications, you want to make sure that you're out of your service can allow you to put that design onto a phone on that one is crucial. You're making a mobile app. You have to be able to put it on your phone. You want someone to flip through it their way. They'd use their phone. They want to see how, Where can they reach with their thumbs? How bigger the buttons. They want to see what it would feel like. Like as if they were using it. That is crucial for mobile applications. Flynn Toe was the first service that came out started doing that. Now a lot of other people are doing that as well. That's something that absolutely if you're doing a mobile app, make sure you could do that now. A quick entry into some of the other techniques people use. Some people actually just use pen and paper, and that's just called sketching it here. It's spring kick that we use that as a preliminary around before making wire frames. It doesn't add a ton of time. It's really more like a 10 minute activity now making your wire frames and photo shop. I think that's a bad idea. Why Photo shops? One of those programs that not only is extremely expensive, it's really hard to figure out how to use. If you're not familiar with Photoshopped, you could spend several hours trying to figure out how to make basic elements on how to manipulate them and that their hours that you could have used to finish an entire mock up using a service that's built for it. Of course, Photoshopped will allow you to add fancy features on and to make really pixel perfect designs and things like that. But that's not the point. Guys, this is. The court point of this course is people do this quickly, get the most value out of a shorter period of time. There's also another technique that's popular people use. Keynote Kino is just the Mac Lierse in a power point. What they do is they make a presentation that also looks like an application, and then you can put it on your computer or you put it on your phone and load it like that and they use hot links to connect buttons to different pages. You have to use a system called Kino Topia, Kino Topia cost money. And that's one of things that I think is kind of a drag. Well, Kino might be free, or you might not have a Mac. You know, topia actually cost money, and in my experience, using this technique, it takes about the same amount of time Teoh make your your mock up your prototype and keynote plus Kino topia, as it would for another service. But the other services are cheaper, and they're better equipped. There's also a little bit of an element of when you show this off to a client or you show it off to investors. Somebody. And it's a power point presentation like You might feel great that use cut some corners, but it it comes off quite stupid. So those are the basics. If you won't remember anything from this pick a tool that has a lot of features. Pick one that allows you to gather user feedback, collaborate and pick one that's deployable, where you can put it into the environment that you're actually users are going to use 8. K.I.S.S.: Hey, guys, Welcome back to the course in this lecture. It's gonna be brief. It's gonna be quick. I'm gonna talk a little bit about what You should keep in mind while you're wire framing. Okay? It's simple, but it's kind of complicated. Okay. You ever heard a kiss? That means K. I s s It means keep it simple. Stupid. Okay, that applies a lot of different things. But in the case of wire framing and building out prototypes, it actually has a second part to it. So it's not. Just keep it simple, stupid. It's keep it simple. Stupid comma. But don't be lazy now. What does that mean? It means that there's a difference between being simple and being lazy. When you're building a wire frame, you want to keep it as simple as possible. You don't want to throw in too much information. Too many features, too many elements, too many lines of text. It gets crowded. It gets hard to understand and models your message. So you keep it simple. It'll save your sanity and it will come out with a better product. When in doubt, always go with a simpler version. Do you want to make a website that looks like Google or do you want to make it look like Yahoo? Yahoo is a big clutter fast Google is clean, simple gets the job done. Now where does the second part come into this? But don't be lazy now. A lot of people use the K. I S s as excuse to be lazy. When they're wire framing, they'll draw something out. Will say, Well, I'm keeping it simple by just writing roughly what this should look like and not filling it out. They'll say, for instance, they'll say they fill out a page on band, they'll put let's say it's a list and on the list they have an image, and then they have text. And instead of listing out mawr examples of the list, they just put that and put a line all the way down. Okay, that's not keeping it simple. That's being lazy. Now, why is this important? One of the problems that when you do wire frames is that there's a big problem with being literal and not being literal. When you show it to, a designer designer is gonna look at this and they're gonna look at it and make a judgment about how to the t You were about it. Now, if you make something that's like a scratch pad and you just roughly give broad descriptions, you just draw something and then just put X three, multiply it over here and on, and you really just kind of slopped together. That person is obviously gonna look at it and make a decision that, well, you skipped a lot of corners. Now that's an inferior design. It doesn't convey the information that you should care about. It makes it harder for the person you're passing it on to, but a lot of people confuse that for keeping it simple. And that's not your just being lazy. One. Avoid this kind of middle trap, which happens a lot of times where people will make, say, a very detailed front page, and then they'll go to the side pages like they go to the contact us page and little just get lazy and they don't actually think about it. And they just say, Oh, here's my information. Here's an image over here and at a form, and they'll just like scribble it out. Now what does that say? to your designer, you developer. They're gonna look at that and go, Okay, Should I be literal because of a literal I'm gonna make it look like this, and it's gonna look terrible. Or should I infer and make my own judgment about what it should work look like? And in that case, they have to do a lot more work. They're not gonna be happy with you. And they're not going to know whether or not your home page and your design your pages that air detailed whether or not that's actually literal. Aziz. Well, and they're gonna start making inferences over there and start moving things around and making it fit to what they think it should look like. It's a huge project management mistake, and that's something I really want you to avoid. Be as detailed as possible, but recognize when you're just adding complexity, that's not helpful for your product. It's not helpful for the entire process. Building. Designing something over and over again might be redundant, but it is still simple. That is a distinction that's really important to understand. Be as detailed as possible as you can, but don't cake onto money, extra things and too much complexity dough. If you guys have any questions about this posting the group discussion, I hope you did a good job of explaining this. It's really important when you do wire frames, you want to do it right and you don't want to create some miscommunications between you, your designer in your developer that you do it right. So questions group discussion. You always private message me, otherwise we'll see in the next lecture. 9. Following the construction path: Hey, guys, welcome back to the course in this lecture. I'm gonna go over a framework that we use that sprint kick to understand the process you should go through when wire framing. Now, the reason why I'm going over this is because pretty much everyone who's taking this course unless you've done wire framing before is new to the concept off making low fidelity wire frames, high fidelity prototypes. So you're probably sitting there thinking, What do I do first? What happens after that? What's the lead up to the point room, actually in a website in a tool, and I'm drawing it out now. The process that I'm gonna teach you, you don't need to memorize it by any means. It's helpful to come back to this lecture if you kind of forget what you should be doing next. But it's a really kind of simple system. We call it the construction flow, but I've heard it be called kind of all sorts of other things. You can also call it like a design stack. Really, it's just like a one through five step process to go from idea to. I put it on paper. It's a wire frame. It looks good. It's helpful to use this framework because it helps you understand what comes first. What comes second? What comes next on it allows you do make a decision about how much how in depth you want to get. We also forces you to do a lot of thinking about your application that you otherwise probably wouldn't have done. Once you follow through the steps and you actually get to the wire frame in part of the prototyping part of the very in Step five, you should feel very comfortable with your idea. Understanding what your user needs are what should go into it on. You should be in a good position to make a good final product. The frameworks. Very simple. It starts with strategy. Then it goes to scope. Then it goes to structure than it goes to skeleton, and then it finishes with surface. Now, each one of those five describes a point. As you go down the list, your idea starts to evolve and it starts to become more substantiated. Start to become more real, do you remember, because they're just lots of esses and also, as you go from the top goal the way to the bottom. You go from high level overview, lots of big, broad, vague questions. Once you probably already answered, and then all the way down to the actually get to a point where we're talking about pixels on and not overworking strategies or ideas. Number one. You start with strategy. Now, a lot of you have already done this, but it's a little bit more substantial than you sitting around thinking about your idea. We're also gonna focus this on the application itself and not just your general business idea or what the point of the project is a part of your company. We're not gonna deal with that stuff. We're just dealing mawr less with what your application is, what it does, why it does that and who's gonna use it. So strategy is the question like, What is your application? Dio seems really obvious, right, but really does help to write it out. Now, if you have a one sentence answer for what your application does or your idea is, that's extremely helpful. Put that at the top. It's almost kind of like the mission or objective that you'd see at the top of your resume past that. Write down. What is it aimed to accomplish now? Think about that a little bit, right? They're building an e commerce store. What's it aimed to accomplish? The website itself aims to accomplish being ableto list out products and sell them and do that seamlessly and to accommodate lots of products and lots of different users. Right? Lots of traffic. Now, if you're building a mobile application, let's say the mobile application for happy hours that is a mobile application that grabs your location tells you what beer and alcohol happy hours air around you. Now what's the strategy behind that strategy is that you expect some people that are in their twenties and thirties to be looking for happy hours, but they wanted a simple is possible. So they want a nap, and then actress opens up, grabs location and delivers results based off of business directory. That's honestly it. I mean, that is your main objective. Just trying to boil that down into one sentence past that point. Then you need to start thinking a little bit about the user base that's using your application. Now who do you think's gonna use? It doesn't need to be accurate. You just need to write this out. Who you think it's gonna be using it? Then? It's really to the question of what are your users needs now? If you're in the e commerce store? Example, If someone comes to your site, what are their needs and the needs that they need to buy something where there needs be that maybe they need to buy something and return something? Um, are they coming to your site because they want to find more information? Let's say you're an information site. You're a blogger. They coming Teoh look for lots of small bits of short form essays. Are they looking for long academic research papers? These are the things we need to figure out. So groups of people, what are they looking for? And how is your site going to deliver that? Now? This is just a mental exercise because it forces you to think about all the stakeholders in your application, and it forces you to think of what is the big picture. A lot of times it happens is people skip. This step will go into a wire framing. Let's start just building out a bunch of features they don't really need because they didn't set down and think about what is the core mission of my application. Now, once you've actually written that out, then you can actually use that as a guideline to say, OK, I need to serve this function. Then you deserve this user and you deserve this need. Now you don't have to absolutely right this out. I strongly prefer you do. It's very helpful. It's something you can use later. Whenever you do actually go and get your application built or whatever, I find it very useful. You don't actually have to. You can do this in your head. This part honestly, with me. It only takes 10 to 15 minutes to even do this, probably because I built so many applications. Now, if you're new to it, it might take a little bit of thinking. You don't have to research this at all. You don't have to jump online and look around it. Different types of potential customers or markets or any of that nonsense. It's just a mental exercise to help you wrap your head around the big, big picture. Okay, so then now let's move on to step two scope scope is where you are now. Kind of list out every single functional requirement you can think of. That's gonna go into your application on your website. Since previously, we've established who the users are and what they need. Now, what functions will we actually need to put in there if people are coming to your website because you sell daily deals. Now, if people are coming to your website because he sell weekly deals and they need toe keep up to date with everything that's happening, you're gonna need say something that captures their email address. Okay, Well, okay, that's great. So you write down a function to capture the email address later, you're gonna figure out how that does it. But right now you're just worried about Okay, that's a function that I think my website will need to handle. Try to think about every single thing Try to imagine you are using your website. Your application. What are you going to run into? What are things that you're gonna need? These people always forget are things like Do your users need to log in and they need to log in right that out. Need to law again. Do they need to have guest access? Is it a website that you don't need to log in to see everything? But if you do log in, you get to see other things right that out? Do you need to use Facebook Connect. If your application uses some social network information, they might need to connect their Facebook. That's another function you'll need to write down Facebook Connect. Think about things that happen when something goes wrong. E commerce store and uneven commerce store. What happens if they get shipped? The wrong thing. Your application is gonna need to handle that somehow, right? And the user is gonna need to find some way of recourse. So remember to bring in all sorts of things like that to write down, for instance, ways that they can process like refunds or something like that. Or in the case that user puts their information and correct incorrectly, they can change their password and things like that. Also, don't forget that you are going to be operating this application now. When you're operating application, that means that you need to be able to control basic things like control who your users are you might need need to be able to delete users. If you need to ban them or anything like that, you need to keep track of. For instance, if you're selling something you're gonna need to keep track of what you're selling, how many you've sold haven't even shift. You need records, things like that. So keep in mind what is the bare minimum amount of functionality you need is an administrator. Write all this down now. Again, If you're selling something, don't forget to write down. I need to settle payments. I need to be able to accept payments. You use PayPal, Maybe you stripe or make sure that you know that that's gonna go in the application and that you write this down guys organization for this whole list Doesn't matter. Scribble it down as long as on a piece paper, you're not gonna forget it. This process, I think, honestly will take a good chunk of your time. Not, you know, 30 minutes. Not. I mean, I'd say it takes maybe an hour. So spitting out big your application is how much thought you actually put into it. You really don't want to leave anything out later on it. Doesn't you know? You could think of extra things toe ad, and it's very easy to add it, but it's much easier if you remember at the beginning. You can take everything into consideration on and you could make judgment calls that what's important, what's not important. That's also a great segue. Oy, what a lot of people do this section, and they're determining their scope. What's important here is that you don't go crazy with it. Please do not just go nuts. A lot of people to say, OK, I need a box that does this and I need this to pop up and you click This is just gonna do this stuff and they just list out way, way, way too much stuff. We, for instance, have a client who built a social networking app and just added features and features and features and features and features. So when you're doing this, you're trying to think of it from the very beginning. Think about the things that are essential to what you're trying to do, and then think of the things that are extra. I personally like to divine these out. I like to divide them out by saying number one. Here's the core functions and number two, here's the years, the extra extemporaneous, the non necessary scope of the application Trying to get all this out on a scribble paper. Once you do it once, you can't think anything else. You always come back to it. But otherwise you ready to go in the number of three. Now, Number three is when we actually start beating into the wire framing and the prototyping process. Step one and step two. Those were just the pre work processes. Those are the things that we need set down in a scribble pad and think about it. Once you get the pre work done, then you're ready to actually dive in and start physically making your mock up. So number three is structure Now, structure is the high level way of looking at your page, your application, your design. What you're doing here is you're just thinking about OK, now that I have all my functions listed out, where these gonna go roughly right? What is my page roughly gonna look like is gonna look like a traditional website where at the top left we have the logo. Then you have a navigation bar and you have footer and in the middle sections, all the content is or maybe it's a little last traditional. Maybe it's like a blogger on, say, the right hand side. We see information. We see articles in the left hand side. We have the navigation bar. It's a vertical navigation bar. You need to think about how the layout is going to look roughly where things they're going to go the best way honestly to do this and we're gonna cover this later in the lecture is the set down with a piece of paper and a pen. The best way is to literally just take a pen and start jotting off, drawing a box for a website or a smaller rectangle for a mobile application and start just kind of filling in where you think sections would go. You don't like it. Tear it up, try another page. The point is just to start putting it out there, and as soon as your pin start touching the pad, you'll start to understand whether or not something feels right looks right whether that you should change it up later on the course. We're actually gonna do that and I'm gonna walk you through when I do it with an application, and then you can get a little bit more of a field. But that's the best way of doing this. Mind us. Advice for doing structure. Figuring out where the layout is, where your information should be, where content should be, um, is actually just a look at other websites. This is a really good way because not all of us are people who spend all day mixing around with websites, thinking about what the best way of capturing an email address is, or in putting a form or loading a photograph, and you look at other websites, then you can kind of get a just of how most people do it and how some other people who are thought leaders do it. You're building an e commerce store. Think about somewhat the stores you've been to, that you like the design you like the layout off. Go to that site and see what they do. And now you can actually kind of think of. Okay, that's interesting. They put their search bar at the top left. They don't put it at, say, the bottom. Or maybe you find a page that is really long, and maybe that's an interesting way of doing it. If you're building, say, a content, a website. Golan, look at other content websites. Look at ones that are famous and looking, ones that you personally like. Honestly, I think that you can benefit just from looking at anyone's website and seeing what their structure is, how they lay out the information and you'll find out that it's not. You know you want to pave your own path in some ways, but also you want to keep it simple. Er, you want to keep it based on what other people do, because other users are probably used to certain site layouts, so you don't want to deviate too much. That's the best way of doing it. Find some websites you really, really like. If you're building a big Web application, maybe you could go and look at your favorite software. As a service company, you're saving subscription service. If you're building an administration panel or something, that's like an enterprise enterprise application. Maybe you go look at a really nice accounting Software like zero is a great example of a really nice administration panel, user flow and structure. Now, keep in mind this process does not need to be perfect. It's not supposed to be perfect. It's not supposed to be flawless. Remember, were amateurs at this. So when the first time you do this, you're not gonna know everything, you're not gonna get it perfectly. The point, though, is just to start sketching and out, getting a rough idea where you think things should go. Doing some basic research, spending 2030 minutes looking at other websites, getting kind of an idea of where they put their buttons where they put their information and then you'll start to form some opinions. Why don't you like it? Whether or not you don't and you could start to put that on paper. Next up is number four, which is skeleton now. Skeleton. We're not really gonna talk about a ton right now. It is the wire framing process. It's the low fidelity mock up. That's when you actually put it out and you start caring about not only the layout, but what the buttons kind of shaped like where your text is gonna go, you might focus. You'll pay attention to more details of smaller things will try to get as close as you can . You'll start putting actual pieces and elements on your page and starting to get a better visual feel for what it's gonna look like. One of the biggest differences between structure and skeleton structure. We're just going for layout. This section has this information this section of this information now in skeleton you're going to say, this is the section, and in this section, here are the individual elements. That's what you're actually dio. So if I were, say, looking at, let's say YouTube and I said, Over here, I want recommendations for other videos now in structure. All I would say is, I want a list of videos and I'll draw the box and say list of videos. However, in skeleton, what I would do is I would draw it out and then actually decide. Is the thumbnail gonna be on the left of the right? How big the thumbnail, How maney in front lines of information should I have? How big is the whole thing gonna be now? The the fifth and final section? This is surface. Basically what it is is it's graphic design. It's going out and getting a visual designed for your application. And it's the number five because that is the finish point, forgetting your application designed now in this course, we're gonna go through number five. And once we have our designs done, we're gonna take those designs and make High Fidelity prototype that works and functions and looks like it's really. But if you don't have graphic design skills, you're gonna have struggle with this section. So you have to look for someone else to do that or someone in your organization to do basic design for you. So that's it one all the way through. Five. You just follow in that order. You don't necessarily need to do every single step of the process, but this is by far the easiest in the most accurate way of doing it, especially if you're new to this, you start at the top. Um, it's the easiest thing. It's a little bit harder, but you've already done some of the work already, so you could draw off of what you did in the previous section, and you just keep snowballing it down until you'll amaze yourself at what you've actually designed. You don't need to spend a ton of time throughout this entire process. Just keep in mind the more time you spend, the more you'll get out of it. I think if you given honest amount of effort T 20 sections and you follow it in order, you will come out with a much higher quality in product. You'll be much happier with it. All right, guys. Life usual. Any questions? Clarifications posted the group discussion. You have any ideas for better ways of thinking about it? I'd love to hear it. If you want to add some things in this, this is perfectly fine. This is just assistant we use. I think it's simple. I like it cause it works for people who are not you x you I designers. You can understand this very easily and take it and easily just jump right in, and that's that's really what I like about it. It's simple, and we get the essence out very quickly. 10. The class project: Hey, guys, welcome back to the class. So in this lecture, I just want to go over the class project to give you a brief explanation and to prep you just a little bit for getting it done. So when you do the class project, go to our page and didn't just go down a class project, I have a description down here and I've written out what, exactly what you do. This one super simple Because we only covered the basics in this class. We're really just gonna focus on going out and finding prototypes and wire frames. But the assignment specifically is to go out and find either a wire frame or a prototype. Doesn't matter of one of your favorite services website or mobile APS. So dig in your head a couple of websites or mobile applications that you use frequently that you like. It could be perfectly common. It could be a really big company or could be something really small and obscure on. Then go out and see if you can find the wire frame or the prototype For the first version, you can start looking for, like search for M V P plus the name of your site or whatever your project you're looking for. You can also search for wire frames, prototypes, first versions, things like that. If you're lucky, you'll find it. If you're not lucky, try a different one. But I listed some images of some popular ones that I thought were really cooled for you guys to come the look and see almost every big company started off with the prototype or with a wire frame. It's pretty much just the way everything works. Um, is a great example right here of Twitter's first wire frame. This is what Jack Dorsey wrote down on a little text pad. This is before was a website is before had thousands of employees and then some other ones . He's actually the first version prototypes of Uber AB, which became uber dot com and then air Airbnb to be called air bed and breakfast. You can check it out their super simple. If you look at the images I attached, you can see that they're very, very basic. There's no design done, really very, very simple proof of concept type things. Okay, that should do it. Go out and find a wire frame or a prototype of your favorite thing. Come back, Post it when you want to post it. Just click. Start your project, and then you can post it as a cover photo. You can post it right here in the description. Upload a photo, whatever it is. All right, Go out and have fun with the scavenger hunt. Hope you're enjoying the class seeing the next lecture. 11. Keep the learning going: Hey, guys, I just wanted to say thank you for taking this class and I hope you learned something. I hope what I said made sense, and I was clear. If you have any questions, any concerns, just posting the group discussion all respond to you. You could even send me a direct message if you want to. I want to give you a quick word of how you could take the skills that we learned in this class and how to bring it to the next level. Learn some other related skills. So this glass we learned the basics of prototyping, talked about things like, What's a low fidelity wire frame? What's a High Fidelity prototype? Talked about things like the construction path. What follows what? We also talked about some basic tenants of what makes water framing work and what actually doesn't. If you want to learn mawr and go farther with this, have a lot of other classes on prototyping you should check out. Specifically, I'd suggest moving on to intrude, too Web and mobile app sketching or rapid prototyping with balsamic. Now, the 1st 1 we're just gonna cover how you can take a pencil and paper and just start wire framing. This is something that's very popular with start ups and agencies, so I definitely think it's something you should know. It's It's usually the first step ideo after I conceptualize the idea for the project. Now the other one's called Rapid Prototyping with Balsamic. And in that one I'm gonna show you how you make low fidelity wire frames with a tool called Balsamic. It's a very popular tool. You can do it very quickly. That's why it's so popular. Okay, if you want to go further with your skills, check those out. Otherwise again, thank you for taking the course.