Web Design: Guidelines for 2019

Prima di elencarti, però, queste tre soluzioni da implementare quanto prima, voglio farti seguire un ragionamento. La grafica web che funziona non è come la “moda” delle passerelle di Milano, non si sveglia uno stilista che dice “da oggi vanno i siti one page”; la grafica web segue una regola principale: come deve essere il mio sito per favorire la User Experience ed essere indicizzato nei motori di ricerca?

Per questo motivo, le soluzioni che andrò a suggerirti non sono semplici scelte stilistiche, ma intuizioni funzionali che porteranno il tuo utente a sentirsi a suo agio sul tuo sito e quindi a farti posizionare meglio nei motori di ricerca.

Bene, se cerchi una domanda a queste domande, sei arrivato sull’articolo giusto, continua a leggere e saprai quali sono le 3 soluzioni di web design che guideranno il 2019. Prima però chiariamo 2 presupposti fondamentali nella progettazione di un sito web:

Speed

In the world of connection, Internet, digital information, speed is the key! We want everything and we want it now. Whatever we need, the Internet and the web help us to orient ourselves and give us answers to our questions and they do so in a very short time. The more time passes and the less patience we have, we are getting used to having the whole world within a few clicks. In the salesmen’s conferences there is a mantra that repeats itself to the point of exhaustion:

You Never Get a Second Chance to Make a First Impression

3 seconds is the average time that a user waits for to load the site he is looking for and when this does not happen 2 scenarios occur:

  1. Puff, wait anyway, but start with distrust;
  2. Click on the “back” button and go to the site immediately next to yours! Probably your competitor.

The speed of loading a web page can make the difference between: they lived forever happy and customers to “yes, I seem to have seen that site, but there was nothing interesting”.

How does this help us in our search for the perfect web design? Websites need to load as fast as possible, web design needs to prioritize loading speed right from the design of the site itself. It’s not enough anymore, but I add I’ve never been enough, to rely on designers who create a beautiful site with a good look, the perfect web design is born from the union of attractive design and “sustainable bit”.

So goodbye to giant photos, uncompressed videos, javascript and heavy animation.

Wait, I’m not saying that in 2019 we will say goodbye to videos and images, indeed, but this year they will be incorporated in such a way as not to slow down the loading time of the site.

From Mobile Friendly to Mobile First

Are you looking for a quote for a site? If you find Mobile Friendly or Responsive written, forget it!

Now let me explain. In 2019 saying that a site will be Responsive means not being up to date. Okay, these statements are a bit strong, but I want to be so drastic because you have to have a clear concept: Mobile is the King.

In my consulting activities I’ve heard dozens of times, it certainly happens to you or maybe you’re thinking about your market this phrase: No well, but my client looks at the site from a PC. The answer to this question is from Google: 71% of internet traffic is from Mobile. There is no category of site that is most used by desktop. Do you see yourself more often at home surfing in front of the PC or sitting on the couch doing research on mobile and mobile phone? To be even more sure you can check the traffic that arrives at your site from mobile with the Traffic Analysis tool of SEMrush.

What does this have to do with design? A few years ago sites were designed for desktops and adapted for mobile use, the winning key now is to design the site for the mobile user and then create a version for the desktop user. Thinking like this will not only help you satisfy your customer by offering them the best experience on the device they use the most, but it’s not news today that search engines favour mobile sites even with lists of different search results.

Designing in this way, then, will help you achieve a better SEO ranking.

These are the main keys that will guide the web design of 2019, and now here are the 3 Must Do’s of 2019.

The 3 guidelines for web design in 2019

Asymmetrical Layouts

In 2019 the trend of web design is to think outside the box… grid. Asymmetric designs are leaving their mark at the beginning of this year, the restyling of many brands, in fact, is marked by this new impetus.

Because if the design has to be minimalist and our user is distracted, creating asymmetries of layouts helps us to recover attention.

Do you know what inattention blindness is? Our brain is very active and reacts to the environment around us by pre-processing information: it selects, chooses and reinforces what it wants us to see. To voluntarily direct attention to more interesting stimuli, we can use contrasts and discrepancies that create an unexpected event, attracting attention.

For this reason, the right asymmetries placed in the right place, can attract the attention of our user who otherwise would simply “shake down”. Then they give the green light to hierarchies of asymmetry, unusual positioning of the elements on the page, layers of colours, irregular patterns and creative use of space.

