Design Elements & Design Principles  

Design Elements 

building blocks of visual design 

Principles of Design

Use or arrangement of the elements  

                                    

                                  Line  

 

 

                             Shape / Form  

 

                                    Color  

 

                                    Value  

 

                                   Texture  

 

 

 

                        Space / Perspective  

 

 

                                  

Pattern 

 

 

Rhythm / Movement 

 

Proportion / Scale 

 

Balance 

 

Unity 

 

Emphasis 

           

   

Rule of Thirds Definition & Example

The rule of thirds is one of the main “rules” (really a guideline) in art and photographic composition and stems from the theory that the human eye naturally gravitates to intersection points that occur when an image is split into thirds.

Rule of Thirds Definition

In the rule of thirds, photos are divided into thirds with two imaginary lines vertically and two lines horizontally making three columns, three rows, and nine sections in the images. Important compositional elements and leading lines are placed on or near the imaginary lines and where the lines intersect.

 

 

 

 

 

 

 

 

 

 

 

What is Gestalt? 

When human beings look at a painting or a web page or any complex combination of elements, we see the whole before we see the individual parts that make up that whole. This idea of seeing the whole before the parts and even more the whole becoming more than the sum of its parts is Gestalt. 

The German word gestalt can be translated as “shape” or “form” and the term refers to how visual input is perceived by human beings. Gestalt psychology was founded by Max Wertheimer and has been added to over the years by other authors. 

The Key Ideas Behind Gestalt Theory      “The whole is other than the sum of the parts.”  — Kurt Koffka 

This quote is gestalt in a nutshell. When human beings see a group of objects, we perceive their entirety before we see the individual objects. We see the whole as more than the sum of the parts, and even when the parts are entirely separate entities, we’ll look to group them as some whole. 

Gestalt Principles 

Similarity 

“Elements that share similar characteristics are perceived as more related than elements that don’t share those characteristics.” 

Similarity occurs when objects look similar to one another. People often perceive them as a group or pattern.  

Through repetition of color, size, orientation, texture, font, shape, etc. we can design elements so they appear more related. Think of links on web pages. Assuming they are all blue and underlined they clearly send a message that they are related. 

Any number of characteristics can be similar: color, shape, size, texture, etc. When a viewer sees these similar characteristics, they perceive the elements as being related due to the shared characteristics. 

This example (containing 11 distinct objects) appears as a single unit because all of the shapes have similarity. 

Unity occurs because the triangular shapes at the bottom of the eagle symbol look similar to the shapes that form the sunburst. 

 

When similarity occurs, an object can be emphasized if it is dissimilar to the others. This is called anomaly.  The figure on the far right becomes a focal point because it is dissimilar to the other shapes. 

 

Color has been used here to imply similarity. You should see alternating columns of black and red circles. Why do you not see rows of circles?  Each column is determined by the similarity of color of the circles that make up the column. 

 

 

 

Closure 

“When looking at a complex arrangement of individual elements, we tend to look for a single, recognizable pattern.” 

 

Your first impression when looking at this image is to likely see a square, even though the image is 4 straight lines. We fill in the missing information to make for a single recognizable pattern.  

 

 

In this example, although the panda is not complete, enough is present for the eye to complete the shape. When the viewer's perception completes a shape, closure occurs. 

 

 

 

Proximity 

“Things that are close to one another are perceived to be more related than things that are spaced farther apart.” 

Proximity occurs when elements are placed close together. They tend to be perceived as a group.  

  

         The nine squares above are placed without proximity. They are perceived as separate shapes. 

 

  

   When the squares are given close proximity, unity occurs. While they continue to be separate               shapes, they are now perceived as one group. 

  

 

The fifteen human‐shaped figures form a unified whole (a tree) because of their proximity. 

 

 

You should see three groups of black and red circles above. The proximity, the relative nearness of the circles is stronger than the similarity of the colors. In a larger composition the color similarity would still communicate information about the objects, because of the similarity between them. 

 

 

 

 

 

 

How to choose the right color

Make sure you are sending your audience the right message by using the right colors for your logo, company branding, brochure or website.

Color is the most instantaneous and wonderful means for delivering and communicating messages to your audience. Much of our reaction to color is subtle, triggered by chemicals in the brain, that can excite, sadden, overwhelm or inspire.

There are environmental factors that you need to consider.

For example: your eyes can’t focus on red and blue at the same time. Trying to read red type on a blue background or vice versa causes extreme eye fatigue. And unlike printed material, colors appear different on EVERYONES computer screen depending on their individual settings. So it is extremely important to make sure your design works in grey scale (black, white and grey only). There must be enough color contrast for your viewers to be able to use your website without relying on color alone.

Color meanings

Red: exciting, stimulating, daring, dynamic, bold & sexy.

Blue: comfort, loyalty, security, stable, serenity & peace.

