Polygonal Shapes and Geometric Layers

Polygons and other geometric flair are popping up all over the web design world. From stacked triangles to layers of simple shapes and color, geometry is a great way to create visual impact.

But first, what exactly is a polygon (or poly shape)? Traditional geometry outlines common shapes such as squares, triangles and rectangles. Polygons are shapes that are also defined in geometry as plain figures connected by straight lines that close off. They can have any number of sides as long as each figure can be closed using straight lines.

Today’s design trend focuses on polygons that are mostly flat in style, with some gradient shading and plenty of interesting paths in the two-dimensional space. Poly shapes can work with photo, video or alone as a texture or background.

What almost all the polygon and geometric shape designs have in common is a demand to be seen.

The polygon trend probably has roots in experimental 3D animation, virtual reality, and gaming (where triangles are often used to create and render objects quickly). Poly shapes also pay homage to some of

the more retro design patterns that have been popular in 2017 as well.

The other nice thing about polygons and geometric patterns is they can work in a number of ways – as a full design aesthetic, for a logo or for icons or divots to draw the eye. Poly shapes work with color, as line art, and in a flat style or in animated form.

Geometric patterns don’t need to be complicated to be elegant.

Clean simple lines such as the slanted shape ESPN uses for its Body Issue design as well as the floating squares from Minus 99 showcase the content with just a touch of something extra.

Note that with the slanted shape of the ESPN design, your eye wants to move across the screen from left to right. It’s quite intentional be- cause there’s a horizontal scroll that carries the user through more content in that very direction.

Sometimes a pop of color is the singular element that can set off a design. But how do you do it without adding unwanted noise to the content?

Poly shapes are a good solution that let you draw attention to photos or videos as a focal point. Poly shapes and color can also make users stop on a page because the look is unexpected. The goal with a de- sign technique like this is to cause a slight disruption in the normal browsing pattern so users will stop and look around.

What makes each of these designs successful are the color choices and intersections of lines. Note how the “X” on the Mountain Dew site comes together in multiple colored and pixel – perfect lines. The corner triangle from Bailey & French is reminiscent of a golden ratio and the color complements the photo to actually pull users back into the image. (The poly outline also continues below the scroll to keep users flicking the mouse.)

 

Some of the best geometric and poly patterns aren’t full scale design elements. From icons to logos to animated tools, combining subtle shapes is another way to draw the user in.

Connecting shapes and lines creates depth, particularly when used with color. While there are no real rules about size or color, the big- gest trend seems to be polygon combinations with a bright, Material Design-inspired monotone or more gradient-style palette. (You can see how many trends tend to overlap with a design element such as this one.)

When it comes to smaller elements, using poly shapes puts a visual twist on the same old circle and rectangular button and navigation styles, while maintaining a certain degree of consistency that users understand.

When working with small poly shapes, a touch of animation can be a web designer’s best friend. Use tiny interactions, such as a hover effect, subtle movement or shape shift to draw in the eye and show users that they need to interact with the object.

If you hang around the Chop Chop Agency site, you’ll see that the poly arrow does more than point users to navigational elements. It also shifts into other shapes that match downpage elements.

While we can’t say it for certain, the poly trend seems to have emerged just as more VR-based designs started to take shape. The logical reason is a connection between interfaces and rendering. (Many 3D and VR designs feature poly-shape based animations.)

Poly shapes also offer a glimpse into a world that’s not real. With many of the VR elements and games that use polygon-based design, the environment is not supposed to look just like reality. The poly theme emphasizes the escapism of being in a virtual, fantasy world.

What’s nice about the polygonal trend is that you can apply it to or with almost any other design pattern.Poly shapes easily accentuate existing content and interactions.

The last two examples here show that polygons can work almost anywhere, from helping to sell Xbox gifts cards online (yes, polygons are great for e-commerce too) to helping the user understand a more complex bit of information, for Ditto a company that uses poly shapes to show you how eyeglasses will fit.

One last note, make sure to go back and click the links for the ex- amples above. It’s hard to fully experience the interactive elements without playing around with the poly shapes in action. (You are sure to be inspired to try this web design trend!)