https://vanseodesign.

com/web-design/visual-grammar-shapes/

The Meaning Of Shapes: Developing Visual Grammar

by Steven Bradley

onApril 5, 2010

Archived in Web Design

You are here:

Home / Blog / Web Design /The Meaning Of Shapes: Developing Visual Grammar

What do you feel when you see a circle? A square? A triangle? Are you affected the same
when seeing an object with soft gentle curves as you are when seeing another object with
sharp jagged edges? Much the same way that lines have meaning, shapes have meaning
and are an important building block in the visual grammar and visual thinking we have at our
disposal as designers.

Shapes have an endless variety of characteristics, each communicating different messages

to your audience. You’d be hard pressed to design any web page without creating shapes.
Even if your page is nothing more than paragraphs of text you’re laying down shapes on the
page.

What kind of shapes do we have at our disposal? What do all those shapes say to our
visitors? How do they enhance or detract from the concept you want to convey?

The Grammar of Shapes

I found I could say things with color and shapes that I couldn’t say any other way—things I
had no words for.
—Georgia O’Keeffe

Shapes are two-dimensional areas with a recognizable boundary. They can be open or
closed, angular or round, big or small. Shapes can be organic or inorganic. They can be
free-form or geometric and ordered.

Shapes can be defined by their color or by the combination of lines that make up their
edges. Simple shapes can be combined to form complex shapes. Complex shapes can be
abstracted to make simple shapes.

The different characteristics of a shape convey different moods and meanings. Changing
the characteristics of a shape alter how we perceive that shape and make us feel differently
about a design. Shapes are a powerful way to communicate.

Designers use shapes to:

Organize information through connection and separation

Symbolize different ideas

Create movement, texture, and depth

Convey mood and emotion

Emphasize and create entry points and areas of interest

Lead the eye from one design element to the next

Types of Shapes

There are 3 basic types of shapes (PDF).

Geometric shapes are what most people think of as shapes. Circles, squares, triangles,
diamonds are made up of regular patterns that are easily recognizable. This regularity
suggests organization and efficiency. It suggests structure. Geometric shapes tend to be
symmetrical further suggesting order.

Natural/Organic shapes are irregular. They have more curves and are uneven. They tend to
be pleasing and comforting. While they can be man-made (ink blobs), they are more
typically representative of shapes found in nature such as a leaves, rocks, and clouds. On a
web page organic shapes are generally created through the use of illustration and
photography. They are free form and asymmetrical and convey feelings of spontaneity.
Organic shapes add interest and reinforce themes.

Abstract shapes have a recognizable form, but are not real. They are stylized or simplified
versions of organic shapes. A stick figure is an abstract shape depicting a person.
Typographic glyphs are abstract shapes to represent letters. Icons are abstract shapes to
represent ideas and concepts. Some abstract shapes have near universal recognition.
Think of some of the icons you see in the software you use daily.

Shapes can be either positive or negative. They can be figure or they can be ground. Be
conscious of the shapes you form with negative space as these are just as, if not more,
important than the shapes you form with positive space.

Resources for Creating Geometric Shapes with Unicode

Unicode Geometric Shapes

Geometric Shapes

The Meaning of Shapes

There are truly an endless variety of shapes and combination of shapes, each
communicating its own meaning and message. Often the meaning behind shapes is cultural
(a red octagon as a stop sign), particularly as shapes are combined. We’ll confine ourselves
to a discussion of some basic geometric shapes here and I’ll provide some links to more
detailed sources of shape meaning beyond the basics.
Circles have no beginning or end. They represent the eternal whole and in every culture are
an archetypical form representing the sun, the earth, the moon, the universe, and other
celestial objects between. Circles are used to suggest familiar objectssuch as wheels, balls,
many kinds of fruit. They suggested well-roundedness and completeness.

Circles have free movement. They can roll. Shading and lines can enhance this sense of
movement in circles. Circles are graceful and their curves are seen as feminine. They are
warm, comforting and give a sense of sensuality and love. Their movement suggests
energy and power. Their completeness suggests the infinite, unity, and harmony.

Circles protect, they endure, they restrict. They confine what’s within and keep things out.
They offer safety and connection. Circles suggests community, integrity, and perfection.

Because they are less common in design they work well to attract attention, provide
emphasis, and set things apart.

