Matthew Koop

ETPT 7210
Dr. Judy Lambert
University of Toledo
December 11th, 2015

Web Design Principles and Theory

For my final project I created a website that is entitles Ed Tech 4 Teachers. I used
Weebly.com as the platform for the design. Of all the different web design utilities that we
sampled this semester, I chose to use Weebly.com because it seemed to be the most user friendly
and it offered a lot of options to be able to embed different forms of multimedia.
Within this web design course, we learned a lot more than just how to design websites.
Much of the focus was on taking into consideration our audience. As educators, our audience
will mostly be students. We learned that students learn in all different ways using a variety of
multiple intelligences. Therefore it is imperative as web designers that we must take this into
account when designing a site. According to Howard Gardners Theory of Multiple
Intelligences, Individuals possess eight or more relatively autonomous intelligences. Individuals
draw on these intelligences, individually and corporately, to create products and solve problems
that are relevant to the societies in which they live. (Gardner, 1983).
Gardner summarizes these Multiple Intelligences in the following table:

Intelligence

Description

Linguistic

An ability to analyze information and create

products involving oral and written language
such as speeches, books, and memos.
An ability to develop equations and proofs,
make calculations, and solve abstract
problems.
An ability to recognize and manipulate largescale and fine-grained spatial images.
An ability to produce, remember, and make
meaning of different patterns of sound.
An ability to identify and distinguish among
different types of plants, animals, and weather
formations that are found in the natural world.
An ability to use ones own body to create
products or solve problems.
An ability to recognize and understand other
peoples moods, desires, motivations, and
intentions
An ability to recognize and understand his or
her own moods, desires, motivations, and
intentions

LogicalMathematical
Spatial
Musical
Naturalist

Bodily-Kinesthetic
Interpersonal

Intrapersonal

Throughout this final web design project I tried to stay cognizant so that my site would be
engaging for a variety of individuals. I have learned through this course that using Multimedia is
the most significant way to appeal to a variety of intelligences.

I focused a lot on appealing to

the spatial intelligence. This was difficult because I also chose to create my own Jing
screencasting website and embed it onto the Week 2 Socrative page. However, the Weebly.com
software limited the size parameters of the video placement on the page. Aside from this, I do
feel that the rest of the site is spatially appealing and well organized. I tried not to crowd the site
pages with two much information. I organized the content into chunks. If you go from one page
to the next, the look, the feel and the layout are very similar. This is intentional. Because I set
this site up to be an online course, I wanted it to be interactive focusing on the Interpersonal
intelligence. I incorporated a blog that is meant to not only be a place for students to submit their

assignments but also where discussions can take place. My intention was to build the site so that
the class would need to collaborate with each other. I also provided assignments that would
require the students to reflect on what they wanted to do. I allowed them to choose their own
topic for each subject. I believe this will force them to delve into their Intrapersonal intelligence.
They students will need to spend time reflecting on what they want to do and teach and what
they have already completed and presented. In my opening blog post, I am asking the students to
introduce themselves to the rest of the class and share a little bit about their background with
each other, again trying to appeal to their intrapersonal intelligence.
I did not do much for those who favor the musical intelligence except that I chose the
only Edmodo video that I could find that had a fun musical rhythm in the background. I am not a
fan of sites that play a song on the home page. It reminds me of the old MySpace.com pages that
were popular before Facebook became prevalent.

I also did not incorporate much to appeal to

the Naturalist intelligence. As far as appealing to the Naturalist intelligence, this was difficult,
especially since the topics were all technical. I did however, embed a video on the Prezi site
where the presentation revolves around nature. The presenter, Miss Mayer, a school teacher uses
nature scenes and videos throughout her Prezi video. I thought that may help students that had a
strong naturalist intelligence to become engaged in the tutorial.
While attempting to appeal to as many intelligences as possible, it was also important for
me to take into consideration the Cognitive Theory of Multimedia Learning. This theory,
originated by Richard Mayer has three main assumptions.

