Course Name: Page Layout

Content Screen:_____1
Lesson Name:
Navigation Menu Title: Page Layout Slide:____

Map Questions or

Page Layout
1
Comments:

Navigation:
Quit Start Button: Goes to
Slide 2
Back Button: Hidden
Map: Course Navigation

Audio:
Voice Over (see
slide notes for
script)

Start
Directions to the Graphic Artist: Final Graphic Name(s):
1. layoutTitlePage.png
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

The “Map” that takes the learner to the overall course navigation can be as
simple as necessary to complete it in the allotted time. It could be anything Three photo book pages, each displaying the same three
from (least preferred) a list of the included modules and lessons to (most photos in different places.
preferred) clickable icons/text for each module and lesson that are arranged
in a way that indicates a suggested order of completion to the learner.
Course Name: Page Layout
Content Screen:_____2
Lesson Name:
Navigation Menu Title: Layouts Button Slide:____

Questions or
Page Layout Map
Comments:

Navigation:
Next Button: Goes to
Slide 3
Back Button: Goes to
Slide 1
Map: Course Navigation

Audio:
Voice Over (see
slide notes for
script)

Back Next
Directions to the Graphic Artist: Final Graphic Name(s):
layoutButtonPages.png
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

When the audio mentions that you can click the Layouts
button, a box should appear highlighting the Layouts Shutterfly photo book UI
button. If possible, switch to new photo with layouts
displayed.
Course Name: Page Layout 3
Content Screen:_____
Lesson Name:
Navigation Menu Title: Elements of a Layout Slide:____

Questions or
Page Layout Map
Comments:

Navigation:
Next Button: Goes to
Slide 4
Photo Back Button: Goes to
Slide 2
Space Map: Course Navigation
Audio:
Voice Over (see
slide notes for
Other script)
Decoration
Question:
Do the blue circles seem
Text clickable?

Box
Back Next
Directions to the Graphic Artist: Final Graphic Name(s):

sampleLayout.png
Source Graphic(s):

Directions to the Developer Alt tag

Ideally, each piece (photos, text, and other decorations)
will be added to the page one at a time, when they’re page layout with three
mentioned in the narration. photo spaces, one text box,
a frame and a border
Course Name: Page Layout
Content Screen:_____4
Lesson Name:
Navigation Menu Title: Layout Menu Slide:____

Questions or
Page Layout Menu Map
Comments:
Navigation:
This slide is three

What’s Next? buttons:

•Filter Layouts (goes to
slide 5A)
•Select Layouts (goes to
slide 6A)
•Try it Out (goes to slide
7A)
Next Button: Hidden
Back Button: Slide 3
Map: Course Navigation

Audio:
Voice Over (see
slide notes for
Filter Layouts Select Layout Try It Out script)

Question:
Is the navigation of this
slide intuitive? Does it
Back make sense to have a
Back button?
Directions to the Graphic Artist: Final Graphic Name(s):
1. filterOptions.png
2. sampleLayout.png
Source Graphic(s):
3. Mouse.png
Where to find graphic

Directions to the Developer Alt tag

If it’s technically possible: 1. Layout filter options
•clicking either the text or the image will go to the new slide. 2. page layout with three photo spaces, one text box, a
•If you hover over the image, the border will change to blue (for the frame and a border
first two) or purple (for the last one) 3. Computer mouse icon
•Only play the audio by default the first time they come to the slide.
Course Name: Page Layout
Content Screen:_____5
Lesson Name:
A
Slide:____
Navigation Menu Title: Filter Layouts
Questions or
Page Layout Map
Comments:

Watch the clip to learn how to filter layouts. Navigation:

Next Button: Goes to
Slide 5B
Back Button: Goes to
Slide 4
Map: Course Navigation
Audio:
Included in video
(see slide notes for
script)

Question:
How short should the
video be before we start
adding navigation
within the video to
break it up? Right now, I
think it’ll be between
Back Next 1:00 and 1:30 min.

Directions to the Graphic Artist: Final Graphic Name(s):

fitlerLayouts.mp4
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

Depending on the length of the video, possibly make the learner click
“Next” (or something similar) whenever there’s a paragraph break in Include the alt tag words to use
the video script.
Course Name: Page Layout
Content Screen:_____5
Lesson Name:
B
Slide:____
Navigation Menu Title: Filter Layouts Summary
Questions or
Page Layout Map
Comments:

