1 00:00:00,550 --> 00:00:07,570 Everyone, and welcome back, we covered a ton of content around different types of design theories, 2 00:00:07,570 --> 00:00:15,860 like anything in relation to the basics, in terms of like typography, color forms, grids. 3 00:00:15,880 --> 00:00:21,610 I mean, we covered in the beginning more wireframe, basic stuff, user first and now I think it's 4 00:00:21,610 --> 00:00:23,660 time to start building up our fidelity. 5 00:00:24,310 --> 00:00:30,320 Now, this is a big topic in the design realm, I would say, in terms of like where do we start? 6 00:00:30,370 --> 00:00:35,020 How do we end up somewhere and design fidelity is just it's something hard. 7 00:00:35,020 --> 00:00:38,920 And I don't know if there's any really right answer. 8 00:00:39,010 --> 00:00:43,000 I guess you can just say that we should always start just quick. 9 00:00:43,000 --> 00:00:44,970 And you start with your sketches. 10 00:00:44,980 --> 00:00:48,450 I have here are wire frames that we designed, which were really great. 11 00:00:48,460 --> 00:00:49,690 Here's our home page. 12 00:00:50,140 --> 00:00:55,850 And we should really start somewhere like here and build our way up over time. 13 00:00:56,230 --> 00:00:59,000 Now, nothing is ever designed and perfected in the same step. 14 00:00:59,290 --> 00:01:03,520 This is something that never happens, going to those final beautiful designs. 15 00:01:03,730 --> 00:01:05,080 That takes a lot of testing and refinement. 16 00:01:05,080 --> 00:01:07,750 And that's why we use those prototypes that we made. 17 00:01:07,750 --> 00:01:11,360 And that's why we use like these wire frames and sketches that we created. 18 00:01:11,560 --> 00:01:16,780 You want to continuously build upon your learnings instead of jumping right into beautiful designs. 19 00:01:17,020 --> 00:01:21,010 And you saw that and how we've handled that over this entire course. 20 00:01:21,010 --> 00:01:25,630 We've started with sketching and we gradually started to build our way up. 21 00:01:25,840 --> 00:01:29,170 We've covered a lot of different topics around style. 22 00:01:29,500 --> 00:01:34,780 And I think now is the time to really kind of start to think about that before we get into that. 23 00:01:34,790 --> 00:01:39,400 I think it's a great Segway into, you know, thinking about building, measuring and learning. 24 00:01:39,400 --> 00:01:43,620 And that's something I always try to incorporate in my designs and my design process. 25 00:01:44,170 --> 00:01:48,220 This is something you should really apply to everything you do, and you should go and read the book 26 00:01:48,220 --> 00:01:50,950 Lean Startup into amazing book. 27 00:01:51,340 --> 00:01:54,010 And it really teaches this build, measure, learn cycle. 28 00:01:54,010 --> 00:01:59,380 So build is to explore your ideas and prototype those possibilities like we were talking about with 29 00:01:59,380 --> 00:02:05,950 those basic prototyping and wireframe, measuring, you know, testing your assumptions always go out 30 00:02:05,950 --> 00:02:11,980 there and user test, just put it in front of a user, get their feedback quickly and the next step 31 00:02:11,980 --> 00:02:12,580 is learning. 32 00:02:12,580 --> 00:02:18,880 So learn from the feedback, learn from your users and validate just so you can squash your assumptions 33 00:02:18,880 --> 00:02:20,960 just so you can get right back into building again. 34 00:02:21,100 --> 00:02:23,380 Think of it as a circular cycle. 35 00:02:23,650 --> 00:02:29,200 So build, measure, learn, keep that always at the center of your design process. 36 00:02:29,590 --> 00:02:32,410 That's what I feel like we've done here thus far. 37 00:02:32,410 --> 00:02:40,540 I mean, we haven't user tested just yet, but we've built a lot of designs just basically with wireframe 38 00:02:40,550 --> 00:02:41,350 sketches. 39 00:02:41,590 --> 00:02:44,770 We've also went into different things like typography. 40 00:02:44,770 --> 00:02:48,940 So this is the type system that I've started to build out, not finalized just yet. 41 00:02:49,240 --> 00:02:50,230 I've picked a typeface. 42 00:02:50,230 --> 00:02:56,560 I'm using Lieto or Loto and I've created a bunch of styles and just headings text. 43 00:02:56,560 --> 00:02:59,050 So I've started to think about these types of things. 44 00:02:59,470 --> 00:03:05,530 What I would do in my process is to see what works in terms of visual exploration, in terms of typography, 45 00:03:05,920 --> 00:03:07,930 and start to build up to that and see what we need. 46 00:03:08,410 --> 00:03:09,460 Even color palette. 47 00:03:09,460 --> 00:03:12,940 This is what we've kind of built together and this isn't finalized at all. 48 00:03:12,940 --> 00:03:20,380 And we should continuously try to incorporate that into our designs and just see where we kind of lead. 49 00:03:20,620 --> 00:03:25,990 We may colors like these colors we may just stick with like a monochromatic scheme. 50 00:03:25,990 --> 00:03:28,450 So it's that's just something to think about. 51 00:03:29,020 --> 00:03:31,960 You have to kind of explore all these different styles. 52 00:03:32,290 --> 00:03:38,440 We also kind of jumped right into our form exploration when we were talking about foreign best practices. 53 00:03:38,800 --> 00:03:43,300 So you could see that we're using some of our own colors here. 54 00:03:43,720 --> 00:03:48,100 We were just starting to see what different types of inputs could look like when they're disabled. 55 00:03:48,490 --> 00:03:49,600 I like these buttons. 56 00:03:49,780 --> 00:03:54,880 We could start seeing what these types of things could look like, these little checkbox squares. 57 00:03:55,330 --> 00:03:59,860 We also start to think about like just general hierarchy when it comes to copy. 58 00:03:59,860 --> 00:04:05,170 And the way we lay that out, in essence, what you want to do is you want to seek your feedback early 59 00:04:05,170 --> 00:04:07,090 and go on to learn and apply. 60 00:04:07,270 --> 00:04:11,800 This is how you build an understanding about the product you're building, but this is also how you 61 00:04:11,800 --> 00:04:15,580 build and reach that level and type of fidelity that resonates with your users. 62 00:04:16,120 --> 00:04:21,820 So the reason we seek feedback is to use those learnings to inform and improve our designs, waiting 63 00:04:21,820 --> 00:04:25,240 too late to test or find that feedback. 64 00:04:25,240 --> 00:04:30,970 And then it often is just way too late to actually act on that feedback and it could be way too costly. 65 00:04:31,420 --> 00:04:33,310 So you use those low fidelity wireframe. 66 00:04:33,310 --> 00:04:35,140 Let's just go back to that quickly. 67 00:04:36,590 --> 00:04:42,260 So use these to start getting feedback early, and then you can continue to improve on your product 68 00:04:42,260 --> 00:04:46,540 and build up that fidelity and continue to test, you should just test with these designs. 69 00:04:47,000 --> 00:04:54,020 They may not actually do good at testing like those small micro interactions or just motion in general 70 00:04:54,020 --> 00:04:55,160 and stuff like that. 71 00:04:55,370 --> 00:04:56,350 And we'll get into that. 72 00:04:56,720 --> 00:05:02,270 But these are great for testing things like hierarchy, layout, the type of content you have, that 73 00:05:02,270 --> 00:05:06,070 placement, maybe just navigation, a hierarchy as well. 74 00:05:06,590 --> 00:05:10,620 So use that as a way to just validate your assumptions. 75 00:05:11,150 --> 00:05:14,480 This can really have a massive impact on how we build out certain elements. 76 00:05:14,480 --> 00:05:18,920 So in an example, typography, are things legible? 77 00:05:18,920 --> 00:05:21,230 Can people read the small copy? 78 00:05:21,590 --> 00:05:22,810 Are things readable? 79 00:05:22,820 --> 00:05:26,180 Is there enough hierarchy and contrast between typographic elements? 80 00:05:26,660 --> 00:05:32,170 Like if I were to think about contrast in hierarchy, I would go right into like just product details 81 00:05:32,180 --> 00:05:34,580 if I squint, are things blurring together? 82 00:05:34,580 --> 00:05:40,700 So I'm looking to create that contrast early on and test that with a hierarchy of information. 83 00:05:40,700 --> 00:05:42,090 Are things in the right place? 84 00:05:42,110 --> 00:05:43,340 Does this make sense? 85 00:05:44,300 --> 00:05:45,470 In terms of the homepage. 86 00:05:48,790 --> 00:05:55,180 How about there's a navigation structure you need to be reworked, is this accessible, is it usable? 87 00:05:55,460 --> 00:05:58,240 Should we stop using the search at the top? 88 00:05:59,090 --> 00:06:01,490 And incorporated maybe into the navigation. 89 00:06:01,760 --> 00:06:06,260 So these are questions that we're asking ourselves, what will the style of our components does the 90 00:06:06,270 --> 00:06:10,880 style of this card over here make things look too condensed? 91 00:06:12,070 --> 00:06:13,150 Does this budding. 92 00:06:14,270 --> 00:06:19,250 Like these kind of square buttons that I have or this button, do they look clickable or does it seem 93 00:06:19,250 --> 00:06:21,350 clickable to seem like a user can interact with it? 94 00:06:21,740 --> 00:06:23,990 Are inputs actually working properly? 95 00:06:24,920 --> 00:06:25,610 Let's move that. 96 00:06:26,970 --> 00:06:33,030 Let's go back to our our registration form, so we have all these inputs, I mean, do they do they 97 00:06:33,030 --> 00:06:33,810 work properly? 98 00:06:33,810 --> 00:06:36,010 Do users easily interact with them? 99 00:06:36,030 --> 00:06:38,640 So we're testing all of these assumptions that we have. 100 00:06:38,920 --> 00:06:41,820 It has a really profound impact on all of our choices. 101 00:06:41,820 --> 00:06:44,750 And you shouldn't be making large decisions without proper feedback. 102 00:06:44,940 --> 00:06:50,130 So I just wanted to take the time to stress this, because a lot of people like to really jump into 103 00:06:50,130 --> 00:06:52,140 high fidelity designs right off the bat. 104 00:06:52,140 --> 00:06:54,190 And that is just a no no. 105 00:06:54,480 --> 00:06:56,490 Start with your sketches. 106 00:06:56,700 --> 00:07:03,300 Gradually build yourself up, because if you start with beautiful designs without figuring out if certain 107 00:07:03,300 --> 00:07:10,740 things do not work or do work, then you're setting yourself up for a big surprise later on when you 108 00:07:10,740 --> 00:07:15,780 actually deliver that to users and you find out maybe users aren't interacting, users aren't getting 109 00:07:15,780 --> 00:07:19,910 too deep into the funnel of like checking out or even using your application. 110 00:07:20,250 --> 00:07:27,660 So remember to always test your wire frames, just get feedback early and learn from it and then jump 111 00:07:27,660 --> 00:07:33,570 into designs and visual exploration later on and gradually build up that fidelity. 112 00:07:33,810 --> 00:07:37,100 That's all I wanted to say about how to build design fidelity. 113 00:07:37,500 --> 00:07:41,000 Next, we're actually going to jump in and start doing that ourselves. 114 00:07:41,130 --> 00:07:43,230 We're going to start working on the home page next. 115 00:07:43,440 --> 00:07:48,600 That will be, I think, a great start to figuring out the type of color palette that we want to incorporate 116 00:07:48,870 --> 00:07:54,690 our typography system, fleshing that out some more, just generally seeing what types of components 117 00:07:54,690 --> 00:07:56,430 that we're going to have to build for in the future. 118 00:07:57,150 --> 00:08:00,630 Can't wait to get you back in here and working on the home page.