7 Creative Ways to Use Geometry in Web Design

This content originally appeared on Codrops and was authored by Bogdan Sandu

Everyone had one of those subjects in school where they thought, “Why am I studying this? I’m never going to use it again.” 

Geometry, with its measuring of diameters and angles, might not have seemed very useful or exciting at the time. However, there’s actually a lot you can do with geometry on a website that will make your content easier to find as well as more engaging.

Today, we’re going to look at some creative ways to use geometry in web design. We’ll give you some examples of BeTheme pre-built sites and live websites that demonstrate how to do this.

1. Slice your sections on a diagonal so visitors naturally “fall” downwards

Many websites today are built with rectangular blocks, one on top of the other. However, by cutting key sections of your site at a diagonal as opposed to the expected horizontal line, visitors may feel a stronger inclination to keep moving downwards on a page. 

Part of this is due to the downward slope, though the “peekaboo” tease of what comes next certainly helps, too. 

Stripe is one such example of a website that uses this diagonal divider in its design: 

The dividing line allows visitors to get a sneak peek of what’s to come in the next section, building anticipation as they scroll further and further.

This is something you can easily build with BeData, one of BeTheme’s pre-built sites: 

There are a number of instances on this site where the dividing line between two sections sits at a 45-degree angle like in the example above. And it’s a great example of how to take a unique approach to the diagonal divider.

2. Use shapes that simplify decision-making

It’s not uncommon for consumers to feel decision fatigue when presented with yet another choice to make online. While it’s great to have so many options available, it can be quite exhausting always having to research and compare products or services. 

When you build a website that sells something, why not take some of that pressure off of your visitors? 

You can use recognizable geometric shapes to point prospective buyers to: 

• Plans that offer the greatest value
• Products that are the most popular with other shoppers
• Options that have a special properties (like eco-friendliness)

Sephora, for instance, uses a number of circular seals to draw visitors’ attention to certain items:

The green circles indicate that they’re clean products while the ones in red are award winners. 

Your shapes don’t even need to contain text the way Sephora’s do. You can go the route of BeComputerShop, for instance, and use stars to point out where the top sellers are: 

The shape you use and how you design it all depends on what the site sells and what shoppers most commonly look for when choosing one option over the others.

3. Use shapes that open up a window to your brand

Consumers want transparency from brands today. While the words on your site help with this, the images you show can also help. 

Rather than go the usual route of adding images on top of your website’s background, why not design them to look like you’ve created a porthole or window into the brand’s world? 

You can use geometric shapes to carve out these “windows” and let your visitors see something or someone that will help them better connect to the brand on a personal level. 

Web3 shows us one way of handling this: 

Part of the homepage has been carved out to make room for this polygon. Within it, is a short video of the agency at work. 

BeInternet gives us another way to approach this technique: 

The circular hole contains an image as opposed to a video, but it has a similar effect as the Web3 example. Another difference is that this image doesn’t have a filter laid over it, which creates a more open and transparent feel to what the visitors are seeing.

4. Use images containing geometric figures to direct people’s attention

You can do more than just pair geometric figures with your text and imagery. You can select images that contain their own geometric figures and lines. 

Visitors might not overtly notice the geometry and that’s okay. Things like long vertical lines and arrows will subconsciously direct their attention on the page. 

Here’s an example from the Hyatt Place Hotel in Delaware: 

The alignment of the photo was definitely intentional. If we use the F-pattern that users’ eyes typically follow, they’ll start at the left side of the screen, stop to read the text in the middle, and then glance over to the right where the boardwalk then leads them downwards. 

BeFarm is a pre-built site that does something similar: 

The rows within the image will draw people’s eyes into the explainer products below. 

5. Make your content feel more alive by using different planes

When designing websites for activities and experiences, a flat design probably won’t properly convey what you’re selling. 

By placing key objects on different planes and giving the design a 3-dimensional feel, the site — and the experience it sells — will feel more exciting and adventurous, which, in turn, will increase engagement. 

Just be careful about overdoing it with this technique. It’s best to focus on one element instead of trying to make the whole banner or site 3D. For example, this is Ryan’s Island Cafe:

This wooden signpost is an item that’s commonly found on beaches, so it was a good choice to make it stand out as it helps recreate that beachy atmosphere online. 

BeFunFair offers another way to approach this: 

In this case, it’s the letters “JOY” that help visitors see the three-dimensional plane. The illustration of the fair rides behind, in front of, and going through it creatively demonstrate this.

6. Direct visitors with lines and arrows created from shapes

One way to implore visitors to keep moving down a page is to use lines and arrows. We’ve already seen how something like a diagonal divider can do this. 

But simply drawing lines and arrows seems a little too easy, doesn’t it? If you want to mix it up a little bit, consider combining geometric figures to form directional lines and arrowheads. 

HURU’s product pages, for instance, are full of these types of graphics: 

In this example, a bunch of triangles come together to form an arrowhead that points to one of the backpack’s main features. 

You might also follow BePhotography’s lead and use a series of circles or plus-signs to form lines: 

These directional cues effortlessly take visitors from one piece of content to another.

7. Use the psychology of shapes to inspire action

This last one has less to do about using a shape as a directional cue and more about using the psychology of a shape to convince a visitor to take action. 

For instance, here’s what the most common geometric figures mean: 

• Square – Traditionalism and balance
• Circle – Harmony, infinity, and protection
• Triangle – Stability and energy
• Rhombus – Contemporariness and excitement
• Hexagon – Unity and strength

Choose the right shape and meaning and you can more easily persuade people to take the next forward step on your site.

Built by Buffalo, for instance, introduces people to its website with this beautiful array of hexagons:

This sends the message to people that this is a trustworthy design agency that can build a strong website on their behalf. 

BePrint, on the other hand, uses a Venn diagram-like set of circles behind various pieces of content on its homepage: 

It’s a subtle design, but it’s a good choice. For one, the design is part of the logo, so it helps reinforce branding. But there’s also the psychological undertones of harmony that it sends to people interested in high-quality, professional printing services. 

What creative ways will you use geometry in web design?

Geometry in web design is about more than placing colorful shapes on top of white space. If you consider the purpose of these figures, lines, and planes when designing with them, your site can play a more active role in driving visitors to the point of conversion.
As you’ve seen here today, many of BeTheme’s pre-built sites have many of these creative uses integrated into their designs. So, if you’re interested in taking advantage of this trend, this theme is a good place to start.

The post 7 Creative Ways to Use Geometry in Web Design appeared first on Codrops.

This content originally appeared on Codrops and was authored by Bogdan Sandu