Running head: Web Design Principles and Theory

Final project for ETPT 7210 Introduction to Multimedia and Web Design
Web Design Principles and Theory
Majed Alharthi
University of Toledo
Dr. Judy Lambert
Fall 2014

Web Design Principles and Theory

How does my website support Multiple Intelligences theory?
Multiple intelligences theory depends on the idea that all children are born with multiple
mental competencies and some of these competencies are strong and some others are weak.
Education has a significant role in order to develop these intelligences through incorporating
them in activities and technologies used during teaching. Gardner identified a total of eight
intelligences, which include: logical mathematical, visual spatial, bodily kinesthetic, verbal
linguistic, musical rhythmic, interpersonal, intrapersonal, and naturalist. On my final website, I
have tried to incorporate a lot of these intelligences through using some multimedia resources
(e.g., text, sounds, videos, music, etc.). For example:
1. Linguistic Intelligence
Learners who excel in linguistic Intelligence prefer literature, creative writing, stories,
word games, and public speaking. Also, they like reading and storytelling. On my website, I
incorporated Linguistic Intelligence through adding a brief text to illustrate the goal of my
website on the home page in addition to adding headings on all pages in order to identify and
clarify the page content. Also, I added on-screen text which explains some steps, and all these
will support Linguistic Intelligence on my website.
2. Logical/Mathematical Intelligence
Logical/Mathematical Intelligence depends on the thinking process, using abstract
symbols, and logical sequence. Therefore, learners who excel in Logical/Mathematical
Intelligence can understand abstract symbols; and manipulate numbers, quantities, and
operations. My website supports this type of intelligence through using numbers of abstract
symbols, which are understood by learners who excel in the Logical Mathematical Intelligence.
For example, on pages of lessons, I used the images that give the final result for each lesson.

Web Design Principles and Theory

Also, each lesson was designed in logical sequence so that each lesson consists of a title, content,
multimedia, and activities.
3. Musical Rhythmic Intelligence
Learners who excel in Musical Rhythmic Intelligence have the capacity to think in music.
Also, they gravitate to the music. Therefore, when they encounter some difficulties or problems,
they prefer to listen to music or singing in order to reach an appropriate resolve. On my website,
I incorporated Musical Rhythmic Intelligence through inserting a lot of videos that contain music
as background.
4. Bodily/Kinesthetic Intelligence
The learners who excel in Bodily/Kinesthetic Intelligence have a capacity to imitate some
skills carried out by other persons. Also, they learn best by doing and simulations the actions of
the teacher. On my website, I inserted four videos tutorials. Each video tutorial explains the
lesson step by step. The learners can watch these video tutorials and simulate them in order to
learn how to apply these steps. At end of each lesson, the students should do some activities and
assignments.
5. Spatial Intelligence
The learners who excel in spatial intelligence have a capacity to represent the spatial
world internally in their mind. Also, they remember the things depending on their locations. On
my website, I used the multimedia application Thinglink on the page of Adobe Photoshop. On
this page, I explained the tools of Photoshop, and added links as hot spots on specific places of
the image. Also, I used the multimedia application Mindmeister on the page of lesson 3, and
added some videos, notices, and links on specific places of the image. In addition, I used the

Web Design Principles and Theory

multimedia application Prezi on the page of lesson 1, and added a text as nonlinear multimedia
presentations. All these will have a significant role in appealing to the spatial intelligence.
6. Naturalist Intelligence
The learners who excel in Naturalist Intelligence have the ability to discriminate among
living things (plants, animals) and sensitivity to other features of the natural world. Also, they
enjoy looking to the natural scenery. On my website, I have tried to support this type of
intelligences through inserting some natural images. For example, on the pages of lesson 1 and

lesson 2, I used the roses images in order to explain how to add the dissolved edge to an image,
and add color to emphasize main content using Adobe Photoshop. Also, on the page of lesson 3,
I used a cat's image in order to explain how to add the spot lighting effect to an image using
Adobe Photoshop. In addition, on the page of the lesson 4, I used the pyramids' image in order to
explain how to add some of filter effects to an image using Adobe Photoshop. All these have a
significant role to appeal to Naturalist Intelligence.
How does my website support both Cognitive Theory of Multimedia Learning and
Cognitive Load Theory?
First: Cognitive Theory of Multimedia Learning
Cognitive Theory of Multimedia assumes that Humans have two separate channels
(auditory, visual). The auditory channel processes information that is presented auditory such as
narration, and background sounds, the visual channel processes information that is visually
presented such as pictures, animation, video, and on-screen text. My website supported this
theory through using some images, videos, and on-screen text. For example, each lesson on my
website has a video includes an image, a sound, and a caption text.

Web Design Principles and Theory

