UNDERSTAND VISUAL COMMUNICATION AND INTERACTIVE

MEDIA (Continuation).

1) Interactive Media and The Needs In The Society

a) What is interactive media?
Interactive media is a method of communication in which the program output depend on the
users input and the users input in turn affect the program outputs. It simply refers to the different
ways in which people process and share information or how they communicate with one another.
Interactive media allows people to connect with others, whether people or an organization by
making them active participants in the media they consume through text, graphic, video and
audio.
The purpose of interactive media is to engage the user and interact with them in a way non-
interactive media does, not traditional forms of media such as televisions and radio, originally
requires no active participation. But with the advent of internet in the 1990s, that began to
change as technology developed, consumers were given different tools through which interactive
media was presented. Access to the internet went from an expensive utility once available only
through dial-up to a wireless tool accessible by the touch of a finger, computers, laptops and
smartphones make interacting with media easy and convenient.
b) Element of inter active media
Interactive media is meant to enhance a user’s experience with the following element:
1. Moving images and graphics
2. Animation
3. Digital text
4. Video
5. Audio
A user can participate by manipulating one or more of the above elements during their
experience, something traditional media does not offer.
c) Example of Interactive media:
1. Social network: social networking websites such as Facebook, Twitter and Instagram
are example of interactive media. These sites use graphics and text to allow users to
share photo and information about themselves, chat and play games.
2. Video games: video games are another type of interactive media. Players use controllers
to respond to visual and sound on the screen that are generated by a computer program.
3. Smartphone: it has several apps which helps to figure out the weather to direct you to
the desire location, choose and respond to news stories in which you are interested and
allow you to shop conveniently.
4. Another form of interactive media is virtual reality (VR): it gives users a completely
immersive experience, allowing them to delve into a world that is almost carbon copy of
reality.
d) The roles of interactive media
1. It makes people more active.
2. The ability to communicate with others (people, companies and organization)
 3. It also allows the free flow and exchange of idea and information.
4. It is a powerful learning tools.
e) The needs for interactive media in our society
1. It has an educational component.
2. It helps people to change the traditional approach to various personal and professional
aspects of life.
3. Video games, video calls for separated families.

2) Process Of Creating An Interactive Media Interface With Examples

The process of creating an interactive media interface involves several stages, including:

1. Defining the purpose and goals: The first step is to define the purpose and goals of the
interface. This involves understanding the audience, the context in which the interface
will be used, and the desired outcomes.
2. Designing the user experience: This involves creating a user-centered design that is easy
to use, intuitive, and meets the needs of the audience. This includes wireframing,
prototyping, and user testing.
3. Creating the visual design: This involves creating a visual design that is aesthetically
pleasing, on-brand, and supports the user experience. This includes selecting color
schemes, typography, and visual elements.
4. Developing the interface: This involves coding the interface using HTML, CSS, and
JavaScript. It includes the development of the interactive elements, such as buttons,
menus, and forms.
5. Testing and refining: This involves testing the interface with real users and making
adjustments based on their feedback. It includes usability testing, accessibility testing,
and bug fixing.
Examples Of Interactive Media Interfaces Include:

1. Websites: Websites are a common example of an interactive media interface. They often
include menus, forms, and other interactive elements that allow users to navigate and
interact with content.
2. Mobile apps: Mobile apps are another example of an interactive media interface. They
often include features such as touch-based navigation, push notifications, and user-
generated content.
3. Video games: Video games are highly interactive media interfaces. They often include
complex game mechanics, player customization, and social features.
4. Interactive kiosks: Interactive kiosks are often used in retail environments to provide
customers with information and services. They often include touch screens, interactive
displays, and other interactive features.
 5. Virtual and augmented reality experiences: Virtual and augmented reality experiences are
highly immersive interactive media interfaces. They allow users to interact with virtual
environments and objects in a highly interactive way.

UNDERSTAND WEBSITE DESIGN AND AUTHORING

3.1 The Basic Concept of Website Design
Website design refers to the process of creating a website's overall appearance, layout, and
functionality. There are several key concepts that are important to understand when designing a
website:

1. Layout: This encompasses the visual arrangement of a website's elements, such as text,
images, and videos, on each page.

2. Navigation: Navigation is the system used to move around a website. Web designers need to
ensure that the navigation is clear and intuitive to promote a positive user experience.

3. Color: Color is a critical element of website design. Designers need to use an appropriate color
scheme that complements the website's overall purpose and branding.

4. Typography: Typography refers to the selection and arrangement of fonts on a website. This
includes font size, style, and color.

5. Accessibility: A website should be designed with accessibility in mind, meaning it should be

easily navigable and usable by individuals with disabilities.

6. Responsive design: Responsive design refers to the ability of a website to adapt to different
screen sizes and devices, such as desktops, laptops, tablets, and smart phones. A responsive
design ensures that a website looks and works well on any device, providing a seamless user
experience.