Squares and rectangles are stable. They’re familiar and trusted shapes and suggest
honesty. They have right angles and represent order, mathematics, rationality, and formality.
They are seen as earthbound. Rectangles are the most common geometric shape
encountered. The majority of text we read is set in rectangles or squares.

Squares and rectangles suggest conformity, peacefulness, solidity, security, and equality.
Their familiarity and stability, along with their commonness can seem boring. They are
generally not attention getters, but can be tilted to add an unexpected twist. Think of web
pages that tilts framed images to help them stand out.
Every element on a web page is defined by a rectangle according to the css box model.
Web pages are rectangles made up of smaller rectangles and squares.

In Buddhist symbolism a square (earthbound) inside a circle (eternal whole) represents the
relationship between the human and the divine.

Triangles can be stable when sitting on their base or unstable when not. They represent
dynamic tension, action, and aggression. Triangles have energy and power and their
stable/unstable dynamic can suggest either conflict or steady strength. They are balanced
and can be a symbol for law, science, and religion.

Triangles can direct movement based which way they point. They can be used to suggest
familiar themes like pyramids, arrows and, pennants. Spiritually they represent the religious
trinity. They can suggest self-discovery and revelation.

The strength of triangles suggests masculinity. Their dynamic nature make them better
suited to a growing high tech company than a stable financial institution when designing a
logo. Triangles can be used to convey progression, direction, and purpose.

Spirals are expressions of creativity. They are often found in the natural growth pattern of
many organisms and suggest the process of growth and evolution. Spirals convey ideas of
fertility, birth, death, expansion, and transformation. They are cycles of time, life, and the
seasons and are a common shape in religious and mystical symbolism.

Spirals move in either direction and represent returning to the same point on life’s journey
with new levels of understanding. They represent trust during change, the release of energy
and maintaining flexibility through transformation.
Clockwise spirals represent projection of an intention and counterclockwise spirals the
fulfillment of an intention. Double spirals can be used to symbolize opposing forces.

Crosses symbolize spirituality and healing. They are seen as the meeting place of divine
energies. The 4 points of a cross represent self, nature, wisdom, and higher power or being.
Crosses suggest transition, balance, faith, unity, temperance, hope, and life.

They represent relationships and synthesis and a need for connection to something,
whether that something is group, individual, self, or project related..

As with lines vertical shapes are seen as strong and horizontal shapes are seen as
peaceful. Most everything said about vertical and horizontal lines can be said about vertical
and horizontal shapes.

Curved shapes offer rhythm and movement, happiness, pleasure and generosity. They are
seen as more feminine than sharp shapes which offer energy, violence and, anger. Sharp
shapes are lively and youthful and are seen as more masculine.

Additional Resources for the Meaning of Shapes

The Meaning of Shape

Simple Symbol Meaning

Symbols and their Meaning

About Symbols

The Psychology of Forms

Using Shapes in Web Design

We use shapes to add and sustain interest in a design. Shapes of different visual
weight can be used to create focal points in a design and direct the flow of a design. Shapes
organize elements by separating some and connecting others.
Shapes can be used to convey depth by varying their size and position within a design.
Larger shapes will appear closer and smaller shapes will appear further away. Shapes that
are located lower in a design will seem closer and those higher up further away.
Overlapping shapes is another way to create a sense of one in front of the other to add
depth to your design.

Shapes that lean toward a protagonist appear to be blocking or stopping progress. Shapes
leaning away from the protagonist give the impression of aiding progress by opening up
space.

Try to keep background shapes simple and large. Being large can help attract attention and
simplicity can put the focus back to the foreground.

Try to use few shapes where possible. Don’t use 3 or 4 shapes to communicate when one
shape will do.

Try to limit the number and size of shapes where possible for clarity in conveying your
message

The Meaning of Lines: Developing A Visual Grammar

by Steven Bradley

onMarch 29, 2010

Archived in Web Design

You are here:

Home / Blog / Web Design /The Meaning of Lines: Developing A Visual Grammar

If you moved to another country (where they don’t speak the same language as you), one of
the first things you’d probably do is start learning the language. You might even start long
before you move in preparation for being able to communicate with the people you’ll soon
call neighbors.

Communication is an essential part of life and as web designers it’s what we do with every
new design.

What happens when words won’t do? If you want someone to look in a certain direction you
might point in that direction. We’ve all developed a grammar for communicating with
physical gestures and we communicate as much if not more with body language than we do
with verbal language.

