Design rules everyone should know

Very few engineers worked in the land of CSS and JavaScript, and almost nobody cared about design. I got into design as a curiosity. I sure wanted to build better looking apps, but because I'm not an artistic person, I never really thought to try. Until one day at the recommendation of a mentor, I picked up a book on design. I tore through it gobsmacked by the revelations that I was experiencing on each new page. Friends. I'm here to tell you design is for everyone.

In software 99% of the things you might think of as creative are careful and deliberate application of basic rules. Sure. There's usually a bit of taste and color sprinkled in, but the basics are all science. In cognitive science, we study behavior and functions of it has helped us to make sense out of how humans think and distill that into rules and patterns. in user experience or UX, we use these rules and patterns to take advantage of how people interpret and experience software.

Once you understand some of these basic rules, you'll find that it gets easier to write letters, design, graphics, build products, or whatever it is you're working Truly, whatever it is you're doing design can help.

Five rules of design to give you superpowers. No matter what it is you're doing seriously, these will help From writing to graphic design, to designing products for the web. I promise you you'll find something helpful in here. Number one hierarchy. In Western countries, we tend to read from top to bottom left to right. It's something we've all been subconsciously trained to do since an early age. When you're designing something, you can use this pattern to help guide your readers.

I assume they'll go from looking at the biggest boldest thing on the page to the next biggest and so You should therefore make sure that the most important things you want someone to see are the biggest and boldest and step down from there. This is called hierarchy. It's a way to help you guide your reader's eyes, predictably.

When you want to bring attention to something like the most important action on a page. This is why you'll often see a sign up button in a different color than everything else on a given page. Number three. Half the words then half again. Every one of us has a tendency to write too much. We want to be thorough and we want to make sure we cover all of our bases. The trouble is our natural disposition to write long-winded descriptions is at odds with our reader's desire to get to the point.

Cut down the words on the page to the bare minimum by following Steve Krug's. Sage like quote. Do you get rid of half the words on each page? Then get rid of half of what's left. In other words, if I was rerecording this section, here's how I might rewrite it. When it comes to writing less is more don't waste user's time by making them read, get to the point and be memorable. Number four colors or math for me, this was a big one colors and the way they interact with one another are predictable.

In other words, we can tell whether a set of colors are likely to be in harmony with one another based on where they fall on the color wheel. There are many tools out there to help with this too. If you're working with a brand that has a specific color palette, you can use these tools to select colors that both compliment and contrast with the brand's colors. You don't need to have a feel for colors. You can go a long way with the help of just a calculator. Number five, the rule of thirds.

The rule of thirds comes from photography, where it's used to help guide the eye of the viewer. It's a simple rule. Divide your image into thirds, both horizontally and vertically and place the most important elements of your image on the intersections of those lines. It's a shortcut to make your image look and feel great every time. You can do this with photos, graphics, and entire page layouts. Color is a powerful tool and a tricky concept to master.

There are many tools out there to help you pick colors that work well together here are a few of my favorites. I really like coolers for picking colors and color hunt for finding inspiration. If you happen to be using material UI, Google has some incredible documentation on generating material, friendly color palettes. You'll see links to all of these in the description of this show.

I'm also a huge fan of color nerd on Tik he's a wizard when it comes to color theory and does a fantastic job of illustrating how colors interact with one another in the real Did you know that one in 12 men are color blind, that's a staggering percentage. And it's why it's so important to make sure your colors are accessible to everyone. Stark is an accessibility tool that plugs into Figma sketch and your favorite browser. It will help you make sure your designs are accessible to everyone.

If you're ready to dive into more than the color design workbook by Terry Lee stone, Sean Adams and Noreen Morioka should be required. Reading. You'll get some great fundamentals of graphic design and color theory and learn how to use colors in your designs. If you're ready to go the full mile and take a course on design. This squad over at the gymnasium, have a whole suite of free online courses on design.

In the summary of this podcast, you'll find a link to their UX design collection where you can get started. This is just enough to be dangerous. I hope you found something useful in here and you can start applying these rules to your own work. I also hope that this spurs you to learn more, it's just as important to keep learning as it is to start learning. If you did, please consider sharing this with people in your network or sharing it to a friend who might benefit from it.

If you're looking for more, I've got a few resources on my site to keep you busy. Again, check out the links in the description for my articles on design and let me know what you think. I'd love to hear your feedback too. Did you learn something new? Are you thirsty for more? Let me know what you think and I'll I'm Mike by full go. And this is tiny improvements until next time.