Navigation:
Next Button: Goes to
Summary Slide 4
Back Button: Goes to
Slide 5A
Map: Course Navigation
•Filter layouts based on number of photos on the page Audio:
None
•Choose Text if you don’t want any photos on the page

•Choose Spread if you want the layout to span both pages Question:
Should the Next button
be named something
else on the slides where
it goes back to the
layout menu (slide 4)?

Back Next
Directions to the Graphic Artist: Final Graphic Name(s):
File name of pre-selected graphics
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

If there’s a way to get this information included as a link off
slide 5 instead of in its own slide, that would be preferable Include the alt tag words to use
Course Name: Page Layout
Content Screen:_____6
Lesson Name:
Navigation Menu Title: Select Layouts Slide:____
A

Questions or
Page Layout Map
Comments:

Watch the clip to learn how to select a layout. Navigation:

Next Button: Goes to
Slide 6B
Back Button: Goes to
Slide 4
Map: Course Navigation
Audio:
Included in video
(see slide notes for
script)

Back Next
Directions to the Graphic Artist: Final Graphic Name(s):
selectLayouts.mp4
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

Depending on the length of the video, possibly make the learner click
“Next” (or something similar) whenever there’s a paragraph break in Include the alt tag words to use
the video script.
Course Name: Page Layout
Content Screen:_____6
Lesson Name:
Navigation Menu Title: Number of Photos B
Slide:____

Questions or
Page Layout Map
Comments:

Navigation:
! Choose a layout with at least as many photo spaces as you have photos. Next Button: Goes to
Slide 6C
Back Button: Goes to
Slide 6A
Map: Course Navigation

Question:
Does it make sense for
Two Photo Spaces Three Photo Spaces Four Photo Spaces
this to be a separate
slide or should lit be
included in the video?
Does it make sense for
it to be in the “Select a
Layout” section rather
Back Next than the “Filter layouts”
section?

Directions to the Graphic Artist: Final Graphic Name(s):

1) ocean.png 6) threePhotos.png
2) purse.png 7) fourPhotos.png
3) Construction.png
Source Graphic(s): 8) sadFace.png
4) graphic
Where to find warning.png 9) happyFace.png
5) twoPhotos.png 10) neutralFace.png
Directions to the Developer Alt tag
If possible, have the “Two Photo” and “Four Photo” image and 1) ocean 6) A page with 3 photo spaces
2) Artistic metal purse in front of 7) A page with 4 photo spaces
accompanying faces appear only when they’re mentioned in ocean 8) Sad face
the audio. 3) Painted Australia on sand 9) Happy face
4) Exclamation point 10) Neutral face
5) A page with two photo spaces
Course Name: Page Layout
Content Screen:_____6
Lesson Name:
Navigation Menu Title: Select Layouts Summary C
Slide:____

Questions or
Page Layout Map
Comments:

Navigation:
Summary Next Button: Goes to
Slide 4
Back Button: Goes to
Slide 6B
•Choose the correct page Map: Course Navigation
Audio:
•Click on layouts to see how they look None

•Double-check photos to make sure they look good with the new layout

•Choose a layout that has at least as many photo spaces as you have
photos

Back Next
Directions to the Graphic Artist: Final Graphic Name(s):
File name of pre-selected graphics
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

If there’s a way to get this information included as a link off
slide 7 instead of in its own slide, that would be preferable Include the alt tag words to use
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out A
Slide:____

Map Questions or
Comments:

Try It Out Navigation:

Start Button: Goes to
slide 7B
Back Button: Goes to
You added a photo to page 2 of Slide 4
Map: Course Navigation
your photo book, but don’t like
how it looks. Audio:
Voice Over (see
slide notes for
You decide that you want to be script)

able to add a second photo and

text box to the page.

Back Start
Directions to the Graphic Artist: Final Graphic Name(s):
1) scenarioPages.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer Alt tag

1) Photo book page with one photo and one text area
2) Computer mouse icon
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Task B
Slide:____

Map Questions or
Try It Out Comments:

Navigation:
Next Button (renamed
Your Task: Change the layout of page 2 to hold two photos and two text boxes. Start): Goes to slide 7C
Back Button: Goes to
Slide 7A
Map: Course Navigation

Audio:
None

Question:
Should we show the
“Map” on this slide?

Back Next
Directions to the Graphic Artist: Final Graphic Name(s):
1) scenarioPages.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer Alt tag

