How to Make SEO and Web Design Work in Harmony to Achieve Success

How to Make SEO and Web Design Work in Harmony to Achieve Success Featured Image

As graphic design legend Milton Glaser once stated, “The purpose of design is to inform and delight.” Great design has always been about making an impact on the viewer, and a necessary condition for doing so has always been getting noticed.

For traditional graphic design, getting noticed meant standing out with bright, bold, or otherwise catchy visual elements. Now designers contend with increasing amounts of clutter, and Web designers in particular must focus on improving all avenues for discovery. Chief among these are search engines, thus making knowledge and consideration of SEO guidelines highly important for good Web design.

Far from being two distinct fields, Web design and SEO have a great deal to do with one another and directly affect each other. Beyond that, the core principles behind optimizing for search engines can inform elements of strong design.


The Aligned Interests of Good Web Design and SEO

A great designer seeks to make whatever they produce usable, relevant, compelling, and beautiful. The designer of a search engine hopes to build an algorithm that can determine all of these qualities without ever seeing it.

While Google’s spiders never “see” the Web page as an end user might, they have become increasingly able to tease out and predict good design and usability from an analysis of the code itself.

After all, the purpose of any markup language (such as HTML or CSS) is not to compute things per se, but rather to give the browser instructions about how to render elements on screen. A browser translates this code into a graphical form users can understand and interact with, whereas a search algorithm bypasses this translation and attempts to predict how useful and relevant this code will be.

Good Web design must be executed both for the users and for the algorithms (due to the fact that these algorithms largely determine what a user will see). Luckily for Web designers and SEOs, the interest of both disciplines is aligned. Think of search engines as pre-screening sites for good design and only serving those sites to the end user. Viewed in this light, search engine optimization cannot be an afterthought for good Web design — it is a prerequisite.


Typographical Hierarchy and Accurate Headings

Web design is certainly visual, but it’s a common misconception that visuals equate with images. The lion’s share of Web design is actually concerned with typography, and the same can be said for design in general.

Beyond the obvious, such as typeface choices or layout on a grid, a key concern for practitioners of good typography is establishing visual hierarchy.

A logical, coherent, and consistent typographical hierarchy is not only visually pleasing but also makes scanning information easier. For Web design this is particularly important, because users are becoming increasingly impatient with text-based content.

An influential study done by the Nielsen Norman Group showed that users read only 28 percent of the text on a page, and often it can be as low as 20 percent. Since visitors will likely only have the patience to scan, having a clear and consistent typographical system will increase the likelihood that you will get your message across.

The Hechinger Report uses typographical hierarchy to communicate the same message twice without being redundant.

In addition, just because users don’t read your content word for word doesn’t mean they won’t share it. In fact, the prevailing trend is to share more favorably when Web pages provide easily scannable content.

This predilection for easily scannable content is reflected in search algorithms. Web spiders don’t treat all text equally, rather they work their way down the “headline hierarchy” by weighing text with the “<title>” tag more heavily than the “<h1>” tag and working all the way down until the “<body>” copy.

Establishing a well-thought-out typographical system and then having this hierarchy reflected in your HTML and CSS will ensure that search engines size up your website’s text in the most favorable light possible.


UI/UX Flow and Indexability

Nearly all search engines gather data to inform their search results employing scripts colorfully referred to as Web spiders or “Web crawlers.” These are simply snippets of code that attempt to gather information about the Web by automatically clicking through links and then indexing any page that they come across.

To understand how this strategy works, consider the following map of the United States.

Roads in America

This looks like an ordinary map, but it is not. This map was drawn only by highlighting the roads within America. Looking closely, you can see that there are blank spots, but for the most part this is a surprisingly accurate approximation.

What becomes clear is that there are certain areas that are hubs because they’re reachable from most every area nearby and other places that are much farther removed. The average website would be akin to a small town; it might have some roads, or “links,” back from larger sites, but for the most part will be self-contained.

The Web crawler will enter through one of the main links into your site that you achieved through link-building and then proceed to click all the links underneath your subdomain to get a picture of what your “town” looks like.

Now imagine if one of these roads was a dead end or didn’t lead where the sign promised, or if two roads had the same sign. This town wouldn’t show up on the map correctly.

The roadmap for your website is just as important for the spiders that search engines use to index the Web. If there is flawed or redundant linking within your site, either these crawlers won’t index certain pages or you’ll be penalized for poor link structure.

As a general rule, logical navigation that promotes a good user experience will be equally usable for Web spiders. This is yet another area where good SEO and Web design intersect.

In the below example from USA Today, it is clear how both the easy navigation and the logical link structure result in content that is both easy to find and interact with as well as easily indexed by search engines.

USA Today URL Structure


Minimalism, Negative Space, and Load Times

There is a common understanding in design that the best work comes when you take a core idea or theme and strip it down to only its most essential parts.

For those not versed in design, they might think good design is all about making something “look cool” or “pop,” and the instinct will be to add frills, animations, and other unnecessary elements to flesh out a poorly executed concept.

In reality, the most gorgeous and memorable designs are typically the most understated. Minimalism and its virtues are extolled and reflected in the hardware that Apple designs and in the beautiful design work of agencies like Pentagram.


Negative space, clarity of ideas, and ruthless elimination of clutter will always result in the best possible designs. Great Web design will reflect all of these virtues, and in so doing it will also provide a crucial SEO benefit: faster load times.

While these two benefits might seem to be completely different (one emotional, the other technical) they actually are more similar than they appear. The very things that will make a site load quicker, such as having the fewest possible and most highly optimized elements, will also make for a design that registers more quickly and powerfully with your end user.

Mash Creative Design
The Mash Creative site uses very pared down elements to provide a quick, clean, and compelling message.

Not only will the page load faster, but (if it is designed well) the intended message will resonate faster as well.

Limiting yourself to as few elements as possible will not only improve page load times (which is a key SEO success metric) but will also force your Web design to become more concise and more effective in the process.


Beauty, Usability, and Bounce Rate

While there are many technical and specific SEO benefits that can be achieved through adherence to good design principles, there is also one very intangible benefit that can still dramatically impact your site’s SEO.

The strongest benefit of good Web design is that it will draw more users in and typically engage them for longer. Good in this case doesn’t mean flashy. An example of a beautifully and technically well-designed site is The New York Times.

New York Times Design

It is by no means drop-dead gorgeous, but there is something incredible about this website at the same time. It clearly and logically communicates a ton of information and invites you to explore more.

The site employs strong hierarchy, clear and logical navigation, minimalism, and usability to provide an overall engrossing experience. The New York Times site features such great Web design because the design is invisible.

Typically the reason for high bounce rates is not because a site is ugly; rather it’s because the site’s design is needlessly complicated, non-intuitive, or hard to navigate. The reason that high bounce rate is such a strong negative signal for search engines is because it is a strong indication that your site was unpleasant to a majority of users.

Focusing on building sites that follow all the principles I’ve outlined here and that are beautiful in their own right will please your users and will optimize your page for search engines. In other words, whether your audience is a human viewer or a search algorithm, both are always looking to be informed and delighted.

Schedule Your 1-On-1 Search Engine Optimization Strategy Consultation Now

Tags: , , , , , , , , , , , , ,

  • This field is for validation purposes and should be left unchanged.