Garry Tan shares three principles of visual design that founders can use today

One of the major misconceptions that people starting out have around visual design is like, you know, visual design is not actually about necessarily expressing yourself per se. The key thing is what are you trying to what. What information are you trying to get across? And so one of the key principles that you can actually apply is, you know, just look at any design that you're doing and just try to figure out, you know, if it can be removed without taking away any meaning. So that includes, you know, text that includes lines, borders, you know, really anything. I mean, even colons. Like, you know, the pet peeve of mine is like seeing colons over a form on the web or, you know, in a mobile app. And it's like, you know, if you removed it, like, would you even notice it? In fact, it looks cleaner. And so this is, you know, a stupid example, but an incredibly basic one that, you know, you can apply over and over again throughout anything that you do. You know, ornaments at the end, they are not signal. You're really like, then this is a very opinionated version of design, of course, but it's just worked for me. It's that, you know, we want to eliminate this type of ornament because we want to focus on that which is useful. And so how do we actually do that? Okay, so I have actually just three very simple principles that you can use in visual design. The first and most important is actually contrast. And so I'll just walk you through a very simple example. The most basic type of contrast that you can give is bold versus not bold, more important, less important, incredibly simple. Bold is not the only way you can actually denote what is important versus not. You can use color, and so that's an incredibly valuable tool. You can also use size, and so immediately you can kind of see, you know, as a visual designer, I am being opinionated about what you should pay attention to when and what is important and what is less important. And so what's funny is if we unwind those things, all of these suddenly become basically the same level. If everything is bold, nothing is bold. And so that's something that you should definitely remember as you go about your business and you try to design anything. It's, you know, all of your choices around color, around weight. You know, it really is a question of contrast. And so it goes both to the less important but also the more important. If you want, you can use color and weight and size to also make something even more important. The final really cool trick that I like to use is you can kind of. We call it the squint test. So if you look at any web page, any effective mobile app, immediately, if you just squint your eyes at it, if you can't make out the details of what's on that page, but you can just make out the basic shapes of. You can, you know, without having the ability to read any of this, you kind of know, oh, there's something your eye is immediately drawn to the thing that is the highest contrast, the highest weight on the page. And so this is a very basic, you know, basically your hammer for visual design is contrast. Related to that is closeness. And so, you know, you as a designer can take related flows, related ideas, and put them together to make them actually related. And that, you know, serves your purpose as a designer. And so I can't tell you how often this is just a personal pet peeve of mine. And you have this login page, and then what is going on there? Like, why is the login page. It's very confusing because the user will come here and say, why is the login there? Is it like a part of creating an account? It doesn't look like it's a part of that other thing. That, to me, feels so much better. And so it's a very simple principle, but one to be very, very mindful of. But if you put both just those two very simple concepts together, you get visual hierarchy. And this is where a grid really comes into play. This is why Bootstrap from Twitter was this incredible tool that just suddenly put in the hands of everyone here, you know, the basic building blocks of being able to create great visual design. Do it yourself style, in a nutshell, you know, sort of not to break it down to the CSS level, but you could literally just create divs that were of any size that would automatically flow into a flexible grid. And that's incredibly valuable. And so, you know, this is just, you know, literally the boilerplate stuff off of the old version of Bootstrap. But, you know, it's a good example of using a grid. And so why this is important. Well, we can overlay this grid and we can actually see that we are immediately. And so you can see how the headings actually just line up to particular sections of this visual design. And it's important because users, when they're using your site, they're coming to your site and trying to figure out, why am I here? What am I trying to do? And they will immediately be drawn to the highest contrast things. Remember the squint test, you'll immediately go to heading headings. Exist. Exactly. For this reason, a user will go to a webpage or an app and they'll actually just scan the page and they'll look for the highest, highest contrast things and try to figure out, is this what I want? Is this what I'm looking for? I have a goal. Is this going to get me what I want? And then if so, then they'll actually direct their. If I do care about that part, then immediately I'm going to dive deeper into exactly that part. And so visual hierarchy is your best tool for giving your users basically the guidepost. Like, this is the way to go. So, okay, now we got visual hierarchy. But what do I do with all of these lines? And why are there so many? How do I use color? It can be very confusing. And this is a common mistake for people who do DIYs. They just put boxes all over everything or they use lines and things like that. Here's my super extreme oversimplification on how to do your own layout. Basically figure out what you need to put on the page and then first try to use padding and margin to the extent that you can. You can use a grid, you can put related things close to each other and then next use a line if you have to. And so 90% of the time you can probably get away with just using a proper grid with enough spacing, putting related things together with good headings, thinking through the contrast. But finally, a box is actually a very important thing. It draws a lot of attention. So that's why you'll see it so commonly on websites around a call to action. It really is a high contrast thing. But be very, very careful when you use it because otherwise you kind of end up with this sauce of a ton of boxes. I have no idea what's important and what I should be doing. Whereas if you use the grid, if you use this sort of vis hierarchy, it is very straightforward. The other thing that's very valuable is you don't have to fill every single design margin to margin. White space can be incredibly useful, sometimes even helping direct a user, helping to explain what's going on. Having space on the side just gives you a place to put that or to just focus the user's attention. Those are incredibly basic, but a lot of these minimal techniques are really from the folks who created Helvetica, from Swiss design in the mid 19th, mid 20th century. And so these are incredibly simple things. But the use of contrast, the use of a grid and the use of color can actually do a lot.