1. There are two separate channels that individuals use to process information.
a. Auditory: hearing
b. Visual: Seeing
2. Each of these two channels has a limited capacity. In other words, if you overload
one with information, the information will be dismissed and not retained or even
processed. This lends itself to Swellers Cognitive Load theory which in essence
states that the brain can only handle so much information at one time. This theory
focuses on how to provide information so that the brain can take information that is in
the working memory and process it so that it is retained in the long term memory.
3. Learning is an ongoing active process that builds upon previous knowledge. The
brain filters, organizes, and interprets information based on those prior experiences
and knowledge base.
Having learned about this theory within this course, I wanted to be sure to provide an
adequate amount of information but I did not want to overload the students of this course with
information. The videos I chose were fairly brief and in laymen terms. I intentionally selected
videos that I thought teachers would understand and identify with. I also did not want to dive too
deep into any one topic. I wanted this course to provide enough information so that the students
would get a good understanding of each type of software but I was also cautious not to
overwhelm the students with too much information to process. The most challenging part of
doing this was with Edmodo. Edmodo has so much to offer. I could have spent an entire course
just teaching how to use Edmodo in the classroom. But that was not my objective. If I saw there
was a strong interest in learning more about Edmodo and how to implement it, I would put

together an entirely new website dedicated to just that. The great thing about most of the
software that I introduce in this course is that it is very intuitive and user friendly. My purpose
was to open the doorways and get these students actively using the software. Once they created
accounts and saw the power these software programs could offer them, then they could take it
upon themselves to learn more on their own or take a follow up class.
In regards to the Cognitive Load theory, I was careful to try to provide a good balance of
visual and auditory information. The best way to accomplish this was with the use of embedded
videos. The biggest challenge I had was with the video that I created. I really struggled with
getting the audio to come through clearly. When I listened to the recording off my computer, it
sounds great. However, when I embedded into Weebly.com and played it, the sound deteriorated
greatly. After several attempts at resolving this, I did not have adequate time to figure it out.
When I get some time with a tech, I plan on learning how to resolve this for future screencasting
videos. Other than the quality of audio on the screencasting video, the rest of the site has a good
balance of audio and visual. Again, this was intentional and by design. I really wanted the
information and the content to be simple enough that people could quickly learn each topic
within a one week time frame, enough so that they could take what they learned and apply it
within their own classroom.
As I planned for this site I spent a lot of time mapping it out instead of just building it on
the fly. The paper that we had to submit at the start of the project helped me to accomplish this.
This forced me to create a vision for the site. It was then that I learned the importance of
planning it all out. In hindsight I didnt incorporate all aspects that I stated in my original plan
but as I got deeper into the project, I didnt feel it was warranted.

I really strived to stick to a few key principles of web site design throughout the site. As
stated in my week 12 response document, my main focus was to keep it simple. Each week I not
only stuck to the same layout, but I also stuck with a continuous 3 step process. This was
difficult, especially with Prezi and Edmodo. I considered adding additional steps and getting a
lot more in detail but did not want to stray from keeping it simple. On each page where we are
learning a new topic, I have a video in the top left along with a brief description to the right.
Below that I state the assignment for the week along with brief instructions and tutorials on how
to accomplish the assignment.
In addition I made sure that the navigation was simple and straight forward. I originally
wanted the navigation to be along the left hand side, so that the users would not have to click on
the more drop down menu on the navigational bar. However, I could not find a template that I
like within Weebly.com that allowed for that. Therefore I settled on the existing navigation
being at the top of the screen. With that said, I still believe it is very easy to find your way. I
considered embedding a search engine option within the site, but at this point I did not feel that
there is enough content for a search widget to be warranted. If I were to grow and build upon
this site, then I will add a Search Engine module at the top of the screen. As far as hierarchy, I
wanted the site to be linear. I intentionally have the navigation set up from left to right. The
Home page is first, followed by the About page and then the subsequent weeks follow in order.
I followed those pages up at the end with the Blog 4 Teachers and the Contact page. I never
created a second layer of hierarchy within this site however I built the site so that may be
possible if I decide to add on down the road. If I want to go into more detail within each topic,
then I would create child pages that would fall underneath each Weeks page. The Parent page
would be Week 1, Week 2, Week 3, etc but I could easily add a child page that would provide

