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!

The 4 reasons why you can’t do without User Experience Design

The four reasons why you can’t do without User Experience Design

After trying to explain to grandmother what the User Experience is, in this second article we go deeper into the issue and try to understand why the UX is actually so important.

The explanation can be summed up in four important reasons, all fundamental for the success of a project, digital or not.

A good work of UX, in fact, is potentially adaptable (and useful) to any type of project that has as its final goal to create a tool that is easily usable by users.

Let’s see, one by one, the four reasons why today it is essential to devote oneself to the study of UX Design.

It helps to define objectives and targets

Any self-respecting project must always keep in mind the objective it sets itself and the people to whom it is intended to communicate.

As already explained in the previous article, an effective analysis of the User Experience starts from the search for tools that are already working, and then dedicates itself to the study of potential users who will use the product in the design phase.

Always keeping in mind where we intend to go and who we intend to reach is therefore an essential part of the analysis work of the UX.

It helps to test a project before its actual execution

The third aspect to consider, considering from the point of view of “User Experience Centered”, can be summarized in the word “test”. By test we mean showing our idea, just sketched, to anyone who can give us a critical opinion on the work done.

In this way, even before dedicating ourselves to the development of a new website or a new app, we have fundamental data on how our product will be perceived and on what critical points we should concentrate.

Saves money

Everyone will agree that creating something new (whatever the end product) is an important investment in terms of time, energy and money.

Starting from a good project approach, as mentioned in the previous point, allows us to have information on possible criticalities, before starting the production phase. In this way, we can avoid uncomfortable and often wasteful turnabouts caused by conceptual problems at the base of the project. In this way, we will avoid putting the entire “production chain” on stand-by.

Creates empathy and loyalty among users

People, especially on the Internet, are looking for tools to simplify their daily lives and often find themselves having to choose from a multitude of similar proposals. So what motivates a user to decide for our proposal over another? Among the different objectives set by a UX designer is the ease of use of the interface.

Users are now so used to navigating and interacting with applications, that they no longer bother to look at the contents of each page, but they scan quickly in search of the fastest solution to their problem. For this reason, we can say with certainty that a streamlined interface and good usability are the basic elements of user loyalty.

In all likelihood, a user who can easily complete a path that takes him from an initial question (need) to an answer (solution), within what could be our site, will remember in the future to reuse it, maybe even to recommend it.

Conclusion

The UX is certainly not an easy and fast process. Instead, it is a path of analysis and development that, if properly completed, allows our projects to gain and maintain competitiveness on the market in the long run.

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?

Measurement of the UX: prompt the user with the polls

What do you learn by reading the article:

  1. What is UX?
  2. How to measure the User Experience: 4 moments to do so
  3. Tools of the survey: indirect and direct
  4. Surveys (including a short video for doing it with Google Forms)
  5. Examples of surveys and tips

What is the UX?

A definition of UX User Experience (user Experience):

The UX is what a person feels when using a product, system or service

What is the User Experience?

The UX design is a design process that is used to make a relationship pleasant, with personal value of trust and loyalty between people and products or services. The key principle of UX is to design centered on the users, then you need to ask the user his opinion!

Measurement of the UX: 4 the right moments to ask for opinions and feedback

To create a product that people want to buy, it is necessary that the relationship between people and your product/service is positive. Measure the satisfaction, listens to concerns, criticisms and needs of the people. There are 4 crucial moments:

1 – During the development

The request for feedback is one of the fundamentals of development agile. It is working on prototypes of the product and ask for feedback and confirmation. My suggestion? Ask the grandmother!

Ask people who may have more difficulty using your service/project (still in target… mine is a provocation), it is from them that you will receive more tips to improve.

2 – During the activity

During the activities of a service (such as SaaS, APP and e-commerce) to measure the satisfaction of users over time. Facebook for example, it sends periodically a request:

Facebook Survey: Henry, we are interested in your comments. Tell us about your experience on Facebook; in just 3-4 minutes.

3 – the delivery of the product, or after the first use

The standard for the measurement of satisfaction is the Net Promoter Score. The system is very simple: a question and a rating scale of 0-10.

The standard question NPS: would you recommend the product/service to a friend or colleague?

