Course Code: ITE 399 – HUMAN COMPUTER INTERACTION

MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Lesson title: Design Elements Materials:

Lesson Objectives: SAS
References:
At the end of this module, student should be able to: Sketches and Wireframes and
Prototypes! Oh My! Creating Your
1. Identify the importance of Design Elements. Own Magical Wizard Experience ::
2. Understand types and concepts of Design Elements. UXmatters
3. Create sample sketches and wireframes.
https://www.masterclass.com/
articles/elements-of-design-
explained#the-elements-of-design

A. LESSON PREVIEW
Introduction
The elements of design are the fundamental aspects of any visual design, which include
shape, color, space, form, line, value, and texture. Graphic designers use the elements of design to
create an image that can convey a certain mood, draw the eye in a certain direction, or evoke a
number of feelings. While the elements of design form the basics of any image, designers also lean
on the principles of design, which are a set of practices of working with the elements of design that
make a composition look pleasing to the eye.

B.MAIN LESSON
The Elements of Design
There are a variety of graphic design elements to consider when creating any visual work of
art, whether it be for interior design, a logo, an advertisement, or web design. The basic elements of
design are:
1. Color: Color helps establish a mood for your composition. When light waves strike an object
and reflect back to the optic nerve in a human’s eyes, the sensation they perceive is called
color. Artists and designers use color to depict and describe the subject. Color is used by
designers to portray mood, light, depth, and point of view. Designers use the  color wheel and
the tenets of color theory—a set of guidelines for mixing, combining, and manipulating colors—

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

to create color schemes.

2. Line: Line refers to the way that two points in space are connected. Whether they’re horizontal
lines, diagonal lines, or vertical lines, lines can help direct the eye toward a certain point in
your composition. You can also create texture by incorporating different types of lines such as
curved or patterned lines instead of just straight lines.
3. Value: In design, value refers to the lightness or darkness of a color. The values of a color are
often visualized in a gradient, which displays a series of variations on one hue, arranged from
the lightest to the darkest. Artists can use the various values of color to create the illusion of
mass and volume in their work.
4. Space: Making proper use of space can help others view your design as you intended. White
space or negative space is the space between or around the focal point of an image. Positive
space is the space that your subject matter takes up in your composition. The spacing of your
design is important because a layout that’s too crowded can overwhelm the viewer’s eye.

5. Shape: In its most basic form, a shape is a two-dimensional area that is surrounded by an
outline. Graphic artists can use other elements including line, color, value, and shadow to give
a shape the appearance of a three-dimensional shape. There are three types of
shapes: organic shapes which occur naturally in the world, geometric shapes which are
angular and mathematically consistent, and abstract shapes that represent things in nature
but aren’t perfectly representative.
6. Form: Form pertains to the way that a shape or physical configuration occupies space. Instead
of creating form through three-dimensional physical shape, designers create the appearance
of form on a flat surface by using light, shadow, the appearance of an object’s contours,
negative space, and the surrounding objects around the subject matter.
7. Texture: Texture is one of the elements of design that is used to represent how an object
appears or feels. Tactile texture is a physical sense of touch, whether it’s rough, smooth, or
ribbed. Visual texture, on the other hand, refers to the imagined feel of the illustrated texture,
which can create more visual interest and a heightened sensory experience.

Sketches and Wireframes

Sketching and design emerged during the medieval period, so these concepts are nothing
new. However, what I believe many people forget is that the intention of sketching is to separate
design from the process of making. In the context of design, sketching is rapid, freehand drawing that
we do with no intention of its becoming a finished product. In fact, many times, sketching is only a
foundation upon which we can overlay our actual design work. Thus, sketching is a tool that supports
the process of making, not the actual design itself. Unfortunately, it’s all too easy to forget this fact in

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

our quest to get to an end product. We sometimes hold onto our sketches like they are the be-all and
end-all of design.

Sketches should be.

● quick—Making them does not
require long periods of time.
● timely—You can create sketches
on demand.
● inexpensive—Creating them is
cheap, using materials you have
on hand.
● disposable—You don’t care if
sketches get thrown away.
● plentiful—Sketches don’t exist in
isolation of one another.
● clear and use a common
vocabulary—Sketches comprise
simple symbols and lines.
● fluid—They have a fluidity of line
and flow that imply creativity.
● minimally detailed—Sketches are conceptual and suggest structure.
● appropriately refined—They communicate just enough so others can understand your intent.
● suggestive and exploratory rather than confirming—When sketching, you haven’t yet made
any concrete decisions.
● ambiguous—You have yet to work out the details, then overlay your design on the foundation
your sketches provide.

Wireframes
A wireframe, in comparison, is a basic visual guide we use to suggest the structure of a Web
site,  as well as the relationships between its pages. Wireframes come long before we do any visual
design. A wireframe’s purpose is to communicate and explore the concepts that come out of
sketching—that is, those concepts you actually want to pursue further during user interface design.
Wireframing lets us outline a Web site’s basic, overall structure and flow and helps us explore

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

divergent ideas from our sketches. According to Will Evans, wireframes “act as a form of thinking
device for the setting and exploration of a given problem space.”
There isn’t much change from sketch to wireframe—merely a slight refinement and greater
formalism. Our initial drafts of wireframes remain tools or artifacts that we use during the process of
making to aid conversations as design moves forward. Wireframes should be:

