web design principles & theory

7/23/2019 Web Design Principles & Theory

1/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY 1

Web Design Princi!es and T"e#r$

ETPT %&1'

(e!issa )ac#bs

Dece*ber +, &'1-


2/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY &

Web Design Princi!es and T"e#r$

The purpose of my website, Linear Functions in Childrens Literature, is to

get teachers to embrace childrens literature as a medium to teach functions.

Research says that using literature motivates students and promotes a

deeper understanding of functions (illings!. "s the "lgebra Coach for Toledo

#ublic $chools, it is personally important that the teachers %m coaching give

their students as many opportunities to solve problems in conte&t as

possible. The pieces of literature % present on my site are familiar and

comfortable to middle school students' they are a safe place to e&plore a

concept that can feel abstract. The teachers are my target audience, and

my goal is for them to not only understand the material on my site, but to

apply it in their classrooms. For this to occur, my website needs to be

. There are so many words that can )ll that blan*. %m going to )ll it

with two+ the best. "s a novice web designer trying to do my best, % used

ardners Theory of -ultiple %ntelligences, Cognitive Theory of -ultimedia,

and Cognitive Load Theory to help me create a website that will help me

achieve my goal.

(u!.i!e In.e!!igences T"e#r$

/T"e idea #0 (u!.i!e In.e!!igences c#*es #u. #0 s$c"#!#g$ I.2s a ."e#r$ ."a. 3as de4e!#ed

.# d#cu*en. ."e 0ac. ."a. "u*an beings "a4e 4er$ di00eren. 5inds #0 in.e!!ec.ua! s.reng."s and

."a. ."ese s.reng."s are 4er$, 4er$ i*#r.an. in "#3 5ids !earn and "#3 e#!e reresen. ."ings in


3/12


."eir *inds, and ."en "#3 e#!e use ."e* in #rder .# s"#3 3"a. i. is ."a. ."e$24e unders.##d7

8Gardner, 199%

T# ge. .eac"ers .# unders.and "#3 .# use c"i!dren2s !i.era.ure 3"en .eac"ing 0unc.i#ns 8and .#

a!$ ."a. 5n#3!edge, I need .# aea! .# ."eir 4aried in.e!!igences H#3ard Gardner iden.i0ied

eac" #0 ."e eig". in.e!!igences ."a. I 0#cused #n in *$ 3ebsi.e

1 Pe#!e 3i." ;isua!


4/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY

."e c"ange be.3een #in.s and *a5ing #bser4a.i#ns #n ."e c"anges in re!a.i#n .# ."eir

!#ca.i#n #n ."e c##rdina.e !ane

(usica! !earners arecia.e and ."ri4e 3"en r"$."*ic e!e*en.s are in4#!4ed T# aea!

.# ."e .eac"ers 4isi.ing *$ si.e 3i." (usica! In.e!!igence, I inc!uded a C"irbi. audi# c!i

#0 *$se!0, reading T"e Cr#3 and ."e Pi.c"er T"e$ 3i!! a!s# arecia.e ."e audi# #0 ."e

s.#ries being read #n Y#uTube, e4en ."#ug" ."ere isn2. *usic in4#!4ed T"e r"$."*ic

e!e*en.s #0 ."e s.#ries, a!#ng 3i." ."e .#ne and cadence #0 ."e 4#ices reading, 3i!! be

arecia.ed and en#$ed

In.erers#na! !earners !earn bes. 3"en in.erac.ing 3i." #."ers #r ."ese .eac"ers, I "a4e

inc!uded ."e ##r.uni.$ 0#r ."e* .# rec#**end !i.era.ure ages #n G##g!e T"e$ can

a!s# in an$ #0 ."e s.#r$ ages #n Pin.eres. as 3e!! as s"are ."e* #n aceb##5 T"ere is a

s#cia! *edia bar in ."e 0##.er ."a. 3i!! .a5e ."e* .# 4ari#us Na.i#na! C#unci! #0

(a."e*a.ics Teac"ers s#cia! ne.3#r5ing si.es I "a4e a!s# inc!uded a !in5 .# B##*Wri.er

as a 3a$ 0#r .eac"ers and s.uden.s .# in.erac.i4e!$ crea.e ."eir #3n s.#r$ ar#und a

0unc.i#n T"is can be 0#und #n *$ C!assr##* A!ica.i#ns age

T"#se 3"# !earn bes. ."r#ug" 0ee!ings and 4a!ues "a4e a "ig" In.raers#na! In.e!!igence

Pe#!e 3i." ."is in.e!!igence 3i!! en#$ *ind *aing #n Bubb!us T"e$ 3i!! a!s# en#$

#4era!! *a."e*a.ics in ."e 3ebsi.e, as a!! !inear 0unc.i#ns "a4e a a..ern 8s!#e, a!s#

5n#3n as uni. ra.e #r ra.e #0 c"ange T"ese e#!e are #0.en dee ."in5ers and 3i!! be

dra3n .# ."e *a."e*a.ica! ."in5ing in4#!4ed in ic5ing aar. c"i!dren2s !i.era.ure and

using i. as a c#n.e>. .# .eac" 0unc.i#na! re!a.i#ns"is

;erba!


5/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY -

A!ica.i#ns age, ."ere are !in5s 0#r a!ica.i#ns ."a. in4#!4e 3ri.ing, inc!uding Ti5a.#5,

B##*Wri.er, and S.#r$bird I a!s# crea.ed a 0unc.i#n .e*!a.e 8insired b$ NCT( .#

sca00#!d ."e 3ri.ing necessar$ .# iden.i0$ a 0unc.i#n in !i.era.ure

Pe#!e 3i." Na.ura!is.ic In.e!!igence e>ce! 3"en in0#r*a.i#n is #rgani@ed in.# ca.eg#ries

A!! #0 *$ !i.era.ure is under #ne *enu, and a!! #0 ."e in0#r*a.i#n #n eac" age is

resen.ed in ."e sa*e 3a$

I. aears as ."#ug" *$ en.ire si.e 3as crea.ed 0#r ."#se 3"# #ssess a s.r#ng

L#gica!.,audi#,s.i!!

i*ages, ani*a.i#n, 4ide#, #r in.erac.i4ec#n.en. 0#r*s7 8Wi5iedia (#re si*!$, *u!.i*edia

*a5es !i0e *#re in.eres.ing T"is is esecia!!$ .rue i0 ."e c#n.en. #n $#ur 3ebsi.e isn2. 0ri4#!#us

I0 ."e ur#se #0 $#ur si.e is .# c#n4e$ in0#r*a.i#n #r .eac" s#*e#ne s#*e."ing, ."en ."e

C#gni.i4e T"e#r$ #0 (u!.i*edia Learning 8CT(( 3i!! "e! $#u reac" $#ur g#a!s because $#u
https://en.wikipedia.org/wiki/Content_(media_and_publishing)https://en.wikipedia.org/wiki/Content_(media_and_publishing)https://en.wikipedia.org/wiki/Content_formathttps://en.wikipedia.org/wiki/Content_formathttps://en.wikipedia.org/wiki/Writinghttps://en.wikipedia.org/wiki/Writinghttps://en.wikipedia.org/wiki/Soundhttps://en.wikipedia.org/wiki/Soundhttps://en.wikipedia.org/wiki/Soundhttps://en.wikipedia.org/wiki/Imagehttps://en.wikipedia.org/wiki/Imagehttps://en.wikipedia.org/wiki/Animationhttps://en.wikipedia.org/wiki/Footagehttps://en.wikipedia.org/wiki/Interactivehttps://en.wikipedia.org/wiki/Interactivehttps://en.wikipedia.org/wiki/Content_formathttps://en.wikipedia.org/wiki/Writinghttps://en.wikipedia.org/wiki/Soundhttps://en.wikipedia.org/wiki/Imagehttps://en.wikipedia.org/wiki/Imagehttps://en.wikipedia.org/wiki/Animationhttps://en.wikipedia.org/wiki/Footagehttps://en.wikipedia.org/wiki/Interactivehttps://en.wikipedia.org/wiki/Content_(media_and_publishing)


6/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY +

3i!! be .a5ing ad4an.age #0 eac" user2s 0u!! caaci.$ .# r#cess in0#r*a.i#n CT(( s.a.es ."a.

3#rds and gra"ics are *#re c#nduci4e .# !earning, ra."er ."an us. gra"ics #r .e>. a!#ne

W"i!e crea.ing *$ 3ebsi.e, I *ain.ained a ba!ance be.3een b#." 3"i!e ensuring I didn2.

crea.e s.i*u!a.i#n #4er!#ad 0#r *$ users T# us.i0$ ."e ba!ance I *ain.ained, c#nsider se4era! #0

."e rinci!es e*bedded in CT(( 8C#gni.i4e T"e#r$ #0 (u!.i*edia, &'1-

1 (u!.i*edia Princi!e:Deeper learning is attained through the use of words and pictures

than from the use of words alone A!! #0 ."e ages #n *$ 3ebsi.e c#*bine ic.ures and

3#rds& Sa.ia! C#n.igui.$ Princi!e:Deeper learning is attained when words and pictures are

presented spatially in close proximity. The words and pictures must be in working

memory at the same time to facilitate development of schema. I ."#ug".0u!!$ !anned ."e

!a$#u. #0 eac" age s# ."a. ."e 3#rds and ic.ures ."a. re!a.e .# eac" #."er are 4isib!e

.#ge."er6 Te*#ra! C#n.igui.$ Princi!e:Deeper learning is attained when audio and visual are

presented temporally, in close proximity. T"ere are 0#ur ages 3"ere I u.i!i@e audi# and

4isua! On eac" #0 ."ese ages, b#." e!e*en.s are in c!#se r#>i*i.$

C#"erence Princi!e: Type 1: Deeper learning is attained when irrelevant details are

removed from the presentation. Type 2: Deeper learning is attained when irrelevant

sounds and music are removed from the presentation. Type : Deeper learning is

attained when irrelevant words are removed from the presentation. T"ere is n#. a sing!e

age in *$ 3ebsi.e ."a. c#n.ains irre!e4an. de.ai!s E4er$ 3#rd, e4er$ gra"ic, and e4er$

!in5 is 0#r a seci0ic ur#se T"ere are n# e>.rane#us gra"ics #r 3#rds I "a4e n#

s#und e00ec.s #r *usic ."a. !a$s #n *$ 3ebsi.e T"e en.ire 3ebsi.e is c!ean and si*!e


7/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY %

- (#da!i.$ Princi!e:Deeper learning is attained when words are presented as narration

than as onscreen text. I c"#se .# e*bed ."ree narra.ed s.#ries #n *$ 3ebsi.e N#ne #0

."ese inc!ude #nscreen .ranscri.s #0 ."e narra.i#n

+ Redundanc$ Princi!e:Deeper learning is attained when words are presented as

narration than as narration and onscreen text. Again, ."e narra.i#n I e*bedded s.ands

a!#ne

% Pers#[email protected]#n Princi!e:Deeper learning is attained when words are presented in a

conversational manner rather than in a more formal style. T"ere are .3# di00eren. b!#c5s

#0 .e>. #n an$ gi4en age One b!#c5 in4#!4es ."e iden.i0ied 0unc.i#n and de0ines ."e

4ariab!es T"is !anguage is *#re 0#r*a!, as i. is ."e *a."e*a.ics ."a. is e*bedded 3i."in

."e !i.era.ure T"e #."er b!#c5s #0 .e>. #n eac" age are ."e s"#r. su**aries #0 ."e

b##5s T"ese are 3ri..en as I 3#u!d resen. ."e* in a casua! c#n4ersa.i#n

F In.erac.i4i.$ Princi!e:Deeper learning is attained when students have control of the

pace of the lesson. T"e user is in c#n.r#! #0 e4er$ *#4e ."e$ *a5e 3"i!e e>!#ring *$

si.e T"e$ c"##se 3"ic" age .# g# .# and *us. ad4ance .# an$ age a. ."eir !eisure T"e

C"irbi. and ."e Y#uTube 4ide#s are ur#se!$ n#. se. .# au.#!a$ I 3an.ed *$ users .#

"a4e 0u!! c#n.r#!

9 Signa!ing Princi!e:Deeper learning is attained when students receive signals that

inform them of key steps T"e essen.ia! in0#r*a.i#n is "ig"!ig".ed 3i." .e>. b!#c5ing and

."e s.ra.egic use #0 3"i.esace T"is inc!udes ."e iden.i0ica.i#n #0 eac" 0unc.i#n and ."e

de0ini.i#n #0 ."e 4ariab!es

1' Indi4idua! Di00erences Princi!e:Deeper learning is attained when these design

principles are applied to low knowledge learners than to high knowledge learners. I

ne4er assu*e ."a. .eac"ers unders.and ."e c#n.en. ."e$ are .eac"ing unc.i#ns are

abs.rac. 0#r s.uden.s I 5e. ."is in *ind as I designed *$ 3ebsi.e, e4en ."#ug" ."e

.eac"ers are *$ .arge. audience I si*!i0ied e4er$."ing and assessed ."e in0#r*a.i#n b$


8/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY F

"a4ing *$ #3n *idd!esc"##!aged c"i!dren 4isi. ."e si.e and cri.i=ue ."e in0#r*a.i#n

based #n ."eir #3n 5n#3!edgeC#gni.i4e L#ad T"e#r$

C#gni.i4e L#ad T"e#r$ 8CLT re0ers .# ."e s.a.e #0 *en.a!!$ a..ending .# #ne #r *#re

.as5s a!#ng 3i." ."e .as5 a. "and In #."er 3#rds, i.2s ."e .#.a! a*#un. #0 *en.a! e00#r. being

used in ."e 3#r5ing *e*#r$ CLT "as ."ree assu*.i#ns T"e Ac.i4e Pr#cessing

Assu*.i#n s.a.es ."a. ."e !earner is ac.i4e!$ engaged in ."e r#cess #0 5n#3!edge

c#ns.ruc.i#n T"e Dua! C"anne! Assu*.i#n sa$s ."a. in0#r*a.i#n r#cessing .a5es !ace in

.3# seara.e c"anne!s: audi.#r$


9/12


a!read$ iden.i0ied T"e 4ariab!es are a!s# de0ined Eac" age "as a ic.ure #0 ."e c#4er and a

s"#r. su**ar$ I "a4e e4en inc!uded a 0unc.i#n .e*!a.e ."a. .eac"ers can use 0#r ."eir #3n

ers#na! e>!#ra.i#n and unders.anding Teac"ers can a!s# rin. ."is PD 0i!e and *a5e

c#ies 0#r ."eir s.uden.s T"e$ "a4e a!*#s. n#."ing .# d# in #rder .# i*!e*en. ."is s.ra.eg$

i**edia.e!$

Web Design Princi!es

sabi!i.$ and ."e u.i!i.$, n#. ."e 4isua! design, de.er*ine ."e success #r 0ai!ure #0 a 3eb

si.e Since ."e 4isi.#r #0 ."e age is ."e #n!$ ers#n 3"# c!ic5s ."e *#use and ."ere0#re

decides e4er$."ing, usercen.ric design "as bec#*e a s.andard ar#ac" 0#r success0u! and

r#0i.#rien.ed 3eb design A0.er a!!, i0 users can2. use a 0ea.ure, i. *ig". as 3e!! n#. e>is.7

8ried*an

In addi.i#n .# 3"a. ried*an re0aces "er ar.ic!e, 1! "rinciples for #ffective $eb Design,

3eb design is, si*!$, 0un A ers#n in #n!$ !i*i.ed b$ ."eir i*agina.i#n T"a. and ."e !i*i.s

#0 ."e 3eb design !a.0#r* ."e$ are using #r e>a*!e, I 3as g#ing .# inc!ude 0i4e #."er

.$es #0 0unc.i#ns #n *$ 3ebsi.e n0#r.una.e!$, Wi> 3#u!dn2. su#r. ."e c#*!e>

e>#nen.s I needed .# en.er in.# .e>. I "ad .# scra *$ #rigina! idea and *#4e in a s!ig".!$

di00eren. direc.i#n I s.i!! "ad c#*!e.e crea.i4e 0reed#* in *$ design Crea.i4i.$ d#esn2.

e=ua! =ua!i.$ T# us.i0$ *$ resec., 5n#3!edge, and a!ica.i#n #0 g##d 3eb design

rinci!es, c#nsider ried*an2s 1! "rinciples for #ffective $eb Design8&''F

1 Don%t make users think. I ri#ri.i@ed si*!ici.$ #n e4er$ age #0 *$ 3ebsi.e ?n#3ing

."a. ."in5ing 3#u!d ac.ua!!$ crea.e a nega.i4e e>erience 0#r *$ audience 8.eac"ers

"e!ed *e .# 5ee 0#cused #n re*aining n#nc#*!e>


10/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY 1'

2. Don%t s&uander users% patience T"is is a g##d ru!e 0#r en.ering in.# a c#n4ersa.i#n 3i."

an$#ne N# #ne 3an.s .# "a4e ."eir .i*e 3as.ed I *ade sure *$ si.e 3#u!d be an

e00icien. res#urce 0#r .eac"ers b$ *a5ing i. eas$ .# na4iga.e and a4#iding e>.rane#us

gra"ics and in0#r*a.i#n

. 'anage to focus users% attention. I u.i!i@ed c#!#r b!#c5ing .# crea.e an in.en.i#na! e$e

0!#3 #n eac" age T"e in0#r*a.i#n is eas$ .# 0ind and direc.

(. )trive for feature exposure. An$ .e>., ic#n, #r "#.# ."a. is a !in5 s"#3s 3"en ."e

"#4ering *#use bec#*es a "and- 'ake use of effective writing On eac" age, I "a4e used s"#r. and c#ncise "rases and

*$ !anguage is !ain 8c#nsidering *$ audience E4en i0 *$ users d#n2. read ."e !i..!e

.e>. I "a4e, I used a scannab!e !a$#u. s# ."a. *$ #in. can s.i!! ge. acr#ss in a =uic5 and

si*!e *anner

*. )trive for simplicity. I *ade sure *$ *enu 3as c!ear and eas$ .# read T"e na4iga.i#n is

eas$ and ."e !a$#u.s are si*!e T"ere are n# c#*!ica.ed s.es and i. is i*#ssib!e .#

ge. !#s. #n *$ si.e

% Don%t be afraid of the whitespace. I used 3"i.esace s.ra.egica!!$ .# "ig"!ig".

in0#r*a.i#n 3"i!e reducing c#gni.i4e !#ad I a!s# crea.ed a "ierarc"$ #0 in0#r*a.i#n

."r#ug" *$ use #0 3"i.esace ."a. dra3s *$ users .# seci0ic i.e*s in an in.en.i#na!

#rder


11/12


#0 *$ .i*e 3as sen. in a c$c!e #0 sa4e


12/12

Running Head: WEB DESIGN PRINCIPLES AND THEORY 1&

Re0erences

Bi!!ings, E, Bec5*ann, C 8&''- C"i!drenJs !i.era.ure: a *#.i4a.ing c#n.e>. .# e>!#re

0unc.i#ns'athematics Teaching in the 'iddle )chool,1!89, %'%F Re.rie4ed

Oc.#ber +, &'1-, 0r#* 333nc.*#rg

C#gni.i4e T"e#r$ #0 (u!.i*edia 8nd Re.rie4ed Se.e*ber &F, &'1-, 0r#*

"..:

web design principles & theory

Documents