[105] Good Design Advice That Makes Bad Websites
-
This transcript was generated by Descript AI and may contain errors.
[00:00:00] I have heard some terrible website design advice over the years. I've also heard some pretty good advice too, for general design, that doesn't translate to a website, and that's what I wanna talk about in this episode. Just because there's some great advice out there when it comes to design that you'll hear from clients, from well-respected designers, from other sources of information that you truly trust, not every piece of design advice can translate to a solid rule that should be followed for your website.
[00:00:30] Honestly, breaking some of these rules is how we create some of the best content out there on the internet. So that's what I'm covering in this episode today. I'm Becca from Inside the Square. This is Think Inside the Square, episode 105, where I'm talking about good design advice that makes for a terrible website.
[00:00:48] For a transcript of this episode, along with the links to any resources that I'll mention, visit insidethesquare.co/podcast. I also want to mention the term Squarespace is a trademark of Squarespace Incorporated. This content, it's not affiliated with Squarespace Incorporated. This is just my opinion, Becca from Inside the Square, as a Squarespace designer, and what I wanted to share with you.
[00:01:08] All right, so let's get into it. Good design advice that turns into terrible website design advice
[00:01:15] let's start with one of the classics. Everything important needs to be above the fold. Now, if you're unfamiliar with that phrase, the fold is the bottom of your screen before someone starts to scroll through the content of your website, and I understand where that advice is coming from. You want people to know immediately where they are, what this website is about, what you should do next.
[00:01:35] That is a good goal to have. But somewhere along the way, that became fit the entire business into the very first section of the screen. So now we'll have a headline and a subheadline and some paragraph text and a button, maybe two buttons, animated graphic, a little badge that says, "As seen in..." All of this fighting for attention in the first few thousand pixels.
[00:01:56] Then the client says, "Make the headline bigger." Fantastic. That's exactly what we wanna hear as a designer, right? Now here's where that good idea gets lost in the conversation. If someone gets all the information they need right there at the very beginning of the page, they're not gonna scroll. They're not intrigued enough to keep scrolling, to keep discovering, to learn even more, to dig deeper. We need to inspire and inform in that very first section, but what we really need to do is pique their interest.
[00:02:25] Scrolling is not a failure of design, it's a normal part of the internet. Now, that doesn't mean that you should hide the most important information, you know, at halfway down a 10,000 pixel homepage, okay? It just means the first section of your site has a very specific job: establish relevance, inspire, intrigue, give someone a reason to keep going.
[00:02:48] Sometimes it's just because they wanna read what's next. So when you're designing a hero section, instead of asking, "How much can I fit up here?" What you should be asking is, "What will get people inspired to explore more?" You might find yourself deleting quite a few things, and that's okay because I think this is a good design rule to break
[00:03:07] So let's move on to the second design rule that I think is a great rule to break, and this is the concept that people don't read anymore. We just scan for information. This is the design rule that says headlines should be short. Everything should have bullet points. Paragraphs are a design from 2008.
[00:03:25] That design principle, I don't think it applies to everything. But I wanna be super clear here, I am a self-professed scanner. If you send me an email with bullet points, I love it. I will rarely read an entire paragraph sitting in my inbox. But I definitely will read a paragraph if I'm going to invest a lot of money or time into something.
[00:03:45] So let's think about that. If you're building a website for someone who's selling socks, for example, you're not gonna need a 20,000-word essay about how awesome these socks are. I'll want a few bullet points to assure me that they're made out of good quality materials, they're made in a way that matches my...
[00:04:01] aligns with my values and my morals, and that they're not gonna fall off the second I start walking or wear them inside my boots. Okay? But if I'm going to be investing in a mastermind or asking you to invest more than $5,000 in a website design, chances are you're gonna wanna read something, okay?
[00:04:19] You're not gonna want bullet points. You probably will read a paragraph. Shocking, I know. So when we design around the assumption that nobody reads, we can end up removing the exact information that someone needs to make a decision. So I want you to think about that, and I don't think that people don't read, make scannable content should be the goal of any website design.
[00:04:41] You need to apply the context of what that website is there to do. Is it there to inspire, to inform, to get someone to make a purchase immediately, or to get someone to consider investing a hefty amount of money or time into something? That's going to change the length of the words on the page, the length of the content that you're presenting to someone.
[00:05:01] So that, my friend, is a good design rule that I very commonly break, especially for the bigger clients that I work with
[00:05:08] Now, I do wanna be clear here. Making content easy to scan is not just making content short. Headings are helpful. Short paragraphs are helpful. Clear labels are helpful. Bullet points are helpful. All of those contribute to the overall goal of a website
[00:05:24] But sometimes the most helpful thing that you can do is give someone a good explanation. Now, if I do have a client who gives me a gigantic paragraph of content that we need to put on the website, I'm talking 20 sentences all stuck together, I will absolutely use line breaks to separate that.
[00:05:41] I'll use pull quotes to give good attention to certain segments that people might catch while scanning, but I'm still gonna put all of that content on the website. That's where I take the principle rule of people don't read, we scan, and turn it into something that fits the context and the content that I'm designing around So if you're ever presented with a large amount of content from a client, first things first, make sure that the information is useful.
[00:06:06] And if all of the content they're giving you is deemed useful, then ask if you have organized it well. Because sometimes the problem isn't the amount of content, it's the way we designers present it
[00:06:19] all right, this next design principle that I wanna talk about is one that I really struggled to understand as a junior designer, and I've only in the last, oh gosh, like, 10 years or so really started to understand what this actually means.
[00:06:32] And the design concept is that everything needs to be consistent. But the issue here is I used to think that consistency meant repetition. Consistency can still mean variety. And here's what I mean. I might upset some designers with this hot take here, but stick with me here for just a minute, okay? So consistency, it is a good thing, but it can make a website very dull and very boring.
[00:06:57] I used to think that I needed to have two, maybe three layouts for pages on a website, and I would just repeat those over and over again to make a good design. That's not the case. We need consistency in typography, we need consistency in color scheme, consistency in image style, and consistency in the tone of voice of the content that's there on the website.
[00:07:18] But we don't need to repeat the same layouts over and over. I'm talking text left, image right, and then image right, text left. Wait, I said the same thing. Hang on. Text left, image right, then text right, image left, then text left, image right. You get what I'm trying to say here, right? Then for a wild card, we'll throw in three images with text on top in the middle.
[00:07:38] That is the kind of consistency that we don't need to have on a website because it's going to look so repetitive over time. That is some junior designer stuff that I used to create, and I think I lost the core, or didn't understand the core message here, okay? So consistency is about rhythm. It's about having sets of things that go together.
[00:08:00] The variety is where the design really matters. So again, typography, colors, image style, that's all fantastic. But image ratio? Mix it up. Layout concepts? You can absolutely change those. Find consistency in the core cohesive details to bring these creative layouts together. But you don't need to make every single page on a website follow the exact same formula.
[00:08:24] That is how you make a website that looks boring and outdated.
[00:08:28] So I'll say it one more time. Consistency is a good thing, but consistency is not repetition. And I think keep it consistent is a design principle or a rule that we should absolutely break.
[00:08:40] All right, the next design rule that I wanna talk about is make your call to action stand out. Okay, yes, it absolutely should. I'm completely on board with that, but I think a lot of people kinda take that advice a little too far. Someone hears that your button should stand out, so they make every button bright orange, and they decide every section needs a button, and they add one to the navigation, and then a floating button at the bottom of the screen, and then there's a pop-up, and then there's a button inside the pop-up, and now the website is shouting at you from every direction, and you don't know which one of those bright orange buttons to pick next.
[00:09:14] When everything is trying to grab your attention, nothing is. That is a visual hierarchy problem, but it's also a strategy problem because deciding what color a button should be, that's not nearly as important as deciding the main action for someone to take. Not every section on a website needs to ask for a commitment, needs to ask someone to take action to get to the next thing.
[00:09:38] Sometimes a text link can be enough if you've really gotta have it, but here's a little exercise that I like to do. Stick with me here
[00:09:44] Think about a page on your website right now and pretend that you can only have one, one call to action. What would it be and where would you put it? And what would someone need to know before clicking on it? Now, I'm not saying you're only allowed one button per page, but I'm saying that you need to force yourself to choose one main call to action to add that emphasis.
[00:10:07] That is an intentional decision. Now, yes, you can have additional content on the page, but you're not adding them just because you read some stat that says increased calls to conversion increases conversions. You're adding these additional buttons here, but you're not gonna design them to distract from the main call to action of the page.
[00:10:25] So next time you design something or think of something you've just designed, relate it to the main call to action, the main purpose of that page, and make sure that that part is what stands out and there aren't 20 competing things on this site distracting anyone from taking that individual action.
[00:10:42] Now, this next design principle, it's a personal pet peeve of mine, so I apologize if this accidentally turns into a mini rant. I'll try to make sure that it doesn't. But the guiding design principle that we have heard from a lot of different people in the web design community and design in general, is that a website should be interactive.
[00:11:00] There needs to be some kind of movement, animations, unexpected details, little things that'll make a website feel different and feel more welcoming and interactive to the person. I'm sure we have all visited a website where we start to scroll, and as we scroll down the page, headlines show up, and then a paragraph comes in, and then a button will fly in from the left, and an image will fade up and rotate.
[00:11:23] And all of these things start to happen so that by the time you reach the bottom of the page, you feel like you've caught 80,000 different objects. I cannot stand those kind of websites because you know what I'm doing? I'm focusing on what element's happening next, how the screen is moving, and I'm barely reading the content.
[00:11:41] I'm not understanding what I need to do next. Rather than focus on what the call to action should be or where I should be taking my adventure here, I'm just focused on everything that's happening on the screen. It's practically like watching a movie unfold as you scroll, rather than understanding what the content is.
[00:11:59] I think that there are way too many animations and unexpected details that distract from the content on the site. And as a designer, I generally advise my clients away from those. Loading animations are fun. Having little buttons that wiggle on a hover? Who doesn't love a good hover effect? But if I'm looking at a website that has 500 different things animating and moving, trying to get me to figure out what to click on, it stresses me out so much.
[00:12:26] Do you remember The Busy World of Richard Scarry? Now, if that's trademarked, which it probably is, please be aware, not associated or affiliated with the publisher, the author, any of that fun stuff. But I'm talking about that little intro where you go to Busytown and there's stuff happening all the time.
[00:12:41] Those kind of websites, I rarely will actually convert on those websites, even if they're offering, like, the coolest course I could find or the best ever jacket for living up here in the Pacific Northwest where I live. If I need a new winter jacket, I am absolutely not going to stay on a website that has 15 moving things before I've even clicked into something to see if the jacket is waterproof.
[00:13:04] Okay, that was a little bit of a tangent, and I apologize. But the truth is, I do think these interactions belong on a website. I do think that subtle animations can be an excellent addition. One of the designers that I work closely with is working on a blooming lotus Lottie File in the background of a website, which is a fantastic evolution for the brand that they're working on.
[00:13:25] But that is not an animation that's going to distract me from the call to action on the site. It's not going to stop me from reading the content. It's not that I have to wait for all this information to reveal as I'm scrolling down the page. That is a high-quality interaction. Not everything needs to move.
[00:13:42] Not everything needs an animation. These unexpected details don't have to add motion to a site. Those can end up distracting people, and I wanna make sure that people who visit the websites I design, they're not distracted. They're inspired to take the action that my client wants them to take
[00:13:58] All of these design rules that I used to follow as a junior designer, those rules can be broken, and they can be broken in a way that still makes a website really unique and really useful to the client who hired me to create it. So no more memorizing rules. Let's forget about that. We're gonna focus on making better decisions.
[00:14:18] I also wanna think about the core principle behind these rules, because I don't want us to completely dismiss the advice we've been given from people who've been designing a lot longer than we have, okay? A lot of these golden rules of design are founded around the main principle that we can still follow to this day.
[00:14:35] Our goal as website designers is to create something out there on the internet that inspires, that informs, and that is unique to our clients. That's the whole goal here of everything I do Inside the Square: help you make a website that's uniquely yours. I hope you enjoyed this episode. Thanks for hanging out with me this week.
[00:14:52] I'm Becca from Inside the Square. This is episode 105, and I've got some exciting things happening here with my own website and my own business, and I'll definitely be sharing them here on next week's episode, so please be sure to tune in. You can find a transcript at insidethesquare.co/podcast. And if you could do me a favor, wherever you happen to be listening to this episode, give it a like, give it a comment, share it with your friends.
[00:15:17] I'd love to have your support. Thank you so much for tuning in, and most importantly, have fun with your Squarespace website. Bye for now
Some design rules sound so sensible that we stop questioning them. Everything should be above the fold. People don't read websites. Keep everything consistent.
But what happens when following those rules makes a website harder to use?
In episode 105 of Think Inside the Square, we're looking at five common design principles that can lead to some pretty questionable websites when they're applied without context.
Everything doesn't belong above the fold
Your hero section has an important job, but that job isn't to explain the entire business before someone scrolls.
Trying to fit every headline, button, image, and selling point into the first section creates competition for attention.
Scrolling is a normal part of using the internet. A good first section gives people enough context to understand where they are and a reason to keep exploring.
Instead of asking how much information can fit above the fold, ask what someone needs to see to become interested in what's next.
Scannable doesn't mean short
People scan websites. That's true.
But that doesn't mean people never read.
Someone shopping for a pair of socks might only need a few essential details. Someone considering a major financial investment in a service may want much more information.
The context matters.
Good web design makes information easy to scan without removing details people need to make an informed decision. Clear headings, shorter paragraphs, and thoughtful content organization can make even longer pages approachable.
The goal isn't to use fewer words. It's to present useful information effectively.
Consistency isn't repetition
A consistent design system helps people understand and navigate a website.
Typography, color, image style, and tone of voice can create a recognizable identity across different pages.
But consistency doesn't mean every section needs the same layout.
Repeating the same two or three arrangements throughout a website can make the design feel predictable and uninspired.
Different content deserves different presentation. A strong statement might need a section of its own. Related information could work in a grid. An interesting story might deserve an oversized photograph.
Variety and consistency can work together.
Not every section needs a button
Calls to action should be easy to find, but more buttons don't automatically create a better website.
When every section contains a brightly colored button, and the navigation, popup, and floating elements all compete for attention, it becomes harder to understand which action matters.
A useful exercise is to imagine a page with just one prominent call to action.
Which action would you choose? Where would you put it? What would someone need to know before clicking?
That decision should guide the visual hierarchy of the page, even when additional links and buttons are appropriate.
A website doesn't need to be a miniature movie
Animations and custom interactions can make a website memorable.
They can also become exhausting.
When every headline, image, paragraph, and button moves as someone scrolls, the movement can compete with the content itself.
Thoughtful interactions can support a brand and enhance the experience. The distinction is whether they're helping visitors understand and use the website or simply adding another thing to watch.
Not everything needs to move.
Better decisions make better websites
Design principles exist for a reason, but they aren't universal instructions.
The right amount of content, the best layout, the most useful call to action, and the appropriate level of interaction all depend on the project.
Good designers understand the purpose behind the rules and know when a different decision makes more sense.
