Audience

The students who will be participating in this unit are mainly freshmen. They get two years
to work on one math curriculum. This unit is within an integrated program that looks at
several mathematical strands within the common core standards. The unit is teaching
statisticsandhowtheyareappliedinrealworldscenarios.

GraphicJustification

I created 10 different graphics for my website. Four of my graphics come from the weekly
assignments given throughout this course. Here is my reasons for why each graphic will
work in helping the students understand and learn this statistical unit. I have put the
graphics in order as they appear on the web page and wrote the name of the link in
parenthesisifthetitleofthegraphicisdifferentfromthetitleofthelinkonmywebsite.

A.Banner

The banner is full of colors and numbers in the background. The font that is used is easy
and meant for computer instruction and presentations (Lohr, 2008. p. 221). The colors
bringinterestintothelessonsoitdoesnotseemsostale(Lohr,2008,p.266).

B.TableofContents(Home)

This unit is broken up into two different lessons. Within each lesson are investigations.
The investigations are created to take one or two class periods to work on. My students
may take 3 or 4, depending on the depth of the investigation and comprehension of my
students. The first lesson has 2 investigations while the second lesson has five. I chunked
my text according to lessons (Lohr, 2008, p.132). The bulleted data states the
investigation names while the blue data underneath the names are the concepts that are
taught within the investigation. I included a picture of pennies since stacking pennies is the
first activity the students participate in in order to create data to be graphed. The pennies
direct your eyes to the text within the graph and not away from it (Lohr, 2008, p.149). I also
tried to stay with the same coloring scheme that matches the banner that will be used
throughout this unit. My graphic will be set within other text on the page explaining more
abouttheunitandexplainingtheintroductionusingpennies.

Piatt1

C.DotPlotsofGirl/BoyShoeSize

This graphic was made outside of the weekly assignments. The students needed a visual
of what a dot plot actually looks like. I also wanted to show them dot plots that have
different shapes as we get into the shapes of graphs. I used depth on the dots to bring
them some personality so the graphs do not look as flat (Lohr, 2008, p. 272). I also
included a lot of white space to keep the graphs from being too cluttered and easy to read
(Lohr,2008,p.275).

D.Skewed(CenterMeasurement)

The skewed graphic shows the three main shapes of graphs that are studied throughout
this unit. I titled each graph with large letters using san serif font to make it easy to read
(Lohr, 2008, p. 221). I also wanted to add color to the graphs so it is visually pleasant to
look at and brings attention to the graph. I chose colors that are secondary colors, and the
samedistanceapartonthecolorwheel(Morton,2014).

E.BalancingBlocks(CenterMeasurement)

This is another graphic that was designed outside of weekly assignments. One of the
activities that is done for this investigation is having students build a histogram out of
blocks and see if they can balance the blocks on a ruler. I wanted to give an example of
this in a visual graphic. Each block is a different color to complement the banner that is
used. I wanted to use a real finger that points out so it is easy to tell what the person is
doing with the blocks. There is good contrast used from the hand and the blocks, from a
real hand versus made up blocks. I also wanted to draw attention to the blocks, the figure,
whilethehandistheground(Lohr,2008,p.102).

F.Percentile

This graphic I created would be used as a review tactic for students when studying
percentages and percentiles. Using graphics to help review concepts increases retention
by 38% (Parkinson, 2012). I used a simple design, which is important (Lohr, 2008, p. 248).
The simplicity of the design helps with the effectiveness and the aesthetic perspectives.
This is a symbol that is used often and easily recognizable. Using the line of the
percentage sign to be the dividing factor, separating the meanings of the two words also is
helpful for students to add to the design on their own with notes they take for the course.
Usingthelineasaseparatorwasfoundonp.250(Lohr,2008).
G.BoxPlotsforStudentGrades
Piatt2

It was important to include color for this instructional graphic because it would be boring
without color. The color helps to keep the attention (Lohr, 2008, p.266). I used cool, dark,
analogous colors that go well together and keep the order of which graph goes with which
set of data. The graphs are the most important part of the graphic, the figure, that is why it
is bolder and I included gradient coloring. The data and grid are not as strongly seen
because it is part of the ground. It is a good reference, but not meant to be the center of
importance(Lohr,2008,p.108).

H.GraphReview(Outliers)

This graphic will be helpful as it gives a visual example, a definition, and the characteristics
for each kind of graph studied within the unit. Each kind of graph is grouped together on a
horizontal line, using the same color of font. I have aligned each kind of information in a
column to make for easy reading (Lohr, 2008, p.201). Ive also used a bolder font for the
name of the graph to show some contrast from the name and the definition (Lohr, 2008, p.
200). I wanted more than just a white background but wanted it to be mild. I decided on
graph paper since it sticks with the theme of graphing, yet does not pull away from the
graphicsandtext.

