24 things that make a great marketing website

I started making websites in 2013. I’ve learned a lot. Most of those learnings came from doing the wrong thing. It’s the curse of any creative that as soon as a project is done, you realize all the ways you could have done things better.

I’ve (mostly) learned to be ok with that, to come to expect it, and to carry those learnings with me into the next project. Let me share some of those learnings with you:

A great website is made for an organization that does good

Designers have to be careful about who they make websites for. Websites are powerful tools. They can legitimize organizations and convince people to do things. It's our responsibility to make sure that we're not using that tool to legitimize organizations that are, intentionally or unintentionally, doing harm.

On the other hand, one thing I've noticed is that the organizations who are doing the most good often have the most trouble knowing how to talk about and promote themselves. Making a website for them can give them the legitimacy and resources they need to do even more good.

A great website tells a compelling story

A meta narrative is a story that makes all the other stories make sense. A website is full of a lot of little stories; a customer sharing about their experience in a testimonial, a content section describing how a feature works. A website needs a meta narrative that ties all of those individual pieces together in a single, coherent story.

This is true for the visuals too. A website's look and feel shouldn't be gratuitous. Color, fonts, icons, photos, patterns: everything should help reinforce the website's main story.

A great website has a logical flow

One of the hardest things to do is to remember what it was like to gain understanding in something for the first time. When we try to talk about it with others, we want to jump into the finer details because that's what we find interesting. The basics can feel uninspiring.

A great website helps to onboard new site visitors with patience, starting at the beginning and making sure that the main story is clear before diving deeper.

It should feel like a hiking trail. The site visitor is taking all the steps, but they're advancing down the trails you've previously set up for them.

A great website is opinionated about who it’s talking to

There's a common pitfall organizations tend to fall into. They want to talk to too many different kinds of people. Understandably, they want to maximize how many people they reach. Their fear is that if they specify their audience too much, they will leave a lot of people out. But what can happen, if you make your message too general, is that it doesn't connect with anyone in particular.

It's like the advice you hear about calling for first responders. You don't want to shout "someone call 911!" Chances are no one will. But if you choose someone, point to them and say, "You, call 911!", they will. Your website should feel like it's pointing at someone and calling them specifically to action.

A great website balances the needs of the organization with the needs of site visitors

Marketing websites are susceptible to the tug and pull of lots of stakeholders wanting it to do different things. A good designer sits at the center of that push and pull and weighs it all in the balance.

Sometimes the needs of one stakeholder outweigh those of another. Other times a stakeholder makes a request, but a little critical thinking helps to generate a new solution that still meets that stakeholder's need without eclipsing the need of site visitors. And sometimes, the client's needs are non-negotiable and it's a designers job to implement it with grace and wisdom.

A great website feels like an experience that’s unique to the brand

Websites are a huge exercise in branding. They should clearly define who you are and differentiate you from everyone else.

But, being different takes bravery. The gravitational pull towards assimilation is a part of the human experience. If you spend time on design inspiration aggregators, you will notice the same visual trends rippling their way through different designers' work. It takes courage and skill for designers to create something that departs from what others are doing.

Visiting a site that feels like a variation on the status quo leaves a bland impression. But, visiting a site that's unique is refreshing and inspiring. That's not something you easily forget.

A great website knows when to turn the (branding) volume up or down

Each part of a website, each section on a page, falls somewhere along the spectrum between expressive on the one hand and expository on the other.

Expressive sections

Sections that are strong in expressiveness help to make an emotional connection between the site visitor and the brand. Some common strategies are things like activating more of the color palette, scaling up the typography to focus on a brand centric piece of copy, employing a full bleed image, or weaving in a meaningful visual pattern.

Expressive sections are often strong as bookends for the page. But, they tend to be weak in conveying helpful information.

Expository sections

Expository sections allow brand elements to recede so that content can enjoy the spotlight. Think of things like comparison charts, pricing tables, blog articles, instructional steps, or feature lists.

Finding the right balance

A site that is too expressive lacks the context a site visitor needs to make an informed decision. But, a page that is too expository can feel dense, overwhelming, and unimaginative. A great website dances between the two extremes as the site visitor scrolls through its pages.

A great website uses expertly calibrated typography

Site visitors might not know the difference between one font or another. They might not be able to say what the definition is of a slab serif. But they feel the impact of a font's characteristics.

A great designer selects the right typography system for each website, just as a chef might select all the individual ingredients that make up a recipe, knowing what the sum total of flavor will be on the tongue.

