Remove Everything You Can
Tan: One of the major misconceptions around visual design is that it's about expressing yourself. The key thing is — what information are you trying to get across?
Look at any design you're doing and figure out if something can be removed without taking away any meaning. Text, lines, borders — even colons. If you removed it, would you even notice? It looks cleaner. Ornaments are not signal. We want to focus on that which is useful.
If you removed it, would you even notice? Ornaments are not signal.
Principle 1: Contrast
Tan: The first and most important principle is contrast. The most basic type — bold versus not bold. More important, less important. Incredibly simple.
But bold isn't the only way. You can use color. You can use size. As a designer, you're being opinionated about what the user should pay attention to. If everything is bold, nothing is bold. All of your choices around color, weight — it's really a question of contrast.
We call it the squint test. Squint your eyes at any web page. If you can't read the details but your eye is immediately drawn to the highest-contrast thing on the page — the design is working.
If everything is bold, nothing is bold. Do the squint test — squint at any page and see where your eye goes.
Principle 2: Closeness
Tan: You as a designer can take related flows, related ideas, and put them together to make them actually related. I can't tell you how often I see a login page where you can't tell if the login is part of creating an account or something else.
It's a very simple principle but one to be very mindful of.
Put related things together to make them actually related. It's simple but founders get this wrong constantly.
Principle 3: Visual Hierarchy
Tan: Put contrast and closeness together and you get visual hierarchy. This is where a grid comes in — why Bootstrap from Twitter was this incredible tool that put the basic building blocks of great design into everyone's hands.
Users come to your site trying to figure out — why am I here? What am I trying to do? They'll scan the page and look for the highest-contrast things. Headings exist for exactly this reason. Visual hierarchy is your best tool for giving users the guidepost.
Figure out what you need on the page. First use padding and margin — a proper grid with enough spacing. Then use a line if you have to. Finally, a box — but be very careful. Otherwise you end up with a sauce of boxes and no one knows what's important. Whitespace can be incredibly useful.
Users scan for the highest-contrast things. Visual hierarchy is your best tool for giving them the guidepost.