LESSON 6 IMAGES, DESIGN, AND MULTIMEDIA FOR THE ONLINE ENVIRONMENT 1) SET YOUR TARGETS Inthisesson, you will be able to: 1. use image manipulation techniques on existing images to change or enhance their current state to communicate a message for a specific purpose; 2. create an original or derivative ICT content to effectively communicate a visual message in an online environment related to specific professional tracks; 3. explore the principles of interactivity and rich content; and 4. evaluate existing websites and online resources based on the principles of layout, graphic, and visual ‘message design INIT) INFORMATION AND COMMUNICATIONS TECHNOLOGY IN A GHANGING WORLD 93anaes g EXPAND YOUR KNOWLEDGE Images and design are important elements to consider in the online environment. Without them, y, online environment will consist only of texts and colors which will make the interface dull and boring, “Through images and design, the internet becomes more useful. Without them, social media platforn, will be boring. Online learning will not be complete without images because illustrations and diagrams a, an effective way of learning. There will also be no online market because images are essential component g online selling. Without images coupled with good design, the sellers will not be able to show visual presentatgy of their products, and the buyers will nt be able to see the product for them to decide whether to buy orn, world—multimedia and ey In the dawn of the new century, a new development arrived in the online media. With multimedia and rich media, the internet has become more appealing. Today, the intemet i filled with multimedia and rich media contents like audios, videos, images, and interactive online materia ‘The images that have been utilized in the past have been improved to make the online experience tich ang enjoyable. itis, therefore, vital for all netizens to be familiar of these and maximize their benefits to improve communication and achieve different goals. Basic Principles of Graphics and Layout Creativity and ingenuity are necessary in considering good graphics and layout. However, what must be considered when one decides for his or her online content’s graphics and layout? Here are some principlesta remember in graphics and layout. 1. Balance refers to how elements are evenly arranged throughout the screen. It means that no part ofthe screen is given too much weight as compared to any other part unless its intentional, Look at how balance is applied in this website. we ret ee Together'we can changethe world 4 EMPOWERMENT TECHNOLOGIE idle 42 nas = petit more weight or focus to some elements on the screen. It is used to focus attention part or an element. Most of the time, emphasis is used tion to the most important part or content. ed to give attention to Look at how the tiger is emphasized in this site, eo betaog a Ua ance tg WHAT YOU SHOULD KNOW ABOUT CAPTIVE nicl NB SUS 3. Proximity and Unity are principles of design where closely related elements (e.g. graphics, text) should be placed together so that they will be perceived as one unit of the design. Alignment gives order to the design, In graphic design, alignment is used to group and organize elements to support balance. It also creates connections between elements to support proximity and unity. 4. Pattern, Repetition, and Rhythm are the repetition of visual element or pattern in an image that supports proximity and unity. Rhythm is when visual elements create a sense of organized movement the relative sizes and scales of the different elements of the design in connection 5. Proportion refers to must be well-sized and thoughtfully to the overall design. Its composition, to be said proportionate, positioned on its right place, & Variety efers to how the design must contain different elements to catch the viewer's attention Variety prevents the design from being monotonous. IT1 INFORMATION AND COMMUNICATIONS TECHNOLOGY IN A CHANGING WORLD 95Look at how the elements previously mentioned are used in the UNESCO website as shown below, Principles of Visual Message Design Visuals speak a thousand words. Though texts can effectively relay their intended message, the use of images, pictures, and other graphics enhance not only the aesthetic effect of the message but also the reception of that message. With this reason, the visual messages can be good alternatives to reach out to people easier and more effectively. A visual message that can be best utilized for the purpose of information dissemination is an infographic. Infographics Information graphic or infographic is a graphical representation of information and data to make the presentation visually appealing that can draw the viewers’ attention. Infographics are used to present complex information and data in a clearer and more understandable way. This can be in the form of graphs, photos, or charts with definitive captions. An example is @ graph that shows the increase in population. Such graph can clearly depict the increase more clearly as compared to when itis presented in textual o numeric form. ‘See how easy it is to identify the message shown by the infographic that follows. “ 100.98 33.55 aaa A graph that shows the . 20.51 increase in Philippine . 63.20 E . soz Population from 19900 i 2015 7 Source: Philippine Statistics Authority Census Year a 96 EMPOWERMENT TECHNOLOGIES (a —Infographics can also be used to present information about certain processes. Presenting processes using graphics can be more visually stimulating, This draws the attention of expected viewers and audiences. See the sample infographic used by the Philippine Commission on Elections to inform voters of the voting process ri ORB IN as PRNERERERS SESSA, ‘An infographic showing the process on how to vote in the Philippines Principles of Visual Message Design Using Infographics ‘To make infographies that are not only informative, but also visually appealing, the principles should be observed. These are: 1. Uniqueness. The infographics must be innovative and should not be a rehashed version of other infographies. Uniqueness makes the infographics striking and unforgettable. One must try new design in preparing an infographic and must not be contented in using plain charts or graphics which will not catch attention, 2. Simplicity. Remember to put only the important information in the infographics. Any information that will not add value to the design should be excluded. Also, one should avoid putting too many graphics ‘A simple infographic does not confuse the readers or viewers. that will only cause distra 3. Creativity and Boldness. The information in the infographic must be obvious and direct to the point. ‘Though direct, the visual must stil catch attention. Appropriate and attractive images and objects can be Used for this purpose. Creativity coupled with boldness can eliminate fear and doubts in the application (of good design ideas. INIT INFORMATION AND COMMUNICATIONS TECHNOLOGY IN A CHANGING WORLO 97inimalist. Ori 1. A minimalist infographic 4. Minimalist Orientation. A minimalist infogr What happens when is much easier to understand. Requiring only the valuable information i also what being minimalst —yQu stop Smoking? orientation requires, Infographics must be CONCISC, 9 jovinsn serionichanges| 25, and quick to read peri Ase 5. Shareabilty. This does not only mean that the ® soon infogropic 1s easy to poss from one person to wim’ oe another because it is in different platforms like eerste, onlin or print Being shareablealsodependson the — fs acusomw characteristic of the infographic to be understood “ose easily, thus, its message can be relayed fast. SE | sine @ Online File Formats for images and Texts oan Frge ferveats that recommenced’ cars un are not the same 25 the images saved on personal ee computers. Images found online are mostly compressed. pe krdr This means that the images have become smaller in Tees size as compared to its counterpart on standalone —) computers or mobile devices. Online image size must be Sac, compressed to conserve online space. This is because images are uploaded every second online which will ‘occupy available online space. Moreover, compressed. files can be loaded faster on the net, and they are easier to upload or download. File Formats Commonly Used Online Support ‘Support| lame le Extension | use " Soccer Transparency | Animation sa dint jpeg or No |o tis ideal for displaying complex Photographic Images and photographs that vo ine Experts Group | Include lots of colors. isnot advisable to be used for images with very few colors 2. Graphics [ef ves ~ [ves This format is used to showcase Interchange ‘animations. Format | 3. Portable | oe Yes No tis ideal for displaying images | Network | with Few colors. Graphies er | ea 98 EMPOWERMENT TECHNOLOGIES ha —_—r ——— principles and Basic Tech ues of Image Manipulation manipulationis the process Le Process of editing and modifying an image using various methods, techniques, peve the des and software to achi result. By manipulatin, rc parent a neers principles of mage Manipulation When manipulating images, one must attend to these aspects 1 Beckround Color Background color must match and complement the image I the contrast between ie ines iground color is not good, background color must be changed to enhance the actual 2 Multiple Images ~ Multiple images are used for emphasis. Combining images is not simply putting multiple images together; however, the images must be related with each other as they must convey @ unified message. 4. Shadow - Shadows are added to add realism to the image. It wil also add aesthetic value to the entire image. ‘4. Proportion ~ In multiple images, pictures must be resized to make the combined images more reall ‘so, they must be proportionate with each other and to the space they occupy. This is considered not only to make them fit, but to help convey message of the image better. tic. lending Colors — The colors used in the image should complement each other. Also, the blending of colors must enrich the message the image conveys, Emphasis on Detail ~ Be sure that the most crucial part ofthe image is given more focus, Every part Is important, but there is a part that has the biggest part in bringing the message across. Basie Techniques in Image Manipulation These are the basic techniques to manipulate an image. Changing colors is done to improve the blending of colors within the 1. Changing Background and Colors ~ blend or match with the image. image. Background colors can also be changed to 2. cropping Image ~ Cropping is cutting an unimportant part of an image. eignal sie ofthe image. can enlarge or shrink the image. fe the image fit on where it will be placed, 1 image to an existing image. This is used to integrate 3. Resizing Image ~ Resizing is changing the This is done to ensure proportion or to mak 4. Inserting Images ~ Inserting images is adding anothe objects that are necessary in the image but are not originally nt difference and even brightness between dlified to improve the color the visibility of objects in the image. 5. Changing Contrast — Contrast is mo his is performed to improve different objects within an image. T! is modified to improve the vi message of & Changing Brightness Brightness | sibility of the entire image. This can be done for diferent reasons such as to emphasize the f the image or to improve the quality of light in the image. umuNICATIONS TECHNOLOGY IN A CHANGING WORLD 99 INET} INFORMATION AND COM‘Combining Text, Graphics, and Images The way text, graphics, and images are combined has a significant effect on the presentato we message to be communicated. The text, gras Infographics, websites, or any online content. It affects th and images must complement one another to effectively communicate the intended message. Doing xy, should not be purely aesthetic, but more to communicate. additional pointers to make visual conten, Using the principles previously discussed, the following canbe more effective and informative. 1. Text Overlaid on an image This way is one of the most used methods in combining text and images. Here, the texts hover above the image. In this method, it must be noted that the images should not be overpowered by the text. The text should be in support of the image. There must be contrast between the texts and the images, so that the text would be easy to read. ‘Thesampleshownisfromthe Philippine Information Agency showing a text hovering on an image. 2. Text Wropped Around Image In this way, the text surrounds or wrapped around the image. The wrapping may follow the contours of the images, or it could be a straight line. This way is commonly used by brochures and newsletters, 3. Text and Image Intersect In this method, the texts are placed within or behind images. The text may also rest on some part of the image. Below are some of the sample illustrations: KAIHAN KRIPPENDORFF 4 DRIVING INNOVATION CG _ @ photos google.com Google Photos Q 2 Click Upload e a | | BUpload @ | sd From Computer. 11 3 UPLOAD FROM @® Google Drive | * The 1568 alle storage in Goose Phos is shared wth other Goole Appa Pocaton connected with your Google secu 102 EMPOWERMENT TECHNOLOGIES | LL )Gin the dialog Box that will appear, browse the folder = —— jon of the image to be uploaded. Selec nag *) tacation of the image tobe uploaded, Select the image | ov» sun ; sed clk en. as = | Once opened 9 progress bar wil appear idcating the 5 uplonding status ofthe image. nibaaog ‘A message will pop saying that the image has been eoogie Looe unloaded. tot Stop 1 item uploaded x | | ‘Add to album Shared album {Once uploaded, goto the photos and click the uploaded nage. Gotashare 0 button to share the image L poses ft ui unr INFORMATION AND COMM! NICATION: NOLOGY IN A CHANGING WORLO 103———— _ permed cotton Be ne fhe Riieiohenaresnaraa ae = Sccocrmenwmccoocmmcrs) 5, AB) ernest cout nso tap ge een nm x arom tri These md coorvanhasna tienes sosed ors exe matin at, ha | =a Spore TH saul cet t,o Webinars. These area lve or eco ses ae eo re ete tt ovorvore. That contr erect eurone podcosts. These are 2 downloads |e einai ‘content narration auto. Theses Image Hosting Image hosting allows user to upload images to 2 webs hosting service, Typically, once images are uploaded they wil web. The process of uploading image to an image hosing site is general Ler who uploads the image can create link to these Images, s0 thatthe ima her website i usually taste that generally provides pe acessible to the public or avalablengg | ily the ze with Google Photos Te ges can be embedded inte Conte tests. These are online vr: ‘comes. These are games that 3 “There are plenty of image hosting websites such as Fckr and Photobucket. mage hosting ses nt Seo aren the amount of boncwdth avaliable to each registred account ort a certain image. The bandwidth qr either by downloading it rect toe yan Bozeman (2020), a contents! reached once many people have accessed the Images on an acount renee oor ne bylocding the agen thet computer or mobile devices. Te use can opto pay theme | _Tsincludes grabbing the attention of Paar cease banawity therefore tis mportant to know the most optimal image fle type | rats lowering engagement bounce 1 sizes to upload. Inceasing search reach. With these ie tose rich media contents to crete be Rich content media improves user Muitimedta: Beyond Text and images Images and texts ae forms of mela, They can be powerful tol to convey messages that engge be 41. Rmakes the users ee the sind ntrests and emotions o mony people As presi ascused they canbe good tools to prove 2, The users find the site ande iceratien Texts and images ar seen on ads, products, of earning material in almost everywhere, lt noosa rere te other had, a more powerful too shoul be covered and utize. Ths the combinant asp The wets approcets thet ercortion othe dasie media sich s text and image and other existing media such 25 vide, aude, RL 4. The users with disabilities co moses apd texts, and many others This mutimedi eaten ara rich Content inthe Onlin Environment and the User Experience FES ‘Multimedia isthe combination of different media in one product. Meda Includes audio, vdeo ee eet graphics, drowing, and images. Ich media's the combination of text, auc, video, wsuals 264 ® | that occurs between the user andthe Irreractive web elements which catch the Users or vewers interests to ineract and engat® WH) the user and the media sa reciprocal Content js 3 moltmedia with Features tht encourage participation. ich medias general and ore | teractivy can bed ceadin the online advertising industry because ofits ability to attract and eatch user” interests US fone in many ways vrata advertisement works Detter than tational media i drawing attention. For instance 2 esd > se advertsement with ist lan images and sounds will mostly be ignored and canceled by a #2 Savertzement with rich media content will most achieve auser'sintrest becuse oft nteactiv cm 104 a ee |sich media content can be one of these forms: a. Videos. These are a record of moving visual images that are videotaped or digitally made. b. Gifs. These are images that can be animated or static. Instogram stories. These are multimedia shared as Instagram story. podcasts. These are a downlo: igi Se eee riot digital audio file on the internet that are usually in series, thus, 7D ¥e new one can be automatically received by subscribers. fe. Content narration audio. These are informative online audi ive online audio files that discuss @ particular topic. An ‘example of this is an audio version of an e-book. see rem {,__ Infographic. Ths isa visual counterpart of a message. Webinars. These are alive or recorded seminar of a particular topic via the internet. h. Audios. These are all forms of essential sounds that are recorded and transmitted online. Music is an example of this. Courseware, These are computer programs and other contents deployed online that are intended for educational purposes. j. Online tests. These are online versions of traditional tests ke Games, These are games that can be played on computers and mobile devices. These can be played alone or with partners. yan Bozeman (2020), a content strategist, lists down the benefits of using rich media in online contents, hisincludes grabbing the attention of new audiences, standing out from completion, increasing engagement tates, Towering engagement bounce rate, bulding better user experience, developing deeper insights, and increasing search reach. With these identified reasons, one who creates online sites must have the intention touse rich media contents to create better user experience. Rich content media improves user experience in these ways: 1, Itmakes the users see the usefulness of the content, ‘The users find the site and contents easy to use. ‘The users appreciate the things they see and do. 3 4, The users with disabilities can access the content. 5, The users trust the Information they get. Multimedia and Interactivity One indicator of user involvement in online multimedia content is interactivity. Interactivity is the dialog that occur between the user and the media that he or she uses or accesses. This communication between the user and he dia isa reciprocal relationship. it means that they both get feedback and act accordingly. interactivity can be done in many ways such as licking, dragging, touching, and folowing among others. UniT! INFORMATION AND COMMUNICATIONS TECHNOLOGYINA CHANGING WORLD 105@ Test your UNDERSTANDING A 106 a Test What You Know Identification. Write the method of combining texts and images that is referred to in each item, Write the answer in the space provided before the item number. a 1. The text hovers above the images and mostly above a complete background. 2 An image is combined with a text where the text is placed within the image, 3. The method of combining texts and images where the texts and images must be aligned. as 4. Texts, images, and shapes are combined ina repeating pattern to show cohesiveness, sa 5. In this way of combining texts and images, the text surrounds or wraps around the image. therwise, write FALSE, ‘TRUE or FALSE: Analyze each statement carefully. Write TRUE if it Is correct; ‘Write the answer in the space provided before each item number. 1. When an online user feels that the content is valuable and that he or she appreciates the things that he or she sees and does, itis indicative that he or she has a good user experience, Texts alone are rich content because they can give ample information that Is vital to the readers. 3. Aprocedure that teaches to cook a Filipino dish can be best presented through a video rather than a simple audio. 4. A plaint text scholarly article is also considered as rich media 5. User interactivity on online content is enriched by utilizing applicable multimedia content. Explore What You Know with Your Peers These are teacher-facilitated activities, The teacher in charge will explain the details of the tasks. 1. Explore Together your strand. 00k for five members and browse five different websites that are related to 2, Together, analyze and check the websites if they follow the basic principles of graphics and layout. b. Deliberate thoroughly on your findings in a roundtable discussion, Write a simple evaluation report of what is discussed and concluded, Solve as One: Recommend solutions to the problems found in Ex; lore Togeth layouted and detailed specications of the recommended solution, Prese ee ee nt it in class, EMPOWERMENT TECHNOLOGIES | 4Apply What You Know Empowerment Technologies in k to 12 Exits i Mulinedaiseveryuere, but its presence is much felt online. Inthe field of work, multimedia is also used for increased presence and productivity. One common example where multimedia is used is in the websites of institutions and organizations. Infographics, moving pictures, stylish texts, audios, and videos are combined to achieve the desired effect. Sooner of later, you will graduate from senior high school and afterward finish college and join the workforce. As a professional in the field, your help might be asked to conceptualize an informative ad for your institution. Your knowledge on images, design, and multimedia can be utilized for this purpose, ‘Assume that you are already working professional. 1, Choose a real institution, organization, or company that you dream of being part of 2. Visit th 3, Plan fora short multimedia video content that can be placed in the Home Page which intends to be an informative welcome message of the website, Collaborate with your classmates who intend to be working in the same organization. website and explore it. Create the multimedia content (e.g., a I-minute video). Present the output in class for viewing and critiquing. Q ASSESS YOUR LEARNING EXPERIENCE elon ae statements that may describe your learning experience with this lesson. © © © Check the emotican that best represents how you fel el thatthe Information given Is sufficient and manageable, 2. think the activities are relevant and useful, Ee ——E collaborative skills and sense 3. My encounters in the group activities improved my of belongingness. THe gad about mynewiearning |B teannow ereate and use multimedia even in my day ie. NaNGINGWoRLO 107 UNITI INFORMATION AND COMMUNICATIONS TECHNOLOGY INA CScan the QR code to access your digital supplemental rag Jor this lesson, Immerse yoursef in tis enriching eperin, Enjoy reading! QR CODE UNIT I LESSON 6 Short Discussi your social and Lier® PERFORM YOUR BEST SHOT Apply the techniques of image manipulation and graphic design to create original or derivative CT conten, {from existing images, text, and graphic elements for use in specific professional tracks. Based on your strand, accomplish the designated task. Sports: Athlete recruitment poster Tech-Voe: Tool labels or visual cooking procedure Academic: Information campaign poster on e-commerce (ABM), disease prevention (STEM), social justice Promotion (HUMSS}, and education for al (GAS) Arts: Logo or crest for a community or school organization ' ‘Assess one’s experience along a range of rch content in the basis of usability ofthe interface. Reflect on your experience in using online rich media contents. 1. What rich contents have | consumed or used through my online exploration? 2. How usable are the interfaces of these contents? 3. How did the experience and learning benefit me as a person? 110 EMPOWERMENT TECHNOLOGIE LA —SIMULATE A PROFESSIONAL CAREER TRACK (A Classroom to Career Experience) Infographic Project Proposal Goal Propose an infographic design for a chosen organizational, institutional, corporate, or governmen.y entity that will be used for a campaign, an advocacy, or an information drive. Role In this project, you will be acting as a private team of seven professionals that are well-versed in creating information materials for campaigns, advocacies, and information drives. As members of the team, you a. knowledgeable of various fields. The group will be composed of: Project Head ~ spearheads the team oversees the whole operation Analyst(s) ~ responsible in looking at the details of the project and specifying what is to be included inthe design Researcher ~ acts as the repository of information looking for data needed in the planning, developing, an fulfilling other stages of the project. Designer{s)- in charge of putting the plan of the analysts into lifeand ensuring the aesthetics ofthe infographics Communication Executive - prepares external communication for the team and maintains the flow of internal communication Audience It is suggested that there will be a three-person panel compose of the course instructor and other tue invited professionals (teachers or practitioners). They will be representing the organization where the propesl is submitted. Situation [ABMS Strand: A business's entity's thrust s on protecting the environment, so it needs an infographic mated for its employees and clientele to be informed. STEM Strand: A city or municipal heath department wil be launching a campaign on keeping avay fe diseases. t needs an infographe forthe clzens of the municipality or ety HUMSS Strand: A civil society or nongovernmental organization is dissenting on a controversial decision the government (e.g., passing of the AntiTerror Bll, mechanisms for disease control, construction o mega dams), s0 it needs an information campaign through infographics to draw attention and supp0t from the people. General Academic Strand: Context can be drawn from ABM, STEM or HUMSS 412 EMPOWERMENT TECHNOLOGIES. De |arts and Design Track: ‘An architecture firm wants to launch an infographi 7 infographic material ina building during earthquake. This is for the pubic | about the proper ways to do when trapped ‘a school of arts will be launching an infogra improve their painting craft. -eraphic intended for aspiring painters that outlines how to sports Track: A college athletic association perseveres to remi launch an infographic for the matter. ind athletes to stay healthy and fit, so it plans to gech-Voe Track: A factory needs an infographic that reminds workers on conduct on work sites product, Performance and Purpose This project/task intends to create 2 proposed infographic. An infographic is a visual message that contains information for its intended audience. In this case, a specific organization, based on what is specified in the situation section, will be the target entity. This could be real or fictitious. The presentation of the ject/task output requires a correspondence (using word processor) that outlines the intent of your team proje ) for the actual presentation, {odo the project. It also intends that there isa visual aid (e.., PowerP. The project intends to support the objective of the entity involved. standards and Criteria for Success allows the students to create an infographic following principles and techniques of This project/tas! presentation as productivity tools. design, and to use appropriately multimedia, images, word processor, and ‘The output will be assessed using the rubric that follows: criteria Points | Evident | slightlyEvident | Not Evident Efceney in Using Word Processor in the Letter of Proposal: es) a ba) Necessary and correct document formatting techniques are applied in the letter that exhibits mastery of using word 5 = — oan processor. Margins, pagination, text formats spaces, and the Ie are used properly. fectiveness ofthe Presentation slides: The presentation (5) 1 2) slides show simplicity, good visuals, clarity, consistency, and 5 Content appropriateness — — = Visual Appeal of the Infographic: The design conforms (n7-20) (02-16) pt] with the principles of graphics and layout such as balance, 20 emphasis, unity, proportion, variety, and proportion. — — — Appropriateness of Textual Content of the Infographics: The (u7-201 51 rary texts are in context, clear, and informative 20 otal] 50 a anciNGworLD = 113 JNITL INFORMATION AND COMMUNICATIONS TECHNOLOGY IN A CH¥