Web and graphic designers communicate visually. For example choosing a color scheme
with a dark blue as dominant sends a very different message than if the dominant color is
hot pink. Color is one way we communicate visually. It’s one of the building blocks of visual
grammar, which are usually defined to include:

lines

shapes
color

texture

value

space

form/volume/mass

We’ve talked about color theory and color meaning in the past as well as using whitespace
in design. Today I wanted to look at lines. What types of lines are at our disposal? What do
different lines communicate? Next time we’ll talk about shapes and ask some of the same
questions about them.

The Grammar of Lines

A line is a dot out for a walk.

—Paul Klee

A line connects two points. It’s also the path made by a moving point. Lines can be thick or
thin. They can be long or short. The can be vertical, horizontal, or diagonal. They can be
solid or dotted or dashed. Lines can be curved or straight of combinations of both. There’s
an endless variety in what we think of as a line.

Lines can be literal or implied. Draw a series of 3, 4, or 5 points and your mind will fill in the
line between them.

Each of the different ways we draw or represent a line gives it unique characteristics. Thick
lines convey a different meaning than thin lines. A curved lines send a different message
than a sharp straight line.

Types of lines
There are several types of lines defined by their use.

Contour lines are used to define edges. The create boundaries around or inside an object.
Most lines you encounter are contour lines. In web design these could be the borders you
add around an object or group of objects

Dividing lines can also define edges, but what distinguishes them from contour lines is they
divide space. The lines between columns of text are dividing lines as are the lines
separating menu items.

Decoration lines are used to embellish an object. Cross-hatching is an example of using

decoration lines to add shading and form to an object. The line beneath liked text is a
decorative line as are the lines used to create a floral background image

Gesture lines are quick and rough continuous lines used to capture form and movement.
They are generally used when studying the shape and motion of the human form. You likely
won’t use gesture lines (based on the technical definition) in a web design, but you could
certainly create patterns of lines to signify motion or build up a form

The Meaning of Different Kinds of Lines

As I mentioned above there are a lot of different ways we can describe a given line and
each gives a line unique characteristics. What do these characteristics mean and what do
they communicate? (.doc)
Thin lines are fragile. They appear easy to break or knock over. They suggest frailty and
convey an elegant quality. They are delicate and give off an ephemeral air.

Thick lines on the other hand appear difficult to break. They suggest strength and give
emphasis to nearby elements. Thick lines are bold and make a statement.

Horizontal lines are parallel to the horizon (hence the name). They look like they’re lying
down, at rest, asleep. They suggest calm and quiet, a relaxed comfort.

Horizontal lines can’t fall over. They accentuate width. They’re stable and secure. The
convey an absence of conflict, a restful peace. Horizontal lines by their connection to the
horizon are associated with earth bound things and idea.

Vertical lines are perpendicular to the horizon. They are filled with potential energy that
could be released if they were to fall over. Vertical lines are strong and rigid. They can
suggest stability, especially when thicker. Vertical lines accentuate height and convey a lack
of movement, which is usually seen as horizontal.

They stretch from the earth to the heavens and are often connected with religious feelings.
Their tallness and formality may give the impression of dignity.

Diagonal lines are unbalanced. They are filled with restless and uncontrolled energy. They
can appear to be either rising or falling and convey action and motion. Their kinetic energy
and apparent movement create tension and excitement. Diagonal lines are more dramatic
than either horizontal or vertical lines.

Diagonal lines can also appear solid and unmoving if they are holding something up or at
rest against a vertical line or plane.

Curved lines are softer than straight lines. They sweep and turn gracefully between end
points. They are less definite and predictable than straight lines. They bend, they change
direction. Curved lines express fluid movement. They can be calm or dynamic depending on
how much they curve. The less active the curve the calmer the feeling.

Zigzag lines are a combination of diagonal lines that connect at points. They take on the
dynamic and high energy characteristics of diagonal lines. They create excitement and
intense movement. They convey confusion and nervousness as they change direction
quickly and frequently. They can imply danger and destruction as they break down.

Long, perfectly even lines feel artificial. Nature is not perfectly straight. As variation is added
to a line it becomes less artificial and more natural.

Dashed and dotted lines are implied lines. They’re incomplete and allow objects to pass
through them. A thick, vertical dotted or dashed line is still a strong line, though not as
strong were the line completely solid.

Line Patterns

A series of lines form a pattern. These line patterns convey meaning in addition to the
meaning of the individual lines.

