Running head: WEB DESIGN PRINCIPLES AND THEORY

Web Design Principles and Theory

_________________
Abdulaziz Abdullah Alfayez
University of Toledo
ETPT 7210 Introduction to Multimedia and Web Design
Fall 2014
_______________
Dr. Judy Lambert

Web Design Principles and Theory

2
Introduction

Technologys presence in the field of education has become very important in allowing it
to keep pace with developments in other fields such as engineering, medicine, defense, and
modern sciences. The importance of technology increases over time in education. The field of
education has witnessed a great growth in university research, teaching methods, and curriculum
development the late twentieth century and has become more developed in the beginning of this
century. Education institutions, both public and private, are racing to find and provide effective
methods to assist students to learn. Institutions are seeking to create learning environments that
can increase the opportunities of students' creativity in their study, so they are trying to take the
advantage of integrating technology in the learning process. Technology provides specialists,
web designers or teachers, with many ways to deliver the classs materials effectively. They can
build an effective and efficient websites by supporting learning theories such as Multiple
Intelligences theory (MI), Cognitive Theory of Multimedia Learning, and Cognitive Load theory
as well as incorporating web design principles and elements.
Multiple Intelligences Theory (MI)
Educators should be aware that learners have different ways and abilities to learn things.
In other words, there are individual differences among learners in terms of multiple intelligences.
According to Gardner (2000), all human beings possess at least eight forms of intelligences,
which I call linguistic, logical-mathematical (the two favored in school), musical, spatial, bodilykinesthetically, naturalist, interpersonal, and intrapersonal (p. 32). Thus, educators or web
designers should use the principle of multiple intelligences to meet the learning styles of all
learners. They need to determine the educational goals and objectives in the first place. Then,
they need to choose the most appropriate technology (learning tools) that can help them to

Web Design Principles and Theory

achieve the determined goals. Teachers should apply MI theory in their teaching and learning
activities because it would increase leaners motivation and interest to learn. Mohamad, Salam,
Bakar, and Sui (2014), MI theory should be applied in teaching and learning activities in order
to improve students motivation and interest in classroom (p. 791). Incorporating online tools
with MI theory would promote and improve the learning process, which will result in learners
success in their future and building a strong community.
The Linguistic Intelligence according to Gardner (2011) is the capacity to use
language to express what's on our mind and to understand other people. In other words, it is the
ability to think in words and to use verbal to express and appreciate complex meanings.
Learners, who excel this type of intelligence, are enjoying writing, reading, or telling stories. In
my final website, I incorporated this type of intelligence in several ways. One-way is that in the
home page, I added a welcome video in Arabic language as well as an English statement that
describes what the site is about. Thus, the Arabic and the English speakers can understand what
is the purpose of my site. Another way of incorporating the linguistic intelligence is that I used
clear text navigation as well as subheadings in the top of each page, so the visitors can get
around the site easily without getting lost.
The Logical or Mathematical Intelligence according to Gardner (2011) is the capacity
to understand the underlying principles of some kind of causal system, the way a scientist or a
logician does; or to manipulate numbers, quantities, and operations, the way a mathematician
does. In other words, it is the ability to interpreter abstract, symbolic, or graphic in order to
reach to conclusions. In my final website, I incorporated this type of intelligence in different
ways. The first way is that I added some images to each page, so learners can understand what
the page is about just when they look at these images. For example, in my modules page, I used

Web Design Principles and Theory

the applications' logos in order to represent what I will present. The second way is that in my
contact page, I used Google map tool, so learners can look at the map and know where they can
find me.
The Musical Rhythmic Intelligence according to Gardner (2011) is the capacity to
think in music; to be able to hear patterns, recognize them, and perhaps manipulate them.
Learners with musical intelligence love and appreciate music, rhythm, and composition. They
learn best through lectures and often use rhythm and music as a way to memorize things. Based
on Gallagher (2003), An individual who has these subcapacities collects music, sings and plays
music, remembers melodies, hums, whistles, is rhythmic, has pitch sensitivity, drawn to music,
responds to music, and able to recognize variations in music (p. 2). In my final website, I
incorporated Musical Rhythmic Intelligence through adding some video tutorials that contain
musical background. Learners, who excel Musical Rhythmic Intelligence, will be attracted to
these tutorials, and they will learn quickly.
The Bodily or Kinesthetic Intelligence according to Gardner (2011) is the capacity to
use your whole body or parts of your body (your hands, your fingers, your arms) to solve a
problem, make something, or put on some kind of production. Most learners, who excel this
intelligence, are athletics or performing arts such as dancing or acting. Based on Gallagher
(2003), An individual with this type of intelligence typically is involved in physical movement
and knowledge of the body (p. 3). They learn the best via movement and experimentation. In
my final website, I incorporated Bodily/Kinesthetic intelligence through adding video tutorials
that required some fingers movements such as using smartphone to download Tango application
and chatting with others.

