IMAGI N G A N D D ES IG N F OR

ONLINE ENV I R O NM EN T
E C HNO L OGY – L E SSON 6
EMPOWERMENT T
BASIC PRINCIPLES OF GRAPHICS AND LAYOUT

1. BALANCE
2.EMPHASIS
3.MOVEMENT
4.PATTERN, REPETITION, AND RHYTHM
5.PROPORTION
6.VARIETY
1. BALANCE  THE VISUAL WEIGHT OF OBJECTS, TEXTURE, COLORS, AND SPACE IS
EVENLY DISTRIBUTED ON THE SCREEN.
2. EMPHASIS - AN AREA IN THE DESIGN THAT MAY APPEAR DIFFERENT IN SIZE, TEXTURE, SHAPE
OR COLOR TO ATTRACT THE VIEWER’S ATTENTION.
3. MOVEMENT - VISUAL ELEMENTS GUIDE THE VIEWER’S EYES AROUND
THE SCREEN.
4. PATTERN, REPETITION, AND RHYTHM
- THESE ARE THE REPEATING VISUAL ELEMENT ON AN IMAGE OR LAYOUT TO CREATE UNITY IN THE LAYOUT
OR IMAGE. RHYTHM IS ACHIEVED WHEN VISUAL ELEMENTS CREATE A SENSE OF ORGANIZED MOVEMENT.
5. PROPORTION
- VISUAL ELEMENTS CREATE A SENSE OF UNITY
WHERE THEY RELATE WELL WITH ONE ANOTHER.
6. VARIETY - THIS USES SEVERAL DESIGN ELEMENTS TO DRAW A VIEWER’S
ATTENTION.
 INFOGRAPHICS
INFORMATION GRAPHICS OR INFOGRAPHICS ARE USED TO
REPRESENT INFORMATION, STATISTICAL DATA, OR
KNOWLEDGE IN A GRAPHICAL MANNER USUALLY DONE IN A
CREATIVE WAY TO ATTRACT THE VIEWER’S ATTENTION.
 ONLINE IMAGE FILE FORMATS

• *WHEN INSERTING TEXT TO A WEB PAGE, YOU CAN SIMPLY COPY A TEXT TO YOUR HTML EDITOR, OR YOU CAN
UPLOAD IT ON A WEBSITE AS A PDF FILE. MOST BROWSERS SUPPORT “ADD-ONS” SO THAT YOU CAN OPEN PDF
FILES WITHOUT LEAVING THE BROWSER.
 PRINCIPLES AND BASIC
TECHNIQUES OF IMAGE
MANIPULATION

Tips to help you edit images for your website:

1. Choose the right file format. Try to make a real-life photograph into GIF to see
the difference between PNG, GIF, and JPEG. Knowing the purpose is the key to
finding out the best file format.

2. Choose the right image size. A camera with 12 megapixels constitutes to a

bigger image size. Monitors have a resolution limit, so even if you have a million
megapixels, it will not display everything.

3. Caption it. Remember to put a caption on images whenever possible. If it is not

related to the web page, then remove it.
 PIKTOCHART
•AN EXAMPLE OF FREE ONLINE APP THAT ALLOWS YOU TO CREATE YOUR
OWN INFOGRAPHIC.
 PHOTOSCAPE
•A FREE IMAGE MANIPULATION TOOL THAT CONTAINS MANY FEATURES
TO HELP YOU IN CREATING IMAGES FOR WEBSITES
 BATCH EDITING
•ONE OF THE MOST USEFUL TOOLS WHEN TRYING TO EASILY
MANIPULATE ALL IMAGES AT THE SAME TIME
 PHOTOBUCKET
•AN IMAGE HOSTING SITE
 BANDWIDTH
•AMOUNT OF DATA USED TO DOWNLOAD YOUR IMAGE BY MULTIPLE USERS.