Parallel lines of uniform width and spacing create a static and orderly effect. It doesn’t
matter if the lines are horizontal or vertical or diagonal. Even in curved lines the repetition
creates order, however one more dynamic than straight lines. Not too how the series of
curved lines while mostly static, still creates a sense of movement.
By varying the spacing between lines of equal thickness we can convey motion. When the
spacing between lines of the same thickness is random we get a dynamic effect with little
order. When we vary both spacing and thickness the effect becomes more chaotic and
disorderly.

Patterns of lines can be built up to create shading and texture. Value can be controlled
through use of line. Lines can be combined to form shapes. Lines can be made up of type
or any shape placed one after the other.

How to Use Lines in Web Design

We use lines to organize, connect, and separate information and design elements. You can
use lines to convey movement and create texture. Lines provide emphasis and define
shape. They can be used to convey mood and emotion.
Think of any website and all the places lines are or could be used. When you align elements
of a design you create an implied line that organizes and connects those elements. You can
further emphasize the relationship with a real line.

You add borders around various elements in your design to group them and clear separate
them from other elements on the page.

Lines are used to divide header from content and content from footer. They’re used to divide
the page into columns and rows of information. Grid lines might even be the structural glue
holding your entire design together.

Design is controlling space and lines are often used to define that space. We can use real
or implied lines in combination with the gestalt principles of continuity, uniform
connectedness, proximity, parallelism, common region, and even closure.
Summary

Lines are an essential building block in our visual vocabulary. Combined with shapes, color,
value, texture, space, and form they give us a visual grammar which we can use to
communicate.

They seem simple. You didn’t need me to tell you what a line is when you started reading
this post and yet here we are some 2,000 or so words later and we’ve barely scratched the
surface of what lines can do. If we wanted them to, lines could create the surface and
represent the scratch.

Something as simple as a line can have an endless combination or variety and through that
variety convey different meanings, concepts, themes.

Even more when we combine lines into patterns we can convey additional information and
meaning. we can use lines to create textures and shapes, which leads us to the next post.
https://www.colorpsychology.org/

”White for Shadowhunters is the color of funerals,” Luke explained. “But for mundanes,
Jace, it’s the color of weddings. Brides wear white to symbolize their purity.”
– Cassandra Clare, City of Fallen Angels

The Psychology and Meaning of Colors

What is it about the rainbow that gives most people a sense of happiness? Sure, it signifies
the calm after a storm, but the colors themselves have an effect on our minds.

There is a reason why people prefer certain colors over others. This preference says
volumes about our personalities, because each color has an association with a reaction our
brain has when we internalize it.

Color psychology is a well-known, yet less explored branch of the study of how our brain
perceives what it visualizes. As far as scientific research goes, there is not much to work
with. However, the impact that colors have on our brains is used to manipulate our decision
making by multiple facets of society.

Personality Based on Color:

Red

 Associated with energy, war, danger, strength, power, determination as we ll as

passion, desire, and love.

 Enhances human metabolism, increases respiration rate, and raises blood pressure.

 It attracts attention more than any other color, at times signifying danger.

Colors related to red: Magenta, Burgundy, Maroon.

Orange

 Combines the energy of red and the happiness of yellow.

 Associated with joy, sunshine, and the tropics.

 Represents enthusiasm, fascination, happiness, creativity, determination, attraction,

success, encouragement, and stimulation.
Blue

 Unique and authentic

 Enthusiastic, sympathetic and personal; they seek meaning and significance in life

 Warn, communicative and compassionate; they care about what they do

 Idealistic, spiritual and sincere; they value unity and integrity in their relationships

 Peaceful, flexible and imaginative; they are natural romantics and nurturers

Colors related to blue: Teal, Turquoise

Yellow

 Associated with joy, happiness, intellect, and energy.

 Produces a warming effect, arouses cheerfulness, stimulates mental activity, and

generates
muscle energy.

 Bright, pure yellow is an attention getter, which is the reason taxicabs are painted
this color.

 When overused, yellow may have a disturbing effect.

 It is known that babies cry more in yellow rooms.

 Yellow indicates honor and loyalty. Later the meaning of yell ow was connected with
cowardice.

Colors related to yellow: Amber, Beige

