1 00:00:00,610 --> 00:00:05,160 Everyone, and welcome back, we're going to be talking about how do I create my own wireframe? 2 00:00:05,440 --> 00:00:09,970 So the one thing I really want to stress is to keep things simple. 3 00:00:10,240 --> 00:00:14,350 You know, don't worry about fidelity, especially when you're wireframe. 4 00:00:14,360 --> 00:00:18,520 You just need just enough to really get people to understand what you're trying to convey. 5 00:00:19,600 --> 00:00:26,440 Pencil and paper is probably the best way to wireframe quickly, you know, this is one of my mantras, 6 00:00:26,440 --> 00:00:27,540 like we've already done this. 7 00:00:27,550 --> 00:00:33,010 I mean, we sketched a bit, we did some user flows, and you've already kind of started wireframe mean 8 00:00:33,280 --> 00:00:35,230 even if you have a whiteboard, you can use one. 9 00:00:35,230 --> 00:00:37,930 But I mean, pencil and paper are huge. 10 00:00:39,700 --> 00:00:43,300 You know, if you do have a client, you can polish them up to showcase some of your interactions of 11 00:00:43,300 --> 00:00:48,410 more prominent areas within your photos and, you know, pages that you're designing for. 12 00:00:48,940 --> 00:00:54,520 You can definitely, like, add a little bit more fidelity, just showcase or demo them, but you want 13 00:00:54,520 --> 00:00:55,870 to keep your colors to grayscale. 14 00:00:55,870 --> 00:00:57,670 White and black is perfectly fine. 15 00:00:57,910 --> 00:01:00,580 Grazing between don't go crazy on fonts. 16 00:01:00,580 --> 00:01:02,740 Maybe, too, you can even get away with one. 17 00:01:03,070 --> 00:01:07,210 You can easily show hierarchy with bolding fonts as well or increasing the size. 18 00:01:07,840 --> 00:01:09,910 Avoid any flashy images. 19 00:01:10,180 --> 00:01:14,710 You can use rectangles and squares and, you know, an X through the middle to say that that would be 20 00:01:14,710 --> 00:01:15,240 an image. 21 00:01:15,550 --> 00:01:19,160 And for videos you can add a triangle in the middle to indicate that that's one as well. 22 00:01:19,540 --> 00:01:21,840 So, you know, keep it simple. 23 00:01:22,000 --> 00:01:24,320 Don't worry about fidelity, especially at this stage. 24 00:01:25,060 --> 00:01:27,910 Next thing is, you got to ask yourself some pretty important questions. 25 00:01:28,450 --> 00:01:34,230 You know, what are the users and the business's goals when interacting with this page? 26 00:01:34,240 --> 00:01:36,970 How can the content be organized to support these goals? 27 00:01:36,980 --> 00:01:40,570 What should the user see when they first come to a page? 28 00:01:40,570 --> 00:01:44,020 What will the user expect to see on certain areas of the page? 29 00:01:44,440 --> 00:01:48,050 I think these questions are a perfect Segway really into wireframe. 30 00:01:48,240 --> 00:01:51,430 And, you know, consult your old artifacts right here. 31 00:01:51,430 --> 00:01:57,160 I have a story map and definitely go back to the story map if you have one to really consult like user 32 00:01:57,160 --> 00:02:00,850 stories and requirements so you can understand what will be on every page. 33 00:02:01,060 --> 00:02:02,830 We even did user flows as well. 34 00:02:03,340 --> 00:02:04,620 And we're going to get into that right now. 35 00:02:04,870 --> 00:02:07,900 So consult your user flows and your sitemap. 36 00:02:08,350 --> 00:02:12,700 You know, as I consult my map, I'm always looking at the key requirements and hierarchy's for a certain 37 00:02:12,710 --> 00:02:13,030 page. 38 00:02:13,030 --> 00:02:17,980 I want to know, like, what is the most and least important thing that should be there, you know, 39 00:02:17,980 --> 00:02:22,630 different user stories that are really great because they're better indicator of what exactly needs 40 00:02:22,630 --> 00:02:24,160 to be built from a user's perspective. 41 00:02:24,850 --> 00:02:29,440 And a proper like if you have a storm map, like I mentioned before, we would, you know, have users 42 00:02:29,440 --> 00:02:31,780 rates for every single instance throughout the product journey. 43 00:02:31,990 --> 00:02:35,740 And then we would come together to discuss, which is like the riskiest part of the product we want 44 00:02:35,740 --> 00:02:36,610 to tackle first. 45 00:02:37,240 --> 00:02:42,970 So, like for our client, we probably want to, you know, tackle search or the home page where maybe 46 00:02:42,970 --> 00:02:47,650 the initial registration, all those different points where it really depends on users actually finding 47 00:02:47,650 --> 00:02:50,200 products or registering their interest. 48 00:02:50,200 --> 00:02:55,090 So that way the product can actually be successful, their high traffic areas and the interactions are 49 00:02:55,090 --> 00:02:58,150 pretty integral to the user goal and we need to get them right to succeed. 50 00:02:58,870 --> 00:03:03,430 I always and I mean always tackle the riskiest features first. 51 00:03:03,970 --> 00:03:07,780 So like I mentioned before, like that's a perfect segue into this, because everyone has a different 52 00:03:08,050 --> 00:03:09,430 definition of what risk is. 53 00:03:09,430 --> 00:03:11,170 And it can mean a lot of different things. 54 00:03:11,170 --> 00:03:13,990 It could be features that dictate the success of the product. 55 00:03:14,170 --> 00:03:18,070 It can be certain assumptions that your team and client have for a certain feature. 56 00:03:18,460 --> 00:03:24,700 When I'm in a Kick-Off meeting or I'm talking to clients, I really kind of I have a list of risky assumptions 57 00:03:24,700 --> 00:03:25,630 that we have as well. 58 00:03:26,020 --> 00:03:27,580 And I mark all those things down. 59 00:03:27,580 --> 00:03:35,620 Anything from what we assume the user wants or assume will be a good feature or certain things like 60 00:03:35,620 --> 00:03:36,220 risks. 61 00:03:36,340 --> 00:03:42,880 There are high traffic areas that really depend on nailing the interaction in order to succeed for the 62 00:03:42,880 --> 00:03:44,440 business, for our client. 63 00:03:44,440 --> 00:03:51,040 If we release a search that just doesn't work or the interaction is way too complex, the product essentially 64 00:03:51,040 --> 00:03:51,550 will fail. 65 00:03:52,150 --> 00:03:56,980 So there's a lot of things like that we need to account for, and we should probably be focusing a lot 66 00:03:56,980 --> 00:04:02,680 of our attention on, like in comparison to another feature like profile or a wish list. 67 00:04:03,430 --> 00:04:04,900 So always keep that in mind. 68 00:04:05,890 --> 00:04:09,530 Another big thing is to bring your team into the process. 69 00:04:09,550 --> 00:04:10,930 I mean, this is huge. 70 00:04:11,560 --> 00:04:13,800 You should often be talking to every member of your team. 71 00:04:13,810 --> 00:04:18,780 It doesn't matter product managers for business goals, developers for like development strategy. 72 00:04:19,090 --> 00:04:25,180 You can even talk to a quality assurance, people like quality analyst people to talk about just how 73 00:04:25,180 --> 00:04:27,880 certain things work within the product and what their expectations are. 74 00:04:28,360 --> 00:04:32,890 Other disciplines will provide priceless insight into the ways you can build those wireframe. 75 00:04:33,100 --> 00:04:35,770 So make sure that you include others in your process. 76 00:04:36,160 --> 00:04:40,150 It may be a business school that you aren't meeting or a technical challenge that you may have. 77 00:04:40,300 --> 00:04:42,960 Like for certain interactions, you want to come to life. 78 00:04:43,270 --> 00:04:50,150 So tap into your peers example of, you know, trying to do things that are way too hard to develop. 79 00:04:50,170 --> 00:04:56,100 So if you have, like, a wireframe that is just way too complex, you should definitely be talking 80 00:04:56,100 --> 00:04:56,900 to your developers. 81 00:04:57,370 --> 00:04:58,870 I often take a look at dribble. 82 00:04:58,870 --> 00:05:02,740 I mean, I mentioned dribble a lot because it's a great place to get inspiration and all that. 83 00:05:02,740 --> 00:05:07,450 But the majority of the designs showcased there will probably never be built and have never been built 84 00:05:07,450 --> 00:05:10,510 because they just are way too complex and time consuming. 85 00:05:10,930 --> 00:05:15,430 I'm not saying that it is impossible because everything is possible with enough time and money, but 86 00:05:15,430 --> 00:05:21,700 most times you want to build your way up to something that is considered perfect and we may release 87 00:05:21,700 --> 00:05:26,560 in different stages whether that be like a minimum viable product that has only the features that you 88 00:05:26,560 --> 00:05:30,580 truly need to validate if your product has any, you know, legs. 89 00:05:34,260 --> 00:05:39,750 Sometimes we may be releasing on top of that the next best features, and over time we'll get to a point 90 00:05:39,750 --> 00:05:42,870 where we can really hone in on the design and polished different things. 91 00:05:43,290 --> 00:05:49,200 But generally, you want to release in kind of waves instead of building out a product from zero to 92 00:05:49,200 --> 00:05:49,800 100. 93 00:05:50,040 --> 00:05:52,110 You want to get like 25 percent of the way they're. 94 00:05:53,110 --> 00:05:58,060 Build another set of features, improve on other features based off of what you've learnt from your 95 00:05:58,060 --> 00:06:01,180 wireframe, testing and even just basic prototype testing. 96 00:06:01,610 --> 00:06:07,180 Remember, loopier team in, it's really going to help you understand what you can and cannot build. 97 00:06:07,400 --> 00:06:12,550 It also really help you understand what kind of like different business goals you may have that you 98 00:06:12,550 --> 00:06:13,390 haven't considered. 99 00:06:13,600 --> 00:06:15,710 Maybe stakeholders have certain goals. 100 00:06:16,090 --> 00:06:24,310 So these are the tips I often give other designers for when we want to actually use wire frames and 101 00:06:24,310 --> 00:06:26,030 when we actually want to create our own. 102 00:06:26,650 --> 00:06:33,970 So follow these tips and you'll be well on your way to making some awesome wire frames that are based 103 00:06:33,970 --> 00:06:42,340 off of facts and different types of data and are used to actually validate everyone's assumptions.