1) Photo book page with one photo and one text area
2) Computer mouse icon
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
C
Slide:____
Navigation Menu Title: Try It Out Q1
Questions or
Try It Out Comments:

Change the layout of page 2 to hold two photos and two text boxes. Click in the screenshot below to
Navigation:
complete the task. Next Button: Hidden
Back Button: Hidden
1 of 5: Make sure your changes will only affect page 2. Map: Hidden

Audio:
None

Question:
Should we show the
“Map” on this slide and
the other question
slides?

Directions to the Graphic Artist: Final Graphic Name(s):

1) tryPage2.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer Alt tag

Hotspot Question. If they choose the right spot (the red star below the left 1) Shutterfly photo book work space
book page), have a “Correct!” message and automatically go to the next 2) Computer mouse icon
slide. If they choose anywhere else, give them a hint (“Keep Looking. You
want to click on page 2”). The third time they get it wrong, show them the
answer and go to the next slide (7D).
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Q2 D
Slide:____

Questions or
Try It Out Comments:

Change the layout of page 2 to hold two photos and two text boxes. Click in the screenshot below to
Navigation:
complete the task. Next Button: Hidden
Back Button: Hidden
2 of 5: Navigate to the layout options. Map: Course Navigation

Audio:
None

Directions to the Graphic Artist: Final Graphic Name(s):

1) tryChooseLayouts.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer Alt tag

Hotspot Question. If they choose the right spot (the red star near the upper 1) Shutterfly photo book work space
left of the image), have a “Correct!” message and automatically go to the 2) Computer mouse icon
next slide. If they choose anywhere else, give them a hint (“Keep Looking.
You are looking for the Layouts”). The third time they get it wrong, show
them the answer and go to the next slide (7E).
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Q3 E
Slide:____

Questions or
Try It Out Comments:

Change the layout of page 2 to hold two photos and two text boxes. Click in the screenshot below to
Navigation:
complete the task. Next Button: Hidden
Back Button: Hidden
3 of 5: Filter to layouts that have space for exactly two photos. Map: Course Navigation

Audio:
None

Directions to the Graphic Artist: Final Graphic Name(s):

1) tryFilterLayouts.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer Alt tag

Hotspot Question. If they choose the right spot (the red star near the upper 1) Shutterfly photo book work space
left of the image), have a “Correct!” message and automatically go to the 2) Computer mouse icon
next slide. If they choose anywhere else, give them a hint (““Keep Looking.
Filter the layouts here” ” and draw a square around the filters). The
third time they get it wrong, show them the answer and go to the next slide
(7F).
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Q4 F
Slide:____

Questions or
Try It Out Comments:

Change the layout of page 2 to hold two photos and two text boxes.
Navigation:
Next Button (renamed
4 of 5: Select layouts with space for two photos and two text boxes on page 2. Select Submit): Go to slide 7G
all that apply, then click Submit. after giving feedback
(see slide notes)
Back Button: Hidden
Map: Course Navigation
Audio:
None

1
Question:
Should the checks and
2 3 x’s go on top of or next
to the answer choices?

4 Submit
Directions to the Graphic Artist: Final Graphic Name(s):
1) filterOptions.png 5) opt44.png
The arrangement of the answers is intentional, to mimic the layout of the
2) opt41.png 6) mouse.png
options in the Shutterfly UI. Source3)Graphic(s):
opt42.png 7) redX.png
Where4) opt43.png
to find graphic
8) greenCheck.png
Directions to the Developer Alt tag 1) Layout filter options 5) 2 photos and 1 text box
2) Spread with 2 photos 6) Computer mouse icon
Multi-Select Question with images for the answers. (Numbers don’t need to and 2 text boxes 7) Red X
be displayed, they’re just there for clarity - 2 and 3 are correct). The checks 3) 2 photos and 2 text 8) Green check mark
and X’s don’t appear until they click Submit. See slide notes for more details. boxes
4) 2 photos and 2 text
boxes
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Q5 G
Slide:____

Questions or
Try It Out Comments:

Change the layout of page 2 to hold two photos and two text boxes.
Navigation:
Next Button (renamed
5 of 5: Select the layout that will best display the two photos below on page 2. Submit): Go to slide 7H
Remember to include two text boxes. after giving feedback
(see slide notes for
details)
Back Button: Hidden
Map: Course Navigation

Audio:
1 None

2 3

