There are many elements that participate in a web and that are responsible for the proper functioning of it. All of them have to work in isolation and have a specific design, but of course, they have to work as a team for the web to succeed.
We have to know the peculiarities of each one of them to arrive at a design that suits the characteristics we need, but we must not forget that apart from these characteristics, they have to be perfectly implemented in web design.
We have already talked in numerous articles about how fonts and therefore texts must be combined and designed. The importance of legibility and the order of the texts in the web design is something that we have to be very clear when starting with the web design, but other graphic elements that we cannot forget take also part of it.
On one side we have the buttons, of which we have talked about in this article. They will guide us in any process and they will be also those in charge of drawing our attention, so that their design should be done taking into account the User Experience.
But today we are going to talk about another graphic element that is included in most webs and that often goes unnoticed: icons.
There are icons of many types and classes and their design will depend largely on the place they occupy on the web (in addition we can opt for icons of a stock images or design them ourselves.) This topic is very broad, and we could be talking about this infinitely, but in this case, we will focus on some “general” icons that usually all the webs have, and we will see the different forms of use and design. Let’s start!
Social icons
Today there is no web (or should not be) that does not have its corresponding links to its social networks. Depending on the importance we want to give them, there are several places where we can place them. It is common to see them in the menu bar, in the header or in the footer. We can also find them in the sidebar.
The design of these is very specific. As each social network has a characteristic icon, it is best to use these icons, since they become easily recognizable. This way, it is common to take icons from a stock of icons and not to design them specifically. Font Awesome is a good benchmark for these icons (and they are also very easy to add in WordPress.)
Even if we take them from a stock of icons, it does not mean that we have to leave the design like the one who drew it. The specific design we give it, will depend to a large extent on the style and design of our website. We can frame the icons in circles or squares, or leave them without border, change the colour when it passes over or maintain it…
The possibilities are endless so these decisions are the ones we have to take into account depending on how the other elements of the web behave.
Here we leave you several styles of social icons (although there are many more.) The choice of these should always suits with the web style. Remember that unless we want these to stand out for some issue, it is better to harmonize them with the design.
Navigation Icons
Just like social icons are usually on every web, there are other icons in webs that help navigation. Although we will talk about some of them, there may be many more depending on the web and the options that will be used. For example, in our Artie WordPress template, we have included some specific icons of the topic “recipes”, which obviously are not common to other themes.
In any case, the most common ones are the icon of the search engine, the responsive menu (burger,) icons for navigation between articles or for categories and labels…
For these cases we can use stock of icons such as Font Awesome or linear icons or design our own icons ourselves. In this case it will depend on the singularity that we wish to give to those icons. Maybe in the case of the search engine or the navigation between articles we go towards something more general, but for the icons of the labels we want a specific design…
In case we want to design our icons and get our own stock for all our work, we have to convert them to web icons. An easy-to-use tool for this is “Iconmoon“. We just have to be careful that all have the same style and size, because if not, they would not look correctly on the web.
The important thing, regardless of what we choose, is to take into account that they are icons that will help us navigate, but in no case they are primary, so you have to give them a design that harmonize with the rest, but that does not call more attention than it should.
We can add all the icons that we want, always taking into account, whether the icon is the button itself or a reinforcement of the accompanying word. This is especially important if we want to be creative at this point and use some icon that is not related to the function. In this case it is always a good idea to put a word to accompany it and explain at some point its use.
Specific Icons
In addition to the icons we have talked about, which are more or less common to all webs, if you want your web to stand out among the others and have a point of creativity, the design of icons specific to it is always a great idea.
It may already be for the services section, works or for the elements of the blog, but any icon that is different and has a point of creativity will give your website that originality that will make your trendy.
In this case, as I said, my recommendation is that for those specific places on your web where you want to put icons, it is better if your icons are specifically designed for you. Otherwise you would be losing creativity. Look for something that makes you different and represent it with an icon!