A serif typeface might flavor a website with a traditional, authoritative feel while a geometric sans serif typeface might flavor the website with a friendly and contemporary feel.

It's not just the curation of type, though. It's also important that type is set masterfully. Designers calibrate all the technical aspects like font size and font weight, line height, and character spacing.

A pretty typeface can look unattractive when set poorly. And the most basic typefaces can be unexpectedly pleasing when set right.

I think that type, more than any other building block of website design, contributes to the feeling of a website being well designed. If you're an aspiring designer and want to know how to get started in website design, I would encourage you to do one thing: master typography.

A great website sets an appropriate pace with whitespace

When it comes to content, we're always hearing that people's attention spans are getting ever smaller. So, for the inexperienced, they might assume that the thing to avoid at all costs is page length. And while you do want to avoid an unnecessarily long page, the number one thing to avoid is density.

An overly dense website is like a desert. When you get to one, you don't want to cross because there's no water to refresh yourself. There is no white space to refresh the mind.

Websites need more whitespace than we think they need. Usually, when we're evaluating website designs, we're moving slowly from one section to the other, observing everything with an unusually high degree of intensity. But site visitors rarely experience websites that way. They are quickly scrolling across pages, barely pausing to scan important information. We need to compensate by making white space a little bit larger than what we feel is comfortable. That slightly too large white space will feel just right to website visitors zipping through the site at high speeds.

A great website employs brand colors with purpose

Every color in your brand's palette should be given a job. Here’s an example system: One color is the primary, the one that people associate with your brand. One is the accent color, commonly used for calls to action (sometimes those are the same). A small collection of neutrals to help break up content groups. And a manageable group of secondary colors that can be brought in when more saturation is needed.

You might forgo this system for another. You might use color ways to signify subject areas. Or, you might use one color when you want visitors to feel one way, and transition to a different color when you want to signal a shift in emotion or tone.

The takeaway is that utilizing color in the same way across the website helps site visitors to start recognizing those patterns, even if it's not entirely conscious.

A great website expands and contracts

Humans have a hard time with monotony. Our minds are always seeking what's new, what feels different, what feels out of step. And the things that feel the same, our minds deprioritize or ignore completely. A new smell sits at the top of our consciousness. But after a while it fades away. The smell is still there, but our brains have ruled it out of our consciousness.

If you've ever studied public speaking, you know the value of cadence. Of slowing down and speeding up, getting quiet then getting loud, carefully elocuting some words and rushing over others. Our minds need those shifts.

Websites need them too. If each section spans the same width, displays content in the same layouts, and uses the same colors, our minds grow disinterested.

Not all music uses the same cadence. Some songs start with low energy and gradually build to a final, explosive crescendo. Some songs rise and fall in repeated waves. With websites, there’s no fixed rule. But, I have found the most reliably useful cadence to be the hourglass. Pages start wide, with big type, large scale elements, and full bleed images. In the middle of the page we use more expository design, things like three column sections or a carousel of cards. And, as the page comes to a close, we widen again, ending with an crescendo in the final call to action.

A great website is scannable

It’s impossible for us to evaluate everything at the same level of scrutiny. There’s just too much for our brains to consider. So, our brains compensate for us. In our subconscious, our brains triage between things that are safe to disregard and things that require our attention.

That same brain that evaluates danger vs. safety evaluates websites. Things like eye tracking tests have proven that people rarely read websites word for word. In fact they hardly read. They mostly scan. In their subconscious, their brains triage content and elevate only what’s important to the forefront.

From those tests, we know what the brain typically elevates are headlines, bold text, and list items. Those things, in and of themselves, are not significant. But our brains look for contrast, for things that stand out, and for anything that can potentially get us information faster. For example, our brains reasonably assume that headlines will sufficiently summarize the supporting paragraphs they introduce. So, they elevate headlines to our attention and largely ignore supporting copy.

Great websites don’t try to work against how our brains are wired. They lean into it. They make use of the fundamentals of design (contrast, hierarchy, composition, scale, and whitespace) to tag content as essential or as secondary. In other words, good designers triage content ahead of time so that they can control what is elevated to a site visitor’s focus.

When a great website uses visuals (like images, icons, or patterns), it does so with intention

People are great at recognizing things are disingenous. Show a photo to someone and in less than a second they can tell you if it’s a stock photo, a candid photo, or if it’s a specially commissioned photo.