Yellow: caution, bright, cheerful, energetic, mellow, hope & happy.

Green: money, health, food, nature, fresh, healing, soothing & prestigious.

Brown: nature, aged, eccentric, earth, substance, durability & security.

Orange: warm, excitement, friendly, vital, inviting, energetic & playful.

Pink: soft, healthy, childlike, energy & feminine

Purple: royal, religion, elegant, sensuality, spirituality & creativity.

Black: dramatic, serious, strong, mysterious, elegant & powerful.

Grey: business, cold & distinctive.

White: clean, pure & simple.

 

 

 

 

 

 

Baseline 

 

 

 

 

 

 

 

 

Serif, Sans‐serif, Script, and Decorative Fonts Serif = Fancy,  San‐serif = without fancy 

 

 

 

 

 

 

 

 

 

 

 

 

Font Families: 

 

 

 

 

 

 

 

 

 

Spot Color vs. Process Color 

Spot Color refers to the Pantone Matching System created in the 1960's.  Today, it is largely accepted as the worldwide standard.  All colors are mixed using the 14 inks below. 

In most Adobe applications, it's the first 14 colors listed in their Pantone Swatches. 

PANTONE Yellow  PANTONE Purple  PANTONE Yellow 012  PANTONE Violet  PANTONE Orange 021 

PANTONE Reflex Blue  PANTONE Red 032  PANTONE Process Blue  PANTONE Rubine Red  PANTONE Black 

PANTONE Blue 072  PANTONE Warm Red PANTONE Green  PANTONE Rhodamine Red 

     

 Combinations of these colors, with the occasional use of PANTONE Transparent White, make up all the colors of the Pantone series. Each color has a specific formula or recipe.  

Process Color is used for "full color" printing, it uses 4 inks (Cyan, Magenta, Yellow, and Black) to produce a variety of other colors.  

With Process Color, the inks aren't mixed together, they are created with a series of half‐tone dots in each of the 4 inks as needed to create the desired color.  The picture below helps illustrate this point.         

                http://info.universalprinting.com/blog/bid/51757/Choosing‐Inks‐for‐Color‐Printing‐Spot‐Color‐vs‐Process‐Color 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

       

                                    

    

          

 

 

   

    

 

  

 

 

 

 

 

      

 

 

  

 

 

 

 

 

 

 

 

Raster vs Vector

There are two main type of image files: Raster and Vector. Raster images are more common in general such as jpg, gif, png, and are widely used on the web. Vector graphics are common for images that will be applied to a physical product. Also used in CAD, engineering, and 3D graphics which we do not provide information nor services for.

When using a raster program you paint an image and it's similar to dipping a brush in paint and painting. You can blend colors to soften the transition from one color to another. When using a vector program you draw the outline of shapes: e.g. an eye shape, a nose shape, a lip shape. These shapes display one single color each.

A lot of images can be made with either raster or vector program and look exactly the same on both programs. Images with a subtle gradation of one color to another are the images that will look most different since vector programs need to create a separate shape for each shade of color.

Some vector programs do have the ability to create color gradients within one single shape, but these are actually raster effects. A vector graphic with gradients contains both vector and raster elements and won't be suitable for process that requires 100% vector or true vector art.

Pixels vs Vectors

Raster images are made of pixels. A pixel is a single point or the smallest single element in a display device. If you zoom in to a raster image you may start to see a lot of little tiny squares.

Vector images are mathematical calculations from one point to another that form lines and shapes. If you zoom into a vector graphic it will always look the same.

A raster image has a specific number of pixels. When you enlarge the image file without changing the number of pixels, the image will look blurry. When you enlarge the file by adding more pixels, the pixels are added randomly throughout the image, rarely producing good results.

When you enlarge a vector graphic, the math formulas stay the same, rendering the same visual graphic no matter the size. Vector graphics can be scaled to any size without losing quality.

Vector Graphics - Vector graphics are scalable

Because vector graphics are not composed of pixels they are resolution-independent. The vector shapes - also called objects - can be scaled and printed at any size without losing quality.

A multi-color vector image can be easily changed to a limited color graphic. Limited colors are often required by some processes such as embroidery, "stencil-cut" vinyl signs, and specialty promotional items (such as logos printed on cups, pens, bottles, etc.)

Vector graphics are commonly used for logos, illustrations, technical drawings and for use with processes that require vector art such as specialty signs and printing, engraving and e tching. Also used in CAD, Engineering, and 3D graphics.

Raster / Bitmap Images

Pixel-based images represent and edit photographs and photo-like images better than vector programs because they can use an abundant number of different color pixels. By arranging pixels and slowly incrementing or changing the color or shade of the pixels adjacent to them, it creates a subtle gradation from one color to another: nice and smooth color blends.

Raster images' dimensions are measured in pixels. Because raster images cannot be enlarged without losing quality, printers require that you provide them with files at the correct size: 1 the dimension you want to print your image at, and 2. the pixel resolution for that particular project. The pixel resolution is the amount of pixels within each inch called ppi (pixels per inch).