4 Submit
Directions to the Graphic Artist: Final Graphic Name(s): 1) filterOptions.png 5) opt44.png
2) opt41.png 6) mouse.png
The arrangement of the answers is intentional, to mimic the layout of the 3) opt42.png 7) alpaca.png
options in the Shutterfly UI. Source Graphic(s): 4) opt43.png 8) )mountain.png
Where to find graphic
1) Layout filter options
Directions to the Developer Alt tag 2) Spread with 2 photos and 2 text boxes
3) 2 photos and 2 text boxes
Single-Select Question with images for the answers. (2 is correct). See slide
4) 2 photos and 2 text boxes
notes for more details.
5) 2 photos and 1 text box
6) Computer mouse icon
7) Standing alpaca
8) snow-capped mountain
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Try It Out Q6 - Critique Slide:____
H
Questions or
Critique Comments:

What should be fixed on these pages before the book is printed? (Select all that apply, then click Submit.)
Navigation:
 The picture on the right page is too close to the edge Next Button (renamed
 A picture on the left page will not print well Submit): Go to slide 7I
 There is a blank photo space on the left page after giving feedback
 A picture on the left page was cropped inappropriately (see slide notes for
details)
Back Button: Hidden
Map: Course Navigation

Audio:
None

Submit
Directions to the Graphic Artist: Final Graphic Name(s):
1) critiquePages.png
2)Graphic(s):
Source mouse.png
Where to find graphic

Directions to the Developer
Multi-Select Question (2 and 4 are correct). See slide notes for more details.
Alt tag 1) Two pages of photo book. The left page has
three images - an alpaca's legs, a blank photo
space, and a zoomed in photo of grass with an
orange exclamation point. The right page has a
mountain photo that goes all the way to the edge
of the page.
2) Computer mouse icon
Course Name: Page Layout
Content Screen:_____7
Lesson Name:
Navigation Menu Title: Congrats! I
Slide:____

Congratulations!
Map Questions or
Comments:

Navigation:
Review Button: Goes to
You’ve slide 19
completed Finish Button: Exits
module
the Page Map: Course Navigation
Layout
tutorial. Audio:
None

You’re ready Question:

Is it jarring that the text
to change the on this slide is suddenly
page layouts on top of the page,
instead of next to or
of your own below it?
photo book.
Review Finish
Directions to the Graphic Artist: Final Graphic Name(s):
1. finishedPageLayout.png
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

The text should be entered as text and not part of the image.
1. Single page with alpaca photo and mountain photo
Course Name: Page Layout
Content Screen:_____8
Lesson Name:
Navigation Menu Title: Page Layout Summary Slide:____

Questions or
Page Layout Summary Map
Comments:

Filter Layouts Navigation:

Finish Button: Exits
• Filter layouts based on number of photos on the page module
• Choose Text if you don’t want any photos on the page Back Button: Hidden
Map: Course Navigation
• Choose Spread if you want the layout to span both pages
Audio:
Select Layout None

• Choose the correct page

• Click on layouts to see how they look
• Double-check photos to make sure they look good with the new
layout
• Choose a layout that has at least as many photo spaces as you
have photos
Finish
Directions to the Graphic Artist: Final Graphic Name(s):
File name of pre-selected graphics
Source Graphic(s):
Where to find graphic

Directions to the Developer Alt tag

Include the alt tag words to use

Style Guide
• Font will be Arial for all elements
• Text will be size 16 and Black (#000000, rgb(0,0,0)) unless it fits one of these exceptions:
– Page Headers
• Font Size: 22
• Color: Accent Color
– Instructional slides will use blue: #3455db, rgb(52,85,219)
– Knowledge check slides will use purple: #8a2be2, rgb(138,43,226)
– Sub Headers
• Font Size:20
– Scenario Summary Text (for knowledge check slides)
• Font Size: 14
• Grey: #757575, rgb(117,117,117)
– Button Text
• White: #ffffff, rgb(255,255,255)
• Next/Back button fill will be Grey (#757575, rgb(117,117,117))
– Other buttons will use the Accent Color of the slide they go to
• Warning boxes will be outlined in Pink: #DB157F, rgb(219, 21, 127)
• Any image frames will be Grey: #757575, rgb(117,117,117)
• Correct answers will be indicated with Green: #00b050, rgb(0,176,80)
• Incorrect answers will be indicated with Red: #c00000, rgb(192,0,0)