a red circle, a blue triangle, and a yellow square on a pale yellow background with different lines and spirals behind them

Psychology of Design: Shaping Your Online Image

We covered the importance of color thoroughly in the previous two installments of our psychology of design series. Color choice, however, is just one part of the struggle against bad design.

Whether you’re creating a background pattern for a new web design or you’re ideating about a new product’s packaging, eventually you’re going to have to put pencil to paper and start sketching. No matter what shape you start forming, it’ll have a powerful effect on your viewers.

Read on to learn more about the common associations your customers will make between the shapes you choose and what they say about your overall brand. Plus, see some real-world examples of how these shapes have been used in designs of all kinds!

Straight and Curved Lines

When it comes to line work, you’re really going to have to tow the line between angular and curvaceous. Lines may be the base shape that begets all artwork, but logos and web designs that rely heavily on linework are anything but simple.

Typically, humans have a preference for curved lines over straight lines. This can be attributed to the neurophysiology of the visual system. Even infants whose eyes are not fully formed will focus their attention longer on curved shapes than on sharp, angular lines. 

Screenshot from the Affinity website featuring their rounded triangular logo
The rounded edges of Affinity’s logo softens its overall effect on users

However, curves won’t necessarily increase the amount of time a user will focus their attention on your design. In fact, sharp angles are more likely to catch the quick attention of your users. Where curves connote softness and complexity, sharp lines and angles connote seriousness and simplicity. 

Studies have shown that angular objects can trigger a sense of threat. Sharpness in shapes has been shown to increase activity in the amygdala, which is the area of the brain that processes fear. For that reason, sharp angles often demand your audience’s attention and draw the eye in more quickly than their curved counterparts.

You can use these natural human response patterns to create designs that make your audience feel something. For fun, lighthearted brands, curved lines can help you break up blocks of text on sites and create a sense of whimsy. For more serious brand personas, though, sharp angles and straight lines will help drive home a sense of gravity.

Screenshot from The Inlay's website featuring a white background and three perpendicular lines
Creative studio The Inlay uses thin, straight lines to break up their minimalist site and keep your eyes moving

Creative studio The Inlay uses straight lines and a minimalist design to draw your eye as you scroll through the pages, but avoids overusing the sharp angles that may trigger negative responses. 

Technology consulting company Affinity, however, uses a lot of relationship-oriented language throughout their website. Their rounded arrow logo and curved shapes throughout the design feel much more approachable than the traditional, stiffer imagery used in the tech space.

Circles and Ovals

If you’re calling someone a square, you’re probably insinuating that they’re boring. The opposite, then, would mean that circles connote fun, youth, and a carefree mentality. It makes sense that because babies’ attention has been shown to hold longer for curved lines, they also tend to prefer circular toys.

Openness and togetherness come to mind when your viewers look at a circle. Round shapes can also connote feelings of community or protection—like being safe in your own bubble or even a nice hug. Other characteristics of circles can include friendship, warmth, femininity, and rebirth (think: the circle of life). 

Screenshot from the Ring website featuring four of their doorbell products
The ring-shaped button light on the product itself is another visual cue to Ring users

From a naming perspective, the Ring doorbell has tapped into their users’ senses. Auditorily, you can imagine the doorbell “ring” while visually, the imagined “ring” is tied to both their logo and the way the physical hardware is designed.

Screenshot from Netflix's main menu page for the show The Circle. The backs of two female figures look at a screen of contestants
Circles are found in profile pictures, button shapes, and even the architectural design of the building in which the contestants live

The Circle, a Netflix reality competition show, is another place in which circular branding makes the most sense. The premise is a group of people who may or may not be telling the truth about their identity try to gain popularity amongst their peers only through a social media platform called The Circle. The objective? Stay within the community—remain in The Circle.

Triangles

Acceleration, motion, and balance, triangles easily illustrate activity. They’re energetic, powerful shapes that can evoke an array of emotions from excitement to caution.

