Web Design Elements: 5 Important SEO Factors

The opinion that SEO strategies should be implemented at the last stage of website development is totally wrong. On the contrary, the sooner you start the search engine optimization of your website, the better. Can you start before the site is fully ready? Sure. There are SEO concepts that can be implemented at the design stage of a future site and its particular pages.

However, there are certain difficulties here too. In particular, when developing a design, a lot of unnecessary features come with it, which makes the site overloaded. Because of this, the loading speed is significantly reduced, and usability deteriorates. Therefore, the use of SEO concepts in the design must be approached carefully and thoughtfully. Here are 5 important factors to consider when optimizing your site already at the design stage.


1. Mobile-first design 

There are currently 4.8 billion phone users worldwide, out of which 3.5 billion are using smartphones (Statista, 2019). That explains why Google made the transition to mobile-first indexing,  meaning that when it comes to ranking, Google first evaluates the mobile version of a website.

If you want to take your site to the top of search results, then responsive design should be top of mind, from the very beginning of web development. Responsive design is a design that automatically adapts to any device on which it is opened: desktop, smartphone, or tablet. 

So, if you want to grow your site SEO-wise,  you should pay attention to the following aspects:

  • optimize images for mobile devices;
  • adapt texts for small screens via CSS;
  • remember that visitors of your site may open it in portrait or landscape orientation;
  • be sure that texts, images, GIFs, and videos are displayed correctly both on a desktop and a mobile device;
  • use short titles and structured texts that will be easy to read from any device.

When you’re done, you can use the official Google tool to test if your site is mobile-friendly. 


2. Content structure

When users navigate your website, they should be able to easily find what they’re looking for. This means that your website design should have a logical navigation, structured content, visual cues, and more. I have some tips for you on the topic, below.


The menu or the navigation bar is usually a collection of the most important links of a site placed usually at the top of the website and on all its pages. If the menu is not providing a good user experience, it would be as if you’re driving without GPS in a new city. How would that make you feel?

A proper menu has tons of benefits:

  • increased website visit duration
  • decreased bounce rates (meaning people are browsing multiple pages of your site)
  • more purchases (if your site is an online store)
  • returning users

Take a look at this menu example from Miro, a SaaS company offering an online collaborative whiteboard platform for all sorts of teams. The menu is split into:

  • product – where they list templates, the features of the product, the integrations Miro works with,
  • use cases – all the situation where the product can be used, with personalized examples,
  • teams – where they explain how different teams can use the product,
  • pricing,
  • enterprise – how bigger teams can collaborate using miro,
  • contact sales,
  • log in,
  • sign up CTA button.

I mean…there’s no question left unanswered, isn’t it?

website menu example

Source: miro.com

Headings and subheadings

You will need to use headings and subheadings to group content on your website, to make them easier to read or skim. If your content is unreadable, it will quickly discourage the user. Information should be presented in a structured manner. Using HTML tags such as H1, H2, H3, and H4 tags will help a lot in this. When reading a structured text, it is easier for the user to assimilate the information. Subheadings actually allow the readers to “take a break” to comprehend what they have read. In addition, the use of subheadings in the text makes it more attractive for Google robots.

Visual hierarchy

Visual hierarchy is a technique that allows you to smoothly lead the user to the desired action: purchase an item, get in contact with someone, find information, etc. Visual hierarchy is using principles such as scale, contrast, color, balance to rank elements based on their importance, or in the way you want your users to view them. Headings and subheadings are part of this hierarchy as well.

Now, this subject definitely deserves a whole article, but, at the end of the day, you’ll need to take a step back and figure out the goal of your website’s design: how do you plan your info architecture in order to reach your business and user goal?

Visual cues

Visual cues are elements used for drawing attention to areas of importance. They help website visitors engage with your website, and get to the next step in the funnel.