The people who respond with a score from 0 to 6 are detractors, people who don’t like the product. A score of 7-8 are indifferent, passive. The values of 9-10 instead of representing satisfied, the promoters of your product.

4 – At the beginning of the project

Verification objectives and strategies from the outset. The service 99designs.it to create your own customized logo, it does perfectly. The activation of a project it asks you to calibrate features with a slider that moves between two opposite characteristics.

How to best leverage the results of the survey on the User Experience?

Very simple: the negative opinions are the basis for implementing improvements. Are the main thrust to make products that people are willing to buy.

The positive opinion confirms the value of the design, but not only. Can also be used as reviews or testimonials.

Example of a satisfaction survey at the conclusion of a course of training in the classroom: the good results of the Net Promoter Score.

Another example of the results of the survey at the conclusion of a course of training in the classroom. LOVE! A survey carried out with getfeedback.

Survey tools to measure and understand the UX

We can group them into tools of direct and indirect.

1# Indirect Instruments: reviews and comments

The indirect instruments are all those that are used to analyze the tracks and the behaviour of the people after that has already taken place, the interaction without involving the people in an active way.

Then the whole part of Web Analytics, by tracking behavior and measurement of brand sentiment.

I dwell on the reviews, the most direct expression of satisfaction. People can leave a comment positive or negative. The council, therefore, to collect reviews and comments from all of the channels relevant to your business: Facebook, Google myBusiness, Tripadvisor, Amazon, forum, industry…

Comment and review on the platform the Master Club after my talk at Web Marketing the Festival in 2016. The opinion is positive but there is also a criticism: “it Would be very interesting to see the application on a Case History”.

2# Direct Instruments: User Test

The user test sessions are where you put your product (or your prototype) in the hands of the people, and observe how they behave – without interfering.

Very different from the interpretation of web analytics (or user registrations, such as those of Hotjar), because the user test people know that they be the subject of an experiment by the end of the specific and declared. I recommend using inVision: allows you to create interactive prototypes and to test them, and record the faces of the people.

It is important to eliminate all interference and observe the behavior to understand the true emotions.

While you test your product, the user says, which is GOOD but makes this face. Something is wrong.

The tools to do the Surveys

Surveys on the user experience are among the methods of investigation direct that I prefer. Some of the tools in order of my preference:

1- Getfeedback

My favorite. The free version allows you to collect 20 responses per month.

Advantages:

  1. the interaction and animations on the polls front-end are excellent, even from a mobile device. Answer it is a pleasure!
  2. the construction of the surveys has an interface that is excellent for use in back-end;
  3. integration with an email marketing platform allows you to easily distribute your surveys via email.

Disadvantages:

The paid version base it costs €35/month, and you can only collect 100 responses per month.

2- Typeform

The free version allows you to collect 100 responses per month. The paid version base costs 30 €/month, a collection of answers unlimited.

Advantages:

Answer piping: you can use the result of the previous questions in subsequent applications. For example: “What’s your name?” Henry. “What are you doing, Henry?” In addition, there are many ready-made templates, with the questions already written, easy-to-customize.

Disadvantages:

The interface in the back-end has a few bugs, and sometimes I can not save the work done (unfortunately, it will not save – no auto-save).

3- Google Forms

Advantages:

  1. totally free;
  2. integrated into the Google experience Suite;
  3. very easy to use and customize, there are also the issues;
  4. easy to insert images directly from Google Images with a CC license (and then usually very basic…).

Disadvantages:

  1. Its orientation is popular makes it quite stiff and limited;
  2. There are questions with logic (for example, if the rating is less than 2 shows the question: why you didn’t like?).

4- Survey Monkey

The free version lets you create surveys with 10 questions, 100 responses. The paid version base costs 25$/month and allows you to collect unlimited responses.

Advantages:

The killer feature is the bank of questions. Questions certified by experts, ready for any use (in English). Platform leaders on the market of surveys. Even here many of the models ready with questions already written.

Disadvantages:

A interface is pretty old school, not pleasant to be mobile, not pleasant in the construction of the surveys.

How to make a survey: examples of invitation to participate

Three examples of invitation with best and worst practices:

Case A: The Google Best Practices

Starts with Hello Enrico – so it begins well because it calls my name. Then there is a text, which is rather short and at the end: “Share your opinion in a survey of 4 questions”. Eeeeeasy.