3.2 The Steps Involved In Site Design and Page Layout

Designing a website involves several steps, including site planning, wireframing, prototyping,
and page layout. Here are the steps involved in site design and page layout:

Site Planning: This step involves defining the website's purpose, target audience, and goals. It
also involves researching the market and analyzing competitors' websites.

Wireframing: This step involves creating a blueprint of the website's layout and structure.
Wireframing typically involves sketching out the website's pages, layout, and navigation.
Prototyping: This step involves creating a more detailed version of the website using a design
software tool such as Adobe Photoshop, Sketch, or Figma. The prototype should include the
website's visual elements, such as the color scheme, typography, and images.

Content Creation: This step involves writing the website's content, including headlines,
paragraphs, and other copy. The content should be tailored to the website's target audience and
goals.

Page Layout: This step involves arranging the website's elements, such as text, images, and
multimedia, on each page. Page layout is an essential part of website design because it affects the
website's usability and user experience.

User Experience (UX) Design: This step involves creating a website that is easy to use,
intuitive, and engaging. UX design typically involves designing the website's navigation, forms,
and other interactive elements.

Testing and Optimization: This step involves testing the website to ensure that it works
properly and is user-friendly. Optimization involves making adjustments to the website's design,
content, and user experience based on feedback and user behavior.

Overall, designing a website involves multiple steps, including site planning, wireframing,
prototyping, content creation, page layout, UX design, and testing and optimization. Each step is
critical to creating a successful website that meets the needs of its target audience.

3.3 How To Develop And Maintain Website Using And Web Authoring Package
There are many web authoring packages available, but some of the most popular ones include
Adobe Dreamweaver, Microsoft Expression Web, and BlueGriffon.
Here are the general steps you can follow:
Plan your website: Before you start creating your website, it's important to plan it out.
Determine the purpose of your website, what content you want to include, how you want it to
look, and how you want it to function.
1. Choose a web authoring package: Select a web authoring package that meets your needs
and budget.
2. Create your website: Start creating your website by opening a new file in your web
authoring package. Use the tools provided by the package to add text, images, videos, and
other content to your website. You can also use the package to create a navigation menu, add
links, and set up forms.
3. Customize your website: Once you have the basic structure of your website in place, you
can customize it to match your preferences. This may involve adjusting the layout, adding
colors and fonts, and tweaking the design to make it more visually appealing.
4. Test your website: Once your website is complete, it's important to test it thoroughly to
make sure it works properly. Test all links and forms, and make sure your website displays
correctly on different browsers and devices.
5. Publish your website: Once you've tested your website and made any necessary changes,
you're ready to publish it. Most web authoring packages allow you to publish your website
directly to a web server, or you can use FTP to upload your files to a web server.
6. Maintain your website: After your website is published, you'll need to maintain it to ensure
it stays up-to-date and functional. This may involve updating content, fixing broken links,
and making changes to the design.

Examples of how to use a web authoring package to develop and maintain a website:
1. Adding text: In a web authoring package like Adobe Dreamweaver, you can easily add
text to your website using the Text tool. You can choose from a variety of fonts and
styles to customize your text, and you can also add headings and subheadings to help
organize your content.
2. Adding images: You can add images to your website using the Image tool in your web
authoring package. You can upload images from your computer, or you can choose from
a library of stock images. Once you've added an image, you can resize it and adjust its
placement on the page.
3. Creating a navigation menu: Most web authoring packages include tools for creating a
navigation menu. In Adobe Dreamweaver, for example, you can use the Menu Bar tool to
create a horizontal or vertical navigation menu. You can customize the appearance of
your menu and add links to different pages on your website.
4. Testing your website: Most web authoring packages include a built-in preview tool that
allows you to test your website before you publish it. You can also use an external testing
tool like Google's Mobile-Friendly Test to make sure your website is optimized for
mobile devices.
5. Updating content: Once your website is published, you'll need to update it regularly to
keep it fresh and relevant. You can use your web authoring package to make changes to
the content, such as adding new blog posts or updating product descriptions.
 BASIC PROCESS OF GRAPHIC DESIGN AND ILLUSTRATION
4.1 Concept of Graphics Design and Illustrations
a) What is Graphic Design?
Graphic design is the art and profession of using visual compositions to solve problem and
communicate ideas through typography, imagery, color, and form. It’s a medium that connect the
living with non-living, the meaningful visual messages with the viewers of the same. It’s a way
to express ideas, concepts and thoughts by way of graphic tools and elements.
b) What Is Illustrations?
Illustrations are a visual way to portray or illustrate a written text. They might help explain an
idea or tell a story or prove decoration. They come in many forms both traditional and digital.
Illustrations are found anywhere, especially in published media like magazines, books, poster,
educational materials and flyers. Illustration takes characteristics from both graphic design and
classic illustration and combines them. While graphic design puts more emphasis on
communication, and illustration leans more into fine art, graphic illustration is what happens
when we marry both together. It’s the best of both worlds.

