6 Interesting Visual Design Principles UX Designers Should Know

When I studied visual communication design in college, I was fascinated by the way designers make people think, feel, and act in a certain way.

After a decade of working as a product and UX designer to scale products to millions of users, I still use many of the basic tricks I learned in the early years. I research shapes, layouts, and reflect on how shape affects the people using my products.

We ve all heard about visual design elements like shape, line, and so on, and principles like contrast, accent, rhythm, etc. have been hammered into our heads. I ll share a few less frequently mentioned principles that I learned while studying. to a graphic designer, but which I use to this day. Call them advanced, call them lesser known, but I hope that with their help we will raise the level of the design community as a whole!

Principles

1. Gravity

Gravity is applied to objects and figures even in visual communication. This may sound strange – it is not like gravity – a real force pulling 2D objects downward, just like in real life.

But gravity is so ingrained in our perception of reality that it even carries over to two-dimensional objects on the page. Take the image below as an example. You are uncomfortable, as if you expect that at any moment the circle from above will fall.

Now look at this image below – the opposite is true.

This composition is not like a ball about to fall – it looks more like an object just peacefully resting at the bottom of the page.

Conclusion? As you design, remember that placing visually heavy objects at the top of the page can cause discomfort and anxiety (unless, of course, you are trying to create it).

2. Direction of reading

We read from left to right, top to bottom. Because of this objects on the left are perceived as entering, and objects on the right as leaving.

Here is the circle on the left. As we read from left to right, it appears to be entering the composition. In the image below, the circle appears to be leaving the composition.

You can also use this technique to convey certain emotions. For example, do you want an object to look like it looks inside? Then create a composition like the one below:

Or, conversely, do you want to show a running away object (or character)?

3. Reading priority

Since we read from left to right, top to bottom, we naturally see objects in the upper left corner first, and then our eyes naturally move to the lower right corner (in right-to-left reading cultures, respectively, vice versa).

This is important because if you are trying to create a visual hierarchy (perhaps you want your users to see heading, and then content), it matters where you place items, even if they are the same shape / color / size.

Consider the example below:

Chances are, if you are reading books from the top left corner to the bottom right corner, then you first looked at the top left circle and then at the bottom right.

4. Visual tension

I once described it as transforming and increasing physical tension. This feeling occurs when you see a glass of liquid on the edge of the table.

Often, visual tension is created unintentionally – designers do not realize that they accidentally placed figures next to each other, which caused visual tension. This can make the design look messy. Take a look at the image below:

Still uncomfortable? In the image below, all stress points are highlighted.

You can use visual tension to grab the user s attention and generate feelings of anxiety. Maybe you are creating a poster for a protest, or you want to draw someone s attention to something else. In such cases, make sure your tension is intentional and does not appear to be a mistake.

Here s the same composition with tension deliberately focused in a specific place.

5. Dynamic composition vs static composition

Static compositions can often seem boring. The easiest way to bring them to life and make them more immersive is to simply tilt the horizon. Here s an example of a static image that seems bland.

Now tilt the horizon and suddenly the cityscape is much more interesting.

To make the composition even more dynamic and exciting, you can use borders and let the shapes flow outside of them. Notice this composition with 3 perspective points:

6. Activation of negative space

You can use directional shapes to activate negative space – to the point. The directed force is too small and the negative space remains inactive. Here s a shape that grabs your attention and then moves your gaze up and to the right.

The problem is that your attention will most likely disappear by the time you get to the top right of the page. Your gaze is moving away from the subject, but there is simply too much space and too little directional force from the object that caught your attention. The space remains inactive. However, with a little cropping / scaling, we get the following result:

Suddenly, the space around the figure looks active. Conclusion? If you are trying to move someone s gaze, be aware of the inactive negative space. A simple trick is to simply point your finger at an object, move it in the direction your eye is moving, and notice the place where your attention naturally drops. If this happens before you want it, you will need to make layout changes – move the shape or borders to make this negative space active.

Don t let the limitations of CSS, HTML, or whatever technology you use become an excuse not to improve your designs. These visual principles apply to any medium – print, digital, web, etc. It simply has to do with how our brains and eyes are programmed to perceive visual information, in whatever form it may be!