Case B: Aruba Business

The text is very nice. The parties to improve: “We ask for a few minutes…” – it is better to specify how many. Have you thought of not to write it because it takes 20 minutes? then it’s too long! The other thing to improve: “Dear Customer”. My name or company name is in the registry, then it would have been more effective to place it as a customization on the invitation.

Case C: Survey on satisfaction post-event

After the visit to MECSPE in Parma I ask for a feedback. Starts hurting with *ENGLISH VERSION BELOW* – means that the data does not have a minimum of profiling. Would it be right to send the invitation in Italian to Italian and English to foreigners.

In the next part is written “Dear Maioli”. I didn’t feel it since middle school! The language is unnecessarily formal as all the rest of the text and of the survey. Finally, the call to action text BEGINS INVESTIGATION is really the minimum.

Measures the opinion on the service, the example of the survey of Facebook

Approximately 12 questions are oriented to the views that users have of the service. Each question begins with: “indicate how much you agree with..” and then a scale of responses from strongly agree to disagree. The formula is language neutral so as not to influence the answers.

Questions in the survey to Facebook

There is also the suggestion box, in which they ask me of things to improve and the reasons for it (optional). I responded that the research is to improve!Update: I have heard! few days ago, the research is out of date 🙂

Example: survey of Udemy at the end of the course

Udemy is a marketplace for the international education fee. Reputation, reviews and feedback are very important. Just finished the lesson, they ask me to rate: scale of 1 to 10, stars full and half – smart!). I decide that Chris Anderson deserves 4 and a half out of 5. In the screen next time they ask me the reasons.

The next step of the survey. Questions are very specific and targeted, [optional] is written VERY clear. Questions intense, with a great cognitive load, match the answers very simple: yes, no, I don’t know.

Do Surveys: 10 tips

Summary of practical tips to create and exploit a survey

  1. Ask the opinion with the timing.
  2. Declares the commitment that you require.
  3. Use the tone of voice suitable.
  4. Start with easy questions.
  5. Visual at the beginning / free text at the end.
  6. A question for the sentence.
  7. It does not distort, does not affect.
  8. Results: use reviews to promote your work.
  9. Results: use the criticism to improve yourself.
  10. Thanks you and rewards.

And you, have you ever created a survey to measure User Experience?

The results we have obtained have been useful for improving the user experience on your site or with your products/services?

Empty states: how to exploit small drawbacks to improve the user experience

Empty states occur when the content of a view cannot be shown. A list that does not contain any elements or a search that does not display any results, are examples of empty states. Although these states are not typical, they must be designed to avoid confusing users and to help them.

Normally we design an interface in which the whole layout seems to us well organized and pleasant. An empty state is the thing we usually design last, if we do it. In reality, empty states have great potential: even if they are intended to be only a temporary part of the project, they have a lot of value in communication and user involvement.

Users come across empty states mainly at first use, when launching the app, or in the presence of errors (so only in some cases). The empty states at first use provide an explanation on what kind of content there will be, an orientation to the user, an explanation of the actions that must be done for a certain view to appear.

The purpose of an empty state is to indicate the exact actions to be taken to allow the application to function as expected. So they are extremely effective, especially when you come across a problem that needs to be solved.

An empty state meets various requirements:

  • Helps in particular situations
  • Involves and retains
  • Pushes you to perform an action

The main goal is to teach you how to use your app and help you feel comfortable. You must find the right balance between friendliness and helpfulness. Especially when you show mistakes, you need to clearly explain why it occurred and how you can fix it. A pleasant app is not only a question of usability, it also involves the look and feel. Apps should not only be functional, reliable and usable, they should also be empathetic. Introducing elements of the brand, showing a sense of humour with positive emotions, greatly personalize your app and your product.

Spending design time on empty states makes your application enjoyable to use and emotional. Explain its benefits so that users know why they should use it.

Keep your views visually simple: concise copies, icons or clear illustrations and a button is usually more than enough for the purpose. If the empty state was triggered by a positive user action, press it with a positive message. Conversely, if the empty state is due to a user error, it is very important to explain in a simple way how to solve the problem.

Empty states are equally significant components in the design of a harmonious UX. User interfaces require a delicate balance of information and action, so empty states must be given a lot of attention.

