Building a website has become simple. Now go a step further and aim for improvement of its design.
Photo by Christina @ wocintechchat.com on Unsplash
One aspect that generally distinguishes one website from another is the graphic one.
Have you noticed that various advanced WordPress themes in the tools, such as Divi, Enfold, or Themeforest, are perfect and aesthetically excellent?
The difference between a site created by a professional and one created by a neophyte in the sector is the “small details.”
We will analyze the aspects to keep in mind to make an aesthetically pleasing site.
Images
One of the points we analyze concerns the use of images.
For convincing web graphics, it is essential that the images also follow the guidelines of your project. On the net, there are many sites, both free and paid, where you can download or buy images.
Again, the choice of the type of communication is up to you. What can make the difference is how the images are processed.
Often, we see websites that use images taken from online databases on the net. The result is that they all seem “fake” and not very personal.
An “amateur” photograph is often more effective than a blatantly constructed image, and what matters is the quality of the same.
To intervene, you can resort to the popular Photoshop tool. However, if you are not familiar with Photoshop, you can go with a classic photo editor like FotoJet.
Choose the right theme
To get a good start, use the right tools. For example, many themes in Themeforest can make your website graphically appealing.
Typography
There is a saying in the web graphics world: 95% of web design is typography. If you think about it, it is really true. The vast majority of the information contained on the web is textual.
It is why every good designer must know the basics of typography. It has always been important. Now try to replace the printed word with online. You will find that the same concept applies to web graphics.
Typography must be designed to make the information as precise and usable as possible for your users. It means focusing attention on points of interest, making reading enjoyable, and offering a better overall experience, even on the mobile side.
The result will increase the average time spent on your pages and a greater chance of getting your message across.
Before continuing, let’s clarify a concept: choosing a font does not mean typography. The information we will give in this paragraph will not aim to make you choose a nice font but to use the typography correctly.
Let’s go straight to the practice.
Body text
The typographic quality of a website is primarily based on how the main body of the text looks. The reason is simple: there is more ” body text ” on a page than any other element.
When designing your web graphics start focusing on this and don’t worry about anything else for the moment.
Begin to determine:
- Font (typeface)
- Size
- Line height
- Letter spacing
- Line length
Font
The choice of typeface is yours alone. Most advanced WordPress themes allow you to embed Google Fonts in addition to the classic system fonts.
Unlike fonts that you install on your computer and can use with all your programs, Google Fonts are web fonts.
Already residing on the network and can be viewed by virtually anyone who visits a web page.
They are divided into five main categories:
- Serif: with thanks.
- Sans Serif: without thanks.
- Display: those a little more “particular.”
- Handwriting: simulate human handwriting.
- Monospace: they keep the same space between the letters.
My advice is to choose an extremely legible font, and I would select from the first two categories.
Serif fonts have always been preferred in traditional books, considered more legible thanks to the graces that “accompany” the eye to the following letter.
However, the world of digital web graphics has also cleared customs for sans serif fonts, which are widely used because they are more straightforward from a device or monitor.
As mentioned, the choice is up to you.
Generally speaking, we can say that sans serif fonts are more suitable for sites dealing with technology, computers, etc. In contrast, serif fonts may be more suitable for humanistic sites.
Font size
For traditional printed paper, the body of the characters is between 10 and 12 points. In web graphics, the optimal size for text is between 14 and 16 pixels. There is a note to add. The font size of a site also depends on how the CSS is composed.
Today it is possible to avoid using pixels, and other units of measurement such as ems can be adopted. The user can decide the primary font size through the browser functions. If you use the ems, the whole site will maintain the proportions between the different parts, such as the text and titles.
It should also be said that size is not a well-defined parameter. Depending on the font, fonts of the same size may appear different.
Although the body is the same, the former appears significantly more significant than the others. So don’t let the numbers judge, but trust your eye.
Line height
It is the vertical distance between the lines. Generally, it should be between 120% and 145% of the point size.
When adjusting the line spacing, try to make sure that the lines are not too close together but leave enough space for the text not to be too cluttered.
Generally, in web graphics, you can establish the line spacing with numbers 1, 1.5, 2 …
As mentioned before, most advanced themes provide you with settings to act on this parameter.
Letter spacing
It is the distance that we can apply to the letters of every single word. Be careful not to abuse this function, which can help process some individual titling.
Line length
Line length defines the horizontal width of a block of text.
Shorter lines are more comfortable for reading. As the length increases, the eyes have to travel more, which means less fluidity when reading the following line.
We do not recommend inserting full-page columns without even the sidebar but breaking the row into at least two or three columns.
Headings
Titles are essential to give the user an immediate indication of what they are about to read in the content of a post.
The important thing is to give a hierarchy of importance to the titles.
If you use WordPress, you will have already noticed it only knows; by default, you will already find the headings divided into H1, H2, H3, etc …
The preset dimensions are already designed to be optimal, but nobody forbids you to change them by doing some experiments.
At the character level, you can choose to use the same as the body text, but depending on the taste and design you want to give to your site, you can choose a different one.
However, limit the fonts used—one for the titles, one for the texts, perhaps with different colors in case of need.
If you have particular sections or themed landing pages, you can decide to add others.
Some rules to keep in mind:
- All caps are only good for short titles (it doesn’t have to wrap).
- Don’t use the underline. This rule also applies to all texts that do not link.
- Leave a good margin both above and below.
Colors
To make your web graphics attractive, you need to choose colors in line with your project.
The study of colors influences everyday life, even if you have probably never noticed it.
Have you ever noticed, for example, that many “traditional” bakers have their shops furnished with classic vertical wooden planks? It serves to recall the color of the bread.
Fishmongers are generally blue or light blue to recall the colors of the sea and give a sense of freshness. You will hardly find a complete redfish shop.
The base color of your website
The tool to use to choose your site’s palette is the color wheel. Thanks to it, you can combine different shades by harmonizing them.
- The colors in the same segment are monochromatic: the base color is the same, but the intensity varies.
- Colors next to each other are called analogous colors because they are very similar.
- The colors facing each other are complementary: they look great together and generate maximum contrast.
- Three equally spaced colors are called a triad.
Today, free online software allows you to create your very own set of colors in just a few clicks. You can search for one online.
Once you’ve established your base hue, use them for experimenting and finding combinations that set your website apart from others.
Most of these sites also offer ready-to-use preset palettes already designed to be harmonious and pleasing, as do some WordPress themes.
Often they are made up of 5 colors, but honestly, I find that they are over the top. In a web project or website logo, you must try to be as intelligent as possible, and the user must recognize you by that color or combination of colors.
One will be the primary color. The other will be the secondary color which can be helpful for elements that need to be distinguished, such as links, buttons, calls to action, etc …
You can also think of varying the tint of one of the chosen ones by making it darker or lighter.
The color of the text
For fonts? Black is better.
The most fantastic contrast is obtained on a web page using opposite colors, white for the background and black for the texts. The fewer colors there are, the more effective communication is.
To put it another way, when everything is emphasized, in the end, nothing is emphasized …
At the limit, instead of using 100% black, you can opt for a dark gray, which still generates a good contrast but is less tiring for the eyes.
It is true in principle, but within your pages, you can have the freedom to insert texts on colored backgrounds, even on images, if they serve to give dynamism to the reading or if you want to highlight something.
The images, typography, and colors follow the best practices of design. Then, you will facilitate the start of your project.