RWG - Graphic Design Elements (Lesson)

 

Graphic Design Elements Lesson

Web Graphics

Web graphics are an element of artwork, a visual design on a Web page. They can include digital photos, clip art, icons, animations, or other forms of artwork. Graphics can be either two- or three-dimensional.

Graphics on a business website can benefit the business in many ways, but they must have a purpose. They can boost the website by increasing its visual appeal, enhancing its brand recognition, and strengthening its usability along with engaging and attracting new customers. Likewise, graphics can be used as a marketing tool for a business, such as the creation of a business logo.

You have heard the saying “A picture is worth a thousand words.” Graphics are considered a form of visual communication for a business. They can portray messages faster than words can. With a poignant design, they can grab the reader’s attention and point them in a specific direction on the page. Their visual appeal can enhance the appearance of a website. Visual appeal is vital to web design because it promotes the communication of ideas to your viewers by stimulating aesthetic senses and increasing a feeling of connection. The perceptional experience of the online viewer should go beyond the shape, color, and movement of the graphic. Overall, a professionally designed graphic can create a positive impression and help strengthen a company’s message.

Graphic Design Elements

A design element is the most basic unit of visual design and the most fundamental ingredient from which all designs are created. There are seven basic graphic design elements that we will discuss in this lesson.

Line

The most basic element in graphic design is the line. Line refers to the way that two points in space are connected. Line is used to add style, enhance comprehension, create forms, and divide space by being a border around other design elements or a divider between them. Lines can exist on their own or become a design themself. They can be straight, curvy, dotted, and used in many creative ways. Lines are the building blocks of other visual design elements such as shapes.

Shape

Shape is another basic visual design element that typically forms the core of a design piece. A shape is either two- or three-dimensional and stands out from the space next to it because of a defined or implied boundary. A shape can live in different areas in space and have other elements such as line, color, texture, or movement. Shapes are geometric, abstract, or organic. Geometric shapes are angular and mathematically consistent. They have structure and precise shape. Abstract shapes are irregular shapes that can be used to add symbolism or variety to a design. Organic shapes are found in nature and are free-form shapes. They often feel natural and smooth.

Color

Color is one of the most powerful design elements. It has extremely physiological importance. Color helps portray mood, light, depth, and point of view. Unlike other elements, it does not always have to be used. A design can have the absence of color, meaning just black and white.

Color has several different properties: hues, value, and saturation. The color hue property is the name of the color in its purest form; it essentially refers to a color having full saturation. No white, black, or gray is added when one hundred percent pure. The color value property is the gradation of color from light to dark. Every color has an underlying value somewhere between white and black. Yellow is a high value (or light tone) color. Violet is a low value (or dark tone) color. Saturation refers to the purity of a color. Saturated colors are all the hues around the outside of the color wheel. They are either primary, secondary, or tertiary colors. With the color saturated property, the colors contain no more than two primary colors and no black or white.

Texture

Texture is one of the elements of design that is used to represent how an object appears or feels. It adds a tactile appearance to a visual design.

Tactile texture is a physical sense of touch, whether it’s rough, smooth, or ribbed. Visual texture, on the other hand, refers to the imagined feel of the illustrated texture, which can create more visual interest and a heightened sensory experience. In digital design, we're mostly concerned with implied textures, which are textures we can see.

Space

Making proper use of the design element of space can help others view the design as intended. Space refers to the area that a shape or form occupies. Space allows design elements to have ample breathing room. It can be defined as positive or negative. Positive space is the spacing that is filled by object(s) or element(s) in the design. Negative space, also known as white space, is the empty space or the open space between design elements or objects, such as a background. We often think of space as "white space" in design, but it doesn't have to be white.

Form

The design element form adds visual dimension and can be stimulating and engaging to the eye. A form is a three-dimensional object with measurable width, depth, and height. There are three types of forms:

Geometric forms: These are forms with a combination of points, lines, and surfaces. They appear man-made and structured. They feel clean, controlled, and ordered. A form can be a geometric shape that is mathematically precise in all its angles and edges,

Organic forms: Forms that are created or derived from nature are considered organic forms. These types of forms appear natural. Organic forms whether simple or complex, produce a natural feel. They are not mathematically precise, but they are three-dimensional.

Random forms: Abstract shapes create random forms. They are recognizable forms, but they are not real. They tend to be more stylized or simplifications of organic forms. They can represent feelings or ideas, such as emojis.

Typography

The design element typography is everywhere. It is on signs, in our textbooks, on our social media pages, phones, and websites to name a few. So, what is typography? It is the art of arranging text in a legible and visually pleasing fashion. The font style, appearance, and structure are fundamental aspects of typography. This design element is applied to symbols, letters, and digits. The different fonts and styles of typography can create a certain mood or set an overall tone to the element to which it is applied. In addition, typography can make a design look aesthetically pleasing and facilitate audience engagement.

Learning Spot…More HTML Tags

In this learning spot, you will learn how to add a background color to a page using a valid color name. The colors that you will practice with are red, green, yellow, blue, purple, and orange. As you begin to style more elements on your webpage, such as adding color, you will be adding the style declarations in between the open and close style tag: <style></style>. There are three parts to the style element:

Selector - The selector is usually the HTML element that you are attempting to control. Take a look at the example code; you have two selectors, body and h1. In this example, we are going to style the elements <body> and header (h1). On the left, you see the main elements and the information that we want inputted on the webpage. On the right, you see the style declarations added to the elements that we want to control.

 

 

Property - The property defines the selector in some way, usually by size or variety. Font-weight: bold and font-family: Arial are examples of properties that describe text on a webpage that could be placed in a header or paragraph element.

Value- The value declares how much, how far, what color, etc. The font size of a text could be 120% is an example of value.

Web Safe Colors Video

Video Transcript Links to an external site.

 

 IMAGES CREATED BY GAVS