← Previous · All Episodes · Next →
Design rules everyone should know Episode 4

Design rules everyone should know

· 06:39

|

Mike: This is tiny improvements.

I'm Mike

I never got on well with art when I
was I didn't have a steady hand, which

meant that I could never draw or My
handwriting has always been a Bismal

and I didn't have it in me to do better.

I was not an artistic
person or so I thought.

After studying computer science
in college, I started working as

a front end engineer at Microsoft.

Back then front end engineering
was a blossoming discipline.

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.

Number two: similarity.

One nice thing about the way humans
perceive things is that we use similarity

to recognize and group objects together.

This comes from our
basic survival instincts.

If you ate a fruit from a Bush without
getting sick others that looked

similar are probably safe to eat too.

Apples to apples quite literally.

Your reader will use similarity to
group things together and just as

well, things that are dissimilar
will stand out like a sore thumb.

Break similarity.

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.

View episode details


Creators and Guests

Mike Bifulco
Host
Mike Bifulco
Developer Advocate, writer, and serial entrepreneur. Into bikes, espresso, and saving the earth.

Subscribe

Listen to 💌 Tiny Improvements using one of many popular podcasting apps or directories.

Apple Podcasts Spotify Overcast Pocket Casts Amazon Music YouTube
← Previous · All Episodes · Next →