Less-than-good website designs have more in common than you might think.

Every day, people come up to me in the street and ask me: “Marshall, what’s it like looking at the world through your eyes? Are you constantly judging the aesthetics and craftsmanship of every single piece of design that you encounter?” To which, my answer is always twofold: “Please don’t bother me while I’m trying to eat my lunch on this restaurant patio,” and “Unfortunately, yes.” But here’s the thing: We all make those judgments, all the time. Maybe not consciously, and maybe not for more than a split-second before moving on, but qualitative assessments of designed objects (be they tangible or intangible “objects”) is a basic human trait. Some things we decide are “good,” and some things, hoo boy, do we ever decide some things are “bad.” And bad design is like non-constitutionally protected obscenity — it might be difficult to define, but “we know it when we see it.” You probably don’t need me to tell you that this applies to web design just as much as anything else, if not more. When you’re looking at a poorly designed website, you’re acutely aware of it being poorly designed, even if it’s difficult to pinpoint exactly how. But what makes web design somewhat unique is how often poorly designed websites are poorly designed in almost exactly the same ways. So many “problem” website designs could easily become less problematic if they just fixed a handful of simple (and almost fascinatingly ubiquitous) web design mistakes. “Well, if these issues are that common, why don’t you just tell me what they are?” I hear you ask, as I sit here at this outdoor table with a mouth full of burrito. Well fine, let’s get started… (Note: I’ve written this article from a starting assumption that the reader is already aware of the more basic best practices, such as having a consistent navigation menu, designing for responsive, not using background music, etc. Also: Some of these points won’t be about “bad” decisions, necessarily, just the absence of “good” decisions. Okay, enough caveats, on to the content.)

1. Create more negative space. Now create even more.

We’ll start off with what is far and away the most common web design blunder I come across: a page that needs a whole lot more “nothing.” When this happens, it tends to come in two distinct flavors:

Elements without enough room to be distinct from one another:

On the Internet, content is king. This axiom, combined with the way that many HTML and CSS elements default to leaving no empty space at all, can often lead to unintentionally overcrowding the page, not to mention complete confusion as to which areas of your site are which. Negative space has to be a primary concern from the beginning of your website’s design. Also, don’t be afraid to take advantage of the web’s pretty-much-infinite vertical capacity. With good navigation links up top, it’s okay to let some things be secondary and “below the fold.”

Elements made larger, instead of more isolated, to attract attention:

This tends to happen with headlines especially; you’ve got something you want noticed, so you just make it bigger, because bigger is better, right? Not necessarily. Inappropriately sized text can come across as unprofessional, or even aggressive. And while the human eye does recognize larger text as more important, it recognizes isolated elements as important as well (and when content is king, empty space can REALLY stand out).

2. Pick one typeface. Okay, maybe two, if you must.

Luckily, going all font-crazy in a web design isn’t quite as easy as it is in, say, your great-aunt’s yard sale posters, so you don’t see this as often. But it does happen from time to time, and the extra effort required just makes it seem that much more actively unprofessional. As with many poor design choices that started with the best of intentions: look, I get it. It’s a big Internet out there, and you want to stand out. But part of standing out is being internally consistent with yourself, so that every part of your message is immediately recognizable as part of *your* message. So keep it simple. A fancy (but still web-friendly and legible) display typeface for your headlines, and something simple and universal for everything else. If you really need that many different-looking elements on your page, try experimenting with different sizes and weights of the same typeface instead. Anything more than that, and “inconsistency” and “haphazardness” will be your visitors’ main takeaways. And speaking of internal consistency…

3. Pick two colors. Okay fine, three. No, I take that back, just two.

Of all the different design elements being touched upon in this article, color is likely the one that’s the most difficult to effectively explain, and the hardest to offer simple solutions for. Research and literature on color theory predates the web by, oh, maybe a few centuries, and even with all of that history so much remains open to subjective interpretation. But if there was one piece of universal advice I could offer, it would be to simplify the number of colors being used. A primary (in the ranking sense, not the color wheel sense) color for most headlines and navigation, plus one secondary color for important attention items, and that should do it. These two colors should be in contrast to one another, but still feel complimentary and related. But maybe your organization doesn’t have official brand colors, and maybe you don’t feel like taking a six-week master course in color theory. That’s okay! Plenty of tools are out there to help get you started, from Adobe Color (a personal favorite) to Colour Lovers (over which I tend to get into polite Internet arguments re it being better than Adobe Color. Pfah. As if.) and more.

4. Don’t use black where a gray will do.

I want you to try an experiment for me. Somewhere around wherever you are right now, find a piece of black writing on a white surface, e.g. black marker on a dry erase board, printout of a Craigslist ad for an Atari 2600, something like that. Got it? Now take a hard look at the writing surface. Is it actually white? I mean, really white. Now look at the text/writing: is it really, truly, absorb-the-entire-light-spectrum black? While your computer monitor isn’t quite able to reproduce every possible color in nature just yet, within its own limited color spectrum, it’s able to produce 100% white and 100% black with a relative ease that’s hard to come by in the “real” world. So when a computer, tablet or phone display renders actual-black text on an actual-white background, it hits a level of contrast that the human eye isn’t used to dealing with, and which will soon become tiresome and difficult to read. This is why you’ll hardly ever see a full 100% black being used on a well-designed site (I’m serious. Go take a look around if you don’t believe me. I’ll wait). For example, Marketing Mojo’s own brand palette uses #3E3935, a sort of brown-ish dark gray, as our brand “black.” Put it on a white background and it’s very legible, while also hitting a level of contrast that makes for more a comfortable, familiar-feeling reading experience. The opposite holds true as well: If your site design uses a dark background, try keeping your text to lighter grays instead of actual full-on white.

5. Look for other common design choices, and copy, copy, copy.

I’ll close by revisiting and expanding on a point I made a few months ago (in defense of putting fake buttons on display ads) about meeting your visitors “where they are.” If good design is 20% originality and ingenuity, then 75% of it is acknowledging and utilizing pre-established methods for effective communication (the other 5% is black coffee). And if your website’s “peers” already have a few design choices in common (trust me, they do), then those are going to be the sorts of things your visitors will be expecting to see, and the sorts of things they’ll unconsciously interpret as evidence that they’re in the right place. And you want your visitors to know that they’re in the right place, yeah? Thought so. So go forth, and optimize your website’s visual aesthetic. And remember that it’s only when you’ve established a foundation of conventionally “good” design that you’ll be able to identify all the little opportunities to get creative and really stand out. Have your own thoughts about all this? Drop ’em into the comments down there or holler at me on Twitter.