WEEK 1

Lesson 6: Imaging and Design for Online Environment

Lesson Objectives:

At the end of this lesson, the students should be able to:

• understand the basic principles of graphics and layout
• create a simple infographic using web tools;
• understand and use several file formats used on the web;
• easily manipulate images using a simple image editor; and
• upload and share images using Photobucket.

Google is the most visited website in the world. Its mission statement is "to organize the world's information and make it universally accessible and useful."

Webpage Designing

Creating a web page is like creating a work of art. Here are the basic principles of graphics and layout.

Balance

"The visual weight of objects, texture, colors, and space which is evenly distributed on the screen."

There are two types of balance: symmetrical and asymmetrical.

Symmetrical balance is achieved when the image looks the same on either side of the photo. In the example above, we can see that if we split the image in the center vertically, the two photos would look the same.

Asymmetrical balance is achieved when elements are arranged in a photo to make it look balanced. In this picture, while the two elements in the picture (the tower and the moon) are not symmetrical (of course), they are arranged in a way which makes the photos look balanced in composition. 

Emphasis

"Giving an element stress to show importance"

Emphasis is utilized when you make an element stand out from the others. We can use colors, size, shape, and texture to emphasize an element in a website.

Movement

Movement is usually shown when you capture your subject mid-action, just like when an athlete is running and you capture that moment. We usually utilize movement to guide our viewer's eyes to our focal point, or the focus of the photo.

Pattern, Repetition and Rhythm

"These are the repeating visual elements on an image or layout to create unity in the layout or image."

Pattern and repetition usually refers to the elements which are repeated to appeal to the audience. Rhythm, however, gives a sense of movement, and is usually messy.

Proportion

Proportion is achieved when your elements relate well with one another. We should be able to use proportion to show a story or message with the elements we use.

Variety

In variety, we use different design elements to appeal to the viewers' eyes. In this photo, we use different colors to draw our viewers' attention.  When using variety in our webpage, be sure that it goes well with one another, or it will just look messy.

Infographics

Information graphics or infographics are used to represent information, statistical data, or knowledge in a graphical manner which is usually done in a creative way to attract the viewers' attention. 

The purpose of infographics are:

1. To communicate a message
2. To present a lot of data or info in a way that is compact and easy to comprehend.
3. To analyze data in order to discover cause and effect relationships.
4. To periodically monitor the rate of certain parameters.

3 Elements are utilized when creating infographics. These are:

1. Visual elements. (Examples are Color coding and graphics)
2. Content elements. (Time frames, statistics, references)
3. Knowledge elements. (facts)

There are 5 types of infographics. These are:

1. Cause and effect infographics
2. Quantitative infographics
3. Chronological infographics
4. Directional infographics
5. Product infographics

Piktochart.com is a free online app that allows you to create infographic. Here are the steps when creating infographics in Piktochart:

1. Create a Piktochart account. You can create one here.

2. Fill up the information on the sign up page or connect your Google+ or Facebook acounts.

3. Select a template for your infographic.

4. When the editor opens, select the blocks and input information as you see fit.

5. While editing, you can use various tools on the left side of the page. For more information, check p. 108 in your book.

6. Save your work by clicking Save on the top right of the page. 

Online Image File Formats 

When creating a website, you should consider your viewers' internet connection, so you should make sure that the image file format that you use is compressed for their convenience. The 3 most common image file formats used on the Web are as follows.

1. Joint Photographics Experts Group (.jpg or .jpeg)- Usually used for real life photographs and its high compression, this format can support 16.7 million colors and it is more portable and compatible in the Internet. However, it does not support transparency and animation.

2. Graphics Interchange Format (.gif) - This format is capable of displaying transparency and animation. Very useful when designing a webpage because it can support animation, which is very appealing to the viewer of your website.

3. Portable Network Graphics (.png)- This file format allows the control over the transparency level or opacity of the images. This format is also usually used in screenshots, because it can be transported on the internet at faster rates. However, it doesn't support animation and it can only display up to 16 million colors.