Triangles have impact, and the way they’re directed is crucial, because direction will change their meaning in the mind of your consumer. For example, a triangle pointing upward can show strength, but when turned even slightly askew, they can show instability. But multiple triangles in all different directions can demonstrate amusement or excitement—like confetti!

Screenshot of the preview image for Rick Astley's smash hit "Never Gonna Give You Up" with a triangular play icon in the middle
This preview image of a YouTube video uses a triangular “play” icon

The play button on your favorite video or music streaming service is more than likely just a triangle pointing to the right. It resembles an arrow which indicates forward motion, as opposed to the two straight lines that would indicate a pause (a literal “break” between two straight lines).

Screenshot of the HGTV homepage featuring their logo
“Home & Garden Television” showcases the home with a simple triangle atop their logo 

HGTV uses triangular design in a clever way as well. The isosceles triangle sits across the top of their wordmark, a clear but simple way to illustrate the roof of a home. The “V” at the other end of the logo makes a great counterbalance as it points downward.

Quadrilaterals

Quadrilaterals include any four-sided shape. Squares and rectangles are the most common examples, but trapezoids, diamonds, and a few more are included here as well. Squares and rectangles are often symbols of stability and steadiness, conformity, or straightforwardness. Their right angles visually suggest rationality, order, and structure.

Squares and rectangles are often used by brands that want to come across as down-to-earth or pragmatic. From National Geographic to LinkedIn to Dominos, squares and rectangles are common—especially for logos—across a wide range of industries.

Other types of quadrilaterals will also convey those feelings of regularity, but with a more avant-garde, contemporary visual twist. Diamonds can be used to convey luxury or high-end products because of our unconscious association between the shape and the gemstone. Quadrilaterals like kites and rhombuses are great for hinting at a level of stability without resorting to overused patterns.

Screenshot of the parallelogram pattern on Mokthar Saghafi's design site
Screenshot from Mokthar Saghafi’s design site

Australian-based web designer Mokthar Saghafi uses a parallelogram shape for the geometric pattern of his website. The four-sided figures are neatly stacked, hinting at the stability usually connoted with four-sided shapes. Setting them slightly off-kilter as a rhombus instead of a true rectangle, though, adds another layer of visual interest.

Block-shaped street signage emblazoned with the Lego logo
Photo by Faiz Zaki

While Lego may not seem down-to-earth or conforming, they’re certainly stable—how else would you build with them? Their square logo is also a visual callback to their product. It looks very remarkably similar to a square Lego brick with four studs.

Pentagons, Hexagons, and Octagons

In math and design, this collective of shapes are known as “polygons.” Polygon is an umbrella term used to describe any 2D geometric shape, but it’s usually reserved for those with 5 or more sides. 

In nature these shapes are found everywhere from honeycombs to shell patterns to crystals and rock formations. In web design, however, they’re used less frequently. This can be a good thing for your clients, because it’ll help set you apart from more common design trends!

Complex and futuristic, polygons are often used to create a modern, contemporary aura that’s still well structured. Certain polygons are commonly used within niche industries, however. For example, auto and machine manufacturing and repair companies often employ hexagons and octagons in design as they resemble the head of a bolt.

Screenshot from Built By Buffalo homepage in which their featured projects are showed in a honeycomb pattern
Using this pattern to showcase their work allows Built By Buffalo to show a lot of projects in very little web real estate

The hexagonal layout used by UK web design agency Built By Buffalo is a great way to show lots of examples of their work upfront without it overwhelming their homepage. It’s then used throughout the website to showcase team headshots, show off fun office photos, and call out important information.

Screenshot from the Pentagon Tours website About page. Three diagonal lines cut across a tour photo as a graphical element
The strong lines of the Pentagon Tours logo are imitated with graphic treatments to images on the site

The Pentagon is one of the most recognizable buildings in the world, and it is aptly named for its five-sided structure. A prime example of using polygons for architectural design, the building itself conveys stoicism and stability

Abstract Shapes

There are a few other geometric and abstract shapes that are commonly used across web and product designs, promotions, and branding efforts. Let’s take a quick overview of some of those popular shapes and their meanings.

