How to Build World Class Websites

If you want to build world class websites, the good news is you don’t need a design degree or years of experience to get there. There are six specific techniques that can take any website from boring to brilliant. You can start applying them today, on any project you’re currently working on.

These aren’t just are best practices. They’re tips that I’ve developed over a lot of years building a website. Things that I’ve found work well for me. They’re practical techniques that change how people feel when they land on a page. And when a website makes people feel something, it gets remembered. Let’s get into it.

If you want to watch a video where I show you how to implement everything practically…check this out.

---

Tip 1: Fix Your Typography First (This Is the Fastest Win)

If you’re trying to build world class websites, typography is the fastest place to start. You’ve probably heard the advice “only use one font.” Honestly? That’s fine advice, but it’s level one. There are two more levels that actually separate average websites from ones that stop people mid-scroll.

Level 1: One font across the whole site. Clean and safe.

Level 2: Super Families. These are large font families that include both serif and sans-serif variations all built to work together seamlessly. Think of it as a font combo built-in. A great example is the Source family on Google Fonts.

Level 3: This is where things get interesting. Pairing fonts from completely different foundries that somehow mesh like they were made for each other. This is the level that’s responsible for the typography you see on world class websites.

How to Find Great Font Pairings

The trick here is something called an anchor font. Most people say to anchor everything around your body font the small readable stuff. But here’s the thing: I do the opposite. I start with the headline font first.

Why? Because your headline is the first thing people actually see. It sets the personality of the entire page. Is it modern? Technical? Warm and approachable? Your anchor font answers that question before a user reads a single word. Once that’s locked in, everything else just needs to support it.

The rule of thumb: every font you add after your anchor should feel like it comes from the same world, but adds enough contrast to stay visually interesting. Don’t pair fonts that are basically twins (Georgia and Times New Roman we see you). The goal is contrast that creates visual energy without making the page feel chaotic.

A tool that makes this dramatically easier is Fonts In Use. You type in your anchor font and see what other real designers have paired with it. It’s one of the most underrated resources out there, and it’s completely free.

---

Tip 2: Every World Class Website Has a “Star of the Show”

Here’s a pattern you’ll notice if you start paying close attention to world class websites: there’s always one element that grabs your attention the second the page loads. That’s what I call the star of the show.

It could be a bold typographic treatment, a jaw-dropping image, a subtle animation, a really cool gradient doesn’t matter. What matters is that it makes the visitor feel something. Because if a website doesn’t make you feel something, you won’t remember it. And if you won’t remember it, neither will your client’s customers.

But here’s where a lot of designers go wrong: they pick a star just because it looks cool. That’s a trap.

The best stars are connected to the actual story of the website. I love how Brandon Sanderson the fantasy author talks about starting a book with a single “what if” question. Everything else grows out of that seed. Your star works the same way. Pick one visual element that’s rooted in what the business actually does, and let everything grow from that.

For example: if you’re designing a site for a SaaS product that helps businesses manage complex data through dashboards and charts, what if your star was a visual that abstractly referenced that chart? You’re not slapping a chart on the homepage you’re using the idea of a chart to inspire an image that’s both visually striking and brand-relevant.

A great place to find abstract, high-quality imagery to use as a starting point is Unsplash. It’s free and the quality is genuinely excellent.

---

Tip 3: Visual Rhyming – The Secret Weapon of World Class Websites

Once you’ve got your star, the next move is one of the most powerful (and most overlooked) techniques in web design: visual rhyming.

Visual rhyming is when you take components of a strong visual element your star and echo them throughout the rest of the site in different ways. Not copy-pasting the same thing everywhere. More like taking the “DNA” of that element and letting it show up in other places.

It could be shapes. If your logo has curved forms, those same curves might show up in button overlays, icon details, and decorative elements across the page. It could be colors a gradient from your hero showing up more subtly in card backgrounds further down the page. It could even be a texture or a motif.

When done well, visual rhyming makes a website feel cohesive without being repetitive. It’s the kind of thing users don’t consciously notice they just feel like the site makes sense. Like it was built with intention. And that feeling is a huge part of what separates world class websites from sites that just look fine.

The websites that make you simultaneously inspired and wanting to quit as a designer? Heavy visual rhyming. Go look at any site that’s won a Webby Award or that you’ve bookmarked for inspiration odds are the visual rhyming is doing a ton of work.

---

Tip 4: Use Depth to Make Your World Class Website Feel Real

One of the biggest shifts in modern web design is the move toward making sites feel tangible. Like you’re walking into them rather than just scrolling through a flat document. That’s what depth does it bridges the gap between the screen and the real world.

Depth can show up as:

• Subtle textures on backgrounds (grain, noise, fabric)
• 3D elements that feel like you could almost reach out and touch them
• Glassmorphism on cards and UI elements
• Layered shadows that give elements a sense of elevation

The critical thing to remember: depth should always be subtle. It’s not the star. It’s the supporting cast. Think of it like real-world details that are just… there. You notice them if you look, but they’re not asking for your attention.

If you’re working in Figma, there’s a great plugin called Noise & Texture that lets you add grain and noise effects directly inside Figma without jumping over to Photoshop. It’s a huge time saver.

