- \n
- What Is Geometry in Web Design?<\/a><\/li>\n
- The Benefits of Using Geometry in Web Design<\/a><\/li>\n<\/ul>\n<\/li>\n
- Inspirational Examples of Geometry in Web Design Today<\/a>\n
- \n
- Aark Collective<\/a><\/li>\n
- Andrei Gorokhov<\/a><\/li>\n
- Built by Buffalo<\/a><\/li>\n
- Case 3D<\/a><\/li>\n
- Lacca<\/a><\/li>\n
- Mokhtar Saghafi<\/a><\/li>\n
- WPMU DEV<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
Why Should We Use Geometry in Web Design?<\/h2>\n
Geometry<\/a> is:<\/p>\n
\u201ca branch of mathematics that deals with the measurement, properties, and relationships of points, lines, angles, surfaces, and solids.\u201d<\/p><\/blockquote>\n
Sounds a lot like web design, right? After all:<\/p>\n
- \n
- Measurements help you play within the right amount of space.<\/li>\n
- Properties of elements give you the ability to make different parts of a site pop when you need them to.<\/li>\n
- Relationships help you establish a hierarchy between various elements.<\/li>\n<\/ul>\n
This is something you already do. Now let\u2019s gain a better understanding of the why behind it all.<\/p>\n
What Is Geometry in Web Design?<\/h3>\n
The most basic element in geometry is the point (basically, a dot):<\/p>\n
![\"Point\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Point-1.png\")
<\/div>\nPoints are used in web design to direct focus. They can be literal spheres as in the example above or they can be a beautifully-designed call-to-action button that essentially has the same effect on visitors.<\/p>\n
Lines are next. They can be used to connect two separate points to establish a relationship between the two or they can be used to draw visitors\u2019 attention to somewhere else more pertinent.<\/p>\n
![\"Line\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Line-1.png\")
<\/div>\nThen, of course, you have shapes\u2014which is what most of us think about when we think of geometry. Circles, squares, triangles, and so on.<\/p>\n
![\"Geometric](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Shapes-1.png\")
<\/div>\nAlthough shapes are the most easily recognizable part of geometry, their application in web design doesn\u2019t always have to be so simple.<\/p>\n
- \n
- They can be used in the foreground or background of a design.<\/li>\n
- They can be empty, filled, or partially filled.<\/li>\n
- They can exist in one dimension (as a line), two dimensions (as a flat shape), or three dimensions (as a shape that exists on multiple planes).<\/li>\n
- They can be used in planning (think of wireframing and grids) as well as elements within an actual design.<\/li>\n
- They can be permanent fixtures or fleeting transitions or animations.<\/li>\n
- Geometric shapes can also serve as the basis for other elements in your design: fonts, photos, logos, icons, and so on.<\/li>\n<\/ul>\n
Keep in mind that just because geometry tends to be organized and simplistic in nature, that doesn\u2019t mean it won\u2019t lend itself to creativity. You can put a unique spin on it once you understand the meaning behind the various elements.<\/p>\n
The Benefits of Using Geometry in Web Design<\/h3>\n
There are a number of reasons your curiosity should be piqued when it comes to using geometry in web design:<\/p>\n
- \n
- Geometric shapes and lines establish a sense of symmetry and balance, making websites easier to follow.<\/li>\n
- Geometry naturally lends itself well to an organized state where each element fits within one another or within a specific order. There is something innately calming about that.<\/li>\n
- Geometry is also great for establishing consistency and repetition within design, which helps train visitors\u2019 minds quickly to make certain associations with those elements.<\/li>\n
- Geometric shapes can be used solo or in conjunction with one another, and they can also be filled, outlined, or colored in endless ways. How you mix and match these elements is what will give your design its own unique and beautiful edge.<\/li>\n
- Stronger geometric elements may be all that\u2019s needed to give your content a major dramatic flare while you keep everything else surrounding them much more simple.<\/li>\n
- Geometry also works well with minimalism, especially if you use them subtly as textures in the background.<\/li>\n
- Geometric shapes also help establish the underlying structure of your site as everything essentially begins with a grid (usually a bunch of squares, rectangles, or triangles).<\/li>\n<\/ul>\n
Each geometric shape has a built-in meaning, whether we are actively aware of it or not. It\u2019s like with colors<\/a>. By understanding the psychology behind how they make us feel, we can use them more effectively in design. For instance:<\/p>\n
Rectangle or Square<\/h4>\n
![\"Rectangle\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Rectangle-1.png\")
<\/div>\nWith four stable sides and four right angles, these shapes are commonly associated with reliability, traditionalism, and honesty. They\u2019re also the most formal of the bunch.<\/p>\n
These are great for calls-to-action, text boxes, as well as the underlying structure of your website, in general.<\/p>\n
Circle<\/h4>\n
![\"Circle\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Circle-1.png\")
<\/div>\nCircles represent unity and wholeness. If you\u2019re looking to make a powerful and yet safe statement with your web design, look here.<\/p>\n
These can be used in logos, icons, and with smaller elements that need extra emphasis.<\/p>\n
Triangle<\/h4>\n
![\"Triangle\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Triangle-1.png\")
<\/div>\nTriangles are similar to rectangles in that each of their edges is seen as providing a stable base. However, the meaning behind this shape is a little different as the natural arrowhead appearance of them often implies a sense of motion or direction.<\/p>\n
These are perfect for directional cues to let you know when to drop open a menu, to jump back up to the top of the page, to look down below for more information, etc..<\/p>\n
Rhombus<\/h4>\n
![\"Rhombus\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Rhombus-1.png\")
<\/div>\nThe rhombus isn\u2019t necessarily an element you see a lot of in web design, which is why it can leave such a lasting impression when you do. It makes use of those solid lines; however, the body itself sits at a slant and creates a sense of movement similar to the triangle.<\/p>\n
These work well in backgrounds as well as when you have related blocks of text or other elements that should flow into one another.<\/p>\n
Hexagon<\/h4>\n
![\"Hexagon\"](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Hexagon.png\")
<\/div>\nThis six-sided figure is another rare shape in web design, though we are seeing it used more frequently now to convey a sense of unity.<\/p>\n
These are great for team or company profile pages.<\/p>\n
Obviously, there are other polygons and naturally occurring shapes that can be used in web design, but these are the ones that are the most common and that have a clear purpose behind them.<\/p>\n
Inspirational Examples of Geometry in Web Design Today<\/h2>\n
Now, rather than spend time talking about how you can get even more into the mathematical applications of geometry in design (because that would be overkill), I\u2019d rather focus on looking at the practical aspect of it. There are some really cool things going on with geometric design right now, and I think these highly stylized websites could serve as great inspiration.<\/p>\n
Here are some of my favorites:<\/p>\n
#1. Aark Collective<\/h3>\n
\n![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Aark-Collective.png\")
The Aark Collective website.<\/figcaption><\/figure>\n<\/div>\n Upon first entering the products page on the Aark Collective<\/a> website, you\u2019ll notice that their watches almost look surreal, like they\u2019re not really watches at all. Once you hover your mouse over them, however, you\u2019ll get a side-view angle of the watches and realize they aren\u2019t the two-dimensional geometric forms that they originally appear to be at first glance.<\/p>\n
#2. Andrei Gorokhov<\/h3>\n
\n![\"UX](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Andrei-Gorokhov.png\")
UX designer Andrei Gorokho’s website.<\/figcaption><\/figure>\n<\/div>\n The portfolio site for UX designer Andrei Gorokhov<\/a> is littered with hexagons. The entire website is actually covered in side-by-side hexagons; the ones the designer wants you to click on first are in full color and the ones he wants you to look at next are lightly shaded. It\u2019s a really cool way to use the same geometric element site-wide without it seeming too overwhelming or even underwhelming.<\/p>\n
#3. Built by Buffalo<\/h3>\n
\n![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Bulit-by-Buffalo.png\")
The Built by Buffalo website.<\/figcaption><\/figure>\n<\/div>\n The Built by Buffalo<\/a> website is really cool. For the most part, it\u2019s pretty bare bones aside from the use of strictly geometric shapes. They switch between hexagons and circles to show off their content, and they use the same thin line throughout the site to demonstrate when there is a section break. It\u2019s a great example of how consistent use of the same shape or line element helps visitors become easily acquainted with what they\u2019re looking at.<\/p>\n
#4. Case 3D<\/h3>\n
\n![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Case-3D.png\")
The Case 3D website.<\/figcaption><\/figure>\n<\/div>\n Seeing as how the designers of Case 3D<\/a> work for the real estate and architecture spaces, it makes sense that their website would utilize heavy geometric elements within it. It demonstrates that they speak the same language as their clients who rely on the clean lines, symmetry, and well-planned spaces that go along with geometry in their everyday work.<\/p>\n
#5. Lacca<\/h3>\n
\n![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Lacca.png\")
The Lacca website.<\/figcaption><\/figure>\n<\/div>\n There\u2019s really nothing too out there in terms of what Lacca<\/a> has done with their site\u2019s design, but you\u2019ll find cool instances of geometric shapes all over the place. Start with their logo, for examples. The letter \u201cA\u201d found twice in their name is actually styled as a triangle. All of their stylized header fonts actually have a similar geometric feel to them as well. And the website is comprised of a number of rectangles, all different shapes, that come in from different directions.<\/p>\n
#6. Mokhtar Saghafi<\/h3>\n
\n![\"UI\/UX](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/Geometry-Mokhtar-Saghafi.png\")
UI\/UX designer Mokhtar Saghafi’s website.<\/figcaption><\/figure>\n<\/div>\n This is the first instance I\u2019ve found of a website that uses the rhombus as their main geometric shape of choice, and I love it. Mokhtar Saghafi<\/a> is a UI\/UX designer, so it shouldn\u2019t come as a surprise that he\u2019s chosen a less commonly used shape to build his site around or<\/em>that he\u2019s used it as a peekaboo element at that.<\/p>\n
#7. WPMU DEV<\/h3>\n
![\"The](\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2017\/05\/wpmu-dev.png\")
There are a ton of shapes on our very own homepage.<\/figcaption><\/figure>\n
- Andrei Gorokhov<\/a><\/li>\n
- The Benefits of Using Geometry in Web Design<\/a><\/li>\n<\/ul>\n<\/li>\n