Every era has had its respective technological breakthroughs. Web browsing started with Gopher, which eventually gave rise to the birth of HTTP. Then came the era of the simple website layouts when NetScape was at its prime. 1997 onwards was when web design started to evolve. The mid 2000‘s was a time when a standardized website layout pattern began to really develop.
Web professionals needed to come up with newer visual styles and formats to cater to the rapid growth of technology. Today we build eye-catching, responsive websites with minimalism. We’ve reduced ‘fluff’ and visual noise. But innovation doesn’t stop there, web design has moved in tandem. This is the era for geometric shapes in web design.
Shapes and sizes have always intrigued me. I remember the good old days when my grandmother who was a veteran mathematician, used to take my lessons. I just enjoyed solving my quadratic equation problems. Algebra was my strong point, but my interest in geometry had picked up by the time I was fourteen. So…
What Is Geometry?
According to Cornell University, geometry is the visual study of shapes, sizes, patterns, and positions. It occurred in all cultures, through at least one of these five strands of human activities:
- Building/structures
- Machines/motion
- Navigating/star-gazing
- Art/patterns
- Measurement
I think geometry is something that is more than just the points mentioned above, which are merely applied concepts of Geometry. I’m going to quote one of Plato’s work which is a dialogue between Plato and the protagonist, Phaedrus.
“Yes, Socrates, you can easily invent tales of Egypt, or of any other country. But even if not of divine origin, the objects of geometry are not to be found in the physical world. They are pure abstractions, creations of the human mind.”
What Phaedrus tries to imply is that geometry is a-priori, it existed even before the human mind was capable of comprehending shapes and structures. All of mathematics is a-priori and that we are governed by its laws.
All designs, no matter how silly or weird they could appear to be, are based on geometry and are governed by these laws. Let’s take a look at how incorporating geometric shapes in websites can have an impact on visitors.
Geometry in web design
Adding geometric shapes in web design is a trend that picked up in mid/late 2016 and is expected to continue. Web designers have been incorporating this as it helps in creating a more futuristic, minimal and appealing look with a dash of boldness.
In order to understand geometric shapes, we first need to know what organic shapes are. Everything around you of natural origin, that occupies space is considered to be organic. It is imperfect or asymmetrical unlike its counterpart. Geometric shapes, on the other hand, are uniform — they consist of straight lines and curves.
The reason why I think it’s beneficial is because, symmetry, which gives balance is a major attribute of design.
The objective of geometry in Web Design:
- Navigation: Lines and shapes are used to intuitively guide users as they make their way through a website. For example, call-to-action buttons
- Framing: A geometric shape is used to contain vital content like text or imagery which needs to be highlighted to users
- Visual effect: A shape is used to make a website look more appealing, without overpowering the website design
Different Shape Meaning and Usage in Web design:
In general, shapes have their own meaning associated with it. Keeping this in mind, shapes can effectively be utilized in website design to bring about a stimulus in visitors, depending on what your client’s objective is for his/her website. Have a look at some general guidelines to help you understand how you can use geometric shapes for building a snazzy website.
-
Squares and Rectangles
Squares and rectangles are the most widely used shapes in website design. They’re the foundation of grid design structure, not to forget that they’re commonly used for call to action buttons. In most cases square and rectangular shapes are about balance and tradition, thus making them a geometric pattern commonly used in web design. Traditionally, text is placed within rectangular shapes, so you may have noticed why rectangles are in navigation menus and for buttons.
2. Circles
Circles have a very sacred meaning across various cultures. It represents infinity and also, our ever expanding cosmos. The circle has no beginning or end. Circles are often identified as protective symbols and are considered to be a feminine shape since they remind users of harmony, love and perfection. Circular icons are the most popular circular element in web design. These icons are usually image based and add a decorative element to websites.
3. Triangles
Triangles are considered to be the strongest geometric shape from a design perspective since they can imply stability, power and energy. They are also used to indicate action and aggression. Since lines are what guide a user’s attention, almost any use of a triangle signifies motion and direction. It is associated with strength, which is often related to masculinity. They’re often used as directional or navigational tools in web design.
4. Rhombus
This is one of the less commonly used shapes in web design. If you’re looking to add an avant-garde feel to your customer’s website, here’s your answer. The rhombus is a diamond shape, and consists of diagonal lines. They can be used to make a design look and feel more vibrant, active, and contemporary in nature.
5. Hexagon
Hexagons basically a polygon with six vertices which communicate unity and balance. Since honeycombs are hexagonal in shape, it is associated with cooperation between individuals.
Now that we are aware of what shapes signify, let’s take a few examples into consideration.
Applications of Geometry in design
Material Design – Google’s design language which has been a pivotal part of the Android OS consists of a lot of geometric shapes. I had mentioned in my previous blog, about how the foundation Material Design is ink and paper. Therefore, it uses a lot of squares and rectangular shapes in grid based layouts. If you notice there are circular animations as well for touch actions. These shapes and animations continue to evolve moving into the era of Android Nougat.
Isometric Design – It is the art of using geometric shapes in such a way, that they appear to be 3 dimensional. The angle between any two of the three axes is 120 degrees which results in an optical illusion.
How to use geometric shapes in web design
- Balance – Geometric patterns are big on attention grabbing. Use a combination of shapes if necessary. Don’t overdo it since it could lead to a lot of visual noise
- Spice it up – Mix and match shapes and patterns. Certain shapes compliment each other so use them wisely. Make sure you’re using the right colors to help create the right impression
The above website is of the visual designing and production firm called The Brave. Geometric Design is only one of the few trends out there for 2017. They’ve managed to team up polygons in the form of isometric shapes and parallax scrolling, which relies on stunning animations.
- Photography + Geometry – Use bold shapes like hexagons or pentagons with strong imagery to amplify the the visual effect. Mixing your photographs with eclectic geometric patterns or shapes can really give it a unique look
- Keep it Minimal – It’s not easy to keep your design minimal when your objective is to have interesting and creative design. That doesn’t mean that minimal design can pair very well with geometric patterns as they often act to balance each other out
Conclusion
The purpose of design is to stimulate a user or visitor. Using geometric shapes (and their respective symbolic meanings) can have a bigger impact on an individual’s subconscious than you think. They can really prep up your client’s website and keep visitors coming back. Do you incorporate geometry in web design? If so, do share your thoughts or tips with us in the comments section below.
There is no ads to display, Please add some