I.StandardDeviation

This graphic was made to help students through the steps of finding the standard deviation
manually. I used a blue back shadow around the boxes that were important to notice, the
figures (Lohr, 2008, p. 108). I also used different monochromatic colors of blue to show
hierarchy in the process of finding the standard deviation (Lorh, 2008 p.151). I also used a
lot of whitespace to separate the different boxes and to keep it clean and easy to
read(Lohr,2008,p.274).

J.MovedGraphs(Transformation)

This simple graph is showing two histograms where shape does not change at all,
however, it has moved on the xaxis. I wanted to use color to show the difference of the two
graphs, how it moved (Lohr, 2008, p. 266). I used white space to keep it simple, clean and
easy to read. I also used the same font as I have throughout my graphs for unity (Lohr,
2008.p.226).

K.StretchedGraphs(Transformation)
Piatt3

This graphic is very similar and was created for the same reasons as the moved graphs,
just different math done to the data set. I used primary colors, and the same red and blue
from the previous graphic to create gestalt within the instructional page, even though their
are two different graphics (Lohr, 2008. p. 158). I kept everything about the graphs the
same except what happens when adding/multiplying a constant to the data set. Ive used
the same font and colors and axises in both graphics. When picking a new color for the
middlegraph,Ichoseadarkyellowtostaywiththeprimarycolortheme(Morton,2014).

DesignProcess

Ireallylikethecontrastofdarkandlightcolors.Iwantedthebackgroundofmy
websitetobeblackwithallmywritingtobewithinawhitebackground.Thiscontrastdraws
theeyesintothenarrowboxandmakesthewidthofthescreensmaller.Nothavingtoread
theentirewidthofthescreenismucheasiertofollow.
WhenlookingforabannerIreallylikedallthedifferentcolorsandnumbers.Itwas
busyandcolorful.WithaloudbackgroundImadethewordswithinthebannersimple,easy
toreadandglowingsoitpopsoutofthebusinessofthecolorsanddesign.
ForeachpageIcreatedwithintheunit,Ikeptthesamebannerandlinks,alongwith
thesamelinksatthebottomofthepage.Itisimportanttokeepeachpagelookingthe
samesothereaderknowstheyareinthesamewebsite.Evenindesigningeachgraphic,I
triedtokeepthecolorsfromthebanner,oratleastcolorsthatcomplementedthebanner
soeachpagehadunity.
AllofmywebpagesandgraphicswerecreatedinDreamweaverandFireworks.I
usedthesameCSSdocumentforallofmypageswhichalsohelpedinkeepingtheunity
formywebpages.
Throughoutthecourse,eachweeksreadingwouldguidemeinwhatIwould
produceasagraphic.Ididnotgoinorderofmymathunit,butlookedthroughouttheunit
todecidewhatwouldbethebestgraphicforthetopicoftheweek.AsIvebeencreating
thefinalprojectandfillingintheholesbycreatingthepagesthatsurroundmygraphics,Ive
createdsomemoresimplegraphicsthathelpinthelearningprocessandgivevisualsto
mystudents.
Piatt4

Resources

Coreplusmathematicsproject.(2nded.).(2014).McGrawHilleducation.Retrievedby:
http://wmich.edu/cpmp/
Friedman,V.(2008).Tableofcontents:creativeexamples.SmashingMagazine.Retrievedby:
http://www.smashingmagazine.com/2008/07/07/tableofcontentscreativeandbeautifulex
amples/
Lohr,L.(2008).Creatinggraphicsforlearningandperformance:Lessonsinvisualliteracy.Ohio:
PearsonMerrillPrenticeHall.
Morton,J.L.(2014).Basiccolortheory.Retrievedby:
http://www.colormatters.com/coloranddesign/basiccolortheory
Parkinson,M.(2012).Educationandtraininggraphics.Retrievedfrom
http://www.billiondollargraphics.com/education.html
Stapel,E.(2014).Boxandwhiskerplots:quartiles,boxes,andwhiskers.PurpleMath:Retrieved
by:http://www.purplemath.com/modules/boxwhisk.htm
StrategicEducationResearchPartnership.(2014).Dotplots,histograms,boxplots,barcharts.
Whichonetouse?Retrievedby:
http://math.serpmedia.org/diagnostic_teaching/mathematicsq/dotplotsboxplotsandhisto
grams/

Piatt5