That’s not to say websites should never use stock photos. I use them on almost every project. It is to say that photos should never be used simply to fill out a section or just to add a visual. Media should be used to convey meaning. It needs to be there for a reason.

This comes up a lot. The conventional wisdom says that, “People want to see faces.” That’s sort of true, but it’s not the full truth. People don’t want to see generic faces that are disconnected from what the website is about. They want to see real people actually interacting with the product or service.

You can still use stock photos to say something meaningful (I have a lot of thoughts on that, but that’s another article for another day). You can use icons to dress content lists or to indicate action. You can use abstract patterns as ornamentation for your website. But, those things need to be there because they help tell the story, the meta narrative. When they do, site visitors notice.

A great website is accessible

Making something accessible means ensuring that people with disabilities can confidently engage with that thing. Accessible websites use things like alt text, tab order, contrast ratios, and semantic tags to make sure people with vision impairments can use your site. From a design point of view, it's relatively easy to make an accessible design. There are simple strategies like:

• Keep text legible by testing the contrast between the text color and the background color.
• Avoid using all caps and avoid ragged edges (usually caused by center aligning text). Those two things make reading more difficult for site visitors with dyslexia.
• Avoid using an identification system that relies only on color. That can be tough for site visitors with color blindness.
• Avoid using icons without labels or alt text. That can be difficult for site visitors using a screen reader.
• If your site uses animations, let the user control them through their browser personal preferences.

These strategies, among others, are a pretty low lift, but keep your website accessible to a lot more people.

A great website is easy to use and makes it easy to take action

Up above, I mentioned how important it is to create unique experiences. So the following sentence might seem contradictory, but it doesn't have to be. The surest way to make your website easy to use is to follow common user patterns. We've all come to expect websites to work in a certain way. When you move your cursor over a rectangle or pill and it changes color, we all assume that is a link we can follow to another page.

There are other, more subtle patterns. Take the navigation bar at the top of every page. We assume that the most important action you can take on a website will be referenced in the button at the top right.

The risk of conventional solutions is that your website will look like every other website. So, if you're following common user patterns, the challenge is to find new and fresh ways to do so.

Sometimes the unconventional solution is the best one for a client. To serve them well, you have to depart from common patterns and create your own. In those cases it's the designers job to use things like redundancy, labeling, proximity, tooltips, way finding, and other similar strategies to acclimate site visitors to a new way of doing things.

A great website is enjoyable to read

The best websites sound like a person. What that person sounds like will change from site to site. But, just like we can all recognize a stock photo in milliseconds, we recognize how unnatural a website sounds almost as instantaneously.

Websites that sound like a person are charming. They can be funny, smart, passionate, insightful, or inspiring, just like a person can. And when you sense the humanity in the words, they stand out.

A great website uses just the right amount of copy

Clarity is tricky. Our first instinct, when we want to be clear, is to say it all. We don't want anything to be left unsaid. The site visitor needs to have all the information. But we all respond the same way when we hit a wall of text: lethargy. Unless we're sitting down with a good book, none of us wants to read that much. So, the true soul of clarity, to misquote Shakespeare, is brevity.

If you've ever tried to write copy for a website, you know that your first version of anything will be too long. It will feel unnatural, to cut away things that feel necessary to say. Remember that the less you say, the more you will be heard.

A great website responds to you, but is never overwhelming

Websites are funny things because they're essentially a big marketing piece. But if your site is fun, site visitors won't mind sticking around to play with it. They will click, hover, drag, pinch, tap, swipe, press and move across your site, wearing a big goofy grin the whole time. That feeling is why so many designers and developers fell in love with making websites. And it's why site visitors will too.

But, be careful with animations. They need to be done tastefully. When animations are overdone, they become annoying. Sometimes annoying enough to drive people off the site. Just like with images, only animate things with intention.

A great website is flexible and accommodates different types of content

A website is a living document. If it stays the same too long, it gets stale. So it's the designers job to make sure that the client can make updates to the website regularly and easily. Things like adding a blog, updating images, inserting a new section, of even a whole page.

To make sure the site is flexible enough to adapt to new content, it's important to stress test the design in the design phase.

• What will the blog roll look like if each blog item has different length titles?
• Will the text on top of an image still be legible if the client changes out the current image for a lighter one?
• If the client adds a really long testimonial to the slider, will it throw off all the other slides?
  

A great website is probably not timeless, but it does have longevity