There are twelve principles for cognitive theory of multimedia that shape the design and
organization of multimedia presentations, and I took into my account a lot of these principles
during designing my website. For example,
1. Coherence Principle
The learners learn better when extraneous words, pictures and sounds are excluded rather
than included. On the other hand, the website should include words, music and sound that
emphasize the objectives of the course. On my website, I have tried to use words, music and
sound which are necessary in order to achiev the objectives.
2. Signaling Principle
The learners learn better when cues that highlight the organization of the essential
material are added. On my website, I have tried to apply this principle through using the zooming
tool during designing the video tutorials used on my website.
3. Multimedia Principle
The learners learn better from words and pictures than from words alone. On my website,
I have tried to add words and pictures that help the learners to achieve the objectives of each
lesson.
4. Spatial Contiguity Principle
The learners learn better when corresponding words and pictures are presented near
rather than far from each other on the page or screen. On my website, all corresponding words
and pictures are presented near from each other.
Second: Cognitive Load Theory
Cognitive load theory assumes that the learners have a short-term memory

Web Design Principles and Theory

(Working memory) that is limited in capacity when dealing with new information. Also, they
have a long-term memory that is unlimited, and stores cognitive schemas that may vary in their
degree of complexity and automation. In addition, this theory assumes that Schemas permit us to
treat multiple elements as a single element in working memory regardless of how large or how
complex. On my website, I have tried to eliminate the working memory load associated with
repetitive information by reducing redundancy. Also, I have tried to use auditory and visual
information that are essential to understanding in order to increase working memory capacity. In
addition, I added some activities and assignments at the end of each lesson in order to increase
interactive practices that motivate the learners to create cognitive schemas.
Principles and elements of Web design on my website
There are a lot of elements and principles of web design that I took into account during
designing my website. For example,
1. Information provided on the "home" page.
Information provided on the "home" page is one of the most important principles of web
design, because it helps the users to know why this website was designed, and what they will
find on this website. Therefore, this information saves the users' time through giving them the
brief review about the website. On my website, I took this element into my account through
giving the users brief information about my website, and what they will learn by using the
website. On the home page, I explained that my website will focus on using Adobe Photoshop,
and there will be four lessons for explaining some basic functions of Adobe Photoshop.
2. Types of content
The content plays a significant role in achieving the objectives of the website, so the
designer should choose it carefully. There are a lot of contents that I added to my website. For

Web Design Principles and Theory

example, on all pages of lessons, I tried to add the variety types of contents such as videos,
images, and on-screen texts. All these will help the learners to achieve the objectives of each
lesson.
3. Primary audience
The primary audience is necessary to be determined in order to know the needs, level of
technology that should be available. The primary audience in my website are the students in the
field of educational technology, because they usually need Adobe Photoshop during the design
process.
4. Page design
On the page design, I addressed a lot of the design elements, such as:
A. Consistency
All pages of my websites seem consistent with each other. Each page consists of a
header, navigations, content, and footer. In addition, the colors, fonts, and background
are compatible with each other.
B. White space
The White space is necessary in order to not crowd the edges of the browser and
important elements of content. As a result, I have tried to make sure that there is
enough white space on each page.
C. Page length
I have tried to make sure that the length of all pages is appropriate in order to not
cause inconvenience to the user.

Web Design Principles and Theory

D. Fonts
I have tried to use the clear and consistent fonts with appropriate sizes, because these
will help the users to distinguish between main title and subtitle.
E. Links
On my website, I added some links of external resources, and described these links
well so that the users can know the content under each link. For example, on page of
Adobe Photoshop, I added five links with brief description for each one of them.
5. Usability
Universal Usability is one of the most important criteria in the design of the sites, because
it helps the users to get what they want easily. On my website, I tried to apply universal usability
principles. For example,
A. All images, which are on my website, were used purposefully so that they were part of
the message. Also, I tried not to use a graphic text, because the users cannot control in the
color or style of graphic text, and this does not serve a lot of users. For example, when
the users want to copy a part of text in order to increase its size, they will be not able to
use the graphic texts during the design. As a result, my website does not contain the
graphic texts. Also, my website does not contain animated images, because animated
images are annoying and make it difficult to focus on the primary content of a page.
B. Links
Links help the users to navigate the website easily, so they have an important role in
usability. On my website, I tried to make sure that all links are clear so that the users can
distinguish between the links and content. Also, I tried not to design the links as images,

Web Design Principles and Theory

because images cannot be modified. Therefore, they will not help users, who need large
types or certain color combinations.
C. Video
I tried to add some brief description for each video, because this will help the users to
know what the video will show. Also, I added the caption with the narration, because they
have a significant role in clarity of narration and serve special needs. Also, during design
the video tutorials which were inserted into my website, I tried to use some Camtasia
program features such as Zoom In and Highlight effect Magnify" as an effect on the
curser, because these will help the users who have visually problems.
D. Flexibility in Use
The design should include a wide range of individual preferences and abilities, and this
means that website should be more flexible in order to serve a large range of users. I tried
to make sure that my website is more flexible through adding simple designs and adding
guidance, which helps the users to know where they going.
E. Simple and Intuitive Use
The used design should be easy to be understood regardless of the users
experience. Therefore, my website does not include the complex software that
needs to sufficient knowledge in using a computer, but it focuses on the basic
functions of using of computer.