● quick—Making them does not require long periods of time, but they do take longer than
sketches.
● inexpensive—Creating them is cheap, using materials and tools you have on hand.
● viable—Wireframes are not as plentiful as sketches, so you should have narrowed your
concepts down to viable options.
● clear and use a common vocabulary—Wireframes comprise simple symbols, lines, and
indicators of interactivity.
● minimally detailed—They are conceptual and suggest structure.
● appropriately refined—They communicate a sense of structure and layout.
● confirmatory—Wireframes present concepts that need validation. When creating wireframes,
you still haven’t made any concrete decisions.
● ambiguous—You have yet to work out the finer points of interaction and content.

Creating Simple Wireframe for website

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

1. Identify the goal of the website.

Before taking pen to paper to mock up a wireframe, you’ll find it helpful to understand the goal
of your website. While it might seem obvious that you want to bring in as much traffic as your server
can handle, think through what you want all those visitors to see and do while you’ve got their
attention. Should they end their visit with a purchase? Should they download an app? Perhaps you’d
like them to view a certain page before dropping off to another website entirely. Whatever your goal
is, make sure your team is aligned around it so that the subsequent steps flow smoothly until you take
your site to production.

2. Understand the user flow.

Wireframes help you identify and evaluate user flows so that everyone in your team
understands how the visitor should interact with each page on your site. During this step, you should
outline each entry point a visitor could use to land on your homepage, then choose a few primary
entry points to create a journey flow.
Take some time to outline your user flow in a text format before sketching a wireframe. Why?
It’s much easier and faster to move steps around when they’re simply written out rather than mocked
up as a wireframe.

3. Determine your website wireframe size.

Your wireframes will need to vary in size depending on what screen size you’re creating it for.
Mobile devices, tablets, and desktop screens will vary in size — not to mention the window on a
desktop can be scaled up or down. To get the most accurate measurements for your wireframe, use
pixel measurements rather than inches or points. Here are the standard sizes for each screen type:

Wireframe size for a mobile screen:

● 1080px wide x 1920px long
Wireframe size for a tablet screen:
● 8” Tablet - 800px wide x 1280px long
● 10” Tablet - 1200px wide x 19200px long
Wireframe size for a desktop screen:
● 768px wide x 1366px long

4. Begin your website wireframe design.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Now it’s time to visualize your user flow in a wireframe. If you’re using physical pen and paper,
we recommend using dotted paper or grid paper to keep things in alignment. This will help you
transform the physical version of your wireframe to a digital copy more easily. If you’re starting on a
digital platform, choose a tool that works best for your wireframe fidelity needs. If you’re not sure
whether to use low, medium, or high fidelity, check out this comprehensive wireframe fidelity guide on
the topic.

5. Determine conversion points.

Once you’ve got your wireframes sketched, it’s time to decide exactly how the user should
move through each step. Just because you’ve outlined the steps the user should take doesn’t mean
they’re intuitive for them to flow through. At this stage, you’ll determine what buttons, hyperlinks,
images, or other elements on the page will guide the reader onto the next step until they reach the
end goal that we discussed in step 1.

6. Remove redundant steps.

Wireframing is an iterative process. It’s rare to do a single round of sketching wireframes that
are production-ready. You might notice some web pages are redundant and can be combined to
create fewer clicks for the user. Wherever an opportunity exists to simplify your wireframe, sketch it
out and solicit feedback — that brings me to our last step…

7. Get feedback on the wireframe.

Your website will go through several rounds of tests and revisions before it goes live, but it’s
still a good idea to get feedback on your wireframes in the beginning stages. Collaborate with your
design and development teams, as well as any internal staff, and customers to get their opinion on
the flow itself. Getting input now prevents the essence of the UX from getting lost after adding
buttons, screens, and page layouts into the mix.

Skill-building Activity
Exercise 1: Create your own sample sketch of a website and its mobile app version.

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Exercise 2: Create your own sample wireframe of a website and its mobile app version.

Check For Understanding

Instruction: Identify what is being described/defined by the ff:.
_________1. It helps establish a mood for your composition
_________2. It refers to the way that two points in space are connected
_________3. It refers to the lightness or darkness of a color

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

_________4. It is the space between or around the focal point of an image?

_________5. It is a shape that occurs naturally in the world.
_________6. These shapes are angular and mathematically consistent.
_________7. These shapes represent things in nature but aren’t perfectly representative.
_________8. It pertains to the way that a shape or physical configuration occupies space.
_________9. It is one of the elements of design, representing how an object appears or feels.
_________10. It refers to the imagined feel of the illustrated texture, which can create more visual
interest and a heightened sensory experience.

Thinking about Learning

a) Mark your place in the work tracker which is simply a visual to help you track how much work
you have accomplished and how much work there is left to do.
Period 1 Period 2 Period 3

1 2 3 4 5 6 7 8 9 1 11 12 13 14 1 16 17 18 19 20 2 22 23 24 25 26
0 5 1

b) Think about your learning by filling up “My Learning Tracker”. Write the learning targets, score,
and learning experience for the session and deliberately plan for the next session.
Date Learning Target/Topic Scores Action Panel

What’s the What module # did you do? What were What contributed to the quality of
date today? What were the learning targets? your scores in your performance today? What will
What activities did you do? the activities? you do next session to maintain
your performance or improve it?

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

Question/s you want to ask the teacher about this module is/are:
________________________________________________________________________________
________________________________________________________________________________

This document is the property of PHINMA EDUCATION

 Course Code: ITE 399 – HUMAN COMPUTER INTERACTION
MODULE #4 STUDENT ACTIVITY SHEET

Name: _____________________________________________________________ Class number: _______

Section: ____________ Schedule: _______________________________________ Date: _______________

This document is the property of PHINMA EDUCATION