Lesson 6 - Imaging and Design for the Online Environment

Lesson 6: Imaging and Design for the Online Environment

This interactive lesson will help you more understand, appreciate, and unveil your creativity on the use of the proper graphic and layout designing for more effective communication. You will also learn the core components of graphic design.

The lesson mainly focuses on Basic Principles of Graphics and Layout.

After going through this module, you are expected to:
1. identify and explain the Basic Principles of Graphics and Layout;
2. explain the vital use of the Basic Principles of Graphics and Layout in communication and industry;
3. assess the effectiveness of the graphic design in a given layout example; and 4. evaluate existing websites and online resources based on the principles of layout, graphic, and visual message design.

Understanding Graphic Design and Layout

What makes a good and effective website? How do users interact with the websites they visit?

A good website must know its target audience, determine its needs, and communicate effectively using the basic principles of graphics and layout. Users or visitors may have different interests and needs like browsing, researching, streaming, online shopping, dating, and many others.

They even behave differently depending on what they perceive on the website. Web design matters in every user, whether they can decide to stay or just leave. Usability is important for the users as it satisfies their experience on the website, but a good design will drag the audience’s attention to stay on the page. Always remember that first impressions last and web design has an impact on the users on how they perceive the brand or message.

Graphic design is an artistic way of communicating ideas and messages through visual expressions using texts, images, and symbols. Graphic designers work on the quality of the output they serve for the audience or clients like websites, advertisements, posters, flyers, logos, videos, and any other multimedia form. A practical graphic layout and design can easily catch the attention of the viewers and
allow them to understand the message conveniently.

Graphic Design vs. Layout

Design is a plan of creating an idea through a combination of texts, images, and other elements that are placed together artistically, whereas, the layout is a term used as the process of organizing and arranging these elements in a design as you plot it in a paper.

Basic Principles of Design and Layout

1. Balance - refers to the proper arrangement of the elements, which gives a visual weight for the design.

There are two types of balance: Symmetrical or Asymmetrical.

Symmetrical balance is where the elements are equally distributed on both sides of your design, technically a mirror-based design. In contrast,

Asymmetrical balance is a free layout where the elements can be placed in any order or the opposite of symmetrical.

2. Emphasis refers to something that needs to stand-out or emphasize. When working on emphasis, you can change the color, size, or even the element itself to lead the eye to the focal interest.

3. Pattern, Repetition and Rhythm is he use of repetitive elements such as lines, shapes, forms, textures, space, colors, font, style, and the like to create texture, movement, continuity, and consistency of the design. It also makes the design formal and more comfortable to read because of its uniformity.

4. Alignment -refers to the proper placement of an element to your design, just like invisibly placing or aligning your texts or images diagonally, vertically, and horizontally. The standard texts or paragraph alignment we apply are center, right, left, and justified.

5. Hierarchy -refers to the proper arrangement of the details such as text, characters, numbers, and symbols. Changing its character size, thickness, spaces, or even font type to stand out is its most critical features. By applying this principle, it can help the viewer to recognize and navigate the highlight of the event smoothly.

6, Contrast refers to the use of different or opposite elements such as sizes (large or small), shapes (geometric or organic), spaces (negative or positive), form (real or abstract), colors (monochromatic, complementary, triadic, tetradic), texture (smooth or rough), and values (light or dark).

The contrast gives visual weight to an object or design. You must consider and limit the use of different elements, color, style, and typography to avoid cluttered design. When creating contrast in color and text, it is advised to choose a color from the background to create consistency of your design. Always remember that the details must be readable by having a dark-light value of either text and background or vice-versa.

7. Unity and Harmony refers to the relationship of the elements or the contents when you place them together. The elements of the design must work together and agree to its meaning, theme, feeling, or mood.

Level 1 Quiz - LEARN AND PLAY is the rule of the game.

Challenge youself with this interactive quiz.

Every element of your design must show the correct placement of texts, paragraphs, or images to make it formal and readable. Which of the following alignment is not recommended in designing?

Center
Left
Diagonal
Right

Which of the principles of graphics and layout refers to the proper arrangement of elements, which gives a visual weight for the design?

Balance
Pattern, Repetition and Rhythm
Unity and Harmony
Emphasis

Which principle of design is when a designer arranges the elements or text according to its context?

Balance
Hierarchy
Emphasis
Harmony

The following are the ways where you can emphasize the text if you are working on a magazine except:

By making the text bold or italic
By adding illustrations or images
By changing the font color
By changing the font size, either bigger or smaller

Which type of balance gives a mirror-like design that is proportionally equal to the other side?

Semi-Proportion
Asymmetrical
Semi-Balance
Symmetrical

Level 2 Quiz - LEARN AND PLAY is the rule of the game.

Challenge youself with this interactive quiz.

Which of the following refers to the plan of creating an idea through a combination of texts, images, and other elements that are placed together artistically?

Message
Layout
Design
Graphic

Every element of your design must show the correct placement of texts, paragraphs, or images to make it formal and readable. Which of the following alignment is not recommended in designing?

Center
Diagonal
Left
Right

What is the purpose of creating a hierarchy in your design?

It adds visual weight.
It gives consistency
It adds visual weight.
Make the detail to stand out.

Which principle of design is when a designer arranges the elements or text according to its context?

Harmony
Emphasis
Balance
Hierarchy

What other elements of design can be repeated aside from color, header style, and fonts?

Statement
Paper
Word
Size

Monochromatic uses one color in a design. Its advantage is to create balance and to match the color in an artwork. However, this may lack energy and may look monotonous. How will you use the monochromatic scheme to create variations?

Change the hue of the artwork or every element
Adjust the saturation and value
Use complementary colors
Choose a design that is more suitable for the color scheme used

Level 3 Quiz - LEARN AND PLAY is the rule of the game.

Challenge youself with this interactive quiz.

As a layout artist, we must know the details in arranging and accentuating the most important terms by changing its size, thickness, and spaces so the reader can navigate the highlight of the event easily. Which of the following principles best describe the statement above?

Pattern, Repetition and Rhythm
Contrast
Hierarchy
Alignment

The following are the ways where you can emphasize the text if you are working on a magazine except:

By changing the font size, either bigger or smaller
By changing the font color
By making the text bold or italic
By adding illustrations or images

What other elements of design can be repeated aside from color, header style, and fonts?

Paper
Word
Statement
Size

Which of the principles of graphics and layout refers to the proper arrangement of elements, which gives a visual weight for the design?

Balance
Pattern, Repetition and Rhythm
Emphasis
Unity and Harmony

Every element of your design must show the correct placement of texts, paragraphs, or images to make it formal and readable. Which of the following alignment is not recommended in designing?