Blobs

Blobs are often shapes that are characterized as fun or silly. The famous “bouba/kiki effect” has proven that individuals across cultures and writing systems will attribute the nonsense word “bouba” to blob shapes, while “kiki” is associated with spiky abstract shapes. 

When you choose to use sharp abstract shapes with spiky edges, you’ll grab the fast attention of your viewer. With rounder shapes, however, you’ll make them feel more comfortable and playful.

Screenshot from Buzzworthy's navigation menu with a bulbous shape that features a photo alongside the words "work. studio. team. contact. funhouse."
An animated “bouba” shape appears when you open the Buzzworthy navigation menuu

Brooklyn-based custom WordPress design studio Buzzworthy uses lots of blob shapes and bulbous transition animations to showcase their fun, funky style. 

Crosses

Often used to showcase spirituality and healing, connection, or balance, crosses appear all the time in web design. It’s the most common way visually to connote a meeting or connection between two things. Another common use for a cross in design is as a “plus” sign, indicating you can add something to a cart or expand for more information. 

In logos, crosses are typically reserved for religious organizations due to their strong religious ties, but other, more agnostic uses of the shape have been successful as well.

Screenshot from The American Red Cross website that features their iconic "red cross" logo
Screenshot from The American Red Cross website

The American Red Cross is one of the most notable organizations to make use of cross imagery. Their work sits at the intersection of individuals who need help and individuals who can help during or after a disaster. The Red Cross’ logo places them at the intersection of those two things, while also visually alluding to healing and health.

Spirals

Spirals connote movement and progression. Rounded spirals and loops often illustrate perfection, beauty, and evolution. If your spiral is more pointed, like a zigzag motion, it’s more likely to convey a pivot, change, or new direction that’s being taken by a product, company, or service.

The direction of your spiral will also have a lot to do with how it’s perceived—especially if you plan on animating it. The last thing you want is to try to convey development, growth, or creativity and end up sending your users on a literal downward spiral. As with most things, convey positive movement by making your spirals move up and to the right when possible.

Screenshot from Rally's homepage featuring a yellow spiral on a white backgrounds
As you scroll, the spiral will move faster and change color. If you pause to read, the spiral slowly animates upwards

Rally, a digital product studio out of Salt Lake City, UT, uses a simple spiral on a white background for the entirety of their site. The changing colors and dynamic motion of the spiral keep viewers interested visually and create a cohesive user experience. 

Organic Shapes

Organic shapes include leaves, branches, roots, waves, stars, clouds, and more. Where geometric shapes can be used together to create images (example: a square with a triangle on top becomes a simple house), organic shapes typically standalone as an image unto themselves.

These shapes will typically be irregular or asymmetrical (but not always) and they’ll have an association with the natural world in some way. The idea of “the cloud” is a perfect use of organic imagery. 

Screenshot from the SoundCloud homepage. Their logo in the left-hand corner is cloud-shaped, the left half of it is comprised of several thin vertical lines as you would see in an audio file
SoundCloud’s logo uses natural imagery to make technology more fun and approachable visually

The idea of “cloud” storage ties something very heady and technical—an intangible “location” that holds information—and ties it to the natural world, making it more approachable for tech novices. SoundCloud, for example, is a music sharing site on which users can upload audio files and share them with a growing community of music lovers across the globe.

The Mind Behind Design

As always, these are not hard and fast rules. Use multiple shapes, line weights, and alignments within your design to create visual interest. Using several elements together will allow you to tell a story that your readers can see with their eyes and feel in their gut.

The WP Engine resource center is your source for information on all things design, and our Psychology of Design series is all about using the fundamental elements of design to draw in customers with well-planned branding. 

Read parts one and two for a deep dive into the meanings of color and how to use them in your visual storytelling. Then, be on the lookout for part four which will look at the importance of your typeface, content placement, and word choice.

Get started

Build faster, protect your brand, and grow your business with a WordPress platform built to power remarkable online experiences.