Design E-Portfolio
“Designing a website on learning styles for students to
enhance their productivity”
39 Pages (excluding cover page and bibliography)
cover page + bibliography = 3 pages
Inquiring and analyzing
Design scenario and need for the solution
Each and every one of us is different and eventually this results in the way we learn or perform a certain task to vary. The term associated
to such a behavior is learning styles. Learning styles can be defined as the way in which an individual apprehends or rather learns a certain
concept. The entire ideology of learning styles directly links to the ability of how a student performs in a classroom.
Over the years, students have prone towards memorizing as a proficient approach of studying and exceling in education. Well it’s saddening
to believe that a majority of students especially from grade nine and above practice this approach which has been proved to be inefficient
by multiple studies conducted. One of the most renowned magazines, The Atlantic suggested that memorization gets in the way of
learning (Orlin) in one of its article. After an interview with the physiatrist, Mrs. Shrivastava proposed the reason behind why students
are prone towards in memorizing is the unfamiliarity of a concept known as learning styles. (Refer Appendix 1 for articles referred and 2 for
interaction with Mrs. Shrivastava)
A classroom may seem like sophisticated place containing a group of students who pretty much learn the same disciplines and receive the
same knowledge, however within that very classroom are individuals that differ in the way of learning and understanding. As being a part
of an IB school I have been familiarized with the concept of learning styles and I have observed with my peers that each one of them each
have their own unique or similar way of learning.
A research paper provided by the factuality of education of stated that “Learning style is a cognitive composite, affective, and
psychological factor which act as an indicator on how individuals interact and respond to learning environment. When a student
shows more thought in regard to learning strategy, this illustrates the existence of personal distinctive learning style”. (Othman)
Consequently, the research paper advocates that learning styles deeply impact the way an individual, especially a student responds to the
environment they are in. Ultimately the outcome of a student learning by their preferred learning style is better adaptation and learning
which unquestionably lead to a huge impact on how they perform in their examination.
Furthermore, I conducted a survey with my target audience, students aged 15 and above from both my school and others. Through my
survey I concluded that there is a huge variation among the preferred ways of students studying. A majority of the responses considered
their learning method to be effective to a certain extent and a lot of them seemed to be unfamiliar with the concept of learning styles. About
60 percent of the students that I interviewed seemed to be familiar with the concept of learning styles and approximately all of the students
pondered that studying with the most efficient way would result in being more productive during examination. Both of the factors mentioned
above inspired me to develop a digital solution which would contribute in enhancing the performance of a student during their examinations.
(Refer Appendix 3 for survey results)
Inadequacies in the current situation after research on existing sources
• Lack of interaction with the viewer: Apart from communicating the ideal meaning about a learning style, sources are often found to
lack a certain communication and interaction with the viewer. According to DSC (District Selection Committee), digital solutions that are
interactive are more committed to achieving the intentions anticipated as they communicate directly with the targeted audience. The Nielsen
Norman research group had conducted a study in different colleges across four different countries across the world and from its studies it
was concluded that students tend to understand and comprehend more if digital solutions manage to keep them engaged while reading.
Concluding the entire point, the language used shall be comprehensive which reasonably fair amount of solutions fail to deliver in the
current situation. Students are an audience that learns better when they are directly communicated and they are engaged within some
activities/ features that help them in understanding a concept better. (Nielsen Norman Group)
• Fewer features: The solutions developed related to learning style succeed in delivering accurate and relevant content however there is
a limiting factor of them only playing the role of a reliable source as they lack a variety in the functionality. My client being students aged
15 and above should have a variety in the features allowing them to comprehend and understand the significance of their learning style.
This has inspired me to develop a solution which would a variety in the features of the solution and allows the user to understand the
concept of learning styles in a better way by offering different functionalities and features for them to visit.
• Unappealing aesthetics: Websites on learning styles are the type of solution that is being targeted in the following case. The websites
designed happen to have a really simple design and many of them have an unpleasant choice of colors or are way far to plain. Students
prefer websites that are aesthetically pleasing as that is the first impression a website creates on them. Appropriate choice of designs, colors,
and layout are all examples of the factors that make a website attractive.
Relation with the global context: Fairness and development
I wanted to explore further about how the learning style can impact the functioning of students while preparing for their examination in an
effective manner. This necessity would require me to learn more about the relation of learning styles and the performance of students in
their examination. Hence, I would develop a digital solution which would act as a finite resource which would eventually result in the
development of a student in terms of his/her performance and the way they learn by understanding the importance of learning styles and its
impact on the way a student learns.
page 2
Research plan
PS – Primary Source | SS – Secondary Source
(note: 1- most priority, 6-least priority)
Research question
Priority
Relevance of information
Source(s)
Target
audience
What is the significance of
one knowing their learning
style and how can it help a
student in being more
productive and efficient
during their examination?
1
PS – Meeting a phycologist and
inquiring about the importance of
knowing an individual’s learning style.
How can tips and strategies on
the ways of retention be
utilized by a student in order
to become more efficient
while studying based upon
their learning style?
2
How does the human brain
system function if a student
learns by their preferred
learning style?
3
How many students know
their learning style?
5
What are the possible digital
solutions
that
can be
developed and what softwares
will be required to create that
solution.
4
It is extremely important for
me to understand the
significance of learning
styles as it would help me in
justifying
the
and
understanding why should a
student know their learning
style.
It is important to prepare a
few strategies or tips a
student can use to make their
environment or way of
working more efficient and
effective based upon their
learning style.
The human brain is a
complex
structure
to
understand therefore it is
essential to become aware of
the impact on the processing
of the brain when
To become aware about what
percentile of students know
their learning style.
It is essential to be aware of
the kind of solution required
for the targeted audience/
client. By figuring out this, I
shall become aware of the
most effective way of
delivering the need of the
solution. After considering
the type of solution I am
going to be developing I
evaluate and select the most
optimum software I can
work upon. Knowing what
software, I shall use is
important as it confronts the
complexity of my technical
skills.
By becoming aware of the
different factors that make
the
solution
selected
aesthetically pleasing I shall
be able to imply that
knowledge into developing
an attractive solution of my
own.
The content shall be well
organized in the solution to
make the accessibility of my
solution better.
By figuring out what factors
cause lack in performance of
students in examination, I
can propose suggestions and
strategies to tackle the
problem.
SS – Exploring through different
websites that explain the way the
content can be delivered and are a good
example themselves.
PS –Conducting a survey among 15-20
students in order to become aware of
what does success mean to students in
examination
Solution
Ergonomics
What are the factors that make
my solution aesthetically
pleasing?
5
How shall the content be
delivered in my solution?
6
What
is
success
examination to students?
4
in
SS – Exploring through the internet to
know more about the significance of
learning styles.
SS – Exploring through the internet to
figure and plan out different tips and
strategies for each of the categories of
the learners.
SS- Reading articles or research papers
related to the functionality of a student’s
brain during examination.
PS- Conducting a survey through
Google forms.
PS – Conducting a survey among 15-20
students in order to select a majority of
the audience would prefer; also
approach a phycologist regarding the
question of what would students prefer
SS – Researching upon different
softwares and their features. Listing out
the tools, languages supported, user
interface, complexity etc. and then
selecting the one suitable for the
development of the solution.
SS – Researching upon the factors that
make my solution look attractive.
page 3
What different learning styles
can
an
individual
be
categorized into?
6
It is important to distinguish
among the different learning
styles that exist and
categorize
them
into
different types based upon
the methods and preferences
of an individual.
SS- Researching on the internet to select
some final options for the audience to
respond to.
PS – Interacting with a phycologist and
understanding the major categorizes an
individual’s learning style can be
depicted from.
SS – Studying different reports,
opinions, information provided upon
websites.
(Refer Appendix 4 for answers to research questions))
Analyzing existing Products
Product 1:
Stanford College Puzzle on learning styles
Website content
The content delivered on the website has
been provided by Stanford University’s
college puzzle page that explains how can
one knowing their learning style help them in
succeeding at college. The language used on
the website does appear to be quite
interactive and but on the other hand, it lacks
images and graphics which impacts the
viewer’s engagement with the webpage.
Information has only been provided in the
form of contextual representation which
often leads to disengagement especially
within students. Disregarding the absence of
visual features the content delivered is
excellent as it has explained the importance
of learning styles and its relation with
productivity in a student’s college has been
well explained.
Aesthetics and user interface
The website has kept a really simple and compact
design that has been well organized but doesn’t seem
to reach the standards of being an attractive website.
Looking at the structure and layout of the website
which seems to be well spaced out and divided
appropriately with the usage of dividers. But it does
happen to have a drawback which is the lack of
content in the left panel of the webpage that has been
left out blank. The color scheme of the website is
appealing as it has a highlight of red with a trombone
accent. The website has used the font ‘Cambria’ in the
colors white and red for the headings and ‘Calibri’
black for its content. Both of these fonts are really
basic and don’t appeal to the viewer; another
observation made is that the font for the content is a
slightly below the average size a website shall have
which leads to strain on the eyes of the viewer.
Link:
https://collegepuzzle.stanford.edu/knowing-your-learning-style-can-helpcollege-success/
Languages used (by using buildwith.com): HTML5, CSS, JavaScript, Conditional
comments, oEmbed and Iframe.
Features/Functionality
Regarding the functionality, this
website seems to be an informative
website that just serves the
function of delivering information
and no interaction is made with the
viewer. However, the website does
have search functionality that
allows an individual to explore
through different web pages based
upon their search. I found this
feature really useful as Stanford
happens to have different web
pages for a variety of different
topics and the user can easily
access them using this search
functionality.
Key takeaway: Having a simple and compact
design can make the digital solution look well
organized and structured. The content provided
should be on point and specific to the topic
page 4
SWOT Analysis of Stanford College Puzzle on learning styles
Strengths
Weaknesses
The website has a really simple and compact design which
contributes in making the website well organized.
The following product has simple aesthetics which in certain ways
can be considered to be tedious for the targeted audience.
The content provided is relevant to the topic and related the
concept of learning to its impact on productivity of students. A
search functionality makes it easier for the client to explore across
the entire website.
Opportunities
There is no variety in the methodology of delivering content. The
usage of images, diagrams or graphics could have contributed in
improving the comprehension of the reader.
Provides a scope for students to understand the importance of
learning style and is correlation with success of a student in their
college life.
Disengagement with the reader as there is lack of interaction with
the reader.
Provides tips and advices for college students based on their
respective learning style, hence making the website more effective
for students.
Threats
The website has focused far too much on delivering information
that it didn’t focus on interaction made with the client.
Product 2:
Studying styles.com
Website content
The information on the website has been published by
Studying Style that is a website that completely focuses
upon learning styles. The homepage has provided an
introduction to learning style on the home page and then
followed by the web pages on the importance, different
categories, a quiz and then advice for parents. The
website has been interactive with the language used as it
has questioned the viewer multiple times in the context
that helps the reader stay focused and engaged. The
website lacks questions asked to the viewer which causes
the person reading to engage with whatever they are
reading. However, the developer has explained the
importance of learning styles and justified it and has also
given a piece of advice for parents to also play a role in
helping their children figure out their learner style and
help them on their path.
Aesthetics
The website has been divided into
5 different parts that are the
header, the navigation bar, the
content, the information about the
website and the footer. The layout
of the website has been very well
organized. The theme of the
website is of a grey background
with the shades of blue, white and
black for the content of the web
pages. Even though the website is
well organized it isn’t very
aesthetically pleasing. This would
be because of the simplicity in the
font, background, and colors used.
Link: https://www.studyingstyle.com/
Languages used (by using buildwith.com): HTML5, CSS and JavaScript
Features/Functionality
The features of the website include
search functionality and a quiz. The
search functionality is useful in terms
of the exploration of the website for the
desired content. The initiative to put a
quiz was productive as it would help
the viewer in understanding the
concept by answering a certain set of
questions but however, the quiz does
seem to lack in the area of interaction
because it is a static quiz. This means
that the viewer can only read the
questions but not select an answer. The
quiz contains a key so for example, if
you choose option ‘a’ then it
corresponds to auditory.
Key takeaway: With the inclusion of a quiz
in a website on learning styles, it would
become more reliable and effective for the
target audience as they can utilize this quiz
to identify their learning style.
page 5
SWOT Analysis of Studying Styles.com
Strengths
Weaknesses
Studying Style is an excellent source for understanding the concept
of personal learning styles as it provides relevant and sufficient
information to the topic.
The website is weak in terms of its space utilization because the
content is placed in the center. A way of using all of that extra
space available the creator could have placed images or graphics
to cover up.
The color scheme of the website is certainly pleasant and
coordinate well with one another and have been uniformly
maintained across the entire website
Opportunities
Threats
The following website provides studying tips and strategies for the
learning styles along with their characteristics that can certainly
aid them in being more productive.
The website has extensively focused on engrossing information
that it failed to interact with the client.
Another perspective the website provides are studying tips for
parents in order to help their child practice and follow their
learning style
Product 3:
Visme.com
Website content
The information has been provided on this source
by the content manager of the company Visme,
Nayomi Chibana that describes the learning styles
categorized into 8 different types. The use of
infographics and pictures that create a better visual
representation of the website and make the content
stand out and makes the website a bit more
descriptive and expressive. The website has given
a good amount of content on each of the eight types
of learners, but the initiative taken to write down
the ways in which to enhance retention is what
made the content comparatively more useful to the
other sources. However, the website did happen to
fall short in terms of the communication made
which was informative not interactive that would
lead to the disengagement of the viewer in certain
ways.
Aesthetics
The website has a centralized layout with all of the
content belonging in the center of the website which
leaves certain gaps in the left and right portions of the
website. The element of attraction for me was the
implication of a big header that has a simple clipart in
the back ground and a quote/question in the center of
the header. Moving on towards the background of the
websites that has been selected as white makes the
websites look blank and far too plain and implication
of a color in the background could have made the
websites comparatively attractive. The font used
‘Helvetia’ is also quite simple but it coordinates well
with the overall layout and content of the website. The
font color has been used in a structuralized manner
which is of blue for headings and black for the
content.
Link: https://visme.co/blog/8-learning-styles/
Languages used (by using buildwith.com): HTML5, CSS, JavaScript, Conditional comments and
oEmbed
Features/Functionality
Looking into the features
of the website, there is
navigation bar that has
been fixed to its place
even while scrolling.
There is the presence of
a secondary navigation
bar within the header
that has a hover effect of
a line made on the top of
the option.
Key takeaway:
The application of images can
make the website look more
attractive and appealing.
page 6
SWOT Analysis of Visme website on learning styles
Strengths
Weaknesses
The website Visme is undoubtedly the most appealing website on
learning styles out of all the other which have been analyzed due
to its attractive interface. The colors applied in the website are
certainly impressive and coordinate remarkably well.
The margins from the left and right are set to dimensions a bit more
than required as it can be found there is a lot of space on the left
and right-hand side that is not being utilized.
Opportunities
Threats
Provides a variety in the methods of delivering information as
there have been pointers made and infographics to support the
topic mentioned.
The information provided is far too less as it has just covered up
the information in brief. The website also lacks in interaction with
its audience as there is not a single feature the client can use to
understand the concept of learning styles rather than reading.
Product 4:
Khan academy website
Website content
‘Khan Academy’ is one of the most
successful educational websites and is widely
used by students across the planet. The
content provided by Khan academy provides
information on a variety of different topics
varying from subject to subject. The
following product has utilized a variety of
different methods of delivering information.
The methods include videos, articles,
practices and tests. The provision of different
ways of communicating information
designates that students prefer to have a
source that provides a variety of resources.
Aesthetics and user interface
The aesthetics of khan academy are certainly
beautiful as it has used bright colors and used the
same color palette of blue. Since this website is
an educational website for students the usage of
bright colors indicates that it is preferable by
students. The website has used a nice sans font
throughout the website that coordinates with the
background colors. The user interface of the
website is well planned and the content is well
organized. Appropriate margins have been
implicated in the website. The website is super
user friendly due to fact that there are no bugs or
errors during the exploration.
Link: https://www.khanacademy.org/
Languages used (by using buildwith.com): HTML5, CSS, JavaScript, jQuery
Features/Functionality
The website has a lot of features that
include videos, a search bar, an
option to share along with practice
tests and worksheets. The website
has a search bar that has a dropdown
for the list of courses, a search bar,
the logo of the website in the center
of the navigation bar, and the option
to donate to the foundation, login
and sign up. The website also has
intrapage navigation through which
the accessibility of the website and
ease of navigation increases.
Key takeaway: Have a slogan at the start of
your website. Header should be of a large
size. Colors used should be appealing. Font
for the content should be basic.
page 7
SWOT Analysis of Khan academy
Strengths
Weaknesses
Khan academy undoubtedly is an exceptionally well-developed
website, due its soothing aesthetics and well-structured layout. The
content delivered on this website is excellent as it has a variety of
different topics that have been portrayed through both text and
video.
The website has used the same color pallet throughout the entire
website which could tend to result in the website become boring
for the targeted audience.
Opportunities
Threats
A media source helps a student understand better because of visual
representation and the opportunity to showcase different diagrams,
relations, patterns linked a specific topic.
The website is overloaded with information which eventually
results in the website often lagging and encountering bugs.
Design Brief
I am developing a digital solution initially intended towards students aged 15 and above to aid them to understand the concept of learning
styles. For my research plan initially, it was important to clarify the solution that I will be developing for students which is why I explored
through the internet finding out the possible solutions that can be designed. By navigating the internet, I came across a lot of blogs, articles
and informative websites that suggested a few solutions that could be developed in the following case. I shortlisted the possible solutions
and settled upon three different solutions that were a website, an animation and an application.
In a classroom information enters a student’s mind in three different ways that are the sight, the hearing, and the touch and each and every
individual prefers one of the above or even more than one. Relating the concept of learning styles to students during an examination, it is
commonly presumed that hours and hours of consistent reading from textbooks or notes can help a student get smarter and perform better
during an examination. This system is considered to be inefficient because of the fact that for understanding a concept a student will only
be able to memorize whatever is put across their eyes and not actually learn anything.
Each and every one of is a unique learner as we all have different learning methods that we use and rely upon. Students are the targeted
audience who have a diversity in the learning methods. These the learning methods can be defined as the learning styles. A learning style
is an individual’s approach towards learning and understanding based upon one’s strengths, weaknesses, and preferences. Knowing what
type of a learner is extremely crucial for a student and plays a significant role in their lives. When the concept of processing information
arises, the brain is the most important part of an individual’s body. By exploring one’s learning style, they shall become aware of how their
brain works the best. If a person figures out the way in which their brain works the best they can become able to communicate better among
one another. The learning style can be directly linked with the efficiency of a student in their studies in a system. Knowing an individual’s
learning style helps them in discovering the way in which their brain learns the best. Knowing the way in which the brain works the best a
student can learn or rather understand a concept better. (Kirst)
It was important to know the type of solution that my client would prefer to use which is why I developed a survey for students of my grade
inquiring about their opinion among digital solutions ranging from a website to animation to an application. A majority of the students
suggested that I shall develop a website as it is the easiest to operate among all of the solutions that I had suggested.
Referring to an article published in the American magazine ‘The Atlantic’(Orlin), it is stated that memorizing gets in the way of learning.
Students memorize the content instead of actually understanding the concept and learning behind the topic that they are studying. This
strategy could be effective on a short-term basis and even be in favor of a few but on a long-term scale, it wouldn’t be effective. The method
of memorization is a technique based on the repetition of resources for the quick recalling of the content during an examination. The reason
behind why students tend to move to the method of memorizing is that they can’t figure the most effective way to learn and understand.
My primary resource for this scenario was the phycologist our school whom I interviewed in order to apprehend the significance of learning
styles for students and decide the categories I can divide the learning styles. The expert shared her opinion that she believes that students
of the current generation have variety in the resources for studying and she believes that it is important for students to know how do each
one of these resources differ. These resources can be utilized and preferred according to the respective learning style of students. She shared
an example of a visual learner as they would tend to cover up their rooms with short notes to understand and revise through different
concepts. If the students don’t know their learning style, they would often not be able to recognize the most efficient way of comprehending
information.
Proceeding into the interview of my primary resource, a phycologist I questioned what categories shall I classify the learning styles into.
As a response, the expert suggested that I shall consider the VAK categorization of the learning styles. VAK stands for visual, auditory and
kinesthetic. The primary resource justified her suggestion as she explained that VAK categorization is the most reliable because in these
three different classifications each one of them have a broader perspective that eventually allows an individual to understand in a better
page 8
way. It’s important to have a broader perspective in this scenario as it would ultimately give a student a more flexible category to focus
upon.
Other classifications ranged from 7-10 categories that wouldn’t be considered as reliable as the VAK because they would tend to have the
student to only focus upon a certain way of retention. For example, if I am an auditory learner according to the VAK I could understand
better through a resource having the music of my choices even interacting with one another. On the other hand, if I am a social learner
through the 8 learning styles categorization I would only focus by learning from my friends hence limiting me to my resources.
After analyzing existing products developed on learning styles I have understood factors that I shall implement and avoid in the solution
that I will be creating. The language used shall be interactive by the usage of rhetorical questions asked during the website and should
always address the reader directly. An attractive website is extremely important as it’s the first impression created on the viewer when they
open a website. The header which is the first part of the website shall be attractive which can be done by the usage of a background image
or even a standard colored background as matter of fact can help the header look attractive. The fonts used for the headings shall be bold,
strong and appealing while on the other hand the font used in the content can be simple. However appropriate font sizes shall be used to
reduce the strain on the eyes of the client while reading.
The user interface is another significant aspect of the website as the website should be easy to interact with and the client shall not face any
sort of problems in navigating across the website. A feature that I observed that really makes the website easy to use a navigation bar as it
allows the user to access all of the webpages from a single place. A navigation bar would let students become familiar with what all
webpages does the website have.
Pictures and other visual representations play another important role in the website to look attractive which is why I chose to develop an
animation to be embedded upon my website. The animation will communicate an essential part of learning styles which are the ‘ways of
retention’ for each learning style. The ways of retention are important as they help a student in knowing certain practices and strategies
through which they can enhance in their respective method of learning.
After the overall analysis of all of these existing products I understood the importance of need of an aesthetically pleasing website. The
products that I have analyzed happen to share a quite simple display and layout. This refers to the implications of a simpler color pallet and
the selection of an unpleasing font. After researching I found out that fonts in the heading shall be attractive and shall stand out in order to
please the audience.
A feature that I found important and could be implemented into my website is a quiz which would play an important role in making my
website more interactive and improve its functionality as well. The quiz that I found in the website Studying Styles.com was not interactive
as it has a static functionality. The way that that quiz functioned was by the user had to tally the options and then calculate the scores and
the number that resembles to the description given would be your learning style. If found the idea of a quiz really useful but having it to be
static would not be productive. I came up with the idea of making the quiz interactive by having multiple-choice questions that would be
correlated to the different results, that are visual, auditory and kinesthetic and in the end the viewer would have its result displayed in front
of them.
For my website, I am going to be using the software Adobe Dreamweaver CC 2018 due its user-friendly interface and also because it
supports HTML, CSS and JavaScript that are the languages that I am going to be using for the development of my website. Dream weaver
has a Split functionality which would allow me to see the changes that are being made to the website simultaneously while I am performing
the coding. For my animation, I am going to be using the software Adobe Animate CC 2018 due to my experience on its pre-existing
version, Adobe Flash CS6. To a certain extent Adobe Photoshop will play a role in the creation of my website in terms of editing the
graphics and images. After an extensive research, I settled on the decision of making the quiz online and then embedding it into my website.
Over all I decided that I will be having a sum total of nine webpages in my website that are,
i.
ii.
iii.
iv.
v.
vi.
vii.
viii.
ix.
Homepage (The homepage will be the first webpage developed that would have a basic representation about what my website
is. Through the homepage the client can access the other webpages)
What is a learning style? (The webpage on ‘what is a learning style’ would explain the exact definition of a learning style)
Why as a student should you know it? (The following webpage would interact with the audience as it would convey the
importance of them knowing their learner style and how can it benefit them)
Visual learner (The webpage on visual learner would define an auditory learner, their characteristics/features etc. the quiz and
animation)
Auditory learner (The webpage on auditory learner would define an auditory learner, their characteristics/features etc. the
quiz and the animation)
Kinesthetic learner (The webpage on kinesthetic learner would define a kinesthetic learner, their characteristics/features etc.
The quiz and the animation)
A webpage with the quiz for the students to take in order to know the learner that they are.
An animation webpage based upon the ways of retention of all 3 learning styles in a sequence.
A feedback form on which there would be a few questions through which I can get an evaluation and the experience of my
client.
page 9
Developing ideas
Design specifications
Sr no.
1.
2.
3.
Specification
Aesthetics of
the website
User interface
of the website
Organization
of content
Description
The aesthetics of the website refers
to the overall appeal of the website.
This includes the choice of color, the
coordination of different elements
within the website and selection of
font. The logo created for the
website and favicon should
synchronize with the theme of the
website.
The user interface can be
represented as the user interface of
the website. The user friendliness of
the website will be determined by
the ease of use accessibility
Organization of content is an
important aspect for a website as it
plays a significant role in creating
the impression on the viewer. The
elements structure, size, and
margins.
1-2
3-4
5-6
7-8
The website looks poor and
unappealing
The website looks moderately
attractive
The website is impressive and looks
appealing
The website is beautiful and
attractive
There is a choice of color that
don’t coordinate with each
other. The colors of the
header and footer don’t
coordinate with the theme of
the website. The font selected
is the standard HTML font.
The website lacks a logo and
a favicon.
The choice of colors in the
website
are
moderately
attractive. The colors of the
header and footer coordinate
moderately with each other.
The fonts selected don’t
coordinate with each other in
the website. The website has a
very basic logo and lacks a
favicon
The choice of colors in the
website are attractive. The
header and footer coordinate
with the website. The font
selected are appealing. The
website has a moderately
designed logo and favicon.
The choice of colors is
excellent as the website
utilizes background images.
The header and footer
coordinate with the theme of
the website and make the
website look appealing. The
fonts selected are certainly
appealing. The website has a
well-developed logo and
favicon.
The website is user friendly to the
slightest level
The website is user friendly to a
feasible level
The website is user friendly and
easy to use
The user interface of the website is
remarkable
The
website
lacks
a
navigation
bar
that
eventually makes it harder
for the client to explore
across the website as only
functional buttons won’t be
able to let the client become
familiar with the webpages in
the website.
Exploration across the website
is satisfactory as the navigation
bar has included only 4 links.
The website has functional
buttons that take the client to
the intended webpage.
Exploration
across
the
website is comfortable with
the appropriately aligned and
functional navigation bar that
has 6 navigation links. The
buttons
function
appropriately and takes the
client to the intended
webpage.
Exploration
across
the
website is at an ease with the
help of a well-organized and
functional navigation bar that
has 7 navigation links. The
buttons function properly and
takes the client intended
webpage.
Scrolling the
website is a smooth.
The layout of the website is poor
The layout of the website is
satisfactory
The layout of the website is well
organized
The layout of the website is
excellently organized
The content in the website is
organized appropriately. The
header, navigation bar or footer
could overlap and are in
appropriately spaced out. The
margins in the website differ.
The content in the website is
well
organized
and
structures.
The
header,
navigation bar, content and
footer don’t overlap and are
appropriately spaced out.
The margins of the website
differ.
The content in the website is
well
organized
and
structured. The header,
navigation bar, content and
footer don’t overlap and are
appropriately spaced out.
The margins are same from
the left and right-hand side
with the content in the center.
The content in the website is
poorly organized and the
website have over-sized
elements that are not
appropriately spaced out. The
margins are poorly planned.
page 10
4.
5.
6.
7.
The content provided in the website
is poor
The content provided in the website
is satisfactory
The content provided in the website
is appropriate to the topic
The content provided in the website
is relevant to the topic
The content provided on the
website is poor as there is
minimum
information
provided on learning styles
and there is no variety in the
content. The language used
in the website is poor.
The content provided on the
website is satisfactory on the
topic of learning styles. The
website
has
provided
information on tips and
strategies
through
an
animation. The language used
is satisfactory and there is no
interaction made with the
client with the language.
The website has delivered
appropriate information on
learning styles across the
website. Tips and strategies
regarding ways of retention
has been portrayed to a
sufficient
level.
The
language used is good as
there is interaction made with
the client to a certain extent
in the content.
The website has provided
relevant content and justified
the importance of learning
styles across the website.
Tips and strategies regarding
ways of retention are
portrayed
using
the
animation. The language
used is excellent as there is
maximum interaction made
with client by engaging them
with the content.
To identify a student’s learning
style, I will design a quiz online and
then embed it into my website.
The website lacks a quiz
The website has a really basic quiz
The website has a well-designed
dynamic quiz
The website has an excellently
designed dynamic quiz
The website has a quiz of 8
questions
designed
on
‘Interact quiz maker’ that has
buttons under each question
to move onto the next
question.
The website has a quiz of 10
questions
designed
on
‘Interact quiz maker’ that
progresses as the client
selects an answer and there
are no buttons for moving
forward.
For delivering information on tips
and strategies for each learning style
there will be an animation developed
on Adobe Animate CC 2018.
The website lacks an animation
The website has a decent
animation
The website has a decent
animation
The languages initially planned to
use are HTML, CSS, JavaScript,
Action script and iframe. The quiz
will be designed on ‘Interact quiz
maker’ and the form will be
designed on Google forms and then
embedded into my website.
The website has used a really basic
language
Relevance
of
content, language
used and variety of
sources
The content provided on the website
should be relevant to the topic and
focus on conveying the importance
of learning styles. The information
about tips and strategies on ways of
retention shall be in the form of an
animation. The language used shall
engage the reader.
Quiz
Animation on the
ways of retention
Languages used
-
The website has used a single
language for its development
which is HTML.
The
website
has
an
unresponsive quiz of 5
questions and the target
audience would have to find
out there learning style by
calculating their scores.
The website has a basic animation
The website has an animation
that has no motion tween in it
and has just plain text with
scenes changing.
The website has an animation
that that utilizes motion
tween.
The website has shown moderate
complexity with the usage of
languages
The website has been well
developed with the variety in the
languages
The website has been excellently
developed with the usage of
complex languages
The website has used 2
languages in its development
that are HTML and CSS.
Action script has been used at
the simplest level.
The website has used 4
languages in its creation that
are HTML and CSS for
developing,
and
for
embedding the quiz and
feedback form iframe is used.
Action script has been well
utilized for the development
of the animation.
The website has used 5
languages in its creation that
are HTML and CSS for
developing,
and
for
embedding the quiz and
feedback form iframe is used.
Action script has been
excellently utilized for the
development
of
the
animation. Java script is used
for the purpose of making the
navigation bar shrink
The website has an
animation that utilizes
motion tween and alpha
color effect for fading.
page 11
Design ideas
Design 1: Abstract themed website
Design 2: Flower themed website
1
9
2
9
2
1
3
3
4
4
5
6
5
6
7
7
8
8
1.
2.
3.
4.
5.
6.
7.
8.
9.
Navigation bar
Header
Content
Learning styles
section
Quiz description
Animation description
Footer
Quiz webpage:
Auditory learners’
webpage
1.
2.
3.
4.
5.
6.
7.
8.
9.
Navigation bar
Header
Content
Learning styles
section
Quiz description
Animation description
Footer
Quiz webpage:
Auditory learners’
webpage
page 12
Design 4: Elegant styled website
Design 3: Sunset themed website
1
1
2
2
9
10
3
3
4
4
5
5
6
6
7
8
7
9
8
1.
2.
3.
4.
5.
6.
7.
8.
9.
Navigation bar
Header
Content part 1
Content part 2
Learning styles
section
Quiz and Animation
description
Footer
Quiz webpage:
Auditory learners’
webpage
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
Navigation bar
Header
Content part 1
Content part 2
Learning styles
section
Quiz section
Animation section
Footer
Quiz webpage:
Auditory learners’
webpage
page 13
Navigation bar: The navigation bar is the first element of the website that appears. It
uses the font Bodoni 72 in the color white (the current webpage and the name of the
website in purple and the hover effect of the color dark purple) that suits the dark grey
1
8
9
background and the logo of the website. The learning styles link will have a dropdown
linking to the 3 learning styles webpages, the concept and the importance of learning
2
styles webpages. The logo of the website is a white circle with a bold ‘L’ in the center
of it and next to it is the name of the website.
2. Header: The website has a large sized header that contains the navigation above it. The
background image is of purple marble that certainly is attractive, coordinates with the
dark navigation bar and would create a good impression on the viewer. The header
reads out ‘Know the learner’ in the font Bodoni 72 followed by the text ‘you are’ in the
font Abril Fat face in a larger font size.
3. Content: The client would proceed further into the website by using section scrolling
which would direct the user into the following section. The same font pattern is applied
across the entire website for the headings. On the left-hand side is the information on
4
learning styles and its importance on the right-hand side both in a smaller font of
Bodoni 72.
4. Learning styles: This s a special part of the content has a beautiful image of 3 sticky
notes reading out the 3 different learning styles and has buttons underneath it. The
Logo of the website
buttons have shadows underneath it that that appeal to the eye and has a hover effect
of a darker shade of the color peach and when they are clicked the user is directed to
5
an individual webpage for each learning style.
5. Quiz description: There is a brief description about the quiz that has a background
image of question marks. The viewer can access it by clicking a button similar to one
for the learning styles section.
6. Animation description: The user simply scrolls after the quiz description and
proceeds further to the description of the animation and then the user can click the
clapperboard and be directed to the animation webpage.
7. Footer: The footer of the website is after the animation description and can be viewed
by using a simple scrolling method. It has the enlarged version of the logo and has the
7
copyright of the website and a quote underneath it.
8. Quiz webpage: In the quiz webpage of the first design, there will be the navigation bar
on the top with the header underneath it. Then using section scrolling the viewer will
be taken to the quiz section where there would be simple multiple-choice
questions under. There will be 10 questions in total which would be divided in the
format of 2 questions per row. The scrolling in the quiz section will be done using
parallax effect as the background has to be kept constant throughout the scrolling in
the
The first design is well made. There is a good scope for using and adding information in the design. the quiz sections. There will be a sticky submit button located in
bottom
right
section
of
the
quiz.
After
that
will
be
the
footer
It also uses many images and has a good aesthetic. However, the images are not well related and
9. Auditory learners’ webpage: In this webpage, there will be navigation bar
are not very appealing
of the website and underneath that will be header. Then there will be the
The first design is well composed, however lacks within its content, and its information. It uses content section which will be divided in a 50%-50% ratio, with one side
some images, giving it an aesthetic feel for the user, that can be improved. However, in saying this, having the background color as white and the other as purple. The left (white)
the design looks and feels very cramped, and constricted. The mixture of the content and the images side with have information on what does an auditory learner mean and the
right (purple) side will have information on the characteristics of auditory
can be heavily improved, to allow a better viewing and reading experience for the user.
In the first design, the content is skillfully structured and provides an insight to the viewers. learners. Then there is going to be the animation clip after that with the purple
viewer 14
that do they think
However, to a great extent, the overall aesthetic of the design can be improved from the choice of marble background. After that a quiz that asks the page
fonts to the use of pastel colors which aren't aesthetically appealing to one's eye. Therefore, the that they are an auditory learner with a footer underneath it.
viewer’s attention would move towards more important aspects of the design.
Design 1: Abstract themed website
3
6
Peer feedback 1
(Aaryam Sharma)
Peer feedback 2
(Ehsas Kakkar)
Peer feedback 3
(Ishan Yelnoorkar)
1.
Navigation bar: The navigation bar has a dropdown functionality, which works
as the client clicks on the ‘explore’ icon and then the options drop down. The
first three options are for inter page navigation in the homepage, however in
2
8
other webpages such as the quiz the user is redirected to the respective learning
9
style webpage. The colors used are shades of green and brown that relate to the
elements plant and soil and the font used in the navigation bar is Avenir in the
color of white, while the current webpage, hover and explore are in the color
black.
2. Header: The header of the website is a medium sized header that has a
background of flowers and leaves. The font used is Trocchi in 2 different colors
of white and a light shade of yellow that coordinates significantly well with the
bright background. The name of the website and the logo are in the center of
3
the website. The logo of the website is a cursive ‘L’ in a circle and the name of
the website in the font Cambria.
3. Content: The content of the website is placed in the center of the website with
4
decorative flower patterns on the sides. The font Trocchi is used for the
headings and Avenir for the content. The first half of the content has a gorgeous
peach color in the background with a slight dim color of gold for the context.
The second half has a white background with its contrasting color black for the
context. The following design has a simple scroll pattern due to the fact that the
that there are flower patterns on the side and adding a scrolling effect would
eventually affect the display.
Logo of the website
4. Learning styles: A brief description for each of the learning style is given in
three individual colored boxes. The client can access the individual webpages
of each learning styles by clicking on read more. Another method the client can
use, as mentioned above is the navigation bar by which they are taken to the
6
respective block of the learning style on the home page and then it would be
highlighted as the background dims making the block stand out. But on other
webpages the client would be taken to the respective webpage.
7
5. Quiz: The description of the quiz is given underneath its heading and then the
client can access the webpage by clicking on the text ‘click here.’
6. Animation: The description of the animation is given underneath its heading
and then the client can access the webpage by clicking on the text ‘click here.’
7. Footer: The footer of the website has background of flower with the copyright
of the website and a quote on learning styles in the center.
8. Auditory learners’ webpage: The auditory learners’ webpage has a similar
layout to homepage of the webpage however different colors and a different
layout is being utilized. The header has a different background image
The images used in this design are well related to the topic. They font used in the design is more
which will cease to differ in each webpage of this design. The
appealing than the others. Moreover, this page has many dynamic elements such as buttons, which are
dropdown navigation bar is within the header itself. Underneath that is
well structured. However, I feel that there are too many colors on one page, which makes it a bit less
the content on who are auditory learners and their characteristic.
professional
Following that is quiz and animation section and the footer at the end.
The images used within this design are far better, and relevant to the topic. However, the problem still
9. Quiz webpage: The quiz will have a header in a flower background
persists within the content used in the design, and the constricted feel of the text and the images. Both
with the navigation bar and then there are going to be the multiplethe content and the images have little correlation and coordination, and can be enhanced further with
choice questions placed one after the other. Once all of the questions
formatting. This is an improvement to the last design.
are answered the result would pop up on the screen itself. At the end
In the second design, the cover of the homepage isn’t visually pleasing and makes it seem as if there’s
page 15
is the footer of the website
a slight clash between the main ideas. Despite that, there has been an improvement in the aesthetic of
the design which comparatively matches well with the central focus of the topic.
Design 2: Flower themed website
1
a
5
Peer feedback 1
(Aaryam Sharma)
Peer feedback 2
(Ehsas Kakkar)
Peer feedback 3
(Ishan Yelnoorkar)
1.
Design 3: Sunset themed website
2
5
6
Peer feedback 1
(Aaryam Sharma)
Peer feedback 2
(Ehsas Kakkar)
Peer feedback 3
(Ishan Yelnoorkar)
1.
Navigation bar: The navigation bar is placed on top of the website which will
have its fixed position through-out webpage. The first three options are for inter
page navigation in the homepage, however in other webpages such as the quiz the
1
user is redirected to the respective learning style webpage, while the other 2 leads
to different webpages. The font used for the navigation bar is Libre Barksville in
8
the color white which coordinates with the warm colors.
2.
Header: The header of the website has been split into 2 different parts. On the
9
3
left is a message in the font Phosphate in the color white that stand out with the
application of a sunset background. On the right is short quote in a red bordered
box in the font Libre Barksville in the color white.
3. Content part 1: The first part of the content is about the topic of what is a
learning style and it uses the Phosphate for the heading in the color white and
gold and context is placed within a white bordered box in the font Libre
4
Barksville. When the client hover over to the button reading out ‘click here to
read more’ then the background color changes to yellow from white and when the
client clicks on it they would be taken to the webpage on ‘what is a learning
style’.
4. Content part 2: The second part of the content is about the importance of
knowing your learning style. The heading has a background image with the font
Phosphate in the color white. The context is placed in white color box that stands
Logo of the website
out from the cream-colored background. The button used is the same except it
takes the client to the webpage on the importance of learning style.
5. Learning styles: Learning styles: The following section has been divided into 3
different parts, each of a different learning style. There is the heading in different
colors according to the ones that suit with the attractive and colorful
backgrounds. Then there is a brief description given below and then underneath
each one of the three descriptions there are buttons that provide the functionality
for the client to access the respective learning styles webpages.
6. Quiz and animation description: Both of the quiz and animation are placed
ahead of an image with fonts of contrasting colors. There is a heading guiding the
client to access the quiz. Following that is a heading, description and button
guiding the client to open the animation.
7. Footer: The footer of the website has an image of the weather autumn with the
copyright of the website, a quote on learning styles and the logo of the website on
it.
7
8. The quiz webpage: The quiz webpage has a header in it containing the quote and
navigation bar. Then it’s the quiz section that has 2 questions in each
The theme is of a sunrise/sunset, however, I feel the images and the color scheme is not well
row and then the footer.
formatted, because it doesn’t co-relate with the font style and size. The images are mood creating
9. Auditory learners’ webpage: The auditory learners’ webpage has a
which doesn’t make it subtle, and reduces its professionality
similar layout to the homepage however it lacks the 3 learning styles
This design makes good use of the images and the content; however, a new problem arises within
section. Through a similar layout the website has resemblance across the
the font, the general theme of the design and the color scheme of the webpage. The color scheme
webpages.
does not match the content and the images, and the font isn’t as appealing and visually pleasing to
view, as it could be. This design can be improved, with some further work, and tweaking.
The third design, it is a vast improvement however, the basic elements of the design such as the
choice of font, color scheme, and photographs don’t complement each other which makes the
photographs overlap the content.
page 16
1.
Design 4: Elegant styled website
1
2
9
10
3
2.
4
Logo of the website
3.
5
6
7
9. Auditory learners’ webpage: The auditory
learner webpage resembles to the homepage a
lot that helps in keeping a flow and constant
theme in the website which could be preferable
to some extent by the client. The header image
is different and is in parallax that looks
pleasing as the viewer scrolls past the header.
10. Quiz webpage: The quiz webpage in this
design is unique compared to all of the other
designs as when the button is clicked the
question switches one after the other. This
makes the quiz look more efficient and easier
to understand.
Peer feedback 2
(Ehsas Kakkar)
Peer feedback 3
(Ishan Yelnoorkar)
5.
6.
8
Peer feedback 1
(Aaryam Sharma)
4.
The theme is of a sunrise/sunset, however, I feel the images and the color scheme is not well formatted,
because it doesn’t co-relate with the font style and size. The images are mood creating which doesn’t make
it subtle, and reduces its professionality
This design makes good use of the images and the content; however, a new problem arises within the font,
the general theme of the design and the color scheme of the webpage. The color scheme does not match
the content and the images, and the font isn’t as appealing and visually pleasing to view, as it could be.
This design can be improved, with some further work, and tweaking.
The third design, it is a vast improvement however, the basic elements of the design such as the choice of
font, color scheme, and photographs don’t complement each other which makes the photographs overlap
the content.
7.
8.
Navigation bar: Navigation bar: The navigation bar is placed on
top of the website. The learning styles option is for inter page
navigation in the homepage with a dropdown. However, on other
webpages the client would be extracted to the respective learning
style webpage. The font used is Arapey in the color white with
hover of a light-yellow color. On the right is the logo of the
website in the font Poiret One. The specialty of the navigation
bar is that once the client scrolls past 80px the font size and
navigation bar shrink in size
Header: The website has a large sized header that contains the
navigation above it. The dark background image coordinates
with the dark navigation bar and would is certainly attractive.
The tagline of the website is in the fonts Arapey and Playlist that
are really attractive in a light color shade. The background image
is parallax so as the client scrolls, the background remains still
while the text moves.
Content part 1: The first part of the content is about the topic of
what is a learning style and it uses the fonts Arapey and Playlist
for the heading with a plain background in parallax effect.
Underneath that is a button that redirects the user to a webpage
on what is a learning style.
Content part 2: The second part of the content is about the
importance of knowing your learning style. The heading has a
background image with the font Phosphate in the color white.
The context is placed in white color box that stands out from the
cream-colored background. The button used is the same except it
takes the client to the webpage on the importance of learning
style.
Learning styles: The following section has been divided into 3
different parts, each of a different learning style. There is the
heading with an attractive and colorful backgrounds of different
sensory parts. Then there is a brief description given below and
then underneath each one of the three descriptions there are
buttons that provide the functionality for the client to access the
respective learning styles webpages.
Quiz: The description of the quiz is given underneath its heading
and then the client can access the webpage by clicking on the
button reading out ‘take the quiz’
Animation: The animation section has been divide into 2
different parts one of the heading and context and on the right, is
a short clip playing from the animation on loop. Underneath it is
a button that extracts the user to the animation webpage.
Footer: The footer of the website has a dark image with the
copyright of the website, a quote on learning styles and the logo
of the website on it.
page 17
Comparison of designs
To derive my final design, I decided to conduct a test in which I would evaluate individual specifications for each design out of five and select a final one. The specification of
layout outlines the structure, margins, distance between the content, placement of buttons, header size, footer size and the navigation bar of the website. The user friendliness
specification would evaluate the ease of understanding the layout and flow of the website along with the way the client would explore through the website. The color combinations/
theme specification would evaluate the designs for the implication of the background colors and their coordination with the content. The font specification would assess the designs
for their colors, uniqueness, appeal and coordination with the content and the theme of the website. The scrolling technique differs in the designs that creates a certain uniqueness in
the way each design can function. The professionalism determines how proficient is the design.
Design
Layout
Userfriendliness
Color combinations/theme
Font
Scrolling
technique
Professionalism
Total
1.
8
9
9
7
9
9
51/60
2.
8
8
9
9
6
7
47/60
3.
7
6
8
9
6
7
43/60
4.
10
9
8
9
9
9
54/60
Final design
After the evaluation of the designs based on the comparison specifications that I developed I decided to choose design four as my final design as it has scored the highest among all of
the designs with an impressive score of fifty four out of sixty. The website has simple and standardized theme to it of utilizing both light and dark colors. However, even though the
website does not have a moderate theme throughout all of the webpages yet it does seem to be phenomenal when it coordinates with the parallax scrolling effect. Due to the parallax
effect when the client scrolls below the from the header the change in the contrasting colors creates an ambient and soothing display. The fonts used the website are playlist and Arapey
for the headings of the website while the context is in the font Open Sans. I believe that the design 4’s font has a really well coordinated font that isn’t too random and suits the
backgrounds present within the website. All of the content of the website is placed in the center of the website that makes it look well organized. I also found this website to be the
most organized and well-structured among all of the four designs as it has a standard centralized theme throughout the entire website. Another significant reason behind the selection
of this design is the quiz layout. Unlike the other 3 quiz webpages on each respective design
(Refer Appendix 5 for final design))
page 18
The Sitemap of the Website
Homepage
What is a learning
style?
Importance of a
student knowing
their learning style
Different learning
styles
Quiz
Feedback
Visual Learners
Auditory Learners
Google forms
Kinesthetic Learners
Animation
-
The webpage that links to all of the other
webpages.
-
Individual webpages that provide content
and are linked to the blue pages
Individual webpages that have a specific
function
-
page 19
Navigation map of the website
The webpages that connect to the navigation bar box
indicate that these webpages can be accessed through the
usage of the navigation bar.
Navigation bar
Homepage
Animation
Quiz
Importance
*The blocks that in purple indicate the
different webpages*
Note: If a purple box is connected to both
the navigation bar and button it means that
it can be accessed through both of them.
Learning styles
Visual
Auditory
Kinesthetic
Feedback
Buttons
The webpages that connect to the buttons box indicate that
these webpages can be accessed through the usage of the
navigation bar.
page 20
Animation Storyboard
By now you might have…
A question asked to a student through a
typing effect animation
Kinesthetic learners’ tips and strategies
This is because…
Each one of us is a different learner
The animation proceeds as there is the
answer to the question and the text
enters the scene by motion tween.
The animation proceeds as there is a
swipe up effect and then in this scene
the text fades in
Visual learners’ tips and strategies
Auditory learners’ tips and strategies
Sample text Sample Text Sample text
The heading kinesthetic learners’ tips
and strategies fades in and after that
the content enters the scene with
motion tween.
As we are different learners…
Sample text Sample Text Sample text
Sample text Sample Text Sample text
The heading auditory learners’ tips and
strategies fades in and after that the
content enters the scene with motion
tween.
The heading visual learners’ tips and
strategies fades in and after that the
content enters the scene with motion
tween.
Flow of the animation
1 Scene: In the first scene, there is
the display of text in a typing effect
that reads out ‘by now you might
have noticed that each learning style
has its own unique way of learning.
The background is set as light grey
for this scene and the first half of the
text is in white and the other in
yellow in a typewriter font.
st
2 scene: In the second scene, there is a
fade-in text effect by creating.an alpha
color effect for the text. The second
scene has text that reads out ‘these
unique ways of learning are known as
ways of retention’. The background for
this scene is black with a similar text
layout to the first scene but in a Sans
serif font.
nd
3 scene: There is a
list of the 3 learning
styles which are
visual, auditory and
kinesthetic. From
here onwards all of
the fonts are in a
sans font.
rd
4 scene: In this
scene, the title visual
learners, fades in
and then the tips and
strategies for the
learning style float
in through motion
tween.
th
5 scene: In this
scene, the title
auditory learners,
fades in and then the
tips and strategies for
the learning style
float in through
motion tween
th
6 scene: In this scene,
the title kinesthetic
learners, floats in and
then the tips and
strategies for the learning
style float in through
motion tween.
th
page 21
Creating the solution
Logical plan
Sr No.
Task
Description
1
2
3
4
5
6
7
8
9
10
Resources/ skills
1.
Design the
website’s
favicon
Visit ‘Tailor Brands Studio’ website and generate the favicon
of the initial ‘L’ from there. Moving on, by using Photoshop
make some final changes to the initial.
Tailor brands.com
(Designing, formatting and selecting)
2.
Create a new
HTML file on
Dreamweaver
and link it to a
CSS file.
Add a favicon
to the website.
Make a new HTML file on Dreamweaver under the name
Homepage. Then create a new stylesheet named ‘Homepage
Stylesheet’ and link it to the HTML file ‘Homepage’ as a
CSS file.
Dreamweaver
{Link tag}
Use the logo created earlier, and link it to the website’s head
with the relation of icon with the size 10 by 10px.
Dream weaver
{Link tag to add icon}
4.
Import fonts
Google fonts
{Link tag and import code}
5.
Make a
navigation bar
for the website.
Visit Google fonts and select the fonts Arapey, Playlist, and
Open sans and then link their stylesheets to the website to
import the fonts.
Create a div class with the navigation bar in the source code
of the website and then in the stylesheet set the font of the
navbar as Bodoni and set the style as italic. Then set the
padding as 15px and 50px, the font as 15px, color as white,
display as a dark grey block and the float of the links onto the
left side and then embed the logo onto the right side of the
navigation bar by setting the float as right.
6.
Link the
webpages to
the anchors in
the navigation
bar
Create a script
for the
webpage for
Within the navigation bar add the anchors for the homepage,
learning styles, quiz, animation and feedback page. Set the
links to ‘#’ as the other webpages have not been developed
yet.
Dreamweaver
{Link tag}
In the script set a property for the navigation by which the
client scrolls past 80px the navigation bar size decreases.
Dreamweaver
{Java script}
3.
7.
Dreamweaver
{div id and CSS properties}
page 22
8.
the navigation
bar.
Create the
header of the
website.
Add a dark background image edited on Photoshop and then
create the heading in the font Arapey and Playlist in the light
colors. Then add parallax effect to the header so as the client
scrolls the background stays still and the text moves.
Dreamweaver
{div class, CSS proprieties}
Create the headings of the website from the choice of fonts
Arapey and Playlist according to the design planned. Then
add images and background colors to match with the design
and in the end, align all of the headings in the center, set
padding and margins to zero.
Make space for the content by adding text placeholder
Dreamweaver
{div class, CSS proprieties}
Photoshop
{Brightness and contrast.}
9.
Add headings
to the website.
10.
Design space
for the content
11.
Organize the
content.
Place all of the content under the respective headings aligned
in the center of the website in the open sans.
Dreamweaver
{center tag, CSS properties}
12.
Add buttons
and video
place holder
for the content
For each part of the content add buttons as planned according
to the designs that link to the other webpage but for the time
being set the link as ‘#’ and then add a video place holder on
the right side for the animation section on the homepage.
Dreamweaver
{div class, CSS properties}
13.
Add the footer
of the website.
Use parallax effect for the footer by inputting an image and
then having a box for the text for the description of the
animation.
Dreamweaver
{div class CSS properties}
14.
Webpage on
what is a
learning style.
By repeating the same steps from 6-13, a similar CSS file &
script, and adding the relevant and detailed content to the
topic the webpage on ‘what is a learning style’ would be
completed.
Dreamweaver
{div class, CSS properties and
JavaScript}
Dreamweaver
{div class, CSS properties}
page 23
15.
Content on the
importance of
learning styles.
By repeating the same steps from 6-13, a similar CSS file &
script, and adding the relevant and detailed content to the
topic the webpage on the importance of learning styles would
be completed.
Dreamweaver
{div class, CSS properties and
JavaScript}
16.
Content of the
3 webpages of
the different
learning styles.
By repeating the same steps from 6-13, a similar CSS file &
script, and adding the relevant and detailed content to the
topic of each individual webpage out of the three would be
completed.
Dreamweaver
{div class, CSS properties and
JavaScript}
17.
Develop the
animation.
Create the animation of 60 seconds on the topic of ways of
retention for each individual learning style from the VAK on
Adobe Animate CC 2018.
Adobe animate CC
{motion tween, color effect and
symbols}
18.
Create and
online quiz on
‘Interact quiz
maker’ with
questions on
learning styles.
Create 3
individual
webpages.
Visit ‘Interact quiz maker’ and develop and online quiz
regarding about a student’s learning style and help them in
getting results.
Interact.com
(website)
Create a webpage for the animation, a webpage for the quiz
and a webpage for the feedback with the question with a
similar CSS and script coding.
Dreamweaver
{div class, CSS properties and
JavaScript}
20.
Embed all of
the resources
prepared.
For the animation webpage add a video place holder that
occupies 90% of the website’s horizontal page. Place the quiz
in the center of the quiz webpage. Put the feedback form
made on Google Forms into the feedback page using iframe.
Dreamweaver
{div class, CSS properties and
iframe}
21.
Link all of the
pages to the
navigation bar
and buttons.
Now what all of the webpages have been designed link them
to the navigation bar and their respective buttons.
Dreamweaver
{link tag}
19.
page 24
Follow the plan to create the solution
Arranging for the resources
The first task that I had assigned to myself for the creation of my
solution
was to create a folder under the names of ‘Website on Learning
Styles’
on the local drive of my MacBook using Finder. The folder was
further
categorized into five other parts that were the HTML files, CSS
files,
Animation, Photoshop Files, Website Content and Images. After
the
creation of the folder of my local drive, I began with the next step
that was
to arrange for the images for the website. I visited the website
Pexels.com,
which is
a free stock photos website that allows users to download photos that have no
copyrights or claims on them. The application Dreamweaver CC 2018 supported the
media types required by me so I didn’t encounter any problem while arranging for
the images.
For the development of my
development of my logo I visited
the website Tailor Brands, which
is a website that allows the user to create logos for personal and commercial uses. For
the selection on my logo I selected my usage as personal and explored through the
logos offered by the website. However, I couldn’t find a logo that coordinated with the
navigation bar and the theme of my website but I did extract an icon with the initial
‘L’ for the favicon of my website.
My website desired attractive fonts for both my content and logo, and I
visited the website Google Fonts as it provides the link to the respective font
family. As, per my design I had to apply the fonts Arapey and Playlist script
for the headings, Open Sans for the content and now that I decided to
develop the logo of my website on my own I decided to explore a range of
fonts for my website on Google Fonts. After my exploration through the
website I decided to use the font Poiret One for the logo of my website. The
font Playlist wasn’t available on Google Fonts so I decided to move to an
alternative website in order to find the link for the font playlist. I came
across the website Themeco and in the resources section I found a
community archive that had the font link for Playlist script.
Creating the HTML file
I created a new HTML file under the name of ‘Homepage’ and placed it in the folder of my HTML files. The next step I took in the
creation of my website was to link the HTML file of the website to stylesheet under the name of ‘Stylesheet’. Then I worked upon the
head portion of the website and inserted the favicon of the website as an icon. I used the code of link tag and set the relation of the
favicon image as an icon. After that I embedded the link of the fonts extracted from Google fonts and set the relation as a stylesheet and
now the head of the website was completed.
Creating the navigation bar
The homepage design had its first element as the navigation bar, that would have a static position of being on top of the website. So, I
created the navigation bar by creating a div id under the name of navbar. In the navbar there had to be two different sides, the left side for
the links of the website and on the right-hand side the logo. To divide the navbar into 2 different parts I created another id called as logo.
The reason behind setting these two properties under an ID rather than a class is because there needed to be an application of script
coding on the navigation bar and logo. I set the float of the navbar links in the left and the logo on the right in the stylesheet. For the
navigation links, I used the link tag for the first 4 links of the home, the quiz, the animation, the importance. Then I created dropdown for
the learning styles that had the 3 learning styles from VAK under it by a div class and a button set to “#”. In the stylesheet, under the div
id I set the properties of the navigation bar to the left, a transition effect of 0.4 secs, the background color as a shade of dark grey, the zindex as 10. To make it spread across the entire width of the website I set the width as 100%, which makes it display from left to right.
page 25
Then I set the padding as per the requirement to align the attributes in the navigation bar appropriately. For the attributes, I set the
properties as white and its display as a block. I had to set the margin to another value rather than 0 to align the attributes properly. the
padding was set to 25px (left to right) and 10px (top to bottom). The dropdown of the navigation bar had similar properties in terms of
the aesthetics to the navigation bar as they needed to look the same. It was styled to have a different padding as it needed to hold the
drop-down variables. The hover effect was set to the color bisque as it coordinated with the colors in the navigation bar and matched with
the theme of the website.
The next part was making the logo and setting it up in
the right side of the navigation bar. As mentioned above
I set the float of the logo in the right within the
navigation bar. In the logo, I used the font Poiret One
and set its margin 20px from the right and the font size
as 40px. Once I was done with styling it I applied a
script on the logo and navbar to make the size of the
navigation bar shrink. For doing that I had to decrease
the font size of the navigation bar to 25px from 40px and
keep the navigation bar’s value constant. The script
would function once the client scrolls past 70 px in the
website.
Creating the header
I used Photoshop to edit the background image for my header as I wanted it to be darker in color than the original color. For doing so I
decreased the brightness of the images and the image contrastin order to make the image darker in color. Next I created a div class for the
parallex effect and then two others for the headings as both of them had to be in two different fonts that are Aparey and Playlist script. I
created 2 different div classes for the 2 headings as the font size and style differed. Since the distance between the two heading was more
the required I created another div class under the name “b” to set the adjust the line height as per my desire. Then I wrote the tagline for
my homepage which is ‘Know the learner you are. I created the parallex effect by setting a minimum height for the image selected and
setting the position of the image as fixed. Here is where I faced an issue in my header as the image wasn’t covering up the entire hundred
percent
of the width of the header so I set the margin as -10px.The height of the parallex effect was set to the dimension of a standard browser
and a standard 13 inch computer. By setting the height at this level the header is the only element that is present infront of the eyes of the
viewer and when he scrolls the size of the navigation bar decreases as per the script, hence creating a pleasant and clean look. Once the
parallex effect was functioning appropriately I inputted a webkit-keyframe fade-in animation in which the selected attribute changes it
opacity from 0 to 1. I used the code on the headings in my header set a time of 4 seconds.
page 26
Creating the content
As you can see on the right my content has been divided into three different parts which include the topics of what are learning styles,
what is their importance and then the learning styles from VAK. For the first part of the section of what are learning styles. I took a
background of tile and then set it as a parallax effect too. To do so I created another div class under the name parallax 2 and a similar
code was applied with the only properties of the image source and height varying from the first one. The heading that I have used follows
a similar pattern in both the second part and the first part to the heading in the header. So, I created a heading that read out ‘What are’ in
the font Arapey and ‘learning styles’ in Playlist Script. I created a div class for the content of my website and placed it underneath the
heading of the first section. I set the font as Open Sans, however I placed a text place holder of ‘Lorem ipsum dolor sit’ for the content as
I did not write my content yet. By placing a text holder, I would be able to understand the amount of content. that I can input into each
section of the webpage. After that, I placed a button that said ‘read more’ and it would function as a way of getting to the full page on the
content of learning styles. The button wasn’t linked to any website so I decided to have the name already inputted into the code.
Moving on I used a similar heading pattern for the section of the importance of learning
only for the heading, while the content was in placed under the heading in ahead of the
and underneath it was another empty button which would take the user to the important
For the heading, I created a div class for one of the heading in the font in which it was
background image with the font set as Arapey that read out ‘why is it important to
Underneath this heading was another heading placed under the same div class therefore
previous heading and the second heading was styled with the font Playlist Script in the
styles but a background for
white colored background
of learning styles webpage.
styled to have a
know’ in the color black.
making it a part of the
color white.
page 27
The third section was for the three different learning styles. I created a box heading with borders and the font as only Apery. After that I
used Photoshop to combine 3 different drawing images of an eye, an ear and a hand. I used the smudge tool to remove some sketch marks
and make the image look as one. Once, the image was ready I embedded it into my website underneath the box heading with the width set
as 100% so that it stretches out till the end of the webpage. I made 3 different div classes for the learning styles; each one of them had a
border, the heading was in playlist script and then I had set the width and height for each div class different depending on the heading
size as I wanted the headings to be in one line and each one of them had a different number of characters. As the content was going to be
very basic in the boxes I added a button under the content for each learning style within the boxes. I gave the context the box appeal by
applying a border to the div class. I had in total 9 div classes created for this section as I had have separate margins and layout.
Creation of the quiz and quiz page I designed my quiz on the website interact.com that allows the user to create a variety of quizzes
that can be shared or be embedded onto a webpage. For the questions in the quiz, I approached the phycologist of our school as I
conducted my research for the creation of the product. The questions that my quiz asked were multiple-choice questions and the client
can select one out of three options. I set three different results of visual, auditory and kinesthetic learner and underneath each result an
image resembling to the learning style and a small description. In the end, I set the co relations between the options and the results.
After the quiz was designed, I worked upon the quiz section of my homepage which was right after the learning styles. I set the
background as a grey gradient (made on Photoshop) and then created 2 different boxes placed opposite to each other; one for the heading
and the other for the description of the quiz and the button. Once I was done with the quiz section, I created a new HTML file under the
name ‘Quiz’ and linked it to the stylesheet. In the quiz webpage, all I needed to develop was the navigation bar and set the background as
white in the CSS. I embedded the quiz onto my website by using the iframe code given to me from Interact.com and then the quiz was
embedded onto my webpage and it was fully functional.
page 28
Creation of the animation I created the animation using Adobe Animate CC 2018 and in total I had 8 scenes. I used motion tween
mainly in my animation along with the text tool. I kept the look of the animation basic as I wanted to showcase and focus on the content
and I ended up creating a 58 seconds animation in the end. Within the animation I had created symbols and applied motion tweens and
making effect on them. With the help of motion tween, I was able to show movement in the animation and by using the masking tool I
created a typing effect for the first scene of my animation. I faced a certain issue in the display and flow of the scenes so I decided to
separate the scenes and combine them on the software iMovie. Another reason behind why I chose this decision of moving to another
platform for video editing is the ease of use and the in-built sound effects the software, iMovie provided. Furthermore, I divided the
animation into 2 different parts. One consisted of the first 2 scenes and the other had all 8. The reason behind this is that I wanted to have
the first 2 scenes on the other pages and then a full page given to the full animation.
After the quiz in the homepage, I created a section for the animation in which had a background of a bright pink wall and then I kept the
heading in the left reading out ‘the ways of retention’ and then under it a small description about the animation. I had different div classes
for the heading, the description and the button. The code applied in the heading was similar to the heading used in the learning styles
section as it was placed inside a box. Underneath that I had a description in box. The background was set to parallax effect as certainly
suited the website. I placed the short clip of 2 scenes using the video tag on right side, setting the float as right and then a button that
would redirect you to the animation webpage.
I was done with editing animation on homepage and later on, I created a new HTML file called as Animation and then with the I created
a dark themed webpage. As my navigation bar was already of a dark shade, I decided upon making my website’s background the same
color as the navigation bar so that it creates a dark themed webpage. In the center of the webpage I used the video tag to place the full
animation created on the ways of retention.
page 29
Creating the footer
As I had the plan to create webpage for receiving the feedback from my client I created a from on Google Form that would contribute in
the evaluation of the success of my solution. I had decided to keep the feedback form short by only keeping questions that directly related
to the success criteria for my solution. Once I created the feedback form I began designing the footer of my website which had a parallax
effect applied to it with a box located in the center of it. As mentioned above, the process of creation for the box was by applying a border
property to it. I decided to place the name of the website in the same font as the logo ‘Poiret One’ and then I set a light-colored image for
the background. Then I decided to apply parallax effect to the website, however as per my earlier plan of just keeping the name of the
website in the footer did not justify the reason behind me created such a huge footer which is why I decided to remove the feedback link
from the top navigation bar and have a link of it in the footer. I placed a short note behind thanking the client for visiting my website and
insisted for a feedback on my website in the end and creating a button that would take the client to the feedback page.
page 30
Creating the webpages importance of learning styles and what are learning styles:
As originally my plan was to have the same theme and flow of the homepage in the webpages on the importance and concept of learning
styles, I applied a similar coding in the other two webpages. The content initially was left for me at this point so I also began creating my
own content for my website by first working on a Word document. I focused on making my language as interactive as possible by asking
rhetorical questions and directly addressing the reader constantly among my content which would keep the user engaged with my
solution. Creating the content took a lot of efforts and was certainly time-consuming. I decided to also write my content on the learning
styles webpages at this point as I was primarily only focusing on my content. Once the content was ready I decided to replace the content
with the text place holder that I had placed earlier in my home page and the two new ones that I had created on the importance and
concept of learning styles.
Creating the 3 learning styles webpages
The layout of the learning styles webpages is different from the homepage. Let’s the example of the webpage made on auditory learners.
It has a fixed navigation bar on the top of the website and then a header with an image resembling to the learning style. Then I have
provided content about who are auditory learners and after that the characteristics on auditory learners with a collage of images
underneath it. Then I had the quiz and the animation section underneath it. After that I put a short description on the other 2 learning
styles and then the footer. Overall the coding was the same but there was a difference in the arrangement and layout of the website. The
new element that was embedded was a collage that was a compilation of images of different students of the respective learning style.
Refer the appendix to see the full code for the learning style webpages.
page 31
Changes made to the logical plan
Initial plan
Changes
made
To create the entire Used the
animation on
software
Adobe Animate
iMovie to edit
CC 2018 and edit
the scenes of
the scenes and
my animation.
music effects on
the same platform.
Have a plain grey
background for the
quiz section on the
Homepage,
Introduction,
Importance,
Visual, Auditory
and Kinesthetic
learning style
webpages.
I made a
gradient
background of
grey and white
into my
website.
To keep the
margins as zero for
the entire website
I changed the
left-margin of
the body to 4px instead of
0px.
To have no
changes made to
the margin of the
parallax code in
the website.
I set the
margin of the
parallax effect
as -10px
Having the links in
the navigation bar
kept as “#” from
the start.
I set the links
for the
navigation bar
as per the
name of the
webpages
planned
earlier.
Reason
Change evidence
I suffered from an error in my
animation while debugging
the animation as there was an
error in the scenes flow. I
decided to work on iMovie
and individually edit the
scenes. I also previously had
the idea of adding sound
effects into my animation and
iMovie had a really nice
interface while working on
audio and video
simultaneously and there
were inbuilt audio files in the
software.
I used Photoshop to create an
image of a gradient
background into my website.
The reason behind why I did
so is that the simple grey
background didn’t go well
with the theme of the website.
So, when I created the
gradient I was able to use
parallax effect for the quiz
section which created a better
user experience.
Due to an error in the parallax
effect of the website I chose
to set the left-margin of my
website as -4px because the
background image of the
parallax effect was moving to
the right side.
Initially without the
application of any margin
code the background image
for the parallax effect seemed
to be a bit off from the right
side that initially resulting in
a blank spot after the images.
Hence to overcome the issue,
I set the property of the
margin on the right as -4px.
The reason behind why I took
this step is that I didn’t want
to constantly keep on visiting
every webpage to change the
link repeatedly so I set the
links according to the name
of the websites planned from
the start.
page 32
Evaluating
Testing methods
What will be
tested?
1. Performance of
the website
How will it be tested?
What data will be obtained?
Advantage of test
Expert appraisal and
white box testing
Through the expert appraisal I
shall receive a feedback on my
website. From the white box
testing I would test the
functionality of my website
through a pass or fail system
according to the expected
outcome.
2. Aesthetics of my
website
Client observation,
client feedback and
expert appraisal
3. Features of the
website
Client observation,
client feedback and
expert appraisal
The client’s observation would
be recorded in a table in which
they can comment upon the
aesthetics of my website. The
feedback would be a general
evaluation of the aesthetics
based on a rating method. The
expert’s appraisal would be
recorded through the feedback of
the expert.
The client’s observation would
be recorded in a table in which
they can comment upon the
features provided in my website.
The feedback given by the client
will be re
Receiving an expert’s feedback would
allow me to get a professional review on
the performance of website. Through
white box testing I can compare the
expected results with the actual result
that would help me in identifying
whether or not has my website reached
my expectations in terms of its
performance.
Initially as my website has a specific
client receiving their comment and
feedback would allow me to identify
whether or not has my solution reached
the expectations in terms of its
aesthetics. Receiving an expert’s
feedback would assess my aesthetics
from a professional aspect.
4. Content of the
website
Physiatrist response
5. The advantages
and disadvantages of
my product with a
pre-existing solution
Comparing the
advantages and
disadvantages of my
website with a preexisting website.
Client feedback
6. Development of
conceptual
understanding of
website.
7. Functioning of
quiz
Client feedback
8. Technical
functionality
White box testing
Approach the physiatrist and
present the website to them and
receive a feedback regarding the
content of the website.
A table of comparison of the
advantages and disadvantages of
my website against a preexisting website.
From client feedback, I will
become aware of whether or not
did my website help them in
understanding the concept of
learning styles
Whether or no did my quiz give
accurate results from the quiz
regarding the students learning
styles,
Success and fail results by
running multiple tests regarding
the technical aspect of the
website.
From the client observation, I will
become aware about whether or not has
my website delivered enough features as
per the requirement of my targeted
audience. From expert appraisal, I will
become familiar with how my website
met the desired goals and need.
Receiving the feedback from the
physiatrist would help me in assessing
the content that I have provided in my
website
From the comparison of my website
with a pre-existing resource I can
evaluate the success of my website.
The success of my solution can be
evaluated as a major motive behind the
creation of my solution was to help
students develop an understanding about
learning styles.
The success of the functioning of my
quiz will be can be determined form the
test and this can help me in evaluating if
my features meet the highest band or
not.
Through this test I would become aware
about the functionality of my website
and whether or not are there any bugs in
my website.
(Refer Appendix 6: Evaluation of product with existing product; Appendix 7: Feedback from Pooja Shristava on the website; Appendix 8: Feedback from Client;
Appendix 9: Expert appraisal )
page 33
Black box testing: Taking evaluation from target audience
As my target audience were students aged 15 and above I decided to get an evaluation done by them and have them comment
on my website. I chose specific students for the evaluation of my website, one was a design student from my grade who
would be able to identify and evaluate the overall aesthetics and experience critically and suggest some further
improvements. The second student I chose for my evaluation was a student that wasn’t studying design as a subject who
would evaluate my website from a standard point of view. Secondly, I conducted a survey among 20 students ranging from
different grades who would provide a general feedback on my solution and rate the features of my website. (Refer appendix
for summary of the results).
Peer Feedback given by Anoushka Shetty (Design student from MYP 5)
Aesthetics and User interface
The website impressive in terms of its aesthetics. The
application of colors and features and unquestionably
fabulous and really stands out to me. The variety in the
images, backgrounds and fonts certainly contributes a lot
in the viewing experience. I found the website really easy
to use as the content was well organized and structured.
However, I believe that there is improvement that I believe
that could have been made to make the navigation bar of
the website is that, the logo could have been set as a link to
the homepage providing space in the navigation bar to add
the link to introduction page. By doing so I would be
granted the access to all of the webpages using the
navigation bar and improving the user interface.
Features
Your solution has the features of a
quiz and animation that
individually provide a certain
significance to your website. The
quiz helped me in figuring out the
learner that I am. The quiz
functions appropriately as I didn’t
find any bugs or issues while
answering the questions. The
animation provides more
complexity in your solution and
adds a variety in the technique of
delivering content.
Content
The content provided in the website is
sufficient to your topic. The website has
covered up the different aspects of learning
styles ranging from its importance to the
different learning styles. The application
of an animation on ‘the ways of retention’
into the website helps in proving a variety
of methods of delivering content. The
language used in the website is easy to
comprehend which is an important aspect
of a website focusing upon students as the
targeted audience.
Peer Feedback given by Ehsas Kakkar (Student from MYP 5)
Aesthetics and User interface
In terms of aesthetics, I think that the website is visually
appealing with its uses of different colors, font styles, and
backgrounds, to keep the viewer entertained whilst browsing
through the website. I think that with the inclusion of respective
images to denote the type of learner someone is, it allows a lot
more interpretation, and room for understanding towards auditory,
visual, or kinesthetic learning. This allows the viewer to engage
with the webpage a lot more, and I personally enjoy these small
touches, which enhance the viewing, and learning experience. In
terms of the overall ease of use, I think that the website allows
easy navigation, through the use of links that redirect you to other
webpages, if you need to find out more about a particular topic.
The webpage itself is fairly coherent, and is easy to understand
for even the most confused of users, through its simple headings,
descriptions, and following content.
Features
The features included in the website
are the quiz and animation, which I
personally think are extremely
helpful towards understanding what
type of learner you are, and the
different aspects of each learning
styles. While the features are
somewhat limited, the features
included all help the website in one
way or the other, and allow the
viewer to engage further with the
website.
Content
In terms of overall content, I
think that the content which the
website focuses on is important
to understanding the process of
learning as a whole, and it’s
sufficient to the topic, with no
unnecessary information. I think
that the content is appropriate to
the topic, and speaks about the
different styles of learning with
detail, and relevance to the
topics themselves.
Peer feedback given by Ishan Yelnoorkar (Design student from MYP5)
Aesthetics and User interface
Looking at the website, in my opinion it’s
interesting to look at, with its varied use of colors,
images, and text to go along with the content of the
website. I like the fact that the content of the
website is specific to the images, and is relevant to
everything that the website speaks about. I think
that the concept spoken about is an interesting one,
and it’s very simple to find out what type of learner
someone is, with an interface that’s easy to use,
and easy to configure and go about using. The
color combination that is used, isn’t assaulting the
viewer with too many vivid, and bright colors, and
I believe that with the use of cool, and dark colors,
it gives off a soothing vibe, as well as a calming
vibe, which allows the user to feel much more at
ease, while operating the website.
Features
When we’re looking at features
specifically, I think that there are
certain features which I can
appreciate, such as the animation. I
think that the animation for the
website, is pleasing to look at, and
allows for more to be investigated,
and more to be looked at when
analyzing the website. The quiz, also
serves this purpose, and I believe that
it’s needed as many people may
understand the concepts, and believe
that they’re one learner or the other,
but the quiz allows for the user to find
out in accordance to a number of
questions, and answers regarding
learning.
Content
In the context of the content, I can safely
say that the content included in this
website is relevant, appropriate, and
useful for the topic that it speaks about. I
think that learning itself, is a concept
that is difficult to analyze, and looking at
it from the perspective of 3 different
types of learning, allows for the user to
look into the topics of kinesthetic,
auditory, and visual learning further. I
believe that there is a niche for
information of this type, and many users
investigating, or researching upon types
of learning, would be happy to see a
website that speaks about the topic so
concisely, and consistently.
page 34
Testing method: White box testing (Note: All of the results are tested in Chrome and Firefox)
Test
Expected outcome
Result
Homepage Load: In Finder,
select the Homepage
HTML file and click on
‘Open with’ and select the
option of Chrome. Then
open the HTML file with
Safari.
The Homepage should
successfully load on
both of the browsers
with no errors in the
margins or padding.
Success
Navigation bar: Open the
Homepage and in that
scroll over to the links in
the navigation bar and
confirm the success of
linking all the webpages
together.
The website would have
the navigation bar
functioning in all of the
webpages and the client
would be redirected to
the correct webpage.
Success
Navigation bar dropdown:
Hover over the link in the
navigation bar that reads
out ‘Learning Styles’ and
then there should be 3 other
results presented under it.
When you hover the
cursor on the navigation
bar there would a
dropdown of options
and when you remove
the cursor the dropdown
option would disappear
After scrolling past
70px the navigation
bar’s padding decreases
from 2px to 1px from
the bottom and the
logo’s font decreases to
40px to 25px.
Success
Navigation bar JavaScript:
Scroll past 70px in the
website in order to test if
the navigation bar’s
padding and the logo size
decreases.
Evidence
Success
page 35
Homepage header: The
header should cover up the
default height of chrome to
enhance the first
impression of the client on
the website.
The header should
cover up the full width
and height of the
browser when the
website loads.
Partial
Success:
Fails in Safari
Chrome:
Safari
Fade in animation: Reload
the page multiple times in
order to see the fade in
animation for the heading
in the header of the
homepage.
There would a 4
seconds fade in
animation in the
heading as soon as the
website loads.
Success
Results on other webpages
for header and navigation
bar:
The other webpages
shall pass in the
previous tests in order
to determine the success
of the other webpages.
Same result
page 36
Button: There are buttons
given underneath the
content which redirects the
client to the relevant
homepage to the topic.
When you hover over
the button the
background color
changes to a darker
shade and takes you to
another webpage.
Success
Quiz: In the quiz select 7
questions that are
correlated to the result
visual learner and the other
3 from either Kinesthetic
and
The result should be of
visual learner and there
should be an image
displayed and a
description of it.
Success
Animation (clip)
debugging: Try playing the
short clip on the homepage
and other content pages to
check if the animation is
correctly loading and
working. Check if the
controls for pause, play and
volume work.
The short clip of the
animation is shown on
the animation section of
the website.
Success
Animation (full)
debugging:
Play the full animation
multiple times on the
animation webpage and
check if the controls for
pause, play and volume
work.
The full animation is
shown on the webpage
for the animation.
Success
page 37
Evaluation against specifications
The website is beautiful and appealing
Grade out of 8
From the feedback that I got from my client I can say that my website is certainly excellently designed in terms of
the aesthetics. The targeted audience loved the attractive choice of colors, images and fonts as they didn’t find any
problems or any negative aspects regarding aesthetics of my website. The images of the website coordinate really
well with the theme and design of the website and contribute a lot in making the website more attractive. The theme
for my website was of using an elegant which was very well portrayed through the choice of colors of the elements
in the website. The header has been designed in such a way that coordinates with the dark colored navigation. The
header is the first element of impression in the website and I believe that the headers in the website have stood up
to that impression. The header and the footer look absolutely stunning as a parallax effect has been applied to it.
7
The website user interface is remarkable
Grade out of 8
The website’s is very user friendly as I have made the accessibility and navigation across the website really easy to
understand. I have the fixed navigation bar located in the top of the website. Due to the navigation bar on the top of
the website the client can easily explore through the entire website as most of the links are located in the top of the
website. Then I have parallax effect in my website which is beautiful way of scrolling through the website. The
effect creates a certain appeal as the user scrolls through the website.
8
The layout is well organized
Grade out of 8
My website is certainly delightful to look at because of a factor which is that my website is really well organized in
terms of its structure and layout. I have organized my website in the pattern of having the navigation bar on the top
of each of the website that doesn’t really interfere with the other elements in the website. Secondly, I organized the
content in the center of the website and for certain sections I had 2 different divisions for the left and right side of
the website. I maintained an appropriate distance in the lines of the website to make sure that the content doesn’t
get overfilled or blocked and is easy to read. However, there is a certain aspect in which I believe why the website
can not fall under the highest band. The aspect is concerning the margins in the learning styles section on the
webpages, the margins from the left and right-hand side are not of the same dimensions. Secondly the only way of
accessing the introduction page is through the homepage which is a problem as the client could face a problem in
understanding the layout and flow of the website.
6
The content provided is relevant and the language used is excellent
Grade out of 8
The content was an important aspect of website and a major contributing factor for proposing the design scenario
of developing a solution on learning styles. From the feedback that I got from my client they found the content has
provided relevant information and justified the importance of learning styles. My client found the content to be
engaging and interactive as it addresses to them directly and they found the language simple to comprehend.
Students appreciated the efforts put in by me in the development of the content of my website and that is a
contributing factor to the achievement of the highest band in this strand
The website has a variety in the features (Quiz and animation)
7
In my website, I have provided the client a variety in features as I have developed. quiz and an animation that
assisted me in my solution. These features contributed in improving the interaction made with my client as the quiz
interacts with the client in the form of asking them questions about their behavior, choices and personality. I made
a feedback form as an additional feature that would help me evaluating the success of my solution along with the
benefit of receiving suggestions for further improvements for my solution.
8
The website has been excellently developed with the usage of complex languages
Grade out of 8
The website created has used a total of 5 languages in its development and due to which I have successfully achieved
my goal of making an excellently developed website. Thea application of HTML coding provided that backbone to
my website and CSS contributed in provided the structure and appeal of my website. Secondly with the help of
JavaScript I was able to add another aesthetical appeal which was the shrinking navigation bar that made the website
look smoother. With the help of action script, I created a well develop animation that used both motion tween and
alpha color effect using the language action script. Iframe worked successfully while I embedded the quiz and
feedback form into the website.
8
Grade out of 8
page 38
Evaluating the strengths, weaknesses and improvements
Strengths
Aesthetics of my website: The aesthetics of my website were
an important aspect for me as it was a contributing factor to the
reason behind me developing a website on learning styles.
After receiving the feedback from my target audience, I can
conclude that they are certainly satisfied with the portrayal of
an attractive resource on learning styles. The backgrounds used
in my websites were a major contributing factor as they helped
me in portraying a common theme among the website.
Secondly, the color combinations went really well in my
website as I have chosen an appealing set of shades for my
font and components such as the buttons and the navigation
bar.
Weaknesses
Font: The fonts that I had chosen for the headings were
‘Apathy’ and ‘Playlist script’ which certainly coordinate
well with each other but in terms of their sizes they
appeared to be indubitably vague. An example of the
third section of my website’s homepage, that is the
importance of learning styles section, the first heading
was fairly smaller as compared to the second one.
Moving on I believe that the font that I used for the
content and button, ‘Open sans didn’t seem to
coordinate among the other elements of the website as
this font was far too simple and basic as compared to
the headings.
The user interface: The user interface of my website was
really easy to understand and use as well. I got this result from
surveying my client and then receiving a positive response
from there. My website’s interface had a fixed navigation bar
which prevented the need for the client to scroll back up to the
top to access the link to the other webpages. in the navigation
bar, I had the main pages which were the homepage, quiz,
animation, importance and a drop-down learning styles.
Secondly, I had buttons that redirected the client to other
webpages.
Animation: I found my animation to be basic and
simple as I didn’t have a lot of features or effects into
my animation. Undoubtedly my animation did serve its
purpose of explaining the ways of retention as it
delivers a sufficient amount of content. In my
animation, I used really unpretentious effects and there
were a handful of ways I could have added more effects
and details into my animation for my website.
Improvements
I believe that have created an excellent website but however I found out that there are a few additional improvements that
could have been made to the solution from the testing done and personal opinion. First as mentioned, there could have
been a font style selected that would have coordinated more with the theme of the website. Secondly, I could have had a
plot or a storyline to my animation that would have helped the client understand in a better way. The usage of more
effects and buttons would have made my animation more interactive as the client would engage completely into the
animation. Secondly, I could have added a message box after the submission of the feedback form in order for the client
to confirm that their feedback has been successfully uploaded This change would eventually improve the user interface as
the client can access all 9 webpages from the navigation bar. A minor change that could have been made in the quiz
would be to have the functionality of taking the test again if the client feels that they might have answered a question
wrong or are not satisfied with their result. From the expert appraisal done by my project by two design teachers, both of
them suggested that I could have added more features in my website to help a student identify their learning style. At last
a final improvement that I think could have been done if I got the chance to work on the product again is that I could have
shifted the importance link and homepage link (which originally wasn’t there in the navigation bar) in the navigation bar
to the dropdown of learning styles. Instead of having a separate link for the homepage in the navigation bar I could have
made the logo as the homepage link so if the client clicks on it they would be redirected to the homepage.
Suggestions for font:
Possible plot
for the
animation
Indie Flower
Rancho
page 39
Impact of solution
Impact on the target audience: The solution that I have created would be extremely helpful for my target audience,
students ranging from the age of fifteen years old to college students. As a result, from my research from Criterion A, I found
out the current existing solutions lacked in terms of the aesthetics, features and interaction with the client. After analyzing
the feedback and evaluation process I can say that I have developed a solution that pleases all of the specifications and the
desired features that pre-existing solutions failed to deliver. The solution that I developed was really vibrant and colorful
which is undoubtedly an important aspect for my targeted audience.
•
Excellent aesthetics: Unattractive aesthetics was an inadequacy in the existing solutions on learning styles. From
the review that I received form my targeted audience I can say that my website has overcome the incompetence of
unpleasing aesthetics. From the results of my evaluation I got an excellent result of 90 percent of my audience
appreciating the aesthetics of my website
•
interaction with the target audience: I have directly interacted with the target audience by keeping my writing
style as inclusive and engaged with the client directly by addressing them directly and speaking in a second-person
tone. The client found my work to be interactive due to the connection established by me as they read the
information and concept proposed about the importance of learning styles.
•
Variety in features: The solution developed by me on learning styles has a variety in the feature that include a quiz,
an animation and a feedback form. All three of the features contribute in making my website interactive and having a
closed loop system.
My website would act a resource for students to understand the concept of learning styles and benefit them in being
productive while studying and perform better in their examinations. Through my website, students would be introduced to
the ideology of learning styles and what exactly are they and also understand the importance of learning styles. The quiz and
animation were the interactive features of my website and I believe that it was an admirable idea to deliver information in
different ways as the client has should have a variety to choose from. The website is efficient as it doesn’t contain any
elements that require a high loading time.
I conducted a survey among 25 students ranging from grade 10 onwards to college and I have received an exceptional review
from my target audience. They all loved the aesthetics of my website, which means that the choice of design for my website
was correct as my solution was considered to be attractive in the eyes of my target audience. My target audience found my
website really user friendly as they found it was certainly easy to explore across my website and navigate to the other
webpages. My target audience appreciated the content of my website and found it really helpful. A majority of the students I
surveyed found the concept of learning important and understood how can they work upon their own learning individually.
Impact of solution on Fairness and development: The global context of fairness and development refers to the
consequences of our actions as a human. Each and every effort put into a certain task can provide in the development of an
individual. We as humans, understand the concept of resources and value its importance which is why I took the initiative of
developing a resource for students to help them in the development of their studies that is a considerably important aspect of
their life.
In the development of my solution I have deeply engaged with the global context of Fairness and development to understand
the requirement of a solution on learning styles. I realized the importance of learning styles and what role can it play in the
life of a student. There a huge variety in ways through which a student can learn and that’s why I chose to propose my design
scenario as developing a solution for students aged 15 and above. A solution on learning styles helped my client in
developing a conceptual understanding and get a variety in perspectives from which they can choose to learn. Learning styles
create a major impact on the way a student can be productive while working, as each style has its own ways of retention.
page 40
Bibliography
Aima, Archana. “Expert Appraisal for Evaluating website on learning styles”. 21 Jan 2019.
Berry. “5 Best Web Development Software for Web Developer of 2018.” Prototype Faster, Smarter and Easier with
Mockplus!, Mockplus Team, 12 Sept. 2018, www.mockplus.com/blog/post/best-web-developmentsoftware.Accessed 19 Dec. 2018
“College Students on the Web.” Nielsen Norman Group, www.nngroup.com/articles/college-students-on-the-web/.
Accessed 22 Dec 2018
Ezekiel, Rebecca. “What's Your Personal Learning Style?” Studying Style, www.studyingstyle.com/. Accessed 22 Dec 2018.
“Khan Academy.” Khan Academy, Khan Academy, https://www.khanacademy.org//. Accessed 30 Dec 2018.
Kirst, Michael “The College Puzzle A College Success Blog by Dr. Michael W. Kirst.” The College Puzzle,
collegepuzzle.stanford.edu/knowing-your-learning-style-can-help-college-success/. Accessed 20 Dec 2018.
“Learning StylesUnderstanding Learning Preferences.” Develop Your Learning Skills from MindTools.com,
www.mindtools.com/mnemlsty.html. Accessed 30 Dec. 2018.
Murthy, Neeraj, “Expert Appraisal for Evaluating website on learning styles “22 Jan 2019.
Orlin, Ben. “When Memorization Gets in the Way of Learning.” The Atlantic, Atlantic Media Company, 12 June 2018,
www.theatlantic.com/education/archive/2013/09/when-memorization-gets-in-the-way-of-learning/279425/. Accessed
20 Nov. 2018.
Othman, Norasmah, and Mohd Hasril Amiruddin. Different Perspectives of Learning Styles from VARK Model . pp. 1–9,
Different Perspectives of Learning Styles from VARK Model . Accessed 21 Nov. 2018.
Patty, et al. “Why Are Learning Styles Important? How Students Learn Differently.” Educational Connections, 29 Mar.
2019, www.ectutoring.com/resources/articles/learning-style-important. Accessed 23 Nov.2018.
Shrivastav, Pooja. “Learnings Styles of the Students.” 18 Nov. 2018.
page 41
SouzaDominic, Dominic de. “What Makes A Website Visually Appealing?” Enable, enablewebdesign.com/makes-websitevisually-appealing/. Accessed 4 Jan. 2019.
Thalheimer, Will. “People Remember 10%, 20%...Oh Really?” Work, Will Thalheimer Https://Www.worklearning.com/WpContent/Uploads/2017/10/Wlr-Logo-Color-FLATline-300x67.Png, 5 Nov. 2017,
www.worklearning.com/2006/05/01/people_remember/. Accessed 26 Nov. 2019.
“The 8 Learning Styles: Which One Works for You?” Visual Learning Center by Visme, visme.co/blog/8-learning-styles/.
Accessed 25 Dec 2018.
VAK Test, www2.amk.fi/mater/kauppa_ja_talous/demand_forecasting/vak.php.Accessed 2 Dec 2018.
page 42