After a decade helping scale products to millions in users and revenue as a product & UX designer, I still use many of the basic lessons I learned in my first years — examining shapes, layouts, and thinking about how form affects the people using my products.
We’ve all heard of the visual design elements like shape, line, etc., and we’ve had the principles like contrast, emphasis, rhythm, etc. beaten into our heads. I’ll share a few of the subtler, not as oft-mentioned principles that I learned training as a graphic designer — but I still use to this day. Call them advanced, call them lesser-known, but I hope that by sharing them we’ll level up the design community as a whole!
1. Gravity
Gravity applies to objects and shapes, even in visual communication. It may sound strange — it’s not like gravity is a real force pulling 2-d objects downwards as it does in real life.
But gravity is so engrained into our perception of reality that it translates even to 2-d objects on a page. Take the image below as an example. It should feel slightly uncomfortable as if you’re waiting for the circle at the top to drop at any moment.
Now look at this image below — the reverse.
This composition should feel less like a ball about to drop — and more like an object is simply resting at the bottom of the page. Grounded. Peaceful. Lesson? Be intentional and cognizant when you’re designing that visually heavy objects at the top can come off uncomfortable and feel anxious (unless of course, that’s the feeling you’re trying to convey).
2. Reading Direction
In western society (reverse otherwise), we read left to right, top to bottom. Because of this, objects on the left are perceived as entering, and objects on the right perceived as leaving.
Here’s a circle on the left. Again, because we read from left to right, the circle feels like it’s entering the composition. Below, the circle feels like it’s exiting.
You can use this to convey certain emotions as well. For example, want to make an object feel like it’s peeping in? You can create a composition like the one below:
Or inversely, want to convey an object (or a character) running away?
3. Reading Priority
Because we read left to right top to bottom, we naturally see objects on the top left first, and then our eyes will naturally move to the bottom right and see things there afterwards.
This matters because if you’re trying to create visual hierarchy (maybe you want your users to see the title first, and then the content after) where you place things, even if they’re the same shape/color/size, does make a difference.
Take this example below:
Most likely, if you’ve grown up reading English books from the top left to the bottom right, you’d have looked at the top left circle first, before the bottom right.
4. Visual Tension
I once had this described to me as physical tension translated and amplified. It’s the feeling you get when you see a glass full of liquid sitting at the edge of a table.
Often visual tension is just unintentionality — designers not realizing that they accidentally put shapes adjacent to each other that create tension unknowingly. This can come across sloppy. Take a look at the image below:
Feeling uncomfortable yet? Here are all of the tension points highlighted below.
You can, if you’re intentional, use visual tension to draw a user’s eye and create a feeling of anxiety. Maybe you’re designing a poster for a protest or you want to focus someone’s attention on something. In those cases, make sure your tension is intentional and doesn’t come off looking like a mistake.
Here’s the same composition with the tension focused and intentional on a specific location.
5. Dynamic vs Static
Static compositions can often come across boring. An easy way to spice it up and make it feel more exciting is to simply tilt the horizon. Here’s an example of a static image that feels stale.
Now tilt the horizon, and all of a sudden the cityscape looks a lot more exciting.
To make the composition even more dynamic and exciting, you can engage the borders and let shapes bleed outside of it. Check out this 3-pt perspective composition:
6. Activating Negative Space
You can use directional shapes to activate negative space — to a point. Too small of a directional force and the negative space remains inactive. Here’s a shape that draws your attention, and then moves your eyes upwards and to the right.
Issue is, your attention is likely dead by the time you reach the top right of the page. Your eye moves past the object, but there’s simply too much space there and too little directional force from the object that your eye drops off. The space remains inactive. However, with a bit of cropping/scaling:
All of a sudden the space around the shape looks intentional and active. Takeaway? If you’re trying to move someone’s eyes around, be cognizant of inactive negative space. An easy trick is to just point at the object with your finger, move in the direction your eye naturally moves, and notice the location where your attention just naturally drops off. If that’s way before you want it to, you’ll need to tweak your layout — either the shape or the borders — to keep that negative space active.
...Don’t let the confines of CSS, HTML, or whatever other technology you’re using excuse you from ensuring your compositions are doing what it is you want them to do as a designer. These visual principles will apply across any medium — print, digital, web, you name it. They’re simply how our brains & eyes are wired to perceive visual information, in whatever form that may be!
Whether it’s a new venture or existing brand. Let us know your ideas below using our project planner and we’ll see how we can help.
