One of the central elements in web design are the links. This resource, essential for the operation of web browsing, has been changing its appearance over the years.

Although web design trends reinvent the visual section of portals year after year, there are a series of requirements that have remained more or less stable over time for a link to be recognized and function as such.

We will analyze what factors are essential when defining the design of links on a web page.

 

“The visual aspect of links, a key point for navigating a web.”

 

The classic link: blue and underlined

At the beginning of the Internet and with the appearance of the first web pages, the design of the latter did not allow too many frills because of the technical limitations of that time. At that time, a visual format for links was standardized, which is still used in many cases.

Within a block of text, it was decided to distinguish the links from the rest of the content by changing the color of the links to blue and underlining the anchor text.

This unique design is still present in many portals and is a secure resource when it comes to defining the aspect of a link to be recognized by almost everyone.

An evolution of this standard is to use the underline and a different color from the rest of the text, not necessarily the blue one. In this way, we can be more coherent with the visual line of the proposed web design.

 

It must be a recognizable element as such

In order for a link to fulfill its function, to facilitate navigation through the different contents of a website, its design must allow the element in question to be recognized as a link.

For example, it is useless to insert a link in a block of text if the user can not distinguish it from the rest of the words that make up the content.

As we have seen in the case of the classic link and as we will see below with some resources that will allow us to highlight the links, the key to good user experience is that the users identify the link as such.

 

Contrast

Color, typography, iconography … There are several ways to make a link stand out over the surrounding content. In this way, the user can intuitively perceive that he is facing an element different from the rest.

 

Link text

Although in some cases the link text is not a web design domain, the fact is that it also has an impact when it comes to identifying them. And not only the words that make up the link, but the phrase that precedes or follows it will also help to distinguish it. For example, with the text “You can consult more information to the respect in Wikipedia” we are giving a very clear clue to the user that the last word contains a link.

 

Cursor

Although with the appearance and mass use of smartphones this indicator is not so common, when browsing the web with a computer and move the cursor over a link, it will change the icon. Most web browsers implement this functionality by default, which we can also modify using CSS.

 

Title Attribute

In line with the previous point, in desktop web browsers, by hovering over a link with the mouse, we can see the content of the “Title” attribute of the same.

 

Micro-interactions and animations

We can provide links to a web of small animations that help the user to identify them as interaction elements, such as small movements, loops, color changes, etc.

 

Reinforcement with buttons and iconography

As we commented in the “Contrast” point, we can distinguish the links from the other elements of our web design to make them recognizable by Internet users.

One of the most common cases is to use buttons or pills to wrap the links. And we can also use iconography, usually arrows and the like, to reinforce their weight.

 

Position they occupy

Over the years, many aspects of web design have been standardized. Some of them have a direct influence on the links. For example, if a text is part of a navigation menu, we intuit that it is a link, even if we do not use any of the resources mentioned above. Or if we show a list in the footer depending on the position that a link occupies, the user will come to perceive it as such.

These are just some of the elements and resources that help us define the visual aspect of the links. In each project, we carry out in viridian Geeks we review in detail the design of the links and all the elements that make up the web design to create portals adapted to the requirements of our customers.