At Webchefz, we tell you a lot about web design. No wonder this is both our passion and our job! But we realize that we have never taken the time to define with you the basics and the main principles of web design.
It was an error (which we will hasten to correct) and here is why:
We love discovering new sites, adapting or inventing new presentations for our creations. So we started to work instinctively, for ourselves and for clients.
But when we trained to become web designers, we learned the fundamentals of this profession and it gave us a framework, thanks to which we progressed quickly. We realized that for years we had ignored the main principles of the field that fascinated us.
And that had slowed us down a lot in our learning.
To avoid the same pitfall, we will share with you 4 key principles of web design basics.
What is web design exactly?
But above all and to avoid possible confusion, we would like to define, what is web design?
In the minds of many people, a web designer is someone who creates websites. Of course, there is a good deal of truth in this idea. But it must be specified.
In reality, web design is only part of the process of creating a site.
In a medium or large web agency, the web designer is therefore only a link in the human chain that produces websites. He will analyze customer demand and needs to translate them graphically.
He uses tools like Illustrator and Photoshop to create the graphic charter and the models of the site. Once he has produced a model for each important page (home, product, contact, etc.), he hands it over to the integrator.
The latter will take care of transforming the visual design into a real website. The integrator, therefore, uses different tools.
It is he who will configure the CMS (content management system, for example, WordPress), produce the code (CSS, HTML, PHP) and upload the site images (logo, navigation buttons, banner, etc.) so that everything corresponds exactly to the result expected by the web designer.
Certain commands will also involve the intervention of a web developer. This will code advanced and personalized tools (a plugin, for example) for the specific needs of the client.
In other words, the web design concerns only the graphic design of the site, while integration and development constitute the technical part.
Of course, in small structures like Webchefz, one person will often manage all these aspects. But it is important to clearly distinguish each phase if you want to create a relevant website.
I therefore first proceed with the graphic design of the models in Illustrator and Photoshop (web design part) and only then we switch to WordPress (integration part).
And so we are going to talk to you today about the first phase of our work.
Four principles to govern them all
Obviously, we will not be able to deal here with all aspects of web design. But four elements seem essential to us to know to approach the graphic creation of websites. Here they are!
1. Grid systems
Since the invention of the codex in the first century of our history, the grid determines the way in which we read. Thousands of variations, involving different arrangements of rows and columns, have appeared over time.
Think about how the text and pictures are arranged in books, newspapers, and magazines. These systems have been ported more or less directly to the web and they are effective.
It can be tempting, when you have a creative temper, to try to avoid the principle of the grid. Many attempts have been made.
But the reality is there: most of these sites, sometimes very beautiful and original, have few visits. We sometimes come to see them for the pleasure of the eyes, but we are not very interested in their content.
And for good reason. Despite their visual qualities, they are mostly illegible.
Today, it is more common for visits to come from browsers on smartphones and tablets than from desktop computers. The question of “responsive design” – the design adapted to make browsing pleasant on small screens – is unavoidable.
This does not call into question the principle of the grid system. On the contrary:
To make our lives easier, a large number of pre-fabricated grid systems have been created; they are responsive, compatible with most web languages and generally free to download.
Among the most popular are 34grid, Flexbox, or responsive grid systems.
Of course, if you have an adventurous temperament or feel that your project must call for a truly unique solution, you can create your own!
Personally, we don’t use a specific grid system (Photoshop has basic alignment tools). But we keep the fundamentals in mind. Align, structure, order the elements in the form of a grid, in order to make them more legible and harmonious.
2. Visual hierarchy
The visual hierarchy is a vast subject that deserves an article in its own right, but we will content it here with recalling the basics.
Applying a visual hierarchy in your web pages consists of:
- Rank the information to be transmitted in order of importance
- Make them clear to the reader by adopting visual enhancement strategies
To start, you will have to choose the place on the page where to place the most important elements.
In most cultures, reading is done from left to right and from bottom to top. We also know that within these parameters, reading a document calls for much more complex rules.
This is especially true on the internet, where visitors “scan” pages much more than they “read” them.
Good websites take into account these advanced reading patterns by placing important elements, such as the logo, call to action (call to action buttons), and keyframes along the axes usually traversed by users’ eyes.
But the location is not everything.
The visual hierarchy employs complementary strategies to highlight your key elements:
- Font size
- Choice of the police themselves
- Font fat
- Element color
- Spacing (a well-demarcated element of the content is better noticed)
- Short and punchy text, easy to read at a glance
- Dynamic element (video / GIF)
Of course, everything is in measure!
Visitors know the codes intuitively and do not like hyper-aggressive designs.
The bold, round font in the middle of the page with good ventilation will send a strong message. No need to insert it into a huge flashing button.
Choose the right web fonts
The term “police for the web” already sounds like an anachronism.
But in the early days of the internet, browsers only offered a very limited amount of fonts – typically, those that were installed on the word processor on the computer.
And if you went off the beaten track, some visitors saw a series of random symbols appear on the screen.
Today, it is still true that some fonts are better managed than others by browsers. But the number of web fonts has exploded. Web designers are sometimes even overwhelmed by the choices available to them!
Free web fonts have increased in proportion. You can easily find them using services like Google Fonts.
For certain professional sites with specific needs, a paid policy will be more indicated. But to start with, a free policy is often enough.
To help you choose your fonts, here are some rules to know.
Serif fonts are for titles only
In web design, Serif (serif) fonts are rather reserved for titles. Indeed, they are more difficult to read when they are small. The body text (paragraph content) should always be Sans Serif.
Limit the number of fonts
To improve visual consistency and avoid sending too many contradictory signals to your visitors, we advise you to strongly limit the number of different fonts for your entire site.
Two or three policies will be sufficient most of the time. Beyond that, you risk losing your visitors – and you with it!
Opt for lightness
Consider mobile devices that may have limited speed depending on the location. Some policies are much heavier than others and this is a criterion that we often forget to take into account.
So try to find light, easy-to-load fonts to make navigation easier.
4. Images and colors
The principles of choosing images and colors are not specific to the web. In fact, they apply in the same way on all supports (print or web).
An essential thing to remember: do not overdo it!
Here too, you have to know how to limit yourself to a few key colors and well-chosen images in the right locations. Say little, but say it well.
Minimalist color palette
Focus on two or three main colors, which work well together. They will have to echo the branding of the brand or the project. You will use them to highlight important areas, as mentioned in the “Visual hierarchy” section.
With a little control, you will be able to look for up to two complementary colors (generally variants quite close to the main ones) to bring a little relief to the secondary elements.
Think of color blindness
5% of the male population is color blind to varying degrees.
This is an element rarely taken into consideration… However, if your target is mixed and even more if it is strongly masculine, it should not be forgotten!
If so, here are some basic tips:
- Adjust the brightness of colors
- Increase color saturation
- Increase the contrast between similar colors
- Give more importance to shapes and separators in your visual strategy
Limit movement to the essentials
Boosting a site is important. This gives it life and positively inspires your visitors. But reserve the movement for a limited number of elements (here again, see the section “Visual hierarchy”).
But avoid giving in to the temptation of the flashy. One dynamic element at a time, at most. Reserve them for key locations on your site.
Even gifs are very questionable if they are not used with the greatest care. To keep your consistency and not disturb your visitors, keep control of the movement.
Choose your images carefully
Do not use the images simply to fill the space. Visitors will notice this immediately and lose much of their interest in your page.
Instead, choose your images carefully. Use them to communicate useful information. Ideally, each illustration should clarify or complement your words.
In any case, avoid any image without a direct and obvious link with your text.
Think about image rights
Pay attention to the rights of the images you use.
It is still too common today for professional images to be reproduced without authorization and without credit. However, there are many stocks of photos free of rights or requiring only from you a link to the author and the site.
For keyframes, you can consider buying a few photos from paid stocks like Shutterstock.
The latter are often of excellent quality and much better targeted on a variety of subjects. This is worth it for the important images of your pro site, those linked to your key pages (it will generally cost you no more than a few tens of euros in all).
And don’t forget that you can be sued if you don’t respect image rights, especially if you make money (directly or indirectly) from your site.
Limit the size of images
Even more than fonts, images and videos are often the biggest problems with site loading time. Again, consider mobile devices, which will likely account for most of your traffic.
Use simple and punchy images, as you will always have to limit their size and resolution.
Principles of web design: the last word
I hope you find these fundamentals of web design useful. By following these basic rules, you will already be on the right track!