I’m pretty sure you’ve seen them before because they’re pretty obvious: arrows pointing at specific page elements, or people’s hands showing your something, or a person looking in a certain direction, etc.

Let’s take a look at the example below. “200 tools” gets highlighted in yellow, because it’s an important product feature. Also, there’s an arrow near “Explore marketplace” that lets you know that you can further investigate the topic.


Source: Livechat.com

3. Core Web Vitals 

Web Vitals is an initiative by Google to provide quality guidance for delivering a great user experience on the web. Core Web Vitals are a subset of Web Vitals that apply to all web pages and will become the official ranking factor in May 2021. This means that user experience will be at the core of organic ranking.

What do the Core Web Vitals measure?

LCP – loading speed of the main content (Largest Contentful Paint);

  • Good: less than 2.5 seconds
  • Needs improvement: between 2.5 and 4 seconds
  • Poor: longer than 4 seconds

FID – waiting time before the first interaction with the content (First Input Delay);

  • Good: less than 100 milliseconds
  • Needs improvement: up to 300 milliseconds
  • Poor: longer than 300 milliseconds

CLS – stability of layout and elements that do not interfere with interaction with content (Cumulative Layout Shift).

  • Good: less than 100 milliseconds
  • Needs improvement: between 100 and 250 milliseconds
  • Poor: longer than 250 milliseconds

To get started, Google recommends doing the following:

  • Conduct a large-scale audit of site pages to see possible improvements. The Search Console report for Core Web Vitals provides a complete picture of site performance and details metrics.
  • Page Speed Insights and Lighthouse will help you iterate through any issues you find.
  • With web.dev/vitals-tools, you can get full information to get started.
  • Use the potential of AMP technology. 


4. User intent

When developing a website, you need to consider the user intent as well. It is far from always that users can accurately express in words what exactly they are looking for.

You should optimize the content on your site in such a way that your site matches the user’s intent. For example, if a user types the word “pizza”, they will see hundreds of thousands of search results. Google strives to give such a user the most accurate answer to his request, so the search engine will try to guess what exactly the person is looking for.

Roughly, the intention of users can be divided into three groups of requests:

  • informational (“what is pizza”);
  • navigational (“where is the nearest pizzeria”);
  • transactional (“pizza delivery”, “pizza price”).

Your goal is to show Google what type of request your particular web and blog pages belong to and take into account more options for such requests. The design, images, text inside a specific URL should be optimized around specific search queries on Google. To get more ideas for keywords that match user intent, you can use the SE Ranking Keywords Research tool.

5. Internal linking

Another important aspect is the internal linking on the site. With it, users have the opportunity to familiarize themselves with other pages on your site, which will extend their stay. However, there are also external links that you should take into consideration.

Internal links are also used to improve website navigability. They are needed not only for users but also for search robots. This way, they can determine which pages on your site are the most valuable.

 Internal links can have a positive effect on the optimization process, namely:

  • accelerate a new page’s entry into the search engine index;
  • they are an element of resource navigation and help users navigate the site;
  • structure the site not only for visitors but also for search engines.

For search robots, such links work as guides to new non-indexed pages and also indicate which ones are more significant. For users, linking plays the role of an assistant in finding necessary materials, as a navigation element. Just keep cool and try to maintain logical coherence with the page you link to. As we can see, internal linking is a real catch for search robots and users. 



SEO and design are extremely tight-knit. This article lists the main points that are important to consider when creating a website for its subsequent promotion in search engines. A high-quality study of the site at the initial stages will help to avoid common mistakes and significantly save the budget for website promotion. User-friendly design with SEO in mind will significantly accelerate the promotion of your site to the very top of the search results.


Eliza Medley
+ posts

Eliza Medley is a freelance writer and editor. She specializes in content related to digital marketing, SEO, SMM, and eCommerce. Always keeping up with modern trends, she inspires people to keep learning.


How to Kickstart Your Wordpress Website with No Coding Skills

[Marketing plan included]