Web Design Principles and Theory

Spatial Intelligence according to Gardner (2011) is the ability to represent the spatial
world internally in your mind -- the way a sailor or airplane pilot navigates the large spatial
world, or the way a chess player or sculptor represents a more circumscribed spatial world.
Learners, who excel spatial intelligence, are very aware of their surroundings environment. They
are good at remembering, drawing, and read maps or images. Thus, they can learn the best via
visual aids. In my final website, I incorporated spatial intelligence through using Prezi and
MindMeister applications. I incorporated Prezi application to design multimedia presentation
that contains videos, images and sound. Using this application allows me to promote the spatial
learner who will learn better through watching this multimedia presentations rather than reading
in a textbook. In addition, I have used the MindMeister application to design a presentation that
enable me to add the subject matter in form of notes, images, videos, and links in a visual space
rather than in text form. As a result, this application enhances and attracts learners, who excel
the spatial intelligence.
The Intrapersonal Intelligence according to Gardner (2011) is having an
understanding of yourself; knowing who you are, what you can do, what you want to do, how
you react to things, which things to avoid, and which things to gravitate toward. Learners, who
excel intrapersonal intelligence, are particularly determined and can work well with personal
deadlines and goals. They are good at knowing their feeling and how may react to certain
situations in future. Also, they are pretty independent and happy to spend time alone, so they
have the time to think critically. In my final website, I incorporated intrapersonal intelligence
through assigning reflective activities and self-paced projects to awaken the learners
intrapersonal intelligence. For example, I created group discussion and asked the participants to
post their own thoughts regardless to assigned topic.

Web Design Principles and Theory

The Interpersonal Intelligence according to Gardner (2011) is the ability to understand

other people. It's an ability we all need, but is especially important for teachers, clinicians,
salespersons, or politicians -- anybody who deals with other people. Learners, who excel
interpersonal intelligence, are able to benefit from others. They enjoy working, learning, helping
and being around other people. They are good at making friends, being member of numerous
clubs, and working in a team. In my final website, I incorporated interpersonal intelligence
through taking the advantage of the technology and web design for assistant and promoting this
type of intelligence. I encouraged the growth of interpersonal intelligences by designing lessons
that include cooperative learning activities. For example, I incorporated communication
applications such as Tango and WhatsApp; trainer and their participants can share useful
information, post comments, and get feedback.
The Naturalist Intelligence according to Gardner (2011) is the ability to discriminate
among living things (plants, animals) and sensitivity to other features of the natural world
(clouds, rock configurations). Learners with naturalist intelligence have appreciation for nature,
and they have the ability to care for nurturing and growing things such as animals. In my final
website, I incorporated naturalist intelligence in two ways. The first way is adding a trainer
picture that contains a green plants in the background. The second way is that I have used
Google Map tool to detect the trainer location. This tool has stellate image feature that enable
the learners to see the trainer location, as it is real [Possible to see the green spaces and trees].
Cognitive Theory of Multimedia Learning
The Cognitive Theory of Multimedia Learning is considered one of the most important
theories in designing websites or lessons activities. Teachers or website designers should take
this theory into consideration when they are creating their websites or lessons activities. This

Web Design Principles and Theory

theory can assist the teachers and website designers to provide coherent materials that can be
cognitively processed easily through choosing the appropriate and relevant types of media.
The Cognitive Theory of Multimedia Learning focuses on three assumptions. The first
one is Dual Channel assumption; learners can receive information through two different
channels. The auditory system will process auditory information such as sounds and narration.
The visual system will process visual information such as images, animation, video, or on-screen
text. In my final website, I have tried to present information to serve both the auditory and visual
channels by adding video tutorials including sound and visual ads. In addition, there is a strong
relationship between these two channels. For example, when cognitive load is low, the learner
may process auditory information and also he or she may be able to imagine this auditory
information and process them by using the visual channel.
The second assumption is Limited Capacity. In this assumption, each learner has an
innate limitation on the amount of information that can be processed by each channel at one
time. Limited Capacity Assumption relates to cognitive load. There are three different cognitive
loads, which are intrinsic load (the complexity of the information that the learner focus his or her
attention to and processing), Extraneous load (a distractors, use mental effort), and Germanic
load (scaffolding, segmenting rehearsing). To avoid the cognitive load in my final website, I
have considered the principles of reducing extraneous processing such as Coherence, Signaling,
and Redundancy principles, especially when I selected or designed the visual ads.
The third assumption is Active Processing. In this assumption, learners learn through
integrating, paying attention, and organizing the information cognitively in order to understand
and construct meaningful knowledge. I have designed my final website as modules, so learners
would engage and interact with their trainer and each other to success in the learning process.

