Shaping Your Way To A User Friendly Website

In the last few articles we looked at zero and one dimensional design elements like white space, dots, and lines. In this blog we will understand what a culmination of lines would result to: Forms.

A form is a positive element placed on the page as opposed to a negative element which is the space. Everything in a design is either form or space, positive or negative, figure or ground. These forms are two-dimensional. The concrete version of forms’ surfaces, or planes is known as shapes.

Shapes are two-dimensional figures that have recognizable boundaries with a combination of attributes.

Planes, surfaces or shapes have a higher tendency to be perceived as dots than lines. The larger the surface, the more its dot-like characteristics become secondary to its contour and size. Shapes can still be perceived as dots if the space around them is large enough and elements are small.

However, as the dot grows larger, its size and contours dominate and it is perceived as a shape

Hence, the shape can be a result of negative space.

The more active the contour, the more dynamic the shape appears to be.

Did you notice how the contour of the shape on the right demands more attention than the simple circular contour of the shape on the left?.

Shapes are more than just practical and constructive tools. Their structure is what allows the designer to communicate visually. Along with the other elements of design, shapes allow designers to convey important information and emotions in a nonverbal way. They also aid with:

• Organising information by connection and separation
• symbolising different ideas
• Creating movement, depth, and texture
• Conveying mood and emotions
• Leading the user’s eyes from one element to another

Types of shapes

We group shapes under two main types:

Geometric Shapes – These shapes have regular contours and can be drawn using a ruler or compass. Simple or complex, these shapes can produce a feeling of order or control. Circles, polygons, squares, and triangles are all examples of geometric shapes.

Organic Shapes – Organic shapes have irregular and complex contours. These can be drawn free hand or resemble shapes found in nature. The variation in structure makes them appear more like objects in nature, that are not regular as geometric shapes.

A subtype of Organic shape is:

Abstract Shape – These are simplified styles of versions of organic shapes. Abstract shapes are a depiction of real things without being an exact representation of it. The icons we see in our web designs, phones and in street signs are a great representative of this type. Icons and Typographic glyphs are examples of abstract shapes

Meaning of Shapes

Square and Rectangles

While shapes are building blocks of our visual world, squares and rectangles are literal blocks. They express stability, consistency, loyalty, firmness, and safety. In most cases squares and rectangles create a sense of balance and honesty, thus making them the most commonly used geometric pattern in website designing.

They are generally not attention getters, though they can attract more attention when tilted on their side and presented as a diagonal. Web pages are built of rectangles. Most elements are defined by a rectangle regardless of how they appear visually.

Squares and rectangles are commonly used for call to action buttons. Traditionally, the content is placed in rectangular shapes. They are commonly observed in navigation menus and buttons.

Circles

Circles are near opposites of squares, rectangles or triangles. Squares may seem strong as bricks, but circles are perceived to be light as bubbles or clouds. Their roundness with no smart edges implies movement and makes them appear to be friendly. Wonder why we see so many circles used as accessory shapes in graphics, designs or even infographics?

The reason behind this is that the circles are very powerful and noticeable. The spherical shape influences feelings of users and instantly grabs their attention.

In design, circles have varied use for varied purposes. Circles are often observed as shapes or background outlines for logos.

In websites, they are mostly used for buttons or small icons or call to action.

Triangles

Triangles have two meanings depending on their shape: stable or unstable. When pointing up they may represent stability and power, however, when pointing downwards they indicate instability or decline. In general, triangles denote firmness, strength, power, and mostly imply motion and action.

Triangles are usually used in web-designing as a navigational or directional tool.

It is vital to understand that shapes signal visual elements. In a design or layout, when we place shapes together we create a seamless relationship between them. Be it simple or complex, this relationship can trigger feelings, convey important messages, engage users and emphasise a portion or layout and create movement.

When the designer groups/moves the shapes closer or further apart, they are applying the Gestalt principle :Proximity

In a design, geometric and organic shapes can combine together to create numerous design elements that we use to communicate. Brand logos are a good example of this.

Here, some of the logos are made with geometric shapes and some with organic shapes or some with a combination of both. Notice that proximity is the key defining factor in this. If we were to move some shapes farther away in the logo, they would have an entirely different look and meaning.

Shape psychology works best when it is subliminal. According to Levanier (2021) “People don’t usually look at shapes and consciously think of words like ‘stable’ or ‘dynamic.’ It is more about the unspoken feeling that shapes create.” Considering this, a designer can tactfully employ shapes by:

i) Using shapes that simplify decision making

Users are often faced with decision fatigue when presented with various choices on the internet. Although it is great to have a variety of options, it can get quite exhausting to compare and research about products or services.

Why not design a website that aims at taking that pressure off users? A designer can use geometric shapes to take the channel the user’s attention towards:

• Plans that offer the greatest values
• Most popular products amongst shoppers
• Products with special properties like eco-friendliness, no added preservatives etc.

ii) Use images with geometric figures to direct user’s attention

A designer can do more than pairing the geometric shapes and figures. They can select images for the layout that contain geometric lines and figures that would further subconsciously direct their attention on the page.

iii) Make the website more alive by using different planes

When designing websites for experiences and activities, a flat design may not convey what you intend on selling and prove to be non-engaging.

By placing key elements on different planes and giving them a 3-d feel, the site and the experience it sells will create a sense of excitement and adventure.

Summary

Shape is what makes up the foundation of a website layout. The purpose of a website design is to stimulate its users and enhance the user experience. Using geometric shapes in accordance with their symbolic meaning can have a great impact on the user’s subconscious mind. When used precisely, shapes can build attention grabbing and responsive websites that would make the user come back.

Understanding the feelings and concepts behind shapes can help the designers pick the best shapes for the web design and stay true to the brand’s visual identity. It is not necessary to crowd the design with many shapes, designers can minimally use shapes and yet enhance user experience. It is about the arrangement of shapes that determines the visual outcome. Designers must consider how the shapes interact with each other to communicate the intended message.

Do follow our LinkedIn page for updates: [ Myraah IO on LinkedIn ]