When you layer texture on your star of the show, then echo that glassy or textured feel in your navigation and cards, suddenly the whole page feels less like a webpage and more like an experience. That’s the energy world class websites are going for.

---

Tip 5: Steal This Trick from Google’s Material Design

This one is more subtle than the others, but it might make the biggest impact on how intentional your designs feel. And it’s something most designers completely skip over.

When I was deep in the rabbit hole of reading design systems, I came across Google’s Material Design 3 guidelines. And there was this detail that stuck with me: they have variants for all their main colors. High-emphasis text (the important stuff) is full color. Medium-emphasis text adds a bit of shade or opacity to that color.

At first glance that sounds like a tiny detail. But the effect on a page is significant. Your eye immediately knows what to read first, what you can skim, and what’s just there for reference. It creates hierarchy without needing to change font sizes or weights for every single piece of text.

Here’s how to apply it:

• Your headline: 100% opacity. This is the star of your text hierarchy. Full attention.
• Subheadings and supporting copy: 70–80% opacity. Still readable, but visually communicates a step down in importance.
• Fine print, captions, metadata: 50–60% opacity. There if you need it, invisible if you don’t.

The before and after on this is almost jarring. A page where everything is at 100% opacity feels flat and undifferentiated. Add a few levels of opacity and suddenly the page feels like it was designed by someone who actually knows what they’re doing. It’s subtle, it’s intentional, and it’s one of the fastest ways to close the gap between your work and the world class websites you’re trying to match.

---

Tip 6: The Iteration Method That Separates Good Designers from World Class Website Builders

This last tip isn’t really a visual technique. It’s more of a process shift. But it might be the most important one on this whole list.

When I was producing music, I learned about something the best producers do when they’re trying to unlock the best version of a song. They have the artist speed it way up. Then slow it way down. Sing it an octave up, then an octave down. Change the key entirely. The point isn’t to use those versions the point is to break the musician out of their original thinking so they can find something better.

Web design works exactly the same way.

Your first design direction is almost never your best one. Not because it’s bad it might be totally fine. But “fine” isn’t what we’re after when we’re trying to build world class websites. We’re after something that makes someone stop scrolling and go “wait, what is this?”

So here’s the practice: once you’ve got your first direction, try something completely different. If you went dark, try light. If you went minimal, try bold. Try a completely different star of the show. Change the layout. Explore a different font personality.

One of the example websites that inspired this post had 12 different versions of the star before landing on the right one. Version one would have been perfectly acceptable. But version 12 was something else entirely. And you only get to version 12 if you’re willing to blow up version one and start over.

Michelangelo supposedly said that the sculpture was already inside the marble he just had to remove everything that wasn’t it. That’s what iteration does for web design. You chip away until the best version emerges.

---

Putting It All Together: A Framework for World Class Websites

Let’s zoom out and look at how these six techniques actually interact with each other, because they don’t work in isolation they build on each other.

You start with typography specifically your anchor font because that sets the personality of everything. The anchor font tells you what kind of energy the site has before a single image or color is added.

From there, you build your star of the show the one visual element that’s rooted in the brand story and designed to stop people mid-scroll.

Then you use visual rhyming to extend the energy of that star throughout the rest of the page, so the whole thing feels cohesive.

You layer in depth subtle textures, glassmorphism, shadows to make the site feel real and tactile instead of flat.

You apply opacity-based hierarchy to your text so the page guides the reader’s eye without them even noticing.

And then you iterate not just refining the first version, but actually trying something completely different until you’ve carved out the best version of the design.

That’s the framework. And when you run through all six steps, the result is a website that not only converts but one that people actually remember. One that makes them feel something. That’s the bar for world class websites.

---

The Real Gap Between Good and World Class Websites

Here’s something worth sitting with: these six techniques aren’t secret. A lot of designers know about font pairing and visual hierarchy and depth. So why don’t more websites look like the ones that inspire you?

A few reasons:

Speed. Most designers go with their first idea because there’s a deadline. The ones who build world class websites are willing to explore.

Intentionality. Random design choices even good-looking ones don’t add up to a cohesive whole. The techniques above force you to make connected, intentional decisions.

The “simple is better” trap. There’s a version of “keep it simple” that leads to bland, forgettable websites. A site can absolutely be simple and still have a star of the show, still have visual rhyming, still have depth. Simple doesn’t mean boring.

A website is often the first and only interaction someone has with a business. If it doesn’t make them feel anything, they won’t remember it and they won’t come back. That’s a huge missed opportunity for your clients.

---

Start Building World Class Websites Today

The gap between the websites you’re building now and world class websites is smaller than you think. You don’t need new tools. You don’t need a bigger budget. You need these six techniques and the willingness to keep going past your first idea.

Start with typography. Lock in your anchor font, find a great pairing using Fonts In Use, and see how quickly the personality of a page clicks into place. Then find your star. Build your visual rhyme. Add depth. Tune your opacity levels. And when you think you’re done, try something completely different just to see what happens.

The designers building world class websites aren’t working with magic. They’re working with intention. Now you have the same playbook.