WEBVTT NOTE This file was generated by Descript 00:00:05.289 --> 00:00:06.599 Mike: This is tiny improvements. 00:00:06.849 --> 00:00:07.239 I'm Mike 00:00:16.331 --> 00:00:20.591 I never got on well with art when I was I didn't have a steady hand, which 00:00:20.591 --> 00:00:24.581 meant that I could never draw or My handwriting has always been a Bismal 00:00:24.581 --> 00:00:26.291 and I didn't have it in me to do better. 00:00:26.771 --> 00:00:28.871 I was not an artistic person or so I thought. 00:00:30.191 --> 00:00:33.131 After studying computer science in college, I started working as 00:00:33.131 --> 00:00:34.931 a front end engineer at Microsoft. 00:00:35.231 --> 00:00:37.931 Back then front end engineering was a blossoming discipline. 00:00:38.351 --> 00:00:41.591 Very few engineers worked in the land of CSS and JavaScript, and 00:00:41.591 --> 00:00:43.001 almost nobody cared about design. 00:00:44.021 --> 00:00:45.791 I got into design as a curiosity. 00:00:46.121 --> 00:00:49.571 I sure wanted to build better looking apps, but because I'm not an artistic 00:00:49.571 --> 00:00:51.311 person, I never really thought to try. 00:00:52.001 --> 00:00:56.111 Until one day at the recommendation of a mentor, I picked up a book on design. 00:00:56.441 --> 00:00:59.021 I tore through it gobsmacked by the revelations that I was 00:00:59.021 --> 00:01:00.491 experiencing on each new page. 00:01:00.881 --> 00:01:01.361 Friends. 00:01:01.391 --> 00:01:03.521 I'm here to tell you design is for everyone. 00:01:05.501 --> 00:01:09.881 In software 99% of the things you might think of as creative are careful and 00:01:09.881 --> 00:01:11.891 deliberate application of basic rules. 00:01:12.251 --> 00:01:12.641 Sure. 00:01:12.671 --> 00:01:15.101 There's usually a bit of taste and color sprinkled in, but 00:01:15.101 --> 00:01:15.921 the basics are all science. 00:01:16.721 --> 00:01:19.421 In cognitive science, we study behavior and functions of 00:01:20.291 --> 00:01:23.411 it has helped us to make sense out of how humans think and distill 00:01:23.411 --> 00:01:24.541 that into rules and patterns. 00:01:25.411 --> 00:01:28.951 in user experience or UX, we use these rules and patterns 00:01:28.951 --> 00:01:31.981 to take advantage of how people interpret and experience software. 00:01:32.911 --> 00:01:35.971 Once you understand some of these basic rules, you'll find that it gets easier 00:01:35.971 --> 00:01:39.011 to write letters, design, graphics, build products, or whatever it is you're working 00:01:40.831 --> 00:01:43.231 Truly, whatever it is you're doing design can help. 00:01:45.301 --> 00:01:47.221 Five rules of design to give you superpowers. 00:01:48.031 --> 00:01:51.811 No matter what it is you're doing seriously, these will help From 00:01:51.841 --> 00:01:54.691 writing to graphic design, to designing products for the web. 00:01:54.901 --> 00:01:56.791 I promise you you'll find something helpful in here. 00:01:57.331 --> 00:01:58.771 Number one hierarchy. 00:01:59.851 --> 00:02:02.881 In Western countries, we tend to read from top to bottom left to right. 00:02:03.421 --> 00:02:05.491 It's something we've all been subconsciously trained 00:02:05.491 --> 00:02:06.611 to do since an early age. 00:02:07.381 --> 00:02:09.391 When you're designing something, you can use this pattern 00:02:09.391 --> 00:02:10.351 to help guide your readers. 00:02:10.351 --> 00:02:13.741 I assume they'll go from looking at the biggest boldest thing on 00:02:13.741 --> 00:02:15.111 the page to the next biggest and so 00:02:15.991 --> 00:02:18.421 You should therefore make sure that the most important things you want 00:02:18.421 --> 00:02:21.451 someone to see are the biggest and boldest and step down from there. 00:02:21.811 --> 00:02:22.511 This is called hierarchy. 00:02:23.281 --> 00:02:25.681 It's a way to help you guide your reader's eyes, predictably. 00:02:26.971 --> 00:02:28.351 Number two: similarity. 00:02:28.981 --> 00:02:32.491 One nice thing about the way humans perceive things is that we use similarity 00:02:32.491 --> 00:02:34.411 to recognize and group objects together. 00:02:35.161 --> 00:02:37.351 This comes from our basic survival instincts. 00:02:37.621 --> 00:02:40.531 If you ate a fruit from a Bush without getting sick others that looked 00:02:40.531 --> 00:02:42.511 similar are probably safe to eat too. 00:02:43.171 --> 00:02:44.731 Apples to apples quite literally. 00:02:46.021 --> 00:02:49.411 Your reader will use similarity to group things together and just as 00:02:49.411 --> 00:02:52.211 well, things that are dissimilar will stand out like a sore thumb. 00:02:52.981 --> 00:02:53.971 Break similarity. 00:02:54.001 --> 00:02:55.921 When you want to bring attention to something like the most 00:02:55.921 --> 00:02:57.361 important action on a page. 00:02:57.781 --> 00:03:00.661 This is why you'll often see a sign up button in a different color than 00:03:00.661 --> 00:03:02.161 everything else on a given page. 00:03:03.291 --> 00:03:03.951 Number three. 00:03:04.371 --> 00:03:05.811 Half the words then half again. 00:03:06.861 --> 00:03:09.021 Every one of us has a tendency to write too much. 00:03:09.231 --> 00:03:12.321 We want to be thorough and we want to make sure we cover all of our bases. 00:03:12.651 --> 00:03:15.591 The trouble is our natural disposition to write long-winded 00:03:15.591 --> 00:03:18.651 descriptions is at odds with our reader's desire to get to the point. 00:03:19.281 --> 00:03:22.716 Cut down the words on the page to the bare minimum by following Steve Krug's. 00:03:22.947 --> 00:03:23.937 Sage like quote. 00:03:24.567 --> 00:03:26.177 Do you get rid of half the words on each page? 00:03:26.577 --> 00:03:28.077 Then get rid of half of what's left. 00:03:29.307 --> 00:03:32.667 In other words, if I was rerecording this section, here's how I might rewrite it. 00:03:33.867 --> 00:03:37.947 When it comes to writing less is more don't waste user's time by making them 00:03:37.947 --> 00:03:39.877 read, get to the point and be memorable. 00:03:41.667 --> 00:03:43.197 Number four colors or math 00:03:43.887 --> 00:03:46.827 for me, this was a big one colors and the way they interact with 00:03:46.827 --> 00:03:48.377 one another are predictable. 00:03:48.807 --> 00:03:51.747 In other words, we can tell whether a set of colors are likely to be in 00:03:51.747 --> 00:03:54.477 harmony with one another based on where they fall on the color wheel. 00:03:55.407 --> 00:03:57.387 There are many tools out there to help with this too. 00:03:58.077 --> 00:04:00.657 If you're working with a brand that has a specific color palette, 00:04:00.687 --> 00:04:03.837 you can use these tools to select colors that both compliment and 00:04:03.837 --> 00:04:05.427 contrast with the brand's colors. 00:04:06.747 --> 00:04:08.367 You don't need to have a feel for colors. 00:04:08.397 --> 00:04:10.427 You can go a long way with the help of just a calculator. 00:04:11.907 --> 00:04:13.707 Number five, the rule of thirds. 00:04:14.517 --> 00:04:17.157 The rule of thirds comes from photography, where it's used to 00:04:17.157 --> 00:04:18.567 help guide the eye of the viewer. 00:04:18.957 --> 00:04:19.887 It's a simple rule. 00:04:20.217 --> 00:04:23.307 Divide your image into thirds, both horizontally and vertically and place 00:04:23.307 --> 00:04:26.627 the most important elements of your image on the intersections of those lines. 00:04:27.777 --> 00:04:30.927 It's a shortcut to make your image look and feel great every time. 00:04:31.497 --> 00:04:34.737 You can do this with photos, graphics, and entire page layouts. 00:04:35.740 --> 00:04:37.950 Color is a powerful tool and a tricky concept to master. 00:04:38.920 --> 00:04:41.380 There are many tools out there to help you pick colors that work well 00:04:41.380 --> 00:04:43.420 together here are a few of my favorites. 00:04:44.740 --> 00:04:49.030 I really like coolers for picking colors and color hunt for finding inspiration. 00:04:49.450 --> 00:04:52.600 If you happen to be using material UI, Google has some incredible 00:04:52.600 --> 00:04:55.840 documentation on generating material, friendly color palettes. 00:04:56.350 --> 00:04:58.600 You'll see links to all of these in the description of this show. 00:04:59.740 --> 00:05:03.490 I'm also a huge fan of color nerd on Tik he's a wizard when it comes 00:05:03.490 --> 00:05:06.580 to color theory and does a fantastic job of illustrating how colors 00:05:06.580 --> 00:05:08.070 interact with one another in the real 00:05:08.930 --> 00:05:13.130 Did you know that one in 12 men are color blind, that's a staggering percentage. 00:05:13.160 --> 00:05:15.380 And it's why it's so important to make sure your colors 00:05:15.380 --> 00:05:16.580 are accessible to everyone. 00:05:16.970 --> 00:05:20.090 Stark is an accessibility tool that plugs into Figma sketch 00:05:20.120 --> 00:05:21.080 and your favorite browser. 00:05:21.560 --> 00:05:23.960 It will help you make sure your designs are accessible to everyone. 00:05:24.950 --> 00:05:28.370 If you're ready to dive into more than the color design workbook by 00:05:28.430 --> 00:05:32.780 Terry Lee stone, Sean Adams and Noreen Morioka should be required. 00:05:32.780 --> 00:05:33.140 Reading. 00:05:33.620 --> 00:05:36.800 You'll get some great fundamentals of graphic design and color theory and 00:05:36.800 --> 00:05:38.170 learn how to use colors in your designs. 00:05:39.230 --> 00:05:41.870 If you're ready to go the full mile and take a course on design. 00:05:42.020 --> 00:05:45.410 This squad over at the gymnasium, have a whole suite of free 00:05:45.440 --> 00:05:46.730 online courses on design. 00:05:47.140 --> 00:05:49.810 In the summary of this podcast, you'll find a link to their UX design 00:05:49.810 --> 00:05:51.160 collection where you can get started. 00:05:52.660 --> 00:05:54.280 This is just enough to be dangerous. 00:05:54.580 --> 00:05:57.100 I hope you found something useful in here and you can start applying 00:05:57.100 --> 00:05:58.330 these rules to your own work. 00:05:59.080 --> 00:06:03.190 I also hope that this spurs you to learn more, it's just as important to keep 00:06:03.190 --> 00:06:04.570 learning as it is to start learning. 00:06:05.380 --> 00:06:08.350 If you did, please consider sharing this with people in your network or sharing 00:06:08.350 --> 00:06:09.820 it to a friend who might benefit from it. 00:06:10.750 --> 00:06:13.900 If you're looking for more, I've got a few resources on my site to keep you busy. 00:06:14.110 --> 00:06:17.530 Again, check out the links in the description for my articles on design 00:06:17.530 --> 00:06:18.550 and let me know what you think. 00:06:19.720 --> 00:06:21.010 I'd love to hear your feedback too. 00:06:21.130 --> 00:06:22.180 Did you learn something new? 00:06:22.210 --> 00:06:23.230 Are you thirsty for more? 00:06:23.350 --> 00:06:24.670 Let me know what you think and I'll 00:06:25.846 --> 00:06:26.686 I'm Mike by full go. 00:06:26.776 --> 00:06:28.756 And this is tiny improvements until next time.