Learning Unit

10
(Screen Design Principles)

Before-Reading
Questions

Reflect on the following questions:

 What is design?
 Why is design important?

Learning Outcomes

At the end of the topic session, the students are expected to:
1. Identify how to apply screen design principles in designing the
mini-project

Materials
Needed
 Bond Paper
 Drawing Materials
 Coloring Materials

Time Frame

5 hours in a week

What is Design?
 Usually, some people will say that design is some kind of a decoration. This may lead
to thoughts that design is not important and be neglected. But in a multimedia project, the
design demonstrates how beautiful the project is. In fact, the design will determine if a
project stands out or not among the many projects.
Look at great designs (such as luxury cars, the iPhone, or the Macbook Air). The
design of these items makes them stand out, memorable, significant, and beautiful for the
user. This is our goal to achieve in creating a multimedia project.

Screen Design
In a multimedia project, the screen design must be given the attention of the
designer because this is what the user sees. You need to establish the general theme for
the project and to make it look and feel good.

Laying Out Elements

In a screen layout, the location of the elements on screen must be determined.
There are two major screens to consider – title screen and content screen. The title screen
is the first screen that the user sees. The content screen can contain different media and
interactions for the project.

The Rule of Thirds

The rule of thirds is a rule of thumb in painting, photography, and design. The rule
imposes that an image should be visualized as divided into nine equal parts. The screen
must have two equally-spaced horizontal lines and two equally-spaced vertical lines that
resemble a grid.
This rule is used to align a subject with the guide lines and the intersection points.
The main purpose of this rule is to discourage placing the subject at the center avoiding it to
appear as if the image can be divided in half.

Title Screen
For title screens, it is suggested to use the divisions to place the major elements
needed on screen such as the logo, title, background image, main menu buttons, and other
navigation buttons. These elements are not constrained to a single layout on screen. It is
best to place these elements around the grid.

Content Screen
For content screens, the grids from the upper and lower right and left corners are
divided into two to emphasize the middle. This gives us narrower/smaller sections on the
screen for menus, sub-menus, buttons, and titles. Also, this is done because we want to
maximize the space in the middle for the actual content.

General Rules
In designing screens for a multimedia project, one must consider the following rules:
 Establish a template for all screens. This maintains the uniformity of the
appearance throughout the application.
 Use a common theme, color scheme, and font. This ensures the consistency of the
contents.
 Place buttons and icons in constant locations. This ensures that the buttons and
icons of the application are presented in an organized manner allowing the user to adapt in
navigating the application easily.

Color Schemes
Color schemes are one essential part of interface design. Color schemes are derived
from a variety of color theories evolving from the color wheel. The color wheel includes
twelve (12) distinct colors.
 Note: These are just theories that may or may not be followed. You can still be creative
in your color choices.
Analogous Colors
Analogous colors are colors directly beside a given color. If you start with orange and
you want its two analogous colors, you select red and yellow. A color scheme that uses
analogous colors provides a harmony and blending of the colors, similar to what might be
found in nature.

Complementary Colors
Complementary colors are also known as contrasting colors. They are directly opposite to
each other on the color wheel. Selecting contrasting colors is useful when you want to make
the colors stand out more vibrantly. For example, if you are composing a picture of lemons,
using a blue background will make the lemons stand out more.

Split Complementary Colors

Split complementary colors can be made up of two or three colors. You select a color,
find its complementary color on the other side of the color wheel, and then use the color or
colors on each side of that complementary color.

Triad Colors
Triad colors are any three colors that are equidistant on the color wheel. When triad
colors are used in a color scheme, they present a tension to the viewer, because all three
colors contrast. See how triad colors orange, green, and violet are used on this screen
design.

Warm Colors
Warm colors are made up of the red hues, such as red, orange, and yellow. They lend a
sense of warmth, comfort, and energy to the color selection. Topics on food, life, health,
environment, exercise, cheer, celebrations are examples that looks appealing with warmer
colors.

Cool Colors
Cool colors come from the blue hues, such as blue, cyan, and green. These colors will
stabilize and cool the color scheme. They will also appear to recede from the viewer, so
they are good to use for page backgrounds.

Monochromatic Contrast
Another interesting way to select colors is to look at monochromatic contrast. This is set
up when you use a single color, then increase or decrease its lightness to produce different
shades of that color.

Everyday Objects
Other times, we can get much inspiration from colors we find in everyday objects. Look
at the palette from simple blueberry croissants and other baked goodies. Observe the
different colors involve in producing the objects.

Nature
Another inspiration is from our nature wherein it has the best color schemes we can be
inspired from. Flowers, plants, trees, and insects have beautiful harmonies we can observe
and adapt in designing the screen.
GENERALIZATION:
o The design determines if a project stands out or not among the many projects.
o The screen design must be given the attention of the designer because this is what the
user sees.
o There are two major screens to consider – title screen and content screen.
o The rule of thirds imposes that an image should be visualized as divided into nine equal
parts.
o There are two major menus in a multimedia application – main menu and submenu.
o Navigation buttons are commonly iconic or text-based across most applications.
o Color schemes are derived from a variety of color theories evolving from the color
wheel.
o Monochromatic contrast is set up using a single color and then increases or decreases
its lightness to produce different shades.
o Colors can be seen anywhere even on everyday objects and in nature.