0 0
Read Time:5 Minute, 17 Second

If you are a designer you will probably turn away from now, but if you are not then stay in the game and learn all about the fundamentals of design.

Design isn’t just about making things pretty. It’s really about manipulating and teaching the user how to use your website. The role of a designer is to chart the path that a user should take so that they can meet their needs and everyone is happy.

Often a user will not even notice that this is happening. This is because design follows a set of rules that we have naturally learned by visiting hundreds of websites in our lifetime.

Composition

Everything you see on a page is there for a reason, and good design will follow a set of rules called Gestalt design principles.

Human brains are wonderful in that they can fill in gaps in an image without having to consciously think about it. If you’ve ever seen a face in an inanimate object, your brain does just that.

old mechanical clock

The principles of Gestalt are fundamentally based on how our brain works. As you go through your day, your brain frantically tries to simplify and organize a series of intricate images every second – all while you just sip your coffee!

We are built to seek patterns and structure in everything we look at, subconsciously organizing everything into an organized system in our mind. Designers then use this knowledge to design for the subconscious mind using the following principles:

Figure / ground

The figure / floor uses the concept of negative space and contrast. The brain will separate the elements into what it considers to be foreground and background. It will take part of the image and assign it the role of « focal point », and see the larger area of ​​an image as the background the figure is on.

This is often seen in optical illusions, but can be applied to logos and websites. For example, the FedEx logo uses negative space in the logo to create the illusion of an arrow hidden inside.

FedEx logo

The negative space between the « E » and the « x » makes it look like there is an arrow there.

Proximity

This principle centers on the idea that the brain tries to put things together. Objects close to each other appear to be part of a family. Even though the shapes are the same, their positioning is what causes the user to assume that the items are part of a group.

points

Even though the color, shape and size are all the same, our brains tell us that they are three distinct groups:

groups of points

Uniform connectivity

This is one of the main ways in which designers « teach » the user how to use the website. It can be done by color, size and shape. It is safe to assume that the information provided for example in circles is of a similar nature and that the information provided for example in squares is of a different nature than circles.

Continuation

Continuation, or alignment, is based on the idea that the human eye will follow the simplest path on a page. Therefore, all important information should be in this row as it is the first place the user will look for.

This can be done very subtly, as the lines direct the viewer’s eye with literal lines or shapes that naturally fit into a line. This is usually seen in flowcharts and infographics, but also in e-commerce sites on horizontal sliders displaying related products.

Grids are a big part of this alignment. Stemming from the idea of ​​simplicity, the Bauhaus artistic movement originating in Germany at the beginning of the 20th century began the concept of grids.

Color

Color is obviously important for brand recognition. As soon as we see the shiny golden arches of McDonald’s on a red background, we know what it is. However, these colors were not chosen at random, there is a certain science behind it.

For example, McDonald’s choice of red and yellow is used because they are warm colors that raise your heart rate and therefore make you hungrier – and more likely to buy their food items.

Color is a matter of emotion. You need to think about who your audience is and what emotions you want your brand to be associated with.

Color

Yellow

Commonly associated with happiness and confidence. Its warm colors make it good for use in the food industry as it can increase appetite. However, there are age factors to consider. Yellow can make babies more prone to cry, but teens and young adults feel more optimistic around the color yellow. This then changes again when you reach the older demographic which then associates yellow with fear.

Blue

Often used in medical settings and for technology. It has a calmer, more serene quality and can appear more professional. It also has the opposite effect on appetite and further suppresses it.

Mauve

Purple is associated with wealth, power, and success. This comes from the fact that kings wore purple as a sign of wealth as it was one of the hardest pigments to dye fabrics – you had to be very rich to get clothes of this color. It has continued in our subconscious and gives purple the same connotations as it did hundreds of years ago.

Pink

Rose is known for its calming qualities. Its effects are so powerful that colors are used in prisons to first calm the inmates. He then also has more stereotypical associations such as love and romance.

Orange

Similar to yellow because it is a warm color, orange conveys emotions of enthusiasm and excitement. It can be used as a softer version of yellow because it is more accessible and user-friendly. Its bright colors also mean that it can be used for signs to attract attention or warnings without being as harsh as, say, red.

Gather Together

This is just an introduction to the design. As you can see, there is a lot of material and a lot of thought that can explain something that may seem relatively simple at first glance. But every brand and website is basically created through a combination of some of these principles to create the brands and sites that you learn to instantly recognize.

If you want to know more about the design, do not hesitate to contact one of our creations.


Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Laisser un commentaire