Get better at design by breaking some designs

Posted on

“Wow, that website is so pretty! I could never design something as pretty as this!”

Design can feel like a talent you’re either born with, or you’re not. Only a select few can make something look good, while we normal folk are doomed to make people’s eyes bleed forever.

Design is a skill like any other, which means we can learn and get better at it. I recommended some books for getting better at design before. You can also keep a list of well designed sites to use for inspiration.

Let’s look at that list of beautiful sites again. Without formal education, few of us could create something like them from scratch. Looking at pretty sites makes you as much a better designer as eating good food makes you a better cook. If you don’t try to learn what makes a design or dish work, you’re consuming without improving.

When we don’t know the process that went into a great result, all we can do is try to break it apart. If good artists copy and great artists steal, why shouldn’t new artists destroy?

“View Source” is still the most powerful learning tool for aspiring designers. It puts the ingredients behind great designs right at our fingertips. It gives us access to the entire recipe. We can change the recipe to find and understand the importance of each ingredient.

Let’s look at this section from Intercom’s homepage:

The “Our solutions” section from Intercom’s homepage
Intercom’s take on the cards metaphor

The cards have a very Intercom feel to them. They feel “designed”, but how? Why do they work? Let’s start by looking at this giant margin between the text and the button.

The styles that define the .card-body.
That’s a lot of margin-bottom.

Those 48 pixels sound like a lot. Let’s remove them.

The card-body styles with the margin turned off.
Let’s remove the bottom margin entirely.
The card with no space between text and button.
I’m not a fan.

Much worse. How about 10 pixels instead?

The styles with a bottom-margin of 10px.
The dev tools let us use any value.
The card with that 10px space between text and button.
It’s better, but not as good as the original.

That’s not very good either. Now that we know what it looks like without this large margin, we can see that it was a good idea in the first place. Let’s look at all this padding around the content next.

The styles of the wrapper around the entire content.
We’ll only look at the padding here.

Why do they use 34px on the vertical and 36px on the horizontal axis? Why not use 35px for both? I don’t know, but isn’t that interesting. Assuming this wasn’t an accident, someone made this choice intentionally. Huh.

Let’s remove it.

The body wrapper styles without the padding.
Everything else stays as it is.
The card with no padding around the content.
This is terrible.

That’s not good at all. Let’s try 10 pixel instead.

The padding on the wrapper set to 10px.
I doubt this’ll be very good.
The card with 10px around the content.
See, told ya.

Next, how about that part of the heading that says “Conversational”? If uses the typeface Smile Script. Let’s turn that off.

The styles of the cursive heading, with the font-family turned off.
Take a break from smiling, buddy.
The card with a sans-serif heading instead of a script looking one.
I liked it better when it was smiling.

Wow, that is much worse. Turns out the typeface was essential for giving the cards their tone.

We could continue this exercise for hours. Along the way, we try to understand all the otherwise invisible details that make the design work. By breaking parts of it, we learn how each of the thousands of tiny decisions support the design. Over time, patterns like the uneven padding on the cards’ body emerge. When we need to design something, we can use the tricks we learned exploring a finished design in our own work.

Web development is one of the areas you can still learn directly from other great designers. Next time you find a pretty site, try to break it. Turn it into something ugly. If you want to become a better designer, being destructive can teach you a whole lot.

Debug
none
Grid overlay