Goodbye Side

I still can’t believe really, but probably the 2019 will be the year in which we will greet the Side. No, it will not be so, but in a design that becomes more and more simple and clear, the typography finds his “thank you”. Fonts sans-serif are more and more considered to be without a soul, then a typography custom is becoming the must-have brands.

Example of web design with typography custom

In the Brand Book are space directions for the type of font to use on the web, and a typography particular and specific can help give an identity to a website, especially when contrasted with a minimalist design and is devoid of “frills”.

Micro Animations

Clean, creative, simple, quick, but let’s not forget that with our site, we talk to users and, hopefully, to our future customers. For this reason, in 2019, the micro-animations can create a unique experience of interaction with the user while browsing.

I am not speaking of simple color change on a button, I’m talking about real interactions that can entice the user to “try out” our website. The moving objects also helps to keep the attention of the user and, if done well, create a small experience that will remain in the mind of the user.

Web sites with animations to stimulate the user

A little trick that you can use on your site? If, for various reasons, the loading of the pages of your site takes more than 3 seconds, try to implement a micro-loading animation, not the classic wheel that turns in on itself. By doing so, you can turn a weak point into a special feature.

Web design: How to Choose Right Website Colors

Web design: psychology of color for matching the best

The first impression is what counts. Far from being just an old saying, this statement contains a source of truth. A study by the university of Princeton dating back to 2006 revealed that the human brain uses only a fraction of a second to form an opinion about a person during the first meeting. The same applies to websites.

Another study, this time conducted by Google in 2012 and entitled The role of visual complexity and prototypicality regarding first impression of websites: Working towards understanding aesthetic judgments(“The role of visual complexity and prototipicità in the first impressions on the web sites: towards understanding aesthetic judgments”) tells us that a user takes less than 50 milliseconds to form an opinion on a web site. In other words: after only 0.05 seconds, the average user has already decided whether to continue the navigation of a site, or leave the session and return to the search results.

The first impression a user gets of a web site depends on several factors, such as the structure of the site, the organization of the white space, the font, and, without a doubt, the colors and the color combinations used on the page.

What is web design and what aspects to consider?

Web design deals with the design, development and usability of a site. Aspects that a designer must always keep in mind are:

  • the responsiveness from the mobile
  • the user experience
  • the choice of colours
  • the alignment with the chosen brand identity
  • the content design

What is the color psychology?

Colors for the web: the choices of web design

Not only the eye, but also the human brain plays an important role in the perception of colors. In fact, even if we tend to consider the color of a physical object, in reality it is a psychological phenomenon: in summary it is a processing generated by nerve signals that the photoreceptors on the retina send to the brain.

The relationship between colors and the human brain is complex in nature. Not only the colors that are perceived in the cerebral cortex, but they, in their turn, deeply affect our psyche. In fact, our mind connects to certain colors, sensations, feelings, and specific associations social, and cultural. This influence that colors have on our is the fundamental theme of the psychology of color.

The psychology of color is based on a combination of scientific, psychological, and cultural. In fact, the way in which our brain reacts to certain colours is determined by both traits, the evolutionary world by our specific cultural background. From one side, some of the associations are the result of the evolutionary process.

For example, very few people would choose the brown as a favorite color because of its association with material in decomposition. Other associations are determined by our cultural baggage. Being born and growing up in a certain Country with a certain culture, you learn to associate certain colours with certain feelings and thoughts. For example, in the western world, brides wear white and black is the color of mourning, while in South Africa the color of mourning is red and in India, brides wear Sari-vibrant and colorful.

What is the meaning of the colors

Diseganre a web site: which colors to use?

As a consequence of the evolutionary processes that of our cultural background, the western world has associated with the primary colors with the following ideas and emotions:

  • Red: the color red represents vitality, energy, passion, and love. However, red can also be associated with aggression and anger.
  • Green: is the color of life and of nature, and evokes positive feelings in the observer, such as calm and hope. In addition, the color green represents generosity, security, harmony and growth.
  • Yellow: is the color of the sun. It inspires joy and happiness and symbolizes friendliness, openness and freedom. The color yellow is known for its ability to improve the mood of the observer.
  • Blue: blue is relaxing. Is the color of the sky and sea and symbolizes peace, trust and security.