How large a raster image can be printed - and maintain quality - depends on 2 things:

1. the pixel dimension of the image (e.g. 6824 pixels wide by 2345 pixels high) 2. the pixel resolution: pixels-per-inch (ppi), how many pixels per inch are required by the particular printer

Different types of printing have different resolution requirements. On average:

Paper printing require a minimum of 300 ppi Shirt printers require a minimum of 240 ppi Large format printers (banners, billboards) vary a lot because it also depends on the distance from which the sign is going to be viewed - could be as low as 20 or more than 200

How to determine what size your raster image must be for printing:

Multiply the resolution required by the area to be printed. Example:

If a printer requires a minimum of 300 ppi and you want to print an image in an area that is 5 inches wide, multiply 300 pixels x 5 inches = 1500. Your image must be at least 1500 pixels wide.

Can we enlarge the pixel dimension & resolution of a raster image?

Raster images have a certain amount of pixels within each inch. A 72 ppi image has 72 pixels in every inch. A 300 ppi image has 300 pixels per inch. When you are required to provide a "large or high resolution" image file (a specific size), the image must have been created or scanned at that size or larger (at both the dimension and the resolution required.) E.G. if you need to print an image at 2 inches wide and 300 ppi is required, your image must be created, photographed or scanned at a minimum of 600 pixels (2 in x 300 ppi).

Once the image is created at a certain dimension, you may not be able to use this image at a larger size without losing quality. When you manually increase the resolution with a program like Photoshop, Photoshop randomly adds pixels and the result will most likely be a high resolution image of poor quality. Sample of a raster image:

How to determine what dimension your image can be printed at good quality: Divide the pixel dimension of your image by the resolution required by your printer. Example: If image is 1024 pixels wide & printer requires 300 ppi (1024 ÷ 300) = image can be printed at 3.413" wide.

DPI vs PPI

DPI - Dots per Inch This is the amount of ink dots the printer will put on each pixel of your image. The DPI is set by the actual printer device and it is not something in the image for the graphic designer to manipulate.

PPI - Pixels per Inch Digital raster images are measured in pixels, or picture elements. How many pixels per inch is determined by the device you create the digital image with: camera, scanner, or graphics software and can be modified with a photo/paint editing software.

If I am creating a new design which software should I use; Raster or Vector?

It depends on the design itself. If it's going to have photographic elements with continuous tones and blends of color, you are probably better off using a paint program. If you want your design to look like a drawing or illustration with clear contrast between the elements of the design, then use a vector program.

Ideally a company that has a logo design with photographic elements, also has a secondary simplified version of their logo in vector format that can be used for those specialty items that require vector art such as plotters, engravers, vinyl-cut signs, promotional specialty items (cups, pens, bottles with company logo.)

Raster & Vector Summary

 

 

Vector

• Mathematical calculations that form shapes

• Vector programs best for creating logos, drawings and illustrations, technical drawings. For images that will be applied to physical products.

• Can be scaled to any size without losing quality

• Resolution-independent: Can be printed at any size/resolution

• A large dimension vector graphic maintains a small file size

• Number of colors can be easily increased or reduced to adjust printing budget

• Vector art can be used for many processes and easily rasterized to be used for all processes

• Can be easily converted to raster

• It is not the best format for continuous tone images with blends of color or to edit photographs

• Common vector graphic file format: ai, cdr, svg, and eps & pdfs originating from vector programs

• Common vector programs: drawing programs such as Illustrator, CorelDraw, Inkscape (free)

Raster (Bitmap)

• Made of pixels

• Raster programs best for editing photos and creating continuous tone images with soft color blends

• Do not scale up optimally - Image must be created/scanned at the desired usage size or larger

• Large dimensions & detailed images equal large file size

• It is more difficult to print raster images using a limited amount of spot colors

• Some processes cannot use raster formats

• Depending on the complexity of the image, conversion to vector may be time consuming

• Raster images are the most common image format, including: jpg, gif, png, tif, bmp, psd, eps and pdfs originating from raster programs

• Common raster programs: photo editing / paint programs such as Photoshop & Paint Shop, GIMP (free)

 

 

Inner shadows simulate 3D depth by creating an offset shadow INSIDE a shape to make it look like it is cut out and casting a shadow on the object beneath.   

 

 

Drop shadows provide an illusion of depth on a page so that parts of the image or text appear to be floating above the page.   

 

 

The Bevel and Emboss effect adds a highlight and a shadow edge 180 degrees apart from each other. When you adjust the height or 

angle settings of the light, the two move in sync, and this can be used to create an illusion of depth. Bevel and Emboss is often used 

to create contoured type and 3D web page buttons, but this layer effect can sometimes be used in photography to produce molten‐

looking effects.