more in depth information. As an example, I can envision a child page under the Week 3
Edmodo page that talks about how to add homework assignments, how to report grades, and how
parents can access the system. For the purposes of this assignment I did not want to get into that
amount of detail.
Another principle that I focused on was the contrast of the site. I chose a darker color as
the background with lighter text because with using the template that I originally chose, the
white space in the background seemed to consume too much space. It was difficult to discern
where the navigational header cut off and the body of the page began. Had I chose a different
template, I may have kept a lighter background. With this template, I felt that the words popped
off the screen better and the site still allows for good contrast. Prior to taking this course I did
not think much about ensuring the contrast and clarity of websites was that big of an issue.
However I learned differently when we researched the worlds worst websites. I evaluated
http://www.preteristarchive.com/ during Week 2 and learned the importance of having good
contrast with the text that and images that are displayed on the site. I am still an amateur
designer but I did strive to make sure that the site was as aesthetically pleasing as possible. This
was easier said than done because I learned that as user friendly as Weebly.com is, it does have
its limitations. For example, spatially it was difficult to organize the Socrative page. Embedding
java using Jing was incredibly difficult and the settings of the page would not allow me to reduce
the amount of space around the video to be able to place the content within a closer proximity.
Another important principle that we learned about in this class that I felt was important to
implement was to break the information into chunks. I noticed that when I read, I do not like to
read long pages. My eyes will read short blocks of information. I tried to reflect this in my
sight. I did not want to create long pages that required a lot of scrolling, I did my best to keep

the information organized into logical chunks so that the students of this course would be able to
easily take the material, process it and hopefully synthesize so that it could be stored into their
long term memory.
The most challenging principle to incorporate was usability. One of the reasons I chose
Weebly.com was also because I know their templates utilize responsive display. This is a nice
feature so that people are able to access the site using any device that can connect to the internet.
However, I did stray away from one of my golden rules. I really wanted to go out on a limb and
stretch my comfort zone. I had never embedded Adobe Flash into a website before so I thought
this would be a good opportunity to try this, especially since the Free version of Jing software
only allows me to publish using Flash. Devices such as an iPad or computers that restrict the use
of Flash will not be able to view my Socrative video. I did test the site on multiple browsers
though and it is compatible with Chrome, Explorer, Safari, and Mozilla. I did add a link for
visitors to download and install Adobe Flash if there computer did not already have it installed. I
am not certain how well my site will work for anyone with disabilities, however another one of
the reasons that I chose to use so many images and videos was so that if a person could not see
well, they could at least hear the audio on the video.
Overall, this project was a mammoth of a task, however as I reflect on what I learned I
am appreciative. Web designers have a difficult job. Not only do web designers need to be good
technically and have a knack for design but they should also be well educated as to how to create
sites that will be engaging to individuals of a wide variety. I have learned that good web
designer needs to plan properly, take into account as many of the Multiple Intelligences as
possible and ensure that there is a good balance of information so that the Cognitive Load is
adequate. On top of this, the designer needs to ensure that the site adheres to a variety of

principles so that in the end people enjoy being there and find the site easy to use and engaging.
Every site needs to have an objective. My objective was to educate teachers on how to use 5
different technologies. I would love for someone to actually go through this course and provide
feedback. Overall I think this is a good start and could be used as-is for teachers that want to
learn new technology. But I also know that if a group of students were to actually go through the
6 week course, they could come back with a lot of suggestions for improvement that could take
this site to the next level.

References
Gardner, H. (1983). Frames of mind: The theory of multiple intelligences. New York: Basic
Books.