The psychology of color in Web design

In the design of a web site, the usability and the structure of the site are certainly important elements, but they are not always sufficient to achieve a conversion rate optimal.

In fact, the color choices play a central role in the creation of a successful website. Generally, neutral colors such as black, white and beige are used as a background, while the more vibrant colors are used for the elements in the foreground. More recent trends, however, see the neutral colors assume a dominant character in the economy of the web page. Their function in this case is very similar to the function of the so-called white space, that is, allow the reader to pause, digest information that is read, and to prioritize the content of the page. In addition, the neutral colors, thanks to their character, minimalist, are considered to be stylish, and are often associated with high-quality, progress and new technologies.

The choice of combinations in web design: neutral colors

Example of a use prominent of neutral colors in a web site

The warm colors like red, yellow and arancionand have a strong character and can be used to attract the user’s attention on specific elements. However, if used too often on a single page, they lose their positive connotation, and may even evoke negative feelings, aggressiveness and compulsion.

On the contrary, a calming effect is obtained with the combination of different shades of green and blue. Also, the blue conveys loyalty and security, and for this reason is often used for websites of banks, insurance companies, and medical studies.

Web design and colour psychology: the effect of the color blue

Example of the use of the blue color in the website of a dentist

The perception of color also depends on what shade of the same is used. For example, the more delicate shades may not be used for the attention of users, however, can help to convey a sense of harmony and balance.

Design and Colors of a web site: the Buttons

A study published in the Journal of Business Research has revealed that there is a 15% chance that a customer will return at a store decorated in tones of blue than the orange, thus showing that the colors have an influence not only our thoughts and feelings, but also our actions. Consciously or unconsciously, all users are influenced by the colours used on a web page and often act on the basis of associations, unconscious that they cause. For this reason, change the color of the button of a call-to-action (CTA) can result in a significant improvement of the conversion rate.

A call-to-action button is made up of five elements, that is, in the best-case scenario, should coexist in harmony with each other and with the design of the site. These elements are:

  • form;
  • size;
  • call-to-action;
  • position;
  • color.

All five elements affect to a different extent, the conversion rate. However, several studies have shown that color plays a central role in the improvement of the KPIs. In a study from Maxymiser, for example, a company was able to increase clicks to checkout by 11% just by changing the colors on your web page.

The warm colors such as red, orange and yellow have the conversion rate better.

Web design: CTA red color

Example of the use of the colour red to highlight the CTA buttons in an e-commerce site

Also the green is a great alternative, as most users associate the green with the green light of the traffic light, and then with the feeling of doing the right thing.

Right colour combinations in web design: green color for the CTA

Example of the use of the green color to attract the user’s attention on CTAs

The darker colors such as black, grey and brown have, instead, conversion rate very low and are not suitable for buttons and CTAs.

In conclusion, considering the great influence that colors have on our psyche and on our decisions, the choice of colours reveals a fundamental step in the design of a professional website. Some notions derived from the theory of the psychology of color can help both designers that entrepreneurs not only to take the right decisions during the design phase of a new site, but also optimize an existing one.

What are the colors of your website?

Based on the psychological theory of the color you’ve shown in this post do you think you have made the right choice? Tell us your experience.

What is design thinking

Do you want to know which is one of the most effective creative processes that allow you to achieve the most creative and dynamic results in your projects?

In this article, I want to show you what design thinking is and make you understand why, by focusing on the user in your projects, these projects reach a quality that you don’t even expect!

Hello? Let’s start with.

To be able to talk about the so-called design thinking and define it, we must first think about the English term “design”. Although the word “design” is almost always used to indicate an object or a finished product, its most complete meaning is the one that encompasses the entire creative process. A verb, therefore, “to design”, and not a name.

Design is a whole series of problem-solving actions, which lead to solving a problem with creativity, with an idea.

There is a lot of confusion around the definition of design thinking, just as there is confusion in the definition of the word design itself. So what is design thinking? Is it designer thinking? Is it renewing objects?

Now I give you a clear and simple definition based on what the most important experts in the field say.

A definition of Design thinking

There is a great debate about it but, basically, without going into academicism or argyrous definitions, we can talk with certainty about some aspect of this process. Because yes, first of all design thinking is a kind of creative process.

