The Psychology of Lines and Shapes in Web Design

March 1, 2020

There’s more to shapes than meets the eye when it comes to web design. Shapes are powerful design elements that go a long way in building visual identity. 

Shapes also help designers add interest and organize content in a visually appealing manner - leading the eyes to the most important sections of a website. But more than that, shapes can effectively be used to communicate a brand’s vision, identity, and goals, and ultimately, drive conversions.    

Learn more about the meanings and feelings behind different shapes and how a web design company can use them to level up a client’s website and keep visitors coming back. 


Geometric Shapes

These are the simplest, most common shapes of all. Geometric shapes, in general, are uniform - consisting of straight lines and curves. Below are examples of websites using various geometric shapes to convey their brand image and personality.


Squares, Rectangles, and Grids

Squares and rectangles are the most widely used shapes in web design, especially as a base or frame to simplify complex web designs. They are mostly used to organize elements and information within a page. Squares, rectangles, and grids evoke a sense of balance, reliability, and security. They’re commonly used for navigation menus and call to action buttons.

rectangles in web design
Protest Sportswear
squares in web design
National Traveller


Diamonds or Rhombuses

These shapes are less commonly used but provide a contemporary look for web pages. They can be placed separately or together to make the overall design look and feel more vibrant and active.

diamonds in web design
Qoobroom
rhombuses in web design
Timberline Tours


Triangles and Zigzags

Triangles are strong geometric shapes that signify motion and direction and are used to direct the viewer on a specific area of the page. Triangles can convey opposing meanings, depending on their position. If the triangle is pointing up, it communicates power, stability, and energy. But when it points down, it becomes unstable and can convey tension or conflict.

zigzags in web design
Rally Interactive
triangles in web design
New Castle Now


Circles and Ovals

These shapes can be incorporated in any area of a web page: be it the logo, icons, call to action buttons, and thumbnails. Circles represent movement, infinity, and harmony since they’re smooth and don’t have sharp angles. They make a page feel more youthful and carefree. 

ovals in web design
Macquaire University’s Green Campus Guide
circles in web design
Pop Gallery


Diagonals and Slanted Shapes

These shapes create movement and direction, drawing viewers’ eyes from one point of the page to another. A web designer can play with diagonals to create a sense of dynamism and encourage the user to explore the site.

Here are two examples of websites that put an intriguing twist to the diagonal approach.

salnted shapes in web design
Skidpasset
diagonals in web design
Cap Gun Collective


Polygons with More than 4 Sides

Polygons are closed shapes with at least three angles and sides. These can be simple, regular, or irregular. Pentagons, hexagons, and octagons are the most commonly used polygons with more than four sides as they are the most versatile for creating graphics. You can use these intricate geometric patterns to keep the eyes busy and capture the viewer’s attention quickly.

Here are examples of octagonal and hexagonal website designs that convey structure and strength.

octagons in web design
Cworks
hexagons in in web design
Francesca Martorelli


Organic Shapes

These shapes are also called natural shapes because they resemble objects found in nature, like leaves, flowers, butterflies, and clouds. They are irregular or asymmetrical and often signify comfort, unity, and approachability. You can use organic shapes in websites that highlight the environment or outdoors. 


Curves, Waves, and Swooshes

Curves add a sense of fluidity to the website design, making the viewer feel calm and relaxed. Since curves are smooth and flowy, they help entice viewers to explore the page without straining the eyes. Designers can use curves to make the interface look more sexy, stylish, and contemporary.

Here are some websites that use curved lines and soft organic shapes to give their pages a more approachable feel.

curves in web design
Neobi
waves in web design
Relativity of Time



Spirals and Loops

Spirals and loops can be tricky in the sense that while they can embody perfection, beauty, and composition, they can also evoke mystery and panic. These shapes express creativity, growth, and evolution. They add a lot of motion to the website design and can readily intrigue viewers to the site.

spirals in web design
Goal
loops in web design
Lemonade


Stars

Stars are natural elements that can be used to convey a message of importance or achievement. We typically associate stars with prizes, rewards, and success. 

stars constellations in web design
Stardust for Bowie
stars in web design
Patricia’s Diary


Abstract Shapes

Abstract shapes have recognizable forms but are not real in the same way organic shapes are. They are usually visual symbols of abstract ideas or simplified versions of natural shapes. These shapes can have both literal and figurative meanings and can easily convey messages without text. Abstract shapes are commonly used for icons and logos.


Arrows

Arrows are most effective when conveying direction. They help the viewer follow a path of information from one part of your graphic to another. Arrows come in different styles and designs. Bold, solid ones convey more strength, squiggly arrows can give your design a playful air, while concentric arrows can be used to represent cycles and processes.

solid arrows in web design
Kneip
arrows in web design
Carbon Store



Checkmarks

Checkmarks are commonly used as icons or symbols in landing pages of websites. They are also the best symbols to use to make a list look nice and organized.

checkmarks in web design
Stripe


New Shapes and Symbols

The digital generation has given rise to the development of new shapes and symbols that say more with less, boosting the user experience. Use these new elements to add personality to a brand and develop unique web designs by allowing users to express themselves and add a little more fun to the experience. 

symbols in web design
Serverless

Emojis

Emojis are text-sized pictures that convey a wide range of emotions and concepts. Use them to make fun website designs to appeal to the younger market who prefers quick communication. Colourful, playful, and simple emojis evoke a less formal tone than the seriousness of excessive text. But for emojis to really work, they must be put in the right context. Using them too much or too intensely can put off your audience.

emojis in web design
Loveiko
emojis used in web design
Supre


Pin Drops

Location apps and sites like Google maps  commonly use these shapes. Design customized pin drops to add a playful feel to the design of your graphics and maps.

pin drops in web design
Oil Spill Map
stylized pin drops in web design
Alfoart Photo Travel


Say More With Shapes

When used correctly, shapes can help build eye-catching and responsive websites that your visitors will remember. Staying true to a brand’s visual identity requires consistency. Understanding the feelings, moods, and concepts behind shapes can help you pick the best shapes for your web design.

First Timer’s Guide to Outsourcing Web Developers CTA Banner 2


Written by
Alexander Rauser
Alexander Rauser

CEO

Alexander Rauser is the author of Boardroom Guide to Digital Accountability and Digital Strategy: A Guide to Digital Business Transformation, and creator of the DSX Program, a digital strategy and transformation program for Enterprises.

Related Articles

Subscribe to our blog

Subscribe to our blog to receive relevant news and tips about digital transformation, app development, website development, UX, and UI design. Promise we won't spam you.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.