Web Design Principles and Theory

8
Cognitive Load Theory

The Cognitive Load theory proposes that learning occurs best under conditions that are
associated with human cognitive architecture. The structure of human cognitive architecture is
noticeable through the results of experimental research. George Miller's information processing
research showing that short term memory is limited in the number of elements it can contain
simultaneously, Sweller constructs a theory that deals with combinations of elements as the
cognitive structures that make up an individual's knowledge base (Sweller, 1988). This theory
can be best applied in the area of web design, especially to simplify the complex materials. In
order to design simple and effective website, designers should keep cognitive load of learners at
a minimum limit during the learning process by many ways. One way is excluding the
unnecessary elements. As I mentioned previously, I have incorporated the Coherence principles
in my final website. Mayer (2009) describes the Coherence principles as people learn better
when extraneous material is excluded rather than included (p. 89). Another way is breaking
content into smaller segments and allows the learner to control the pace. In my final website, I
have divided the content into small segments called modules based on Segmenting principle;
people learn better when a multimedia message is presented in user segments rather than as a
continuous unit (Mayer, 2009, p. 175).
Web Design Principles and Elements
Some people think that when the site has too many graphics, colors, and videos, it is a
good site, while it is not. These types of sites can take the visitors attention away from what
they are looking for and get them lost. Also, when the site has a many images and videos, it
might decrease the site's effectiveness because the site will take time to load. In addition, there
are many things that may frustrate people especially who have limited intelligences. For

Web Design Principles and Theory

example, Pop-up ads can affect people who have poor Spatial Intelligence. Also, they will be
frustrated if the internal and external links are not working. Therefore, web designers have to
incorporate some of the web design principles and elements to design effective and efficient
websites.
In my final website, I have posted a brief overview about the website in the home page,
including determining the primary audience. I make sure that the purpose and content are
appropriate to the audience. I added different types of content such as text, graphics, video, and
sound. In addition, I tried to make text font, size, spacing, line length, color, and paragraphing
consistent. I used the appropriate width and Length for all my site's pages in order to comfort the
readers. I tried to use sufficient white space to avoid crowding the edges of the browser
windows with important elements of your page content.
Regarding to the information architecture, designing a site is considered a project. I
learned that I have to draw a storyboard for it. For my final website, I chose a hierarchical
structure, where there are set of pages arrayed off a central home page. My site has ten pages
that are linked to the home page.
Regarding to interface design, I tried to design a clear and simple navigation. I used
Horizontal text-based navigation, and consistent layout of header, footer, and local navigation in
each page. The purpose of using consistent layout is that users can adapt quickly and start to
search at what they need.
Regarding to site structure, I focused on flexibility, accessibility, and simplicity. I
carefully named every object in my site because named objects are more accessible to
programmatic and style sheet control across all media types. Choosing object's name carefully
allows will me to maintain and develop the site in the future.

Web Design Principles and Theory

10

Regarding to page structure, I designed a consistent layout. I divided each page into
logical units, which are header, body, and footer. I used subtitles on the top of each page to
direct the users attention to what is the purpose of page. Furthermore, I used readable text size as
well as colors. I chose relevant images and video in order to not distract the users attention.
Regarding to usability, it is one of the methods that can measure effectiveness of the
design. Based on by Lynch and Horton (2011), usability "describes how effective tools and
information sources are in helping us accomplish tasks." In my final website, I take into account
the universal usability and its principles because it will allow me to make my website accessible
and usable for everyone. I tried to design my final website based on users control of the
environment; learners can control the website interface. For example, learners can explore
related information without losing the originating contact through opening links in a new
window.

Web Design Principles and Theory

11
References

Gallagher, B. (2003). Multiple Intelligences and Online Instructional Design. Retrieved from
http://goo.gl/jq8RcT
Gardner, H. (2000). Can Technology Exploit Our Many Ways of Knowing? In He digital
classroom: How technology is changing the way we teach and learn. Cambridge, MA:
Harvard Education Letter.
Gardner, H (2011). The Theory of Multiple Intelligences: As Psychology, As Education, As
Social Sciences. Speech presented at Jose Cela University, Madrid, Spain.
Lynch, P., & Horton, S. (2011). Web Style Guide, 3rd Edition. Retrieved from
http://webstyleguide.com
Mayer (2009) Multimedia Learning: Second Edition. New York: Cambridge University Press
Mohamad, S., Salam, S., Bakar, N., & Sui, L. (2014). Online Multiple Intelligence Teaching
Tools (On-MITT) for enhancing interpersonal teaching activities. AIP Conference
Proceedings, 1605(786).
Sweller, J. (1988). Cognitive load during problem solving: Effects on learning,
Cognitive Science, 12, 257-285