What differentiates it from the usual creative process (Problem>idea>solution) is the attitude itself towards the design and creation phase. The attention is focused on the word “thinking” and therefore on the fact that at the base of every project there is the attempt to respond to a human need.

Design thinking is therefore a process centred on the human-centered person, his needs and the solutions that are conceived. It is the user, through observations and research by the designer, who decides whether a product should exist or not.

Herbert Simon, a well-known economist and psychologist of the second half of the 20th century, stated in his book The Sciences of the Artificial, that in this type of creative process, “there are no judgments. This eliminates the fear of failure by increasing input and participation. Spontaneous ideas are welcome, because they are the ones that lead to the most creative solutions. Everyone is a designer, and design thinking is a way to apply design methodologies to everyday life. (tweet me)”

For Tim Brown, founder of IDEO, whom I told you about in the article about how the game can improve creativity, design thinking is the pillar on which to base your design. For Tim Brown, “thinking design” is the attempt to carry out an ideative revolution, to no longer try to make beautiful, useful and profitable objects, but it is something much greater: it is the building around an object its own meaning and its own history. To give a reason to every object created. (tweet me)

But to better define design thinking, it is good to describe which are the most important steps within this process.

Creating a meaning and a story around each design object can seem very complicated, and it is, but only because every designer needs important specific skills. The process itself is not complicated and can be summarized in 4 phases.

1. Defining the problem

It’s simple, isn’t it? There’s a problem, okay, now we have to define it. Actually, it’s probably the most complicated phase. The most complicated part, in particular, is to decide which is the problem to solve, because there may be many problems, which divert attention from the main ones. You have to choose the right one.

In design thinking, the observation process plays a crucial role. As I said before, “design thinking” is focused on the user, the person, so you understand how essential it is to carefully observe what the user’s attitudes are, his needs, his problems.

You have to touch things, hear opinions, see behaviours. That’s why a creative should never work while being locked up in an office all day long. Even just taking a simple walk can give an important stimulus to creativity.

A designer’s mind has to be curious, it has to ask itself continuous questions, it has to ask itself why? Why does this not work? Why do people interact with one object in one way and not the other? How can I improve this?

Once the problem has been defined, all the mental preconceptions that accompany it must be erased around it, so that we can go to phase 2. Let me give you an example: instead of defining a problem as “I have to build a chair”, it removes all the preconceptions behind the idea of a chair and thinks instead “I have to create something to keep people suspended”. It allows you to be more creative, doesn’t it?

2. Consider several options

The philosophy of design thinking states that no matter how obvious the solution to a problem may seem, you should always consider other problems. Looking at a problem from different perspectives always leads to better results. (tweet me)

Even the best teams and the best creatives often, for lack of time or perhaps motivation, fall into the “trap” of applying the same solution to all problems, perhaps because it works the first time. This is a wrong approach both from the point of view of effectiveness, because you neglect possible better solutions, but also from the point of view of fun! That is, what a bore it is to always do the same things for every project?

At this stage of analysis of the various options, teamwork is very often more effective. Better ideas emerge from 5 people in one day rather than 1 person in 5 days. Find out some things I’ve learned about teamwork.

The trick is to recognize each proposal and each option as a possibility, as an opportunity.

4. Create

Okay, so we’ve come a long way at this point. It’s time to choose the “winner”. The objective of phase 4 is to conclude it with the initial problem totally solved in the best possible way.

This phase, which is theoretically very difficult, if you have the right technical skills, comes very easily to an end. Most of the work and study has already been done in the previous phases. It is therefore a question of completing the work of research, definition and creation of prototypes and tests carried out so far.

Here too, however, the feedback phase comes in handy again. This can lead to both future product improvements and new problems and therefore new challenges to be faced and solved through the design thinking process.

Useful resources

Obviously, a single article is not enough to complete this topic. If you are interested in deepening a very interesting book on this subject (I recommend it to me in the university field and of which I have read some passages in the university library) is “Design Thinking: Process and Methods Manual” by Robert Curedale. Yes, it’s in English, I know! 🙂

Other articles I’ve written on Grafigata.com about topics related to Design Thinking are instead:

The creative process and the game

Brainstorming techniques to improve the creative process

Conclusion

Okay, after this article you should be a little clearer about what “design thinking” is and how it is structured.