Realistically, we can expect websites to have a shelf life of about 3-5 years. But even in that short amount of time, visual trends can go out of fashion. And what started out as something that felt of the moment all of a sudden feels outdated. A shift, on the other hand, is when new best practices are introduced. Being aware of shifts and designing accordingly will help preserve your website.

A great website never ends with a dead end

A great website is like a docent guiding you through a museum. They always know where to take you next. You can change where you're going, if you want to. But, if you're comfortable leaving it up to the guide, you can follow their lead.

This can be especially helpful on your first visit. Everything feels new, including much of the content. It's nice when you can devote your brain power to evaluating what you're experiencing and not have to reserve some of it for deciding where to go to next.

At the end of every page, a good website recommends the next logical place to go. Are you finished reading a blog article? How about browsing a few related pieces? Have you just read through the about page? How about checking out careers? You've navigated to the end of the pricing page. Now is a good time to request a demo on the demo page.

A great website repeats itself

Humans are pattern makers. We find similarities, build routines, and develop habits. And we take comfort in it all. Yesterday you sat at the table at the back of the library. Today that chair is yours. Tomorrow, people won't sit in it because they would feel like they stole it from you.

We can cater to this side of being human by establishing patterns on key pages (the home page and a handful of the more important pages) and sticking to them across the whole website.

Not only does it feel comfortable, but once a site visitors recognizes those patterns, they spend less time learning how to use your website and more time learning about your organization. In other words, it reduces cognitive load.

Another bonus: repeating patterns across a website makes it easy to maintain and to scale because you know what new updates or pages should look like.

A great website adapts well to different devices

We touched on “responsiveness” in the longevity section. It’s the idea that a website adapts to the width of the browser. I’m old enough to remember when everyone had two websites: one for desktop and one for mobile (the mobile pages had an “m.” added to the beginning of the URL). Now, it’s the same responsive site. It fits your screen no matter if you’re on your computer or your phone. That’s a huge improvement.

I want to distinguish between the idea of adjusting your site and adapting it. Adjusting is making incremental changes to make the the content fit the screen width. But, sometimes making incremental changes feels insufficient.

A common culprit in this area is the comparison chart. Charts work beautifully on desktop. On mobile, with the much taller aspect ratio, they’re difficult to use. In those instances, an adjustment doesn’t go far enough. The chart needs to be adapted to feel like something that was meant to be viewed on your phone.

A great website evaluates content at common intervals. It then makes sure that the content feels like it’s native to that screen width, like it’s meant to be seen on that device.

A great website loads fast

Have you ever been told, “The person who spends the most time thinking about you is you.” We all over-estimate, by a lot, how much time we think people are thinking about us. The same is true of websites. In the design process, we can spend weeks with clients evaluating designs and making revisions. When people land on your website, they form opinions about your organization in seconds. There is literally not a second to waste.

With that in mind, it’s critical that a website loads quickly. There’s so much that can be done nowadays to decrease load times. Things like prefetching, image compression, variable text files, and more. But, there’s also a lot of stuff you can add to websites nowadays that slow them down. Some of those things are really helpful to the marketing function of an organization. And some of those things are wonderfully ingenious pieces of design or development. But, just like I wrote earlier, the needs of the client and the aspirations of the designer need to be balanced with the needs of the site visitor. Nothing will convince a site visitor to convert like having a great experience that loads instantaneously and is tailored to them.

Not all great websites will win awards. That's ok.

A couple of years ago, a website I designed and developed for a product called Aro won a bunch of awards. It felt really great and helped to raise the profile of our agency. But, award websites like AWWWARDS, CSSDA, FWA, and others tend to prize websites that add something interesting to the industry-wide design conversation. In other words, they can’t know if a website you made for a client made that client happy, if it achieved their stated goals, if it converts well with site visitors, and if it will serve the client well for many years. But, those are the things that actually make websites successful.

I try to distinguish success from recognition. My goal is that every project I work on will be a helpful tool for its organization. Sometimes, that work isn’t going to be award-winning. But that doesn’t mean it’s not a successful project. It just means it’s not a project that would interest the wider design community.

Bonus: take it all with a grain of salt

When I wrote the headline above, “salt” was the 4,595th word of this article. If you’ve made it this far, thank you. Those are a lot of words and maybe it all felt prescriptive to you. But just know that for every one of the 24 things above, there’s an example of a great website that contradicts it.

Sometimes the best thing to do is to follow the common pattern. And sometimes it’s to break all the rules. Either way, make it great.