App User Experience: the 5 mistakes not to commit

Let’s start immediately from the fact that there are now hundreds, thousands, millions of Apps that crowd the stores and there is only one thing that counts, even more than the usefulness and effectiveness of that APP: the User Experience (abbreviated UX), that is the baggage of emotions, feelings that an App arouses in the user who is browsing it.

While capturing the attention of potential users is a fundamental step, especially for the marketer, keeping it is the aim of the designer who, with a series of visual precautions inside the App, can win over the user day after day, without making him regret the download. It is no coincidence that these two figures – marketers and designers – are often linked by a double thread: they are two absolutely complementary figures in the user’s journey towards his satisfaction.

In this article I will introduce you to some of the most common mistakes you can keep in mind when you find yourself commissioning applications that are not only functional, but also beautiful and clear.

Don’t Make Me Think

Every time a user launches an application, he must be able to navigate it without divergences, distractions, obstacles and to do so he must respect some golden rules of UX and UI. One of the most popular books by Steve Krug, a well-known expert on Web Usability, is entitled “Don’t Make Me Think”, which is the key expectation of the average user when browsing a site or an App: don’t waste time.

Most people “on the other end” of an App or website, in fact, are trying to do something and want to do it quickly, without having to think too much or concentrate. Research in the field of neuroscience has shown that the human mind in some situations activates a kind of automatic pilot that must achieve the result with the least possible waste of energy. The great thing is that cognitive mechanisms like this are innate, do not change from person to person, from generation to generation, but are “long-lasting”. And they can be of enormous inspiration.

The human brain’s capacity doesn’t change from one year to the next, so the insights from studying human behaviour have a very long shelf life. What was difficult for user twenty years ago continues to be difficult today –

J. Nielsen

Apps are now more and more part of our daily life but the “mobile” ecosystem is an ecosystem that is very different from that of the “web” and for many is still quite obscure. Don’t worry, this blog wants to guide you to the discovery of this world, with guides, tips and insights ad hoc.

The 5 User Experience errors that your designer must avoid

As we have already said, the success of an App depends on many factors and the most important one is the user experience. Here are the most common mistakes that your UX/UI designer should not make:

Machinose onboarding – the onboarding action must not generate any interruption and must only transfer the value of your App to the user. Simple yes, but not neglected: as on a first date, your app will have only one chance to win over its user. If it doesn’t succeed, there won’t be a bunch of flowers to repair the damage!

Navigation menu too long or too short – When users see a range of options in the navigation menu, they tend to leave it. This is partly explained by Hick’s rule that “the time it takes to make a decision increases in proportion to the number of alternatives”. On the contrary, menus with very few options end up confusing the user, giving the impression that the App is useless and/or that there is a lack of content and interaction.

Complicated interfaces – The best user interfaces are the self-evident ones, i.e. those that are so clear and coherent as to generate automatisms. Having an extremely captivating App can undoubtedly be a great result, but keep in mind that the time users spend contemplating aesthetic details is very limited. Users pay much more attention to interaction and evaluating how easily your app can solve their problems. The advice is: simplicity first of all, so entrust yourself to a professional who doesn’t load your App with too many design elements.

Icons too creative (read: unknown) – The use of unfamiliar icons is unfortunately one of the most common mistakes made by UX designers. For example, replacing the famous icons of the thumb up or thumb down with more creative or personal versions will have the only effect of making users feel lost, lost in a tower of Babel where everyone speaks a different language. Nick Babich’s advice to UX/UI designers is absolutely lapidary: “If it takes you more than 5 seconds to design an appropriate icon for something, it’s likely that that icon won’t communicate that meaning”. In short, for icons as for other graphic elements, reinventing the wheel is absolutely not recommended!

Interface without visual hierarchies – Understanding content is about how user interface elements are presented. A call to action without strong visual signifiers loses all of its appealing power. The more important something is, the more it has to attract the user’s attention (contrasting colours, bolder or larger text sizes).

Concepts that are logically related to each other are, in fact, a good idea to make them visually related as well.

If you want to get a culture on this issue, I recommend starting with Steve Krug’s 20 tips on usability. If you want to move from theory to practice, you can contact us at any time. We would be honored to develop an App for you with a captivating, intuitive and simple User Experience right from the start!