Before concluding. It is important to underline again that design thinking is not a creative process applicable only to the world of design, graphics or art but in any field, from marketing to economics, from engineering to everyday life.

This process unleashes creativity and leads to unthinkable solutions at the beginning. That’s why today it is so loved and studied.

Let me know what you think of this article! Do you also apply the process of design thinking to solve problems and develop projects in your agency, studio or home room? Let me know your experiences below, in the comment box!

What is Susy and how to use it for web design

Susy is a preprocessor used in Sass to generate grids custom: this is a very useful tool as an alternative to the libraries used as Bootstrap or Foundation.

The latter, however much they may be fast, they are also very limited, because:

  1. These libraries use a single grid which will then be used throughout the project. In the event that you need to exit from the pre-established pattern, you will need to override the classes, or create new ones, going so that you bypass the library selection. Let’s see some of the items in which you are restricted:
    • The width of the gutter (space between columns): in Bootstrap the gutter of 15px, but it will be difficult to always keep the same space in a single project;
    • The gutter can only be ‘% ‘or ‘px’ depending on the chosen library.
    • The number of columns: in general, you use a grid of 12 columns, this number will be however armored, over we can’t go, even using an additional grid of, for example, 5 columns.
  2. Carry around all of the code to go to cover all the possible cases: it is a question of several bytes of code which is used only a part, sometimes minimal.

Why use Susy solves these problems

Using a preprocessor such as Susy , we can overcome these problems.

With Susy, in fact, we have the possibility to define configurations of grids that then we will use in our project: we can define the X column and gutter custom, both in size and in the measurement unit (px, %, rem, etc..). Susy will do all the necessary calculations to be applied to our classes.

The choice to take care only of the calculations is due to a simple reason: we choose whether to use the property float, the flexbox, or other. Susy in addition it also gives you the chance to have a preview of the grid. By enabling this option, the preprocessor will apply an svg image to the container of the columns. For better use of this tool, we make use of the library breakpoints, useful to manage the various media-queries.

How to use Susy

Example 1

Configuration:

What is Susy and how to use it for web design

In this example, we have a classical grid of 12 columns equal, a gutter defined in the px and the preview of the grid. We also have another item: spread and container-spread. Let us analyze to better understand the concept of spreads: the container-spread describes the manner in which the gutter is distributed between the columns, so you can calculate the exact width of the columns themselves. The possibilities are:

  1. narrow: the gutter is distributed between the columns, as a result, the number of the gutter will be less than the number of columns. By doing so the last column will not have the gutter on the side but will be flush with the container.
  2. wide: The gutter is divided in two and applied to the sides of each column, the number of the gutter will be equal to the number of columns.
  3. wider: The gutter is applied to both sides of each column in its original size, we would have a gutter more than the number of columns.

In our case the grid will be used in the following way: Enable the svg guide:

What is Susy and how to use it for web design

We define the behavior of the columns, specifically, you have two columns at 50% with a gutter of 30px between them. By providing that the gutter remains only between the two columns (‘container-spread’: ‘narrow’) we bring to zero the gutter on the second.

What is Susy and how to use it for web design

Let’s see how it generates the css on the columns:

What is Susy and how to use it for web design

As you can see, Susy , we had a big hand in this calculation: let us remember that we used columns with width in percentage and gutter in px.

Example 2

Configuration:

What is Susy and how to use it for web design

This example is very similar to the previous one, the only difference is that we used the property wide of the container-spread. We will use then the padding side 2rem instead of the right margin:

What is Susy and how to use it for web design

Let’s see how it generates the css on the columns:

What is Susy and how to use it for web design

Also in this case Susy has been of great help.

Example 3

Configuration:

What is Susy and how to use it for web design

In this last example, we’ll use a grid, asymmetrical, or use of columns of different size, in particular we want to:

  • the first column of 120px
  • the last column of 12em
  • A central space ideally divided into 4 equal parts.

Let’s see how you can use this configuration in sass:

What is Susy and how to use it for web design

To define the width of the columns we will use this syntax:

  • column 1 ( 120px ) : width: span(1 first);
  • column 2 ( all the remaining space , we occupy all 4 spaces of the same size ) : width: span(4 at 2 );
  • column 3 12em: width: span(1, last );

The compiled css will be:

What is Susy and how to use it for web design