4.2 Elements in Preparing Graphics

Preparing graphics involves several elements, including the following:
a) Purpose: The purpose of the graphic should be clear and well-defined. The designer
should understand the purpose of the graphic and design it accordingly. This involves
identifying the target audience, the message the graphic should convey, and the context in
which it will be used.
b) Design Elements: Design elements are the building blocks of a graphic. These include
color, typography, images, and other visual elements. The designer should consider the
use of color, the selection of fonts, and the placement of images to ensure that the graphic
is visually appealing and easy to read.
c) Resolution: Resolution is an important consideration in preparing graphics. The designer
should ensure that the graphic has the appropriate resolution for the intended use. This
involves considering the size of the graphic, the medium in which it will be used, and the
resolution of the output device.
d) File Format: The file format is another important consideration in preparing graphics.
The designer should select the appropriate file format based on the intended use of the
graphic. Common file formats for graphics include JPEG, PNG, GIF, and SVG.
e) Branding: The graphic should be consistent with the brand of the organization or
individual for whom it is being designed. This involves considering the use of colors,
fonts, and other design elements that are consistent with the brand.
f) Accessibility: The designer should consider the accessibility of the graphic. This
involves ensuring that the graphic is easy to read and understand for individuals with
visual impairments or other disabilities. The designer should consider using alt text,
descriptive captions, and other techniques to make the graphic more accessible.
Overall, preparing graphics involves several elements, including the purpose of the graphic,
design elements, resolution, file format, branding, and accessibility. Each of these elements is
important in ensuring that the graphic is effective and meets the needs of its intended audience.
 4.2.1 Graphics Compositions, Resolution and Size
Graphics compositions typically consist of various elements such as images, text, and other
visual elements that are combined to create a final design. When creating these compositions, it's
important to consider the resolution and size of the graphics to ensure that they will display
correctly and look their best.
Resolution refers to the number of pixels in an image or display, usually expressed as width x
height. The higher the resolution, the more detailed the image will be. For print designs, a
resolution of 300 pixels per inch (ppi) is generally recommended, while for digital designs a
resolution of 72 ppi is standard. However, with the increasing popularity of high-resolution
displays such as Retina displays, designers may need to create graphics with higher resolutions
to ensure they look sharp on these screens.
Size refers to the physical dimensions of the graphic, such as the width and height in inches or
centimeters. The size of a graphic will depend on the intended use and the medium it will be
displayed on. For print designs, the size will often be determined by the dimensions of the
printed piece, while for digital designs the size may vary depending on the device or platform the
graphic will be displayed on.
When creating graphics compositions, it's important to consider both the resolution and size of
the graphics to ensure that they will look their best and display correctly. In general, it's best to
create graphics with a resolution that is appropriate for the intended use, and to size them
correctly for the medium they will be displayed on.

4.2.2 Use of Symbols and Representative Graphics

Symbols and representative graphics are widely used in various fields, including mathematics,
science, engineering, computer science, art, and design. They help to convey complex ideas,
concepts, and information quickly and efficiently, making them an essential tool in
communication.
In mathematics, symbols are used to represent variables, operations, and relationships between
mathematical objects. For example, the symbol "+" represents addition, while the symbol "-"
represents subtraction. Symbols also enable mathematicians to express equations and formulas
concisely, making it easier to solve problems.
In science, symbols and representative graphics are used to represent elements, compounds, and
reactions. For example, the symbol "H" represents hydrogen, while "O" represents oxygen.
These symbols are used to represent the elements in chemical equations and formulas, making it
easier to understand the reactions that take place.
In engineering, symbols and graphics are used to represent various components of machines,
systems, and processes. For example, the symbol "P" represents pressure, while the symbol "T"
represents temperature. These symbols are used in schematics, diagrams, and blueprints to
convey the design and function of engineering systems.
In computer science, symbols are used to represent programming languages, algorithms, and data
structures. For example, the symbol "{}" represents a set in programming, while the symbol "->"
represents an arrow used in defining functions. These symbols help programmers to write code
more efficiently and to communicate their ideas clearly.
In art and design, symbols and graphics are used to convey meaning and emotion. For example, a
heart symbol is often used to represent love, while a skull symbol is used to represent death.
These symbols and graphics are used in various forms of visual communication, including logos,
posters, and advertising.
In summary, symbols and representative graphics are essential tools in communication, enabling
us to convey complex ideas, concepts, and information quickly and efficiently. They are used in
various fields, including mathematics, science, engineering, computer science, art, and design,
and continue to play a crucial role in human communication.