Principles for Creating a Visual Design

 

A successful visual design applies the following principles to elements, and  effectively brings them together in a way that makes sense.  When trying to figure out how to use the basic elements consider:

• Unity  ------------------Visual design must strike a balance between unity and variety to avoid a dull or overwhelming design.
• Gestalt, ...........................The design elements are arranged properly, the Gestalt of the overall design will be very clear.
• Space is........................ “defined when something is placed in it” The Elements of Graphic Design. Incorporating space into a design helps reduce noise, increase readability, and/or create illusion. White space is an important part of your layout strategy.
• Hierarchy ................shows the difference in significance between items.  Designers often create hierarchies through different font sizes, colors, and placement on the page. Usually, items at the top are perceived as most important.
• Balance........................ creates the perception that there is equal distribution.  This does not always imply that there is symmetry.  
  
  
  
• Contrast........................ focuses on making items stand out by emphasizing differences in size, color, direction, and other characteristics.
• Scale ....................identifies a range of sizes; it creates interest and depth by demonstrating how each item relates to each other based on size.
• Dominance focuses on having one element as the focal point and others being subordinate.  This is often done through scaling and contrasting based on size, color, position, shape, etc.
• Similarity ..............................refers to creating continuity throughout a design without direct duplication. 
• 
  
  
  
  

Read More

THE ELEMENTS OF DESIGN-Visual Design Basics

Visual design focuses on the aesthetics of a site and its related materials by strategically implementing images, colors, fonts, and other elements.  A successful visual design does not take away from the content on the page or function.  Instead, it enhances it by engaging users and helping to build trust and interest in the brand.

Basic Elements of Visual Design

The basic elements that combine to create visual designs include the following:

The elements of art are  like "building blocks" for creating something​

Point:

A point is a single dot or mark that has position but is otherwise limited. It is a single entity in itself and alone it can act as a focal point or a stopping point in a composition. For example a target or dart board has a single point as its focus. Together a number of points can have a leading effect where the eye naturally attempts to "connect the dots" to create a line or form. This is known as the Gestalt grouping principle.

LINE

Line can be considered in two ways. The linear marks made with a pen or brush or the edge created when two shapes meet. 

Lines connect two points and can be used to help define shapes, make divisions, and create textures.  All lines, if they’re straight, have a length, width, and direction.

A line is essentially a series of connected points. There are characterised by their length, direction and weight. Lines can be straight or wavy, long or short, heavy or soft, architectural or organic. As such they can be utilised in a variety of ways in a composition. They can be used to create perspective, outline a landscape, frame a composition etc. The directionality of a line will also have a big effect on your composition with oblique or slanted lines suggesting movement and dynamism while vertical or horizontal lines suggest structure, balance and conformity.

 

SHAPE 
A shape is a self contained defined area of geometric or organic form. A positive shape in a painting automatically creates a negative shape.

Shapes are self-contained areas.  To define the area, the graphic artist uses lines, differences in value, color, and/or texture.  Every object is composed of shapes.

Shapes are essentially closed lines. Shapes are two dimensional and forms are three dimensional. The basic two dimensional shapes are squares, rectangles and triangles with the related three dimensional forms being cubes, bricks (technical name is a rectangular prism) and pyramids. An infinite amount of other shapes exist of course, whether they are fluid organic shapes or rigid abstract shapes.

Form:

Forms

Forms are essentially three dimensional shapes. The basic two dimensional shapes are squares, rectangles and triangles with the related three dimensional forms being cubes, bricks (technical name is a rectangular prism) and pyramids. An infinite amount of other forms exist of course, 

Form applies to three-dimensional objects and describes their volume and mass.  Form may be created by combining two or more shapes and can be further enhanced by different tones, textures, and colors.

whether they are fluid organic forms or rigid abstract geometric forms.

Typography  refers to which fonts are chosen, their size, alignment, color, and spacing.

A typeface is a collection of letters. While each letter is unique, certain shapes are shared across letters. A typeface represents shared patterns across a collection of letters.

Typefaces that are selected for their style, legibility, and readability are most effective when following the fundamental principles of typographic design.

Weight

Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights; and four to six weights is a typical...

Weight refers to the relative thickness of a font’s stroke. A typeface can come in many weights; and four to six weights is a typical number available for a typeface.

DIRECTION 

All lines have direction - Horizontal, Vertical or Oblique. Horizontal suggests calmness, stability and tranquility. Vertical gives a feeling of balance, formality and alertness. Oblique suggests movement and action

 

SIZE 
Size is simply the relationship of the area occupied by one shape to that of another.

 

TEXTURE 
Texture is the surface quality of a shape - rough, smooth, soft hard glossy etc. Texture can be physical (tactile) or visual.

Texture refers to how a surface feels or is perceived to feel. By repeating an element, a texture will be created and a pattern formed. Depending on how a texture is applied, it may be used strategically to attract or deter attention.

Texture is the appearance of a surface material. The main differentiation between textures is that it is either rough or smooth. Textures suggest what a form/shape is made of and can be created using points, line, shapes or colour. Unlike the other elements, texture is both a visual and tactile element.

 