In these examples, we have used the property, css float, but nothing prevents us to apply the same logic to the property flex or inline-block.

In addition to define the grids and to use them, with Susy we can also make specific interventions on the individual columns to create exceptions. Let’s look at an example. In this case, we use a grid with property ‘container-spread’: ‘narrow’ (as in the example 1) so that you can have a gutter between the columns. If we want to, however, get a situation of the type:

  • 1st column: the gutter on the right
  • 2nd column: no gutter
  • 3rd column: it occupies all the available space while remaining attached to the right edge, and the column n° 2

then you’ll need to write the code to sass as follows:

What is Susy and how to use it for web design

As you can see, we have removed the gutter on the second column and apply the properties wide to the third (the width of the column is added to the size of the gutter) so that it occupies the space destined for the gutter of the second column, thus reaching the goal that we had set.

How to invoke the different configurations

All’ inside of a project we can, as said, use different grids. To recall the different configurations where we need, we can use a mixin like the following:

What is Susy and how to use it for web design

And then use it as follows:

What is Susy and how to use it for web design

The 6 basic principles of graphic design

One of the questions that is most often asked by young designers who want to improve and by those who are approaching graphics is “how can I improve as a graphic designer?”.

And that’s a good question. I’ve asked myself that question several times myself. And I keep asking it, driven by curiosity (the most important feature for a designer).

In response, I’d like to reflect on how we all learned complex subjects like mathematics or foreign languages at school. The first thing you do when you approach a new language or subject is to learn the basics.

Recently I’ve slowly started to learn French again, as a personal whim, and I’ve obviously started studying things like names, pronouns, numbers, pronunciation and sentence structure. In short, I concentrated on the basics.

The same thing is with graphic design.

One is not born a graphic designer, one becomes one. Learn to be one. And to learn you have to study, you have to apply strictly what you studied and focus, first of all, on what are the fundamental principles of graphic design.

In this article, helping me with the best treatises of the last hundred years on design, I have identified precisely those that are the 6 fundamental principles of graphic design.

But before you go and see them, it’s a good idea to start even more from the ground up.

Line, direction, shape, size, texture, color and brightness (or value). These are the 6 basic elements of graphics and design.

If you want to approach the world of graphics (of design and also of art) from scratch, you probably have to start from here.

If these basic elements are going to build the floor of knowledge as graphic designers, the 6 basic principles I’m going to talk about now, will be the bricks. The elements with which to build everything.

How to improve knowledge about fonts and typography?

The first thing to do is to study the terminology and dynamics of fonts (read what a font is and what the elements of a font are). You need to know how things like kerning, tracking and what contrast and x-height are, among many other things, work.

It also becomes essential, of course, to be able to choose and match fonts. In this regard, read my guide to choosing fonts and how to match them.

Just because typography is one of the fundamental pillars of graphics, I created the only course for designers dedicated to fonts and typography, Font-Ninja.

Principle 1: The printing works shall be the basis of everything

Typography and font study should be one of the fundamental bases for every designer and certainly one of the very first things to know for a young designer.

You can understand a lot about the qualities of a designer with the characters he chooses to use. And how he uses them.

You can understand a lot about a designer with the characters he uses.

Typography is one of the cornerstones of graphic design. Entire projects can be created simply by using typefaces and combining them. You can completely transform an entire graphic design by better handling the fonts used. The dynamics with which texts are used can also become the real creative aspect of a project.

Principle no. 2: grids are not constraints but starting points

“The grid system is a help, not a guarantee of success. It allows you to make a whole series of uses of it, among which the designer can find a solution suited to his personal style.

But you have to learn how to use the grids; it’s an art that requires practice.

– Joseph Müller-Brockmann, in the book “Grid Systems in Graphic Design”.

In Italian, in the graphic field, the word “grid” is often replaced by “cage”. This generates a negative effect: it gives us the idea that it is something that imprisons creativity.

In reality, grids are not constraints. They are not “cages”.

Grids, in graphic design, are exactly the opposite! They are the playing field in which to play. They are the white sheet of paper from which to start in an orderly fashion. They are the starting point for every design project.

Or at least that’s how it should be.

Very often, however, many, too many designers ignore orderly design through the effective use of grids.

Principle 3: Use white space to create balance

White space should be considered as an active element, not as a passive background

