Yong-Soo Chung [00:00:00]
Nate Kadlac is a designer.
Nate Kadlac [00:00:04]
I love to look at the world through a design lens. So I, even this morning, I went to get coffee out of my, uh, little coffee ground holder and just the suction lid. You know, that I pulled off this morning, just kind of like makes me love the, the little details in design, you know, everything around us has been designed.
Yong-Soo Chung [00:00:23]
But labeling him as just a designer doesn't do justice to his wealth of talents, I feel...
Nate Kadlac [00:00:28]
I am a designer. I am an entrepreneur. I'm, you know, I also have a podcast and I love to write. And so I really think that I'm just a creative person at the core. And I look to find ways to bring that out.
Yong-Soo Chung [00:00:44]
Specifically, in my opinion, he 'brings it out' beautifully when he designs personal branded websites for his clients.
Nate Kadlac [00:00:50]
...a great experience on a website can translate to a higher or like a genuine appreciation for that person, right? They made me feel good.
Yong-Soo Chung [00:01:01]
Well, it's a good thing I invited Nate to be a copilot on this episode of First Class Founders because I plan to ask him about exactly this - how to design a great personal brand website that transforms cold traffic to raving fans from visitors to my website
Nate Kadlac [00:01:17]
Thanks so much. I'm so excited to be here, Yong-Soo. I cannot wait to have this conversation. Been looking forward to it.
Yong-Soo Chung [00:01:23]
Specifically, on today's episode of First Class Founders, Nate will be guiding us through the various elements of designing your personal brand website - Logo, Font, Color, Elements & Motifs, and Visual Layout. For each of these elements, Nate will tell us how to make key design decisions that align with my personal brand values.
Nate Kadlac [00:01:43]
Hi, I'm Nate Kadlac and I'm the founder of ApproachableDesign.co. I also have a holding company of web-based games called Hey.GG. And I generally am a creative person. I love to design, draw, and play games. And so my, my drawing, I, I draw a lot of illustrations on my own site. I also have a site called freshprompts.com, which is aimed at beginner and intermediate artists.
Yong-Soo Chung [00:02:10]
So, jet-setters, buckle up your seatbelts, put your phones on airplane mode, and get ready for take-off!
Nate Kadlac [00:02:20]
Hi, I'm Nate Kadlac, and let's get down to business.
Yong-Soo Chung [00:03:37]
The next generation of successful founders in this digital age of entrepreneurship will leverage their audience to launch, build, and scale their brands. First Class Founders explores this golden intersection of audience-building & company-building with proven strategies to grow both your audience, which is your distribution, and your brand, which is your product.
Because those who can master both will create a category of one.
Hi, my name is Yong-Soo Chung and I'm a serial entrepreneur who bootstrapped 3 successful businesses from $0 to $20 million over 8 years.
On this podcast, you'll learn timeless lessons from world-class content creators, startup founders, and CEOs. You'll also hear tactical tips & strategies from ME, Yong-Soo Chung!
Are you ready? Then, let’s begin!
Real quick, before we start, a quick reminder here that you can grab the 3-min hyper-visual summary of this episode with Nate Kadlac on how to design a beautiful personal brand website absolutely free.
Go to firstclassfounders.com/hypervisuals to grab it for free. Big thanks to Sachin over at HyperPods for making this happen.
According to Nate Kadlac, every entrepreneur MUST have a personal brand and a website to showcase it.
Nate Kadlac [00:03:55]
I think a personal brand website really needs to connect our personality to help us stand out, but really convey that message and how we can help you really clearly.
Yong-Soo Chung [00:04:06]
And, no, a personal brand website doesn't necessarily *have* to be about your values...
Nate Kadlac [00:04:11]
yes, I do think that your values matter, but sometimes they matter more to you than to everybody else. And I think a personal branded website actually needs to serve other people first. It's a way to connect all of your interests and your ideas in one place.
Yong-Soo Chung [00:04:31]
Most people, he says, build their personal websites the way they keep their bedrooms...
Nate Kadlac [00:04:35]
Your bedroom as a kid has all of these interests, these toys, these games, these objects, these projects, you know, they have all of this stuff. That's kind of messy. But when an adult walks into that room, they don't know where to go. You know, they don't know exactly where to start. What's your favorite thing? And so they leave that room saying, well, that's cute.
Yong-Soo Chung [00:04:55]
But, as you grow older, organizing your bedroom becomes important. And the same applies to your personal website as well.
Nate Kadlac [00:05:02]
when we're professionals, we also have all of these new personal interests and these hobbies. We need to find a way to leverage that and showcase those things that we love about ourselves, but really make it clear and organized so people know where to go, what we have to offer, how to catch up with the ideas that we're sharing.
Yong-Soo Chung [00:05:24]
In other words...
Nate Kadlac [00:05:25]
a personal website needs to be sort of an organized bedroom, essentially, that feels personal to us, but expresses and showcases how we can help someone else.
Yong-Soo Chung [00:05:36]
Nate has a name for this design philosophy - he calls it "inside-out" thinking.
Nate Kadlac [00:05:42]
It's really about not being influenced by everybody else. And we, you know, we see this with Elon Musk, right? We see that he has made design decisions kind of based on his own background, his love of cinema. He's designed a cyber truck, acknowledging that, you know, Blade Runner and some of these other sci-fi movies were inspirations. So I think we can make even at the biggest level, the, you know, the multi-billion dollar level of a brand, we can make personal design decisions that are founder based, but on a smaller level, I think we should be doing the same thing.
Yong-Soo Chung [00:06:18]
Simply put, if - for example - you were someone who was environmentally conscious, you might want to have a personal brand website that incorporates this core value into its design.
Nate Kadlac [00:06:28]
You might think of the color green as like the default choice in this kind of like this, this umbrella. And so I think, uh, actually instead of just defaulting to that, we, we go back to our own stories and experiences and think about. the things that we love. And we can express that through designs, through some of these simple design decisions, but we can convey that we care about these things through our ideas, through our writing, through a simple headline that helps you better understand what I'm about, you know, and how it can help you if it's a business that's, you know, climate conscious, I think it's really important to convey that clearly.
Yong-Soo Chung [00:07:07]
Essentially, what Nate's saying here is that the word 'personal' in personal brand website is what you need to focus on.
Nate Kadlac [00:07:14]
I think a personal brand website really needs to connect our personality to help us stand out, but really convey that message and how we can help you really clearly.
Yong-Soo Chung [00:07:29]
But, how exactly do you infuse your personality into your personal brand website?
Well, you start by infusing it into each individual element.
That is, you infuse it in the logo, in the fonts, in the colors, in as many elements and motifs as you can find. And then apply some visual layout best practices, add in Nate's secret sauce and, voila! Your personality-infused personal brand website is ready!
And we'll be covering all of these steps in extensive detail throughout this episode. So, I'd recommend listening very closely to Nate's recommendations - there’s a TON of actionable advice in today's episode! And, believe me, you do NOT want to miss any of it!
So, let's dive right in.
The first of the four key elements is... Logos.
Specifically, should you choose a logo that is just all text? Or should you choose something with a bit of design?
Nate Kadlac [00:08:25]
I think for starting out, if you have nothing, pick your favorite font, type your name out, and just be done with it. You're making a design decision there. You're not spending a lot of time on it, though. But it is important just to get that out.
Yong-Soo Chung [00:08:39]
By the way, when Nate says, just pick a font, he means a font other than the default ones like Arial or Cambria or Times New Roman…
Nate Kadlac [00:08:47]
maybe take two minutes to just look through and pick something different, right? That feels a little bit more personal to you. And that would be a great starting point is just typing out your name.
Yong-Soo Chung [00:08:58]
We'll talk more specifically about fonts in a little bit but another way to design your logo is to use your 'signature' or 'autograph'...
Nate Kadlac [00:09:06]
And I think Ali Abdaal does this. Uh, there's, there's a few others that come to mind, but really, if you wanted to draw your name out, if you have an iPad, you can simply just draw it out, and then export that as a ping, you know, and use that as an image for your site. And I think as long as it's kind of clear, you know, make sure it's sort of readable, I think just doing it by hand can be a nice aesthetic touch that helps you stand out from everybody else.
Yong-Soo Chung [00:09:33]
A signature-based logo such as this one is halfway between a simple font-based logo and an icon-based or object-based logo.
Nate Kadlac [00:09:42]
I think an object logo makes sense after you've built a site, built an aesthetic that you're confident with. I think it's too early to focus on creating a logo mark when you're just early in your journey of creating a website. I think it's not the right thing to focus on first.
Yong-Soo Chung [00:10:02]
Of course, having an object-based logo - or logomark, as it is technically called - is quite useful. Especially as you grow your presence on the internet…
Nate Kadlac [00:10:10]
it works when you have a number of social channels, you can use that maybe instead of your logo when you have a very small space to use it in. It's a nice identifier to help maintain a consistent brand
Yong-Soo Chung [00:10:22]
But, there's no hurry to do it right away.
Nate Kadlac [00:10:24]
So I would wait, you know, if you have a website, maybe wait six months to a year after you've been kind of building stuff up, writing some content, um, getting in the flow of, of doing that and keeping something updated for a while. And then maybe revisit your logo and say, oh, maybe I want a mark to add to it.
Yong-Soo Chung [00:10:39]
I must point out here that Nate has a brilliant logomark of his own which you can see on his website kadlac.com - which is a neat little combination of text and visual design.
Nate Kadlac [00:10:51]
That came from my drawing exercises. And so what I wanted to do was create sort of a watermark for my illustrations. And I wanted something that just took up a small amount of space. It looked really neat because it's six letters. You could do three on top and three on bottom. And a box around it just kind of like gives it a boundary.
Yong-Soo Chung [00:11:10]
But, as Nate pointed out, he made this logo when he *needed*to watermark his illustrations. Or, as he describes it, when he 'bumped up against walls'...
Nate Kadlac [00:11:18]
As you go further in your journey, you might need more assets because you've bumped up against more walls. Maybe you started a YouTube channel. Maybe you have a new social media account and you need more assets. You need more things to make that system flexible. So it's really kind of, it's like a startup. You kind of bump against these boundaries and you're like, I need to do a little bit more when it didn't make sense early on.
Yong-Soo Chung [00:11:42]
Moral of the story? Start with a simple logo that is as simple as choosing a nice-looking font and type out your name. Then, as you grow in your creator journey, you can refine or enhance it with additional visual and graphic design as needed.
Next up, fonts!
Nate Kadlac [00:12:02]
I love this question. I love fonts. I can talk about this all day long
Yong-Soo Chung [00:12:06]
And, still to come, Nate's recommendations on how to choose colors, elements-n-motifs, and how to tweak your visual layout for an optimal viewing experience.
But first, a quick shoutout to my new sponsor, who also happens to be an old sponsor Riverside.
All right, listen up creators. You know that I'm super picky about which sponsors I work with. Well, I'm super happy to have Riverside as our sponsor for this episode. Why? Because I love using Riverside to record all my guest interviews on this show. Yup, that's right. My producer and I use Riverside as part of our podcast production process.
My favorite part about Riverside is how seamless the recording process is whenever I record an episode with a guest. Riverside records everything locally so the audio quality is the best that it can be. Plus, it even records backup audio just in case something happens, which has come in pretty handy in the past.
But hold on. We don't just use Riverside for recording. We use it to analyze transcripts within the video recordings to pull out the best parts of my conversations with guests. They even added AI to make it even easier for you to create even more high quality content.
Riverside is completely free to sign-up and get started for your first 2 hours. Then, use code "FIRSTCLASS" to get 20% off any paid plan. Trust me, you'll love using Riverside as much as I do. Just look for the link in the show notes and don't forget to use code "FIRSTCLASS" to save some extra cash.
Huge thanks to Riverside for sponsoring this episode!
And now, let's get back to our episode with Nate Kadlac.
On today's episode we are discussing the key design decisions around the next set of elements crucial to building a website that elevates your personal brand.
Before the break, we discussed logos. Next up, is fonts!
Yong-Soo Chung [00:14:20]
Fonts are, in my opinion, the most difficult design decision when it comes to building your personal brand. Because there are *so* many fonts, that you immediately run into the problem of analysis paralysis right from the get-go...
Nate Kadlac [00:14:32]
Being a designer, being a creative person requires a little bit of trust in your, like what looks good to you, right? Like not what looks good to everybody else, not what's been done before, but like really what, why did you choose the desk that you chose? Like why did you make some of these decisions in your life? And you need to kind of trust that instinct a little bit. And that's scary for a lot of people.
Yong-Soo Chung [00:14:55]
And the only way to overcome this fear is to bite the bullet. That is, make a choice. Choose a font.
Nate Kadlac [00:15:02]
So the first thing I would say is having the confidence to be okay with making a choice that feels weird, feels a little strange to just go and select a font.
Yong-Soo Chung [00:15:12]
In fact, you can combine this with the task of creating a logo for your brand and choose a font that might look good as a logomark for your personal brand.
Nate Kadlac [00:15:20]
I usually do this by going to a free site, fonts.google.com. And normally what I would do is just type in my name in the hint text. So it gives you a preview of the font in your name. And our favorite words are in our name. So type your name out. And then enlarge the font size to like 60 pixels.
Yong-Soo Chung [00:15:42]
Enlarging the font allows you to inspect the finer details of the font. Or what Nate refers to as the 'personality' of the font.
Nate Kadlac [00:15:50]
designers have created these things from scratch, like they have personality to them. It's really hard to see the personality in a font when you're looking at it at 12 pixels. So you really wanna zoom in large. It's like getting on your hands and knees and looking at it up really close. Then you get to see all of the little details, you know? In the letter K, for instance, you know, like I tend to look at that letter because it's designed differently by every designer and there's certain, like the serif might flare out in a certain way. Maybe there's a curve or maybe it's angular, whatever appeals to you. You can start to see those details and make a decision based on that.
Yong-Soo Chung [00:16:29]
Once you have shortlisted a few fonts with good 'personalities', the next step is to evaluate their 'families'...
Nate Kadlac [00:16:36]
So making sure a font has six styles. There's a bunch of different ways to say that, but what that really means is it has a regular and italicized, a bold, maybe a heavyweight, or an extra bold, or maybe a medium weight. And so having one that has flexibility means that you don't need to make a bunch of font decisions. The designer already made those, so they will all work well together. So if you have six or more, it's really easy to just choose one font and be done. You don't have to use anything else.
Yong-Soo Chung [00:17:08]
But what if the font that really catches your fancy doesn't have six styles? In this case, you can choose a font-pairing BUT make sure that the two fonts DON'T look similar to each other!
Nate Kadlac [00:17:19]
So for instance, Ariel and Helvetica are both sans serif fonts, but they look kind of similar, but if you were to use them both side by side, it feels off. You don't want that. You want actually to choose high contrast pairings. So you might choose a serif font for the title, you might choose a sans serif font.
Yong-Soo Chung [00:17:40]
Serifs are little flourishes at the edges of the letter, see the Times New Roman font, for example. Sans Serif fonts like Arial and Helvetica don't have such flourishes.
Nate Kadlac [00:17:52]
serif fonts have been around a lot longer. Serif fonts were first basically meant to mimic handwritten fonts. Like if we were to take a brush and try to draw a letter, it would probably have those little serifs on it and it looks humanist. That's why they're called humanist fonts. And so there's tradition baked into serif fonts. They look older. They look traditional. They look historical. You know, you go to, you know, you go to Greece and you see huge, you know, monuments with these serif fonts on it. So they initially have that feeling or that vibe of tradition. Modern Sans Serif fonts were essentially, you know, today they're computer-generated, like they're geometric, they're kind of perfectly crafted, they don't have those serifs on them. And so they look more modern because they are more modern, right?
Yong-Soo Chung [00:18:45]
In case you are wondering, no, there are no 'rules' on when to use serif and when to use sans serif fonts. So you can actually choose a serif font for your header but use a sans serif font for the body text.
Nate Kadlac [00:18:58]
You can choose a different font for your logo or your name that you want to design something around. They don't have to be the same. I think it's really about what appeals to you, what speaks to you. It's just one thing to kind of know about these things that people will feel a certain way, not that you need to make a choice based on what people feel, I don't believe that, but it kind of helps you make a decision saying, you know, a futurist or a modern thinker. Do I love computer or do I love history? Do I love books? You might make a decision based on those types of your personality and then go and pick a font for that.
Yong-Soo Chung [00:19:36]
In fact, at one point, Nate might have even *advocated* for choosing a serif and sans-serif font-pairing.
Nate Kadlac [00:19:43]
the reason why those work well together is because there's high contrast. It creates visual intrigue, visual contrast between those two, and that creates interest and curiosity and emotion. Find fonts that look a little bit different from one another.
Yong-Soo Chung [00:19:58]
Just remember to (pause) choose a font that works well at large sizes AND small sizes…
Nate Kadlac [00:20:05]
if you go to your computer or your, or like a fonts.google.com, you can probably find something that works in both cases.
Yong-Soo Chung [00:20:13]
AND choose a font that's not hand-written for body-text
Nate Kadlac [00:20:17]
They break down when they're small, right? So like, just don't do it. Just don't use it for small things. Pick a nice serif or sans serif font that is not handwritten for body text. Make sure it's clear and legible
Yong-Soo Chung [00:20:30]
Basically, don't choose Comic Sans or Papyrus.
Nate Kadlac [00:20:33]
It's not even that comic, Comic Sans is like, not even a bad font necessarily. What makes it so hilarious and meme-like is that people use it in like every case where they need something of, to resemble a culture outside of their own, right?> It's a fun font, and I would recommend if you want a handwritten font, just go to fonts.google.com. Again, look for a handwritten font with six plus styles, and you'll find something that works pretty well. And so, yeah, just avoid Comic Sans altogether.
Yong-Soo Chung [00:21:10]
Alright, summing up all of Nate's advice about fonts, the moral of the story is…
Nate Kadlac [00:21:15]
pick one with a six plus families or six plus weights and find one that's flexible that you can use in a lot of places
Yong-Soo Chung [00:21:22]
...and avoid handwritten fonts - especially Comic Sans and Papyrus - for body text!
There is also the matter of ensuring the right amount of padding and spacing once you have chosen a font. But, we'll look at that in more detail when we talk about the principles of visual layout.
Right now, let's move on to the next topic (pause) Color.
When designing anything, you are quite likely to have a color you like to use more than the other. It could be your favorite color. Or it could be a feeling that a particular color 'works well' for the message you are trying to convey.
Nate, however, has a completely different take on choosing a color for your personal brand.
Nate Kadlac [00:21:58]
what I love to do is start with a photo and you can find a photo that you love from your childhood. Doesn't have to be your own, but you could find any photo. Think of a photo, something might appear and go find it. And then look at that and think about why you like it. There's probably a color in there. There's probably, if you squint your eyes and blur it out, there's probably something that appeals to you from a design standpoint. And so you can simply just choose a color from a photo that you love. And that already makes it personal. And there's that connective tissue between something I love and something I wanna share with others. And so instead of randomly picking something, just pick something personal.
Yong-Soo Chung [00:22:40]
Incredible! I'm already thinking of a photo and a specific color from that photo. And, yeah, I can already sense that this color will work really well for my personal brand.
Nate Kadlac [00:22:49]
So I recommend picking one color at least for a primary color, and then picking an accent color, which is a higher contrast color. So let's say I pick blue for one color, and then I might choose yellow or orange or something for an action color. And now I have two. One I'm going to use more of, one I'm going to use less of, but I have a start to something.
Yong-Soo Chung [00:23:13]
Choosing an accent color sounds daunting but it's actually quite simple, Nate says. Just make sure that the two colors are not BOTH high-contrast - like blue and yellow, for example.
Nate Kadlac [00:23:22]
So the one thing that really makes colors not work well together are when you choose two kind of high contrast colors.
Yong-Soo Chung [00:23:32]
That said, there are ways to make blue and yellow work in combination, if you really, REALLY want to...
Nate Kadlac [00:23:38]
The cool thing about colors is you can pick one color and there's millions of options within that hue, that color. So if you were to go to a design tool like Figma or Canva or on your desktop, like just open a color wheel. pick a blue or pick a purple or something, and then you'll see all of these variations. There's saturated variations, there's desaturated variations. And so what you wanna do is kind of tone down one of these colors. And so I may take that blue that in our minds are like the sky, we might desaturate it a little bit and make it a little darker. So it kind of like tones it down a little bit, makes it a little bit easier to look at. And by doing that, it's gonna make it work much better with another hot color like yellow.
Yong-Soo Chung [00:24:24]
I mean both IKEA and Best Buy have made it work, when you think about it. But, if you ask me, I'd recommend looking up color palette creators on the internet. Like coolors.co, for example. That’s c-o-o-l-o-r-s dot c-o. Just give it a photograph, or a primary color and it will generate a seemingly infinite number of color palettes for you!
And if you are worried about whether your choice of color fits in well with the whole psychology of color, well, there's good news for you.
Nate Kadlac [00:24:52]
We don't need to worry about color psychology. There's just a lot there that I don't think matters. <But those things really need to be immersive. We go to a restaurant, you might see a lot of reds and yellows, you know? And they're meant to increase our appetite, you know, make us hungry. And so, but we need to be, we're not immersing people with our websites, you know, it's not like we're putting you in a whole experience that surrounds us with sight and sound and hitting us with all these five senses, we're just building websites, so don't play into the color psychology.
Yong-Soo Chung [00:25:29]
However, there IS something that Nate DOES want you to worry about…
Nate Kadlac [00:25:33]
I tend to advocate for not using white or black, like pure white or pure black. I think those are default color choices that a lot of templates use, and you just kind of use them because they're there. And then you might say, well, I'm okay with it. I'm like, I'm a minimalist, you know? Like, I'm okay with this. But I think minimalism is sort of like the least offensive choice, and that's why people make that.
Yong-Soo Chung [00:25:58]
.and I'll explain shortly what Nate recommends instead of pure white or pure black. But, before we do that I want to give a very loud shout out to one of my favorite animals on the planet- who also happens to be the proud sponsor of this podcast Humphrey!
Humphrey is an adorable French bulldog. And guess what? He has quite a following on social media. Over a 150,000 followers if you're counting across Instagram and TikTok @spotted byhumphrey.
Every time we post Humphrey in a new harness or with a new dog toy, people keep asking us.
Hey! Where can I buy that? So what did my wife and I do? We decided to launch a dog boutique named after him called Spotted By Humphrey.
Spotted by Humphrey is a destination for all your furbabies needs. Treats, Leashes, dog toys, and even an award winning dog poop bag holder called Poopsie Daisy, which my wife designed all on her own.
Oh. So Check out Humphrey's shop at spottedbyhumphrey.com and use code FIRSTCLASS15 for 15% off your next order. That's spottedbyhumphrey.com. I'll leave a link in the show notes.
Okay, let's get back to our episode on designing your personal brand website with Nate Kadlac.
Before the break, Nate mentioned why he advised against using pure white or pure black in your color palette.
Okay, let's get back to our episode on designing your personal brand website with Nate Kadlac.
Before the break, Nate mentioned why he advised against using pure white or pure black in your color palette.
Nate Kadlac [00:27:51]
My opinions on pure black are usually based on the idea that people don't change the defaults, right? So if it's an intentional decision, fine, roll with it. But here's the thing. Brands like Gucci, brands like Prada use pure white and pure black because it oozes luxury.
Yong-Soo Chung [00:28:08]
And he especially advises against using pure black or pure white colors in your palette.
Nate Kadlac [00:28:14]
A designer's secret is that most of us never use pure black or pure white. If you think of the spectrum, if white is on one side and black is on the other, we actually just pull them in. Pull them a little bit here. And that just reduces the contrast slightly. Our eyes read better. just slightly off that black end is a little bit more readable because it's not high contrast.High contrast tires our eyes out, and we wanna use it for design to kind of like grab attention and pull you in like Prada and Gucci do, but we also wanna be mindful of people sitting and reading our content for a long time. And if they get tired doing that, that's gonna reflect badly on us
Yong-Soo Chung [00:29:04]
So if you have a background of your website, instead of using the white, take that blue, for example, our primary color, choose a very subtle variant of that blue, like a very desaturated, like in a color wheel, like you drag it to the top left corner, and it's almost white, but not quite white. There's a slight blue tint to that. Make the background that really light blue instead of pure white. It all of a sudden just kind of gives you a new feeling and it separates you from everybody else.
Nate Kadlac [00:29:35]
Okay, to sum up Nate's advice on designing a color palette for your personal brand...
- Choose a photo or image that means something to you. Your primary color is a color that stands out in this photo or image
- Choose a secondary or accent color that pairs up well with your primary color.
AND
- Don't choose pure black or pure white in your color palette. Instead, choose slightly off-white or off-black colors to infuse your personality into the palette.
You can also enhance your design by adding in additional elements...
Yong-Soo Chung [00:30:07]
Yeah, so elements, you're speaking about icons, motifs. What else? Okay. Yeah, these are little things that can really add a layer of personality to a site. I think in the beginning, it's probably less important, but there's a couple of things that I think really quickly separate one website from another.
Nate Kadlac [00:30:30]
And you don't need to go looking for these elements. Quite often, you can find them in stuff you've already chosen.
Yong-Soo Chung [00:30:35]
bullet points, for example. If you created a little custom bullet point icon that used, you know, that carry through it in all of your lists, that's an easy way to kind of like bring a little bit of soul into your site, bring a little bit of extra. And a simple way to do this would be to download your favorite font to your computer. You can open it up in Figma or a design tool, and you can actually just either redraw parts of the font. So like you could go to the letter I, and maybe the I is slightly, you know, it's not a perfect circle, it might be a little bit kind of peculiar, you could go grab a different icon from that set that's already designed and actually use that as your bullet point.
Nate Kadlac [00:31:18]
And not just bullet points, you can find a lot of different flourishes you can add to your personal brand, in this manner.
YoFor instance, I did a personal website for a writer, charliebleeker.com, and we grabbed sparkles from her font, little starburst sparkles for her bullet points. And it was something that was already created in the font family that we used. You can also dig into some of the weird shapes that might appeal to you. And so you could use those as background elements. So like that same sparkle that we used for Charlie's bullet points, we used the same sparkle in her logo. We use the same sparkle and blurred it out in the background of our website. And we just reused it a few different ways. And so it's something to, you're just kind of like, stealing design work that's already been done, right? And there's a lot of that in fonts. Fonts have all the letters, but then what you don't normally see is it has all those like ligatures and characters that have icons built into them. So I would go there first.
Yong-Soo Chung [00:32:22]
And, finally, the last piece that completes the puzzle that is your personal brand website is... the visual layout. That is, how your website is structured visually.
Nate Kadlac [00:32:32]
I usually think about what someone looks at first on a website. And we most commonly there's kind of this, it's called a Z-pattern. And so people tend to look at the top left corner of a site first. And that's why a logo is always placed in the top left. It's the first thing people usually see. And so having your name up there in a clear way kind of just gives people trust that they're in the right spot.
Yong-Soo Chung [00:32:54]
Visual layout best practice number 1: Have your name on the top-left corner of your website.
Nate Kadlac [00:33:00]
And so then our eye kind of goes across to the right side. So that's why the navigation is usually in the top center or the top right. And it's, it's good to kind of like know that those will be seen and looked at.
Yong-Soo Chung [00:33:13]
Visual layout best practice number 2: Navigation in the center or the top-right corner.
Nate Kadlac [00:31:20]
And then her eye kind of scans down across the page diagonally, and then it goes back to the right. And so almost it's just a, it's just a human behavior. So you have your logo and your nav at the top. I think having it exposed and just really clear, try not to get too cute with naming things, naming pages. Just be really clear about it.
Yong-Soo Chung [00:33:41]
Visual layout best practice number 3: Keep your naming scheme clear and unambiguous.
Nate Kadlac [00:33:46]
I think people tend to treat this like my bedroom example where they try to be really creative and put things all over the place. Really what the basics would be keeping your line length between like 11 and 15 words per line. It makes it really simple.
Yong-Soo Chung [00:34:05]
And if you are wondering why Nate specifically mentioned '11 to 15 words per line', it is because most books use that metric.
Nate Kadlac [00:34:13]
I use a book as like a great metaphor for great design. So think of a book. A book has a cover that's usually art directed, kind of showcases the personality of the book. You flip it open, you have a table of contents, which is kind of like your navigation. And so it's clear, like you can jump to any part of the book. We'll trust that it's the right page. And then you have the content, which is almost every book is the same, right? It uses just a similar layout. And the words per line are about 11 to 15, roughly.
Yong-Soo Chung [00:34:44]
The '11 to 15 words per line' measure is also important because it is considerate of the people visiting and reading your website.
Nate Kadlac [00:34:51]
Imagine going to a website where the line of the words extends from side to side, and it's so difficult to read, we get so tired immediately. That tiredness, that kind of feeling is sort of bad equity that's transported to the person's website or the person themselves. And so when we feel tired on their website, it makes us feel tired about that person.
Yong-Soo Chung [00:35:15]
That's also why ensuring good legibility and readability on your website is important, Nate says.
Nate Kadlac [00:35:20]
...a great experience on a website can translate to a higher or like a genuine appreciation for that person, right? They made me feel good.
Yong-Soo Chung [00:32:13]
And, one simple way to improve legibility on your website is to adjust the spacing around your text. Specifically,
Nate Kadlac [00:35:38]
line height, so the letting is 120 to 150%. And font size 16 pixels or more. I tend, even on the web for personal websites, I tend to use a minimum of 16 pixels for a font, which works well on desktop and mobile. And so keeping in mind, just make things a little bit bigger, add a little padding around things. If you really want to get into the nitty gritty, you can use a leading weight or like leading spacing, which is the space between lines of text of about 120 to 150%. And most computers will default to like around 120, but I think you can always increase it a little bit more, which will help us read your content more.
Yong-Soo Chung [00:36:20]
In other words...
Nate Kadlac [00:36:21]
layout is really all about spacing. We want more spacing than you think. I think about when I've worked a lot with developers and when you're creating an app or creating something, there's usually a tendency to just pack things in. You know, just, oh, we have space, let's just pack everything in. But as humans, as we read and kind of uncover information and try to like think about what this means or the idea behind something. We need space. Our brain needs space to think. Our eyes need space to read. And so increasing spacing around like an image or anything else really is just fundamental to great design.
Yong-Soo Chung [00:37:03]
Visual layout best practice number 4: do not hesitate to make liberal use of the space around your text.
So, there you have it! By combining Nate's excellent advice on logos, fonts, colors, and visual layout best practices you can design a personal brand website for yourself that will connect with your audience and leave a lasting impression on them.
The only question that remains now is *how* do you actually bring all of these elements together?
Well, the answer is (pause) the G.E.O.S. framework.
Nate Kadlac [00:37:37]
if we just treat each page as a, as it has a goal attached to it, then what I have is just a basic framework for, for remembering for myself, but it's called GEOS.
Yong-Soo Chung [00:37:52]
The G.E.O.S. framework, Nate says, offers a simple way to scaffold your personal website.
Each letter of GEOS in the GEOS framework stands for a specific intent - G for Giving, E for Establishing, O for Offer, and S for Spreading your ideas.
And you can hear about the G.E.O.S. framework in detail, in a special bonus segment of this episode, available exclusively to premium members of the First Class Founders community. You will also hear Nate describe several examples of personal brand websites where you can see the G.E.O.S. framework in action.
In fact, premium members also enjoy a ton of other perks - such as access to a private feed, AD-FREE episodes that are released a WEEK early!
So, yeah, join the First-Class Founders membership today - go to firstclassfounders.com/join. Look for a link in the show notes!
Yong-Soo Chung [00:38:40]
Finally, above all, make sure that the website you design for your personal brand follows one cardinal rule - it should be 'clear over clever'.
Nate Kadlac [00:38:53]
I do think the old adage of being clear over clever is really important here. We can express our personality. We can share the things that make us unique in a clever way through design and the colors we choose and a lot of different ways. But I think we need to be really clear in our copy, our writing, and how we can help that audience.
Yong-Soo Chung [00:39:17]
Because your personal brand website is a gateway for your customers and followers to enter your world...
Nate Kadlac [00:39:22]
having a personal website, I think is really important because it gives you a place for people to seek you out, for you to share your ideas and advance your career, whether it's a creator career or whether it's, you know, a career in your field. So I think constantly publish, create a newsletter, have a website. These are fundamental things that I think everybody should be doing before you feel like it's too late.
Yong-Soo Chung [00:39:47]
You can reach out and connect with Nate on his personal website kadlac.com
Nate Kadlac [00:39:50]
kadlac.com. It's K A D L A C my, I founded approachabledesign.co, which is a place to help creators and entrepreneurs make better design decisions and you can join my newsletter there and on X it's just my last name again, K A D L A C.
Yong-Soo Chung [00:40:09]
And if you do end up implementing Nate's advice for your own personal brand website, do share it with both Nate and me - I'm @yongsoochung on X. Who knows, Nate might end up giving you and your website a shoutout as an example in one of his future interviews!
If you enjoyed this episode with Nate Kadlac, then I urge you to check out episode number 49 titled, "Don't Make The Same Mistakes I Did — What I Wish I Knew About Content Creation and Personal Branding." In this episode, I discuss SIX mistakes I made in my journey as a content creator. Mistake number 5 was not having a personal brand despite having a near eight-figure business! If I had spoken to Nate BEFORE I started this journey, I certainly wouldn't have made this mistake for sure!
In any case, that's it for today's episode!
My name is Yong-Soo Chung and I'll see you on the next episode of First Class Founders!
Nate Kadlac is a designer.
Nate Kadlac [00:00:04]
I love to look at the world through a design lens. So I, even this morning, I went to get coffee out of my, uh, little coffee ground holder and just the suction lid. You know, that I pulled off this morning, just kind of like makes me love the, the little details in design, you know, everything around us has been designed.
Yong-Soo Chung [00:00:23]
But labeling him as just a designer doesn't do justice to his wealth of talents, I feel...
Nate Kadlac [00:00:28]
I am a designer. I am an entrepreneur. I'm, you know, I also have a podcast and I love to write. And so I really think that I'm just a creative person at the core. And I look to find ways to bring that out.
Yong-Soo Chung [00:00:44]
Specifically, in my opinion, he 'brings it out' beautifully when he designs personal branded websites for his clients.
Nate Kadlac [00:00:50]
...a great experience on a website can translate to a higher or like a genuine appreciation for that person, right? They made me feel good.
Yong-Soo Chung [00:01:01]
Well, it's a good thing I invited Nate to be a copilot on this episode of First Class Founders because I plan to ask him about exactly this - how to design a great personal brand website that transforms cold traffic to raving fans from visitors to my website
Nate Kadlac [00:01:17]
Thanks so much. I'm so excited to be here, Yong-Soo. I cannot wait to have this conversation. Been looking forward to it.
Yong-Soo Chung [00:01:23]
Specifically, on today's episode of First Class Founders, Nate will be guiding us through the various elements of designing your personal brand website - Logo, Font, Color, Elements & Motifs, and Visual Layout. For each of these elements, Nate will tell us how to make key design decisions that align with my personal brand values.
Nate Kadlac [00:01:43]
Hi, I'm Nate Kadlac and I'm the founder of ApproachableDesign.co. I also have a holding company of web-based games called Hey.GG. And I generally am a creative person. I love to design, draw, and play games. And so my, my drawing, I, I draw a lot of illustrations on my own site. I also have a site called freshprompts.com, which is aimed at beginner and intermediate artists.
Yong-Soo Chung [00:02:10]
So, jet-setters, buckle up your seatbelts, put your phones on airplane mode, and get ready for take-off!
Nate Kadlac [00:02:20]
Hi, I'm Nate Kadlac, and let's get down to business.
Yong-Soo Chung [00:03:37]
The next generation of successful founders in this digital age of entrepreneurship will leverage their audience to launch, build, and scale their brands. First Class Founders explores this golden intersection of audience-building & company-building with proven strategies to grow both your audience, which is your distribution, and your brand, which is your product.
Because those who can master both will create a category of one.
Hi, my name is Yong-Soo Chung and I'm a serial entrepreneur who bootstrapped 3 successful businesses from $0 to $20 million over 8 years.
On this podcast, you'll learn timeless lessons from world-class content creators, startup founders, and CEOs. You'll also hear tactical tips & strategies from ME, Yong-Soo Chung!
Are you ready? Then, let’s begin!
Real quick, before we start, a quick reminder here that you can grab the 3-min hyper-visual summary of this episode with Nate Kadlac on how to design a beautiful personal brand website absolutely free.
Go to firstclassfounders.com/hypervisuals to grab it for free. Big thanks to Sachin over at HyperPods for making this happen.
According to Nate Kadlac, every entrepreneur MUST have a personal brand and a website to showcase it.
Nate Kadlac [00:03:55]
I think a personal brand website really needs to connect our personality to help us stand out, but really convey that message and how we can help you really clearly.
Yong-Soo Chung [00:04:06]
And, no, a personal brand website doesn't necessarily *have* to be about your values...
Nate Kadlac [00:04:11]
yes, I do think that your values matter, but sometimes they matter more to you than to everybody else. And I think a personal branded website actually needs to serve other people first. It's a way to connect all of your interests and your ideas in one place.
Yong-Soo Chung [00:04:31]
Most people, he says, build their personal websites the way they keep their bedrooms...
Nate Kadlac [00:04:35]
Your bedroom as a kid has all of these interests, these toys, these games, these objects, these projects, you know, they have all of this stuff. That's kind of messy. But when an adult walks into that room, they don't know where to go. You know, they don't know exactly where to start. What's your favorite thing? And so they leave that room saying, well, that's cute.
Yong-Soo Chung [00:04:55]
But, as you grow older, organizing your bedroom becomes important. And the same applies to your personal website as well.
Nate Kadlac [00:05:02]
when we're professionals, we also have all of these new personal interests and these hobbies. We need to find a way to leverage that and showcase those things that we love about ourselves, but really make it clear and organized so people know where to go, what we have to offer, how to catch up with the ideas that we're sharing.
Yong-Soo Chung [00:05:24]
In other words...
Nate Kadlac [00:05:25]
a personal website needs to be sort of an organized bedroom, essentially, that feels personal to us, but expresses and showcases how we can help someone else.
Yong-Soo Chung [00:05:36]
Nate has a name for this design philosophy - he calls it "inside-out" thinking.
Nate Kadlac [00:05:42]
It's really about not being influenced by everybody else. And we, you know, we see this with Elon Musk, right? We see that he has made design decisions kind of based on his own background, his love of cinema. He's designed a cyber truck, acknowledging that, you know, Blade Runner and some of these other sci-fi movies were inspirations. So I think we can make even at the biggest level, the, you know, the multi-billion dollar level of a brand, we can make personal design decisions that are founder based, but on a smaller level, I think we should be doing the same thing.
Yong-Soo Chung [00:06:18]
Simply put, if - for example - you were someone who was environmentally conscious, you might want to have a personal brand website that incorporates this core value into its design.
Nate Kadlac [00:06:28]
You might think of the color green as like the default choice in this kind of like this, this umbrella. And so I think, uh, actually instead of just defaulting to that, we, we go back to our own stories and experiences and think about. the things that we love. And we can express that through designs, through some of these simple design decisions, but we can convey that we care about these things through our ideas, through our writing, through a simple headline that helps you better understand what I'm about, you know, and how it can help you if it's a business that's, you know, climate conscious, I think it's really important to convey that clearly.
Yong-Soo Chung [00:07:07]
Essentially, what Nate's saying here is that the word 'personal' in personal brand website is what you need to focus on.
Nate Kadlac [00:07:14]
I think a personal brand website really needs to connect our personality to help us stand out, but really convey that message and how we can help you really clearly.
Yong-Soo Chung [00:07:29]
But, how exactly do you infuse your personality into your personal brand website?
Well, you start by infusing it into each individual element.
That is, you infuse it in the logo, in the fonts, in the colors, in as many elements and motifs as you can find. And then apply some visual layout best practices, add in Nate's secret sauce and, voila! Your personality-infused personal brand website is ready!
And we'll be covering all of these steps in extensive detail throughout this episode. So, I'd recommend listening very closely to Nate's recommendations - there’s a TON of actionable advice in today's episode! And, believe me, you do NOT want to miss any of it!
So, let's dive right in.
The first of the four key elements is... Logos.
Specifically, should you choose a logo that is just all text? Or should you choose something with a bit of design?
Nate Kadlac [00:08:25]
I think for starting out, if you have nothing, pick your favorite font, type your name out, and just be done with it. You're making a design decision there. You're not spending a lot of time on it, though. But it is important just to get that out.
Yong-Soo Chung [00:08:39]
By the way, when Nate says, just pick a font, he means a font other than the default ones like Arial or Cambria or Times New Roman…
Nate Kadlac [00:08:47]
maybe take two minutes to just look through and pick something different, right? That feels a little bit more personal to you. And that would be a great starting point is just typing out your name.
Yong-Soo Chung [00:08:58]
We'll talk more specifically about fonts in a little bit but another way to design your logo is to use your 'signature' or 'autograph'...
Nate Kadlac [00:09:06]
And I think Ali Abdaal does this. Uh, there's, there's a few others that come to mind, but really, if you wanted to draw your name out, if you have an iPad, you can simply just draw it out, and then export that as a ping, you know, and use that as an image for your site. And I think as long as it's kind of clear, you know, make sure it's sort of readable, I think just doing it by hand can be a nice aesthetic touch that helps you stand out from everybody else.
Yong-Soo Chung [00:09:33]
A signature-based logo such as this one is halfway between a simple font-based logo and an icon-based or object-based logo.
Nate Kadlac [00:09:42]
I think an object logo makes sense after you've built a site, built an aesthetic that you're confident with. I think it's too early to focus on creating a logo mark when you're just early in your journey of creating a website. I think it's not the right thing to focus on first.
Yong-Soo Chung [00:10:02]
Of course, having an object-based logo - or logomark, as it is technically called - is quite useful. Especially as you grow your presence on the internet…
Nate Kadlac [00:10:10]
it works when you have a number of social channels, you can use that maybe instead of your logo when you have a very small space to use it in. It's a nice identifier to help maintain a consistent brand
Yong-Soo Chung [00:10:22]
But, there's no hurry to do it right away.
Nate Kadlac [00:10:24]
So I would wait, you know, if you have a website, maybe wait six months to a year after you've been kind of building stuff up, writing some content, um, getting in the flow of, of doing that and keeping something updated for a while. And then maybe revisit your logo and say, oh, maybe I want a mark to add to it.
Yong-Soo Chung [00:10:39]
I must point out here that Nate has a brilliant logomark of his own which you can see on his website kadlac.com - which is a neat little combination of text and visual design.
Nate Kadlac [00:10:51]
That came from my drawing exercises. And so what I wanted to do was create sort of a watermark for my illustrations. And I wanted something that just took up a small amount of space. It looked really neat because it's six letters. You could do three on top and three on bottom. And a box around it just kind of like gives it a boundary.
Yong-Soo Chung [00:11:10]
But, as Nate pointed out, he made this logo when he *needed*to watermark his illustrations. Or, as he describes it, when he 'bumped up against walls'...
Nate Kadlac [00:11:18]
As you go further in your journey, you might need more assets because you've bumped up against more walls. Maybe you started a YouTube channel. Maybe you have a new social media account and you need more assets. You need more things to make that system flexible. So it's really kind of, it's like a startup. You kind of bump against these boundaries and you're like, I need to do a little bit more when it didn't make sense early on.
Yong-Soo Chung [00:11:42]
Moral of the story? Start with a simple logo that is as simple as choosing a nice-looking font and type out your name. Then, as you grow in your creator journey, you can refine or enhance it with additional visual and graphic design as needed.
Next up, fonts!
Nate Kadlac [00:12:02]
I love this question. I love fonts. I can talk about this all day long
Yong-Soo Chung [00:12:06]
And, still to come, Nate's recommendations on how to choose colors, elements-n-motifs, and how to tweak your visual layout for an optimal viewing experience.
But first, a quick shoutout to my new sponsor, who also happens to be an old sponsor Riverside.
All right, listen up creators. You know that I'm super picky about which sponsors I work with. Well, I'm super happy to have Riverside as our sponsor for this episode. Why? Because I love using Riverside to record all my guest interviews on this show. Yup, that's right. My producer and I use Riverside as part of our podcast production process.
My favorite part about Riverside is how seamless the recording process is whenever I record an episode with a guest. Riverside records everything locally so the audio quality is the best that it can be. Plus, it even records backup audio just in case something happens, which has come in pretty handy in the past.
But hold on. We don't just use Riverside for recording. We use it to analyze transcripts within the video recordings to pull out the best parts of my conversations with guests. They even added AI to make it even easier for you to create even more high quality content.
Riverside is completely free to sign-up and get started for your first 2 hours. Then, use code "FIRSTCLASS" to get 20% off any paid plan. Trust me, you'll love using Riverside as much as I do. Just look for the link in the show notes and don't forget to use code "FIRSTCLASS" to save some extra cash.
Huge thanks to Riverside for sponsoring this episode!
And now, let's get back to our episode with Nate Kadlac.
On today's episode we are discussing the key design decisions around the next set of elements crucial to building a website that elevates your personal brand.
Before the break, we discussed logos. Next up, is fonts!
Yong-Soo Chung [00:14:20]
Fonts are, in my opinion, the most difficult design decision when it comes to building your personal brand. Because there are *so* many fonts, that you immediately run into the problem of analysis paralysis right from the get-go...
Nate Kadlac [00:14:32]
Being a designer, being a creative person requires a little bit of trust in your, like what looks good to you, right? Like not what looks good to everybody else, not what's been done before, but like really what, why did you choose the desk that you chose? Like why did you make some of these decisions in your life? And you need to kind of trust that instinct a little bit. And that's scary for a lot of people.
Yong-Soo Chung [00:14:55]
And the only way to overcome this fear is to bite the bullet. That is, make a choice. Choose a font.
Nate Kadlac [00:15:02]
So the first thing I would say is having the confidence to be okay with making a choice that feels weird, feels a little strange to just go and select a font.
Yong-Soo Chung [00:15:12]
In fact, you can combine this with the task of creating a logo for your brand and choose a font that might look good as a logomark for your personal brand.
Nate Kadlac [00:15:20]
I usually do this by going to a free site, fonts.google.com. And normally what I would do is just type in my name in the hint text. So it gives you a preview of the font in your name. And our favorite words are in our name. So type your name out. And then enlarge the font size to like 60 pixels.
Yong-Soo Chung [00:15:42]
Enlarging the font allows you to inspect the finer details of the font. Or what Nate refers to as the 'personality' of the font.
Nate Kadlac [00:15:50]
designers have created these things from scratch, like they have personality to them. It's really hard to see the personality in a font when you're looking at it at 12 pixels. So you really wanna zoom in large. It's like getting on your hands and knees and looking at it up really close. Then you get to see all of the little details, you know? In the letter K, for instance, you know, like I tend to look at that letter because it's designed differently by every designer and there's certain, like the serif might flare out in a certain way. Maybe there's a curve or maybe it's angular, whatever appeals to you. You can start to see those details and make a decision based on that.
Yong-Soo Chung [00:16:29]
Once you have shortlisted a few fonts with good 'personalities', the next step is to evaluate their 'families'...
Nate Kadlac [00:16:36]
So making sure a font has six styles. There's a bunch of different ways to say that, but what that really means is it has a regular and italicized, a bold, maybe a heavyweight, or an extra bold, or maybe a medium weight. And so having one that has flexibility means that you don't need to make a bunch of font decisions. The designer already made those, so they will all work well together. So if you have six or more, it's really easy to just choose one font and be done. You don't have to use anything else.
Yong-Soo Chung [00:17:08]
But what if the font that really catches your fancy doesn't have six styles? In this case, you can choose a font-pairing BUT make sure that the two fonts DON'T look similar to each other!
Nate Kadlac [00:17:19]
So for instance, Ariel and Helvetica are both sans serif fonts, but they look kind of similar, but if you were to use them both side by side, it feels off. You don't want that. You want actually to choose high contrast pairings. So you might choose a serif font for the title, you might choose a sans serif font.
Yong-Soo Chung [00:17:40]
Serifs are little flourishes at the edges of the letter, see the Times New Roman font, for example. Sans Serif fonts like Arial and Helvetica don't have such flourishes.
Nate Kadlac [00:17:52]
serif fonts have been around a lot longer. Serif fonts were first basically meant to mimic handwritten fonts. Like if we were to take a brush and try to draw a letter, it would probably have those little serifs on it and it looks humanist. That's why they're called humanist fonts. And so there's tradition baked into serif fonts. They look older. They look traditional. They look historical. You know, you go to, you know, you go to Greece and you see huge, you know, monuments with these serif fonts on it. So they initially have that feeling or that vibe of tradition. Modern Sans Serif fonts were essentially, you know, today they're computer-generated, like they're geometric, they're kind of perfectly crafted, they don't have those serifs on them. And so they look more modern because they are more modern, right?
Yong-Soo Chung [00:18:45]
In case you are wondering, no, there are no 'rules' on when to use serif and when to use sans serif fonts. So you can actually choose a serif font for your header but use a sans serif font for the body text.
Nate Kadlac [00:18:58]
You can choose a different font for your logo or your name that you want to design something around. They don't have to be the same. I think it's really about what appeals to you, what speaks to you. It's just one thing to kind of know about these things that people will feel a certain way, not that you need to make a choice based on what people feel, I don't believe that, but it kind of helps you make a decision saying, you know, a futurist or a modern thinker. Do I love computer or do I love history? Do I love books? You might make a decision based on those types of your personality and then go and pick a font for that.
Yong-Soo Chung [00:19:36]
In fact, at one point, Nate might have even *advocated* for choosing a serif and sans-serif font-pairing.
Nate Kadlac [00:19:43]
the reason why those work well together is because there's high contrast. It creates visual intrigue, visual contrast between those two, and that creates interest and curiosity and emotion. Find fonts that look a little bit different from one another.
Yong-Soo Chung [00:19:58]
Just remember to (pause) choose a font that works well at large sizes AND small sizes…
Nate Kadlac [00:20:05]
if you go to your computer or your, or like a fonts.google.com, you can probably find something that works in both cases.
Yong-Soo Chung [00:20:13]
AND choose a font that's not hand-written for body-text
Nate Kadlac [00:20:17]
They break down when they're small, right? So like, just don't do it. Just don't use it for small things. Pick a nice serif or sans serif font that is not handwritten for body text. Make sure it's clear and legible
Yong-Soo Chung [00:20:30]
Basically, don't choose Comic Sans or Papyrus.
Nate Kadlac [00:20:33]
It's not even that comic, Comic Sans is like, not even a bad font necessarily. What makes it so hilarious and meme-like is that people use it in like every case where they need something of, to resemble a culture outside of their own, right?> It's a fun font, and I would recommend if you want a handwritten font, just go to fonts.google.com. Again, look for a handwritten font with six plus styles, and you'll find something that works pretty well. And so, yeah, just avoid Comic Sans altogether.
Yong-Soo Chung [00:21:10]
Alright, summing up all of Nate's advice about fonts, the moral of the story is…
Nate Kadlac [00:21:15]
pick one with a six plus families or six plus weights and find one that's flexible that you can use in a lot of places
Yong-Soo Chung [00:21:22]
...and avoid handwritten fonts - especially Comic Sans and Papyrus - for body text!
There is also the matter of ensuring the right amount of padding and spacing once you have chosen a font. But, we'll look at that in more detail when we talk about the principles of visual layout.
Right now, let's move on to the next topic (pause) Color.
When designing anything, you are quite likely to have a color you like to use more than the other. It could be your favorite color. Or it could be a feeling that a particular color 'works well' for the message you are trying to convey.
Nate, however, has a completely different take on choosing a color for your personal brand.
Nate Kadlac [00:21:58]
what I love to do is start with a photo and you can find a photo that you love from your childhood. Doesn't have to be your own, but you could find any photo. Think of a photo, something might appear and go find it. And then look at that and think about why you like it. There's probably a color in there. There's probably, if you squint your eyes and blur it out, there's probably something that appeals to you from a design standpoint. And so you can simply just choose a color from a photo that you love. And that already makes it personal. And there's that connective tissue between something I love and something I wanna share with others. And so instead of randomly picking something, just pick something personal.
Yong-Soo Chung [00:22:40]
Incredible! I'm already thinking of a photo and a specific color from that photo. And, yeah, I can already sense that this color will work really well for my personal brand.
Nate Kadlac [00:22:49]
So I recommend picking one color at least for a primary color, and then picking an accent color, which is a higher contrast color. So let's say I pick blue for one color, and then I might choose yellow or orange or something for an action color. And now I have two. One I'm going to use more of, one I'm going to use less of, but I have a start to something.
Yong-Soo Chung [00:23:13]
Choosing an accent color sounds daunting but it's actually quite simple, Nate says. Just make sure that the two colors are not BOTH high-contrast - like blue and yellow, for example.
Nate Kadlac [00:23:22]
So the one thing that really makes colors not work well together are when you choose two kind of high contrast colors.
Yong-Soo Chung [00:23:32]
That said, there are ways to make blue and yellow work in combination, if you really, REALLY want to...
Nate Kadlac [00:23:38]
The cool thing about colors is you can pick one color and there's millions of options within that hue, that color. So if you were to go to a design tool like Figma or Canva or on your desktop, like just open a color wheel. pick a blue or pick a purple or something, and then you'll see all of these variations. There's saturated variations, there's desaturated variations. And so what you wanna do is kind of tone down one of these colors. And so I may take that blue that in our minds are like the sky, we might desaturate it a little bit and make it a little darker. So it kind of like tones it down a little bit, makes it a little bit easier to look at. And by doing that, it's gonna make it work much better with another hot color like yellow.
Yong-Soo Chung [00:24:24]
I mean both IKEA and Best Buy have made it work, when you think about it. But, if you ask me, I'd recommend looking up color palette creators on the internet. Like coolors.co, for example. That’s c-o-o-l-o-r-s dot c-o. Just give it a photograph, or a primary color and it will generate a seemingly infinite number of color palettes for you!
And if you are worried about whether your choice of color fits in well with the whole psychology of color, well, there's good news for you.
Nate Kadlac [00:24:52]
We don't need to worry about color psychology. There's just a lot there that I don't think matters. <But those things really need to be immersive. We go to a restaurant, you might see a lot of reds and yellows, you know? And they're meant to increase our appetite, you know, make us hungry. And so, but we need to be, we're not immersing people with our websites, you know, it's not like we're putting you in a whole experience that surrounds us with sight and sound and hitting us with all these five senses, we're just building websites, so don't play into the color psychology.
Yong-Soo Chung [00:25:29]
However, there IS something that Nate DOES want you to worry about…
Nate Kadlac [00:25:33]
I tend to advocate for not using white or black, like pure white or pure black. I think those are default color choices that a lot of templates use, and you just kind of use them because they're there. And then you might say, well, I'm okay with it. I'm like, I'm a minimalist, you know? Like, I'm okay with this. But I think minimalism is sort of like the least offensive choice, and that's why people make that.
Yong-Soo Chung [00:25:58]
.and I'll explain shortly what Nate recommends instead of pure white or pure black. But, before we do that I want to give a very loud shout out to one of my favorite animals on the planet- who also happens to be the proud sponsor of this podcast Humphrey!
Humphrey is an adorable French bulldog. And guess what? He has quite a following on social media. Over a 150,000 followers if you're counting across Instagram and TikTok @spotted byhumphrey.
Every time we post Humphrey in a new harness or with a new dog toy, people keep asking us.
Hey! Where can I buy that? So what did my wife and I do? We decided to launch a dog boutique named after him called Spotted By Humphrey.
Spotted by Humphrey is a destination for all your furbabies needs. Treats, Leashes, dog toys, and even an award winning dog poop bag holder called Poopsie Daisy, which my wife designed all on her own.
Oh. So Check out Humphrey's shop at spottedbyhumphrey.com and use code FIRSTCLASS15 for 15% off your next order. That's spottedbyhumphrey.com. I'll leave a link in the show notes.
Okay, let's get back to our episode on designing your personal brand website with Nate Kadlac.
Before the break, Nate mentioned why he advised against using pure white or pure black in your color palette.
Okay, let's get back to our episode on designing your personal brand website with Nate Kadlac.
Before the break, Nate mentioned why he advised against using pure white or pure black in your color palette.
Nate Kadlac [00:27:51]
My opinions on pure black are usually based on the idea that people don't change the defaults, right? So if it's an intentional decision, fine, roll with it. But here's the thing. Brands like Gucci, brands like Prada use pure white and pure black because it oozes luxury.
Yong-Soo Chung [00:28:08]
And he especially advises against using pure black or pure white colors in your palette.
Nate Kadlac [00:28:14]
A designer's secret is that most of us never use pure black or pure white. If you think of the spectrum, if white is on one side and black is on the other, we actually just pull them in. Pull them a little bit here. And that just reduces the contrast slightly. Our eyes read better. just slightly off that black end is a little bit more readable because it's not high contrast.High contrast tires our eyes out, and we wanna use it for design to kind of like grab attention and pull you in like Prada and Gucci do, but we also wanna be mindful of people sitting and reading our content for a long time. And if they get tired doing that, that's gonna reflect badly on us
Yong-Soo Chung [00:29:04]
So if you have a background of your website, instead of using the white, take that blue, for example, our primary color, choose a very subtle variant of that blue, like a very desaturated, like in a color wheel, like you drag it to the top left corner, and it's almost white, but not quite white. There's a slight blue tint to that. Make the background that really light blue instead of pure white. It all of a sudden just kind of gives you a new feeling and it separates you from everybody else.
Nate Kadlac [00:29:35]
Okay, to sum up Nate's advice on designing a color palette for your personal brand...
- Choose a photo or image that means something to you. Your primary color is a color that stands out in this photo or image
- Choose a secondary or accent color that pairs up well with your primary color.
AND
- Don't choose pure black or pure white in your color palette. Instead, choose slightly off-white or off-black colors to infuse your personality into the palette.
You can also enhance your design by adding in additional elements...
Yong-Soo Chung [00:30:07]
Yeah, so elements, you're speaking about icons, motifs. What else? Okay. Yeah, these are little things that can really add a layer of personality to a site. I think in the beginning, it's probably less important, but there's a couple of things that I think really quickly separate one website from another.
Nate Kadlac [00:30:30]
And you don't need to go looking for these elements. Quite often, you can find them in stuff you've already chosen.
Yong-Soo Chung [00:30:35]
bullet points, for example. If you created a little custom bullet point icon that used, you know, that carry through it in all of your lists, that's an easy way to kind of like bring a little bit of soul into your site, bring a little bit of extra. And a simple way to do this would be to download your favorite font to your computer. You can open it up in Figma or a design tool, and you can actually just either redraw parts of the font. So like you could go to the letter I, and maybe the I is slightly, you know, it's not a perfect circle, it might be a little bit kind of peculiar, you could go grab a different icon from that set that's already designed and actually use that as your bullet point.
Nate Kadlac [00:31:18]
And not just bullet points, you can find a lot of different flourishes you can add to your personal brand, in this manner.
YoFor instance, I did a personal website for a writer, charliebleeker.com, and we grabbed sparkles from her font, little starburst sparkles for her bullet points. And it was something that was already created in the font family that we used. You can also dig into some of the weird shapes that might appeal to you. And so you could use those as background elements. So like that same sparkle that we used for Charlie's bullet points, we used the same sparkle in her logo. We use the same sparkle and blurred it out in the background of our website. And we just reused it a few different ways. And so it's something to, you're just kind of like, stealing design work that's already been done, right? And there's a lot of that in fonts. Fonts have all the letters, but then what you don't normally see is it has all those like ligatures and characters that have icons built into them. So I would go there first.
Yong-Soo Chung [00:32:22]
And, finally, the last piece that completes the puzzle that is your personal brand website is... the visual layout. That is, how your website is structured visually.
Nate Kadlac [00:32:32]
I usually think about what someone looks at first on a website. And we most commonly there's kind of this, it's called a Z-pattern. And so people tend to look at the top left corner of a site first. And that's why a logo is always placed in the top left. It's the first thing people usually see. And so having your name up there in a clear way kind of just gives people trust that they're in the right spot.
Yong-Soo Chung [00:32:54]
Visual layout best practice number 1: Have your name on the top-left corner of your website.
Nate Kadlac [00:33:00]
And so then our eye kind of goes across to the right side. So that's why the navigation is usually in the top center or the top right. And it's, it's good to kind of like know that those will be seen and looked at.
Yong-Soo Chung [00:33:13]
Visual layout best practice number 2: Navigation in the center or the top-right corner.
Nate Kadlac [00:31:20]
And then her eye kind of scans down across the page diagonally, and then it goes back to the right. And so almost it's just a, it's just a human behavior. So you have your logo and your nav at the top. I think having it exposed and just really clear, try not to get too cute with naming things, naming pages. Just be really clear about it.
Yong-Soo Chung [00:33:41]
Visual layout best practice number 3: Keep your naming scheme clear and unambiguous.
Nate Kadlac [00:33:46]
I think people tend to treat this like my bedroom example where they try to be really creative and put things all over the place. Really what the basics would be keeping your line length between like 11 and 15 words per line. It makes it really simple.
Yong-Soo Chung [00:34:05]
And if you are wondering why Nate specifically mentioned '11 to 15 words per line', it is because most books use that metric.
Nate Kadlac [00:34:13]
I use a book as like a great metaphor for great design. So think of a book. A book has a cover that's usually art directed, kind of showcases the personality of the book. You flip it open, you have a table of contents, which is kind of like your navigation. And so it's clear, like you can jump to any part of the book. We'll trust that it's the right page. And then you have the content, which is almost every book is the same, right? It uses just a similar layout. And the words per line are about 11 to 15, roughly.
Yong-Soo Chung [00:34:44]
The '11 to 15 words per line' measure is also important because it is considerate of the people visiting and reading your website.
Nate Kadlac [00:34:51]
Imagine going to a website where the line of the words extends from side to side, and it's so difficult to read, we get so tired immediately. That tiredness, that kind of feeling is sort of bad equity that's transported to the person's website or the person themselves. And so when we feel tired on their website, it makes us feel tired about that person.
Yong-Soo Chung [00:35:15]
That's also why ensuring good legibility and readability on your website is important, Nate says.
Nate Kadlac [00:35:20]
...a great experience on a website can translate to a higher or like a genuine appreciation for that person, right? They made me feel good.
Yong-Soo Chung [00:32:13]
And, one simple way to improve legibility on your website is to adjust the spacing around your text. Specifically,
Nate Kadlac [00:35:38]
line height, so the letting is 120 to 150%. And font size 16 pixels or more. I tend, even on the web for personal websites, I tend to use a minimum of 16 pixels for a font, which works well on desktop and mobile. And so keeping in mind, just make things a little bit bigger, add a little padding around things. If you really want to get into the nitty gritty, you can use a leading weight or like leading spacing, which is the space between lines of text of about 120 to 150%. And most computers will default to like around 120, but I think you can always increase it a little bit more, which will help us read your content more.
Yong-Soo Chung [00:36:20]
In other words...
Nate Kadlac [00:36:21]
layout is really all about spacing. We want more spacing than you think. I think about when I've worked a lot with developers and when you're creating an app or creating something, there's usually a tendency to just pack things in. You know, just, oh, we have space, let's just pack everything in. But as humans, as we read and kind of uncover information and try to like think about what this means or the idea behind something. We need space. Our brain needs space to think. Our eyes need space to read. And so increasing spacing around like an image or anything else really is just fundamental to great design.
Yong-Soo Chung [00:37:03]
Visual layout best practice number 4: do not hesitate to make liberal use of the space around your text.
So, there you have it! By combining Nate's excellent advice on logos, fonts, colors, and visual layout best practices you can design a personal brand website for yourself that will connect with your audience and leave a lasting impression on them.
The only question that remains now is *how* do you actually bring all of these elements together?
Well, the answer is (pause) the G.E.O.S. framework.
Nate Kadlac [00:37:37]
if we just treat each page as a, as it has a goal attached to it, then what I have is just a basic framework for, for remembering for myself, but it's called GEOS.
Yong-Soo Chung [00:37:52]
The G.E.O.S. framework, Nate says, offers a simple way to scaffold your personal website.
Each letter of GEOS in the GEOS framework stands for a specific intent - G for Giving, E for Establishing, O for Offer, and S for Spreading your ideas.
And you can hear about the G.E.O.S. framework in detail, in a special bonus segment of this episode, available exclusively to premium members of the First Class Founders community. You will also hear Nate describe several examples of personal brand websites where you can see the G.E.O.S. framework in action.
In fact, premium members also enjoy a ton of other perks - such as access to a private feed, AD-FREE episodes that are released a WEEK early!
So, yeah, join the First-Class Founders membership today - go to firstclassfounders.com/join. Look for a link in the show notes!
Yong-Soo Chung [00:38:40]
Finally, above all, make sure that the website you design for your personal brand follows one cardinal rule - it should be 'clear over clever'.
Nate Kadlac [00:38:53]
I do think the old adage of being clear over clever is really important here. We can express our personality. We can share the things that make us unique in a clever way through design and the colors we choose and a lot of different ways. But I think we need to be really clear in our copy, our writing, and how we can help that audience.
Yong-Soo Chung [00:39:17]
Because your personal brand website is a gateway for your customers and followers to enter your world...
Nate Kadlac [00:39:22]
having a personal website, I think is really important because it gives you a place for people to seek you out, for you to share your ideas and advance your career, whether it's a creator career or whether it's, you know, a career in your field. So I think constantly publish, create a newsletter, have a website. These are fundamental things that I think everybody should be doing before you feel like it's too late.
Yong-Soo Chung [00:39:47]
You can reach out and connect with Nate on his personal website kadlac.com
Nate Kadlac [00:39:50]
kadlac.com. It's K A D L A C my, I founded approachabledesign.co, which is a place to help creators and entrepreneurs make better design decisions and you can join my newsletter there and on X it's just my last name again, K A D L A C.
Yong-Soo Chung [00:40:09]
And if you do end up implementing Nate's advice for your own personal brand website, do share it with both Nate and me - I'm @yongsoochung on X. Who knows, Nate might end up giving you and your website a shoutout as an example in one of his future interviews!
If you enjoyed this episode with Nate Kadlac, then I urge you to check out episode number 49 titled, "Don't Make The Same Mistakes I Did — What I Wish I Knew About Content Creation and Personal Branding." In this episode, I discuss SIX mistakes I made in my journey as a content creator. Mistake number 5 was not having a personal brand despite having a near eight-figure business! If I had spoken to Nate BEFORE I started this journey, I certainly wouldn't have made this mistake for sure!
In any case, that's it for today's episode!
My name is Yong-Soo Chung and I'll see you on the next episode of First Class Founders!
