Getting in Shape: How to Use Geometry in Web Design

Raise your hands if you recognize any of these notations; 2d10, 20d6, 2d20, 3d6. If you do, then I salute you gamemaster, but if you don’t, here’s a crash course on the beautiful world of tabletop role-playing game. These notations, referred to as the AdX, refer to dice notations. A 2d10 for example would mean that the players are required to roll a 10-sided dice twice, most usually used to calculate damage.

The reason I brought this up is because when I was rummaging through my desk looking for my nail clipper, I’ve lost at least 3 nail clippers this year alone so this was a pretty big deal, I stumbled across a pair of 10-sided dice that I haven’t seen in years. My affection for 10-sided dice doesn’t just stem from the fact that I love RPGs in general but also because I love the shape of a decahedron. Obviously, a decahedron doesn’t translate well to web design, not until VR is widespread anyway, but other geometric shapes still has a place in web design.

Geometry in web design

To sum up, geometry is the visual study of shapes and patterns. Shapes and patterns occur in pretty much all walks of life, not the least in the field of design. Architecture, art and design are all mingled with geometry and even Mother Nature itself is filled with geometric shapes. A honeycomb for example is simply an array of beautiful hexagonal wax cells arranged in a cluster by honey bees as their nest.

The beauty of geometric shapes is that they can be used both aesthetically and functionally. They can be used simply to inject some visual pizzaz on your website or used as visual cues to guide reader’s attention on to certain elements. It’s this exact versatility that makes them so attractive to use in web design and other user interfaces in general. The thing that people need to keep in mind when it comes to geometry is that it’s not just about the shape itself.

Geometry also deals with how those shapes are related to each other and how those shapes relate to the space around and between them. If that description strikes you as familiar, it’s because that is what functional design mostly concerns itself with. The screen the webpage is being displayed on has limited space and deciding what to communicate and how to communicate them best is pretty much the question every web designer should ask themselves.

Geometric shapes in web design

Quite possibly the most simplest shape there is, dots or a circle when it’s bigger in scope, is the most common shape you’re probably going to see. Circles are most commonly seen as standalone icons, such as on your phone for example, due to their shapes, which is an indicator of fullness. Circles are also widely used when dealing with a gauge of some sorts or when you wanted to display some statistics using a chart, especially of the pie kind.

The second common shape we’re dealing with is rectangles. Rectangles as a shape are foundational because they are used as the basis for the grid layout that is widespread in a lot of websites. Check out the homepage of the tech blog The Verge for an example. Headline contents are arranged on a rectangular grid at the top with other most recent articles spread out on a list below them. This grid layout is also quite commonly seen on booking websites such as Airbnb and Booking.com.

The third shape we’re dealing with is a collection of shapes referred to as polygon, which is any 2-dimensional shape formed from a collection of straight lines. Yes, rectangles technically fall under this definition but we’re focusing on less common polygons such as triangles and hexagons. Because of their sharpness, triangles are commonly used as navigational cues, guiding viewer’s attention into an element on the webpage.

How geometry is used

If you’ve ever used an Android device in the past 3 years or so, you should be familiar with the words Material Design. For those unaware (read: an Apple devotee), Material Design is the design language Google has been using on their mobile interfaces since the release of Android 5.0, Lollipop in Android parlance. Geometric shapes, the grid-based layout and the use of shadows to create an illusion of depth are the hallmarks of Material Design, creating simple, consistent yet attractive user interface across all of their devices and services.

I’ve stated before that geometric shapes is notable for their versatility, which is why they’re perfect for Material Design. Whether stuck in on the upper-right corner of a desktop screen or sitting right there on your phone screen, geometric shapes are universally relatable and customizable to a degree than you can use them for any goal you could think of. Recently, Google has updated this design language with softer colors and gentle curves in place of hard angles but I won’t be surprised to see this style to be used for many years to come.

One other use of geometric shapes I’m particularly fond of is isometric projection. For those of you who grew up with video games back at the dawn of the 21st century, you should no doubt be aware of isometric video games. Back then, 3D graphics was still very rough so video game developers played around with 2D video games to give players the illusion of depth using isometric projection.

Think back to classic strategy games such as Command & Conquer: Red Alert 2 or the first game in the Age of Empires series. By displaying elements in such an angle, you can create illusory depth even though the images are still flat. For something contemporary, check out the game Monument Valley and its Escher-like aesthetic. The isometric viewpoint isn’t just a stylistic choice in that game; they also form the basis for optical illusions central to the game puzzles.

The simplicity and versatility of geometry

Good design is simple, yet understandable. In a way, designing using geometry is no different than the approach taken by companies like Muji and Uniqlo with their products, taking a simple, minimalist approach that is borderline industrial but still pleasing to the eyes. In good design, form and functions lives in harmony and using that standard, there is no way to describe geometric shapes as anything other than good design.