– Jan Tschichold

White spaces, understood as “empty” spaces, help to establish balance and visual harmony within a graphic design. They serve to conceptually link various elements together and to increase the readability and usability of a project.

Learning how to manage white spaces and take advantage of their dynamics is really very important to create quality designs.

Of course, you can take inspiration from sites like Behance when you look at other designers’ projects. But it’s much more effective in the long run to develop your own good taste. Your ability to manage white space.

For example, you can start by learning how to manage white space within texts, in typography.

As I write in this article about white space, in typography, there are micro whitespaces and macro whitespaces. Macros are, for example, the margins of a page or the padding in a website. Micros are things like kerning, tracking and line spacing.

Learning how to handle micro whitespace well is already a big step forward. One of the most difficult aspects in typography, for example, is managing kerning (i.e. the space between characters in a font). A help in this direction is this little game, Kern Type, which I discovered where you have to arrange the letters so that they have the right kerning.

I did 92/100, I dare you to do better!  Write in the comments to this article your result!

Another way to train your eye in the management of white spaces, which I found here, is to: take a famous graphic design, draw the axis of the x and y, simplify the elements of the project into basic forms, analyze how these elements are balanced between them and finally rearrange them taking into account the spaces and relationships between them.

The advice is to pay great attention to how empty spaces affect the elements and balances.

Principle 4: Dimensions create visual hierarchies

For the human eye, something that is visually larger in size is more important: it is something to pay more attention to.

When you want to create visual hierarchies, then, the management of visual elements is of paramount importance.

It’s no coincidence that, in books or websites, chapter and paragraph titles are larger than text. Once again, in fact, you can learn a lot from typography. By distributing the texts in the right way within a poster, you get the right transmission of message to the viewer.

Within a design project, whatever it is, the biggest elements are the ones that stand out most and, therefore, are most important.

If you design the homepage of a website, you have to make sure that the user’s gaze “goes” to the most important elements or that he wants to find. If a travel search site enters the very small search bar at the top right, that site will get poor results.

While, if the site will give the right dimensional prominence, exploiting also white spaces and grids, then the effect will be radically opposite:

Principle 5: Colours convey meanings and emotions

Those who have studied art know: colours make the difference. And they play a leading role in graphic design.

Colours can convey the meanings of what you are communicating. And they do so through emotions.

Choosing a colour palette therefore becomes a very important step in the creative process. In this article I give 10 practical tips on how to choose a color palette. But the key points can be summarized in these:

Choose the colors according to the target you’re talking to. Each person, or group of people, reacts differently to a color based on their experiences, emotional situation and cultural dynamics.

Identify in detail the purpose of the colors you need to choose. What goals do you want to achieve? What message do you want to convey? These are crucial questions to be answered in order to convey the right meanings and emotions.

Simplicity. Don’t choose too many colors and choose them in an orderly and consistent way. A background colour, a primary colour and a colour to bring out certain elements are generally enough.

One way to train yourself to create effective colour palettes is to take your cue from what nature has to offer. Use apps like Adobe Color to generate palettes by photographing environments, natural scenarios, or anything else.

Likewise, you can take inspiration from the great masters of art, the cinema or other designers.

Principle 5: Colours convey meanings and emotions

Those who have studied art know: colours make the difference. And they play a leading role in graphic design.

Colours can convey the meanings of what you are communicating. And they do so through emotions.

Choosing a colour palette therefore becomes a very important step in the creative process. In this article I give 10 practical tips on how to choose a color palette. But the key points can be summarized in these:

Choose the colors according to the target you’re talking to. Each person, or group of people, reacts differently to a color based on their experiences, emotional situation and cultural dynamics.

Identify in detail the purpose of the colors you need to choose. What goals do you want to achieve? What message do you want to convey? These are crucial questions to be answered in order to convey the right meanings and emotions.

Simplicity. Don’t choose too many colors and choose them in an orderly and consistent way. A background colour, a primary colour and a colour to bring out certain elements are generally enough.

One way to train yourself to create effective colour palettes is to take your cue from what nature has to offer. Use apps like Adobe Color to generate palettes by photographing environments, natural scenarios, or anything else.

Likewise, you can take inspiration from the great masters of art, the cinema or other designers.

Principle 6: Design is beautiful if it is useful