COLOUR palette 
Also called Hue.  Colour, also called hue, is how the eye perceives reflected light. There are many different theories about colour which are covered in more depth in the section on colour theory. What I will explain here are the three main components of a colour: hue, value and saturation

• Hue is where a colour is positioned on the colour wheel. Technically the hue is the colour which it a design element in itself.
• Value is the darkness or lightness of a colour and is a design element in itself.
• Saturation is the intensity of a colour.
• 
  
• Color palette choices and combinations are used to differentiate items, create depth, add emphasis, and/or help organize information.  Color theory examines how various choices psychologically impact users.

 

Value
Value is the lightness or darkness of a colour. Value is also called Tone

Read More

Color Control

 The Color Wheel

A color wheel shows how colors are related. On a color wheel, each secondary color is between the primary colors that are used to make it. Orange is between red and yellow because orange is made by mixing red with yellow. What goes between secondary colors and primary colors? Intermediate, or tertiary, colors are made by mixing a primary color with a secondary color that is next to it. Red-orange, yellow-orange and yellow-green are some intermediate colors.

The lightness or darkness of a color is called its value.

You can find the values of a color by making its tints and shades.

Tints are light values that are made by mixing a color with white. For example, pink is a tint of red, and light blue is a tint of blue.

Shades are dark values that are made by mixing a color with black. Maroon is a shade of red, and navy is a shade of blue.

 

Two useful tools to aid our color decisions are

the use of complementary and

balancing saturated color with compound colors.

 

Primary colors

Primary colors are known as basic colors because they cannot be created by mixing other hues. Since humans are trichromatic, the primary colors yellow, red, and blue are fundamental to human vision. Primary colors are the building blocks of all other colors.

 

Secondary colors are made by combining two primary colors.

Secondary colors are created by the equal mixture of two primary colors. For example, yellow and red make orange, red and blue make purple, and blue and yellow make green. On a color wheel, the secondary colors are located between two primary colors.

 

Triadic

Triadic color schemes offer high contrasting color schemes while retaining the same tone. Triadic color schemes are created by choosing three colors that are equally placed in lines around the color wheel.

Tertiary colors are also called intermediate colors.

When you blend secondary and primary colors together, you get what is called a tertiary color, or intermediate color. On a color wheel, the tertiary colors are found between the primary and secondary colors. Yellow-orange, red-orange, red-purple, blue-purple, blue-green, and yellow-green are examples of tertiary colors.

ANALOGOUS COLORS

Analogous (uh-NAL-uh-gus) colors sit next to each other on the color wheel. They tend to look pleasant together because they are closely related. Analogous colors flatter each other when used together because they are so close to each other on the color wheel. When using analogous colors, painters make sure they have enough contrast, often choosing one dominant color, a second supporting color, and a third color that acts as an accent.

Orange, yellow-orange, and yellow are an example of analogous colors. They are blended nicely in Sunflowers

Monochromatic colors are really just a variety of one color.

A monochromatic color scheme uses variations of a single hue to create a clean, elegant, and single-colored work of art. Using this type of color scheme will establish one overall mood and can be visually appealing.

 

THE COMPLEMENTARY COLORS

The complementary are colors directly opposite one another on the color wheel.  Allowing one color to dominate and but maintains a balanced color arrangement. Complementary 
colors sit opposite each other on the color wheel. Because they are opposites, they tend to look especially lively when used together. When you put complementary colors together, each color looks more noticeable.

Red and green are an example of complementary colors

​

SATURATED COLORS

Saturated colors contain either one or two primary colors and no black or white. They are the purest colors of each hue.

​

COMPOUND COLORS

Compound colors are colors containing all three primaries. They are all the earth colors - browns, khakis, greys etc.

 

NEUTRAL COLORS

Neutral colors are also known as earth tones.

Neutral colors include black, white, gray, and sometimes brown and beige. They are sometimes called “earth tones.” Neutral colors don't show up on a color wheel. They can be created by mixing two complimentary colors or combining a pure color with white, black, or gray. Pure neutral colors include black, white, and all grays while near neutrals include browns, tans, and darker colors.

 

WARM COLORS

Warm colors are made with red, orange, yellow, or some combination of these. Warm colors tend to make you think of sunlight and warmth.

COOL COLORS

Cool colors are made with blue, green, purple, or some combination of these. Cool colors might make you think of cool and peaceful things, like winter skies and still ponds.

The Meaning of Color

Along with varying visual impact, different colors also carry different emotional symbolism.

• Red — typically associated with power, passion, or energy, and can help encourage action on your site
• Orange — joy and enthusiasm, making it a good choice for positive messaging
• Yellow — happiness and intellect, but be wary of overuse
• Green — often connected to growth or ambition, green can help give the sense that your brand is on the rise
• Blue — tranquility and confidence, depending on the shade — lighter shades provide a sense of peace, darker colors are more confident
• Purple — luxury or creativity, especially when used deliberately and sparingly on your site
• Black — power and mystery, and using this color can help create necessary negative space
• White — safety and innocence, making it a great choice to help streamline your site

Read More