Green

 Color of nature. It symbolizes growth, harmony, freshness, and fertility.

 Strong emotional correspondence with safety.

 Dark green is also commonly associated with money.

 Has great healing power.

 Green suggests stability and endurance.

 Color of the sea. It is often associated with depth and stability.

 Symbolizes trust, loyalty, wisdom, confidence, intelligence, faith, truth, and heaven.

 Considered beneficial to the mind and body.

 Slows human metabolism and produces a calming effect.

 Strongly associated with tranquility and calmness.

 Used to symbolize piety and sincerity.

Also check: Chartreuse

Pink

 This is a color that represents a gentle type of love

 Pink stands for tenderness, vulnerability and youth

 It is a calming, non-threatening color. It is linked to innocence, hope and optimism.

 Pink color also represents positive aspects of traditional femininity like nurture and
kindness.

 Pink can be linked to childhood sweetness and innocence, appearing sometimes as

naïve or silly

Also check: Salmon

Purple

 Combines the stability of blue and the energy of red.

 Associated with royalty. It symbolizes power, nobility, luxury, and ambition.

 Conveys wealth and extravagance.

 Associated with wisdom, dignity, independence, creativity, mystery, and magic.

Relevant colors: Indigo, Violet, Lavender, Mauve

White

 Associated with light, goodness, innocence, purity, and virginity.

 Considered to be the color of perfection.

 Signifies safety, purity, and cleanliness.

 Usually has a positive connotation.

 Can represent a successful beginning.

 Depicts faith and purity.

Black

 Associated with power, elegance, formality, death, evil, and mystery.

 A mysterious color associated with fear and the unknown (black holes).

 Usually has a negative connotation (blacklist, black humor, ‘black death’).

 Denotes strength and authority; it is considered to be a very formal, elegant, and

prestigious color.

 The symbol of grief.

Color is, simply stated, broken down white light. This is a dissection of light at different
wavelengths and each wavelength is perceived as a separate color. Objects tend to absorb
or reflect these wavelengths, so when we see a yellow lemon, it is the yellow wavelength
that is being reflected while all others are being absorbed. Now that we have understood
what color means, let’s explore some of the ways it influences our mood.

We feel color. How or what we feel about it varies from person to person. Some colors give
us a sense of serenity and calm;these usually lie within the blue side of the spectrum-that
consists of purple and green too, known as the cool side. Others induce rage and make us
uncomfortable , or signify passion; these lie within the red spectrum-which includes orange
and yellow, known as the warm side.

Color perception is subjective, and certain colors have a very universal significance. This is
coded into our reptilian brain, giving us that instinctive feeling of fire being dangerous and
the beach being relaxing.

Color psychology is a very important tool used by artists, interior decorators, and as a
marketing mechanism in many industries. It is the palette used by Dali that makes his
artwork bizarre, and amplifies the hyperrealism he intends to create.
When we visit a museum to appreciate a work of art, we take it in through the colors we see
because they invoke within us certain emotions, making the claim that everyone sees it
differently a reality. Interior decorators survey the effect of colors when deciding what color
(Or rather color associations) the walls of a certain area in a building will be painted.

The reason that many offices have a lot of greys, blues and browns incorporated in their
décor is because these colors tends to increase productivity. Yet, this is not a rule of the
thumb. This does hold true for a corporate environment, but if one were to work say for
example in the fashion industry, or the media, the use of brighter and more “colorful” paints
would help encourage creativity.

Many car commercials show black as their model, because this certain color is associated
with affluence and seriousness. This leads the consumer to believe that the product is worth
buying. Even the food and drink industry uses color to attract more people to certain brands.
The purple and gold packaging of a certain brand of candy bar is a technique to lure the
consumer into believing that this is chocolate royalty, and why would one not want to buy
the best of best. Culturally speaking, colors have different values attached to them too. A
bride in the western world wears white, where as it is what a widow wears in South Asia.

Color stimulates our brain, and from the ancient times has proven to be useful
alternative psychotherapy. The Egyptians and Chinese used colors to heal, a process that is
known is chromotherapy. Colors were used to in order to help the body function better.

However there is a lot of doubt that prevails today as far as the effectiveness of color
therapy is concerned. Since every human being has different emotions attached to different
colors, the universal significance of colors may or may not work in these cases.

Bottom line being, color psychology and associations are an interesting part of the complex
working system of our brain, yet with so many scientific questions about it still left
unanswered , and differences in cultural attachments to colors, it can only be utilized
through observation and experience of how color has influenced brains over the years.