Graphic design – which meets aesthetic needs, respects the laws of form and the needs of two-dimensional space; which speaks using semiotics, sans-serif and geometry; which abstracts, transforms, translates, rotates, expands, repeats, reflects, divides and groups – is not good design if it is useless.

Graphic design – which evokes the symmetry of Vitruvius, the dynamic symmetry of Hambidge, the asymmetry of Mondrian; which is good Gestalt; generated by intuition or by a computer, by invention or by a coordinate system – is not good design if it does not collaborate as a tool in the service of communication.

– Paul Rand, from the book “Thoughts on design”

This quote from Paul Rand is one of my favorite phrases about design. Design is neither decoration nor marketing. Design is not just aesthetics and meaning. But a combination of all of this.

This is a principle on which I value a lot and which I try to underline often in the many articles of Grafigata.

I don’t know how you can “train” yourself about understanding this aspect. Maybe it comes from experience or perhaps from the sum of the knowledge of the other 5 principles. But you always have to take into account, when designing, both the meaning and the aesthetics.

Conclusions

To write this article I used as sources, apart from my knowledge and my own articles here on Grafigata, a series of books and online content.

First of all the book “Design Thoughts” by Paul Rand, “Grid Systems in Graphic Design” by Joseph Müller-Brockmann, this article on Freecodecamp by Jonathan Z. White, the ebook “Universal Principles of Design” by William Lidwell, the “Canone Vignelli” by Massimo Vignelli, the English Wikipedia page “Visual design elements and principles”, partly taken from this article by John Lovett.

This is because the topics of this article, being the basis of a topic like design, are enormously vast.

If after reading this article you’re still tempted to study and deepen the world of graphic design and its fundamental principles, then you’re on the right road!

SVG or Canvas for your HTML5?

These two elements are embedded in the HTML , and are often used to create animation, games, visual to-date, interactive, etc.. For their support on the browser, refer to: Canvas and SVG.

Below we list an outline of the main features without detailing too much the code.

CANVAS

Literally Canvas: acts just like a canvas for a painter, delimits, i.e. the area in which you will be able to draw (in both 2D and 3D, even if the latter is not supported by most browsers).

Is an element/bitmap programmable, so it acts only on pixels (raster). Being generated through programming is not so for everyone.

His “reaction to events” (event handler) that occurs in the document is only to regenerate the whole scene, ridisegnandola. The animation then takes place frame by frame.

The Canvas depends on JavaScript, so if the latter is disabled, or the user uses a reader/interpreter will not be displayed.

It is suitable for dynamic applications type games, and animations-intensive, faster loading, and independent of the DOM.

Here are some JavaScript libraries for animation in Canvas: processingjs, kinetic.js, paper.js, fabric.js

To draw a line through Canvas, to start simply with:

<canvas id=”example” width=”300″ height=”300″>

 <!– If your browser does not support Canvas, is to report to the user –>

 <!– You can enter a content “fallback” (text, images, flash, etc..) –>

 <p>your browser does not support HTML5 Canvas.</p>

</canvas>

Below is the JavaScript code to insert at the bottom of the HTML code:

var canvas = document.getElementById(‘example’),

context = canvas.getContext(‘2d’);

 // the code that will draw will be inserted below…

context.beginPath();

context.moveTo(50, 50);

context.lineTo(250, 150);

context.stroke();

The generated image will be this:

SVG or Canvas for your HTML5?

SVG

Is the basis vector, and scalable and very good for high resolution screens.

The images are generated through XML, easy to create without programming experience. You can use the following programs/tools:

The images created in SVG are added to the DOM and can be modified by using Javascript and Css, also with the events that you have on the other elements of the document.

The animations act on the “drawing” itself, you can then define the transformations on it and it does not require you to regenerate the element to the SVG.

You should use SVG for animations and intensive games, because, being integrated into the DOM, have longer loading times of the increase of the complexity of the document. Are usually used for animated icons, and interactive charts are not too complex.

On the SEO side of the SVG are more accessible because they support the text.

Two of the most used JavaScript libraries for animation and the management of visual-data in SVG are d3.js and raphael.

Example to draw a circle with a border using SVG:

<svg width=”100″ height=”100″>

 <circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow” />

</svg>

The generated image will be this:

SVG or Canvas for your HTML5?