Your SlideShare is downloading. ×
Early Attempt at Website Storyboards (Storyboarding)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Early Attempt at Website Storyboards (Storyboarding)

841

Published on

Created as a way to present a storyboard for a class assignment. The idea was to show my plans for the customer's website I was working on at the time. …

Created as a way to present a storyboard for a class assignment. The idea was to show my plans for the customer's website I was working on at the time.

Done for an independent study in Spring 2009. Not used as a presentation as much as a customer walk-through sent over the net.

Disclaimer: This was among some of my earliest attempts at website design...and design-wise, it's just awful. I've learned a LOT since then, and my design skills have vastly improved--please take the information presented for what it's worth, but overlook the design faux pas if you can. =]

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
841
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. TAGA Website Storyboards By Mary Macin 2/26/094/10/09
 1

  • 2. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

2
Type
of
Page:

 Introduc<on
Anima<on
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 3 Intro
Page:

 This
page
appears
before
the
home
page
loads,
and
has
an
op<on
to
skip
the
 intro
page
if
the
visitor
would
rather
proceed
straight
to
the
Home
Page.
 The
Intro
Page
is
a
Flash
anima<on.

It
is
a
virtualiza<on
of
a
t‐shirt
going
 through
the
screen
prin<ng
process.


 4 5 6 It
will
progress
as
follows:
 Scene
1:

Single
screen
prin<ng
mesh
frame
with
black
t‐shirt
laid
out
 underneath,
can
see
some
sort
of
image
on
the
“screen”,
but
it
shouldn’t
be
 clear
yet.


 Scene
2:

A
glob
of
“Redbird
Red”
ink
drops
onto
the
mesh
screen
and
a
 squeegee
appears
and
is
pulled
down
the
mesh
screen
appropriately.
 Scene
3:

The
screen
liQs
off
of
the
shirt,
revealing
a
screened
image
that
is
not
 quite
clear.
 Scene
4:

The
screen
prin<ng
equipment
is
gone,
and
the
t‐shirt
is
seen
“flying”
 with
only
the
back
of
the
shirt
visible.
 Programming
Notes:

 Scene
5:

The
t‐shirt
spins
un<l
it
is
right‐side
up
and
facing
the
viewer.

The
 screened
image
is
s<ll
just
a
mass
of
colors.
 Scene
6:

The
t‐shirt
zooms
in
un<l
it
takes
up
the
whole
page
while
s<ll
being
 able
to
see
the
whole
form
of
the
shirt.

The
image
is
now
front
&
center,
and
 During Scene 6 of animation, the “Skip Intro” the
viewer
can
see
that
it
is
a
black
t‐shirt
with
the
TAGA
logo
printed
on
it.

 button will disappear, and an “Enter Site” button will The
t‐shirt
is
black.

The
logo
text
is
white.

The
logo
has
“Redbird
Red”
drips
on
 replace it. it.

 The
screen
will
contain
a
“Skip
Intro”
buZon.
 Alternatively, visitors could enter the site by clicking on the TAGA logo on the shirt at the end of This
anima<on
will
be
done
using
Adobe
Flash
and
Ac<onScript.

The
logo
used
 the animation. There would have to be some prompt will
be
the
official
TAGA
logo,
and
the
background
will
likely
be
a
solid
color,
 to alert visitors to this feature. solid
white,
or
something
to
give
the
screen
depth.

This
introduc<on
should
 look
and
feel
like
3D.
 The
site
<tle
on
the
visitor’s
toolbar
will
read:

“Illinois
State
University
Chapter
 of
TAGA”
or
other
appropriate
<tle.
 4/10/09
 2
Mary
Macin
Independent
Study
Project

  • 3. Last
Updated:
2/26/09
 
Page
#:
3
4/10/09
 3

  • 4. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

4
Type
of
Page:

 Home
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1.

Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 1. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 2. 
Secondary
Naviga<on
Pane
–
The
Home
Page’s
secondary
naviga<on
pane
will
 include
2‐3
pictures
that
will
serve
as
quick
links
to
important
sec<ons
of
the
 site.

Included
on
this
storyboard
is
a
link
to
the
New
Members
part
of
the
 site
(“Join
Us”
picture),
and
a
link
to
the
Order
sec<on
of
the
site
(“Orders”
 picture).

A
third
picture
buZon
could
poten<ally
be
a
quick
link
to
the
 “Members”
sec<on,
the
“Picture
Gallery”
or
“Events”
sec<on.
 3. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 4 Map”,
and
“Search”.


 4. 

Welcome
Message
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
 Programming
Notes:

 within
the
site.

“Illinois
State
University
Chapter”
is
a
placeholder
for
a
 sub<tle.
 Functionality: All pictures will have “Alt” content for the visually impaired. The colored orbs in the primary navigation bar will be buttons 5. 

Body
–
The
body
of
the
Home
Page
will
include
only
a
few
elements
to
avoid
a
 to other pages within the site. The TAGA logo will always link back to cluZered
appearance.

The
3
essen<al
elements
that
will
be
included:
 the “Home” page. The pictures in the secondary navigation bar are also a. “Welcome
Message”
from
either
the
current
TAGA
President
or
from
 buttons. The body text will likely include several links to other parts of the
TAGA
Sponsor.

To
add
to
the
media‐rich
content
on
the
site,
 the site, and there are “Quick Links” at the bottom of each page. this
message
would
ideally
be
a
well‐shot
video.
 Colors: White sandstone background with charcoal gray sandstone b. 
“TAGA
Announcements,”
“Special
Promo<ons,”
or
“What’s
 border. Navigation Bars are 49% transparent with “Plastic” Graphic Happening
Today?”
sec<on.

This
could
change
daily,
weekly,
etc.

It
 Style fills and black borders. Font is Black, Dark Gray, Red, and White. would
be
a
2‐3
item
list,
and
would
only
include
items
that
are
 relevant
and
short‐term
(such
as
Graph
Expo
or
a
sale
on
 Images: There will be at least 2-3 pictures on this page. The “Join merchandise,
etc.).
 Us” picture will probably be a TAGA group photo, the “Orders” will c. 

“Recommended
Sec<ons”
Text
would
be
something
like:
“New
to
our
 probably be an image of a product, or of a current member working on site?

Here
are
a
few
of
our
favorite
sec<ons.

Feel
free
to
roam
 a product. Page may also include a short “Welcome” video. around!”

Sec<ons
listed
here
would
be
for
new
members
or
new
 customers
(“Gallery”,
“Events”,
“Orders”,
etc.)

Purpose
would
be
to
 Text: The primary navigation buttons are Futura font. The picture give
new
visitors
some
direc<on
of
where
to
start.

 buttons will have more casual, designer font (converted to Outlines). The Title and Subtitle font are Optima, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. 4
 Mary
Macin
Independent
Study
Project

  • 5. Last
Updated:
2/26/09
 
Page
#:
5
4/10/09
 5

  • 6. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

6
 Prospec<ve
Members
Page
Type
of
Page:

 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
Members’
Pages’
secondary
naviga<on
pane
 will
include
buZons
that
will
change
the
text
content
and
any
pictures
on
 that
page
to
match
the
appropriate
subsec<on.

For
example,
in
the
“Who
 We
Are”
subsec<on
of
the
“Prospec<ve
Members”
page
will
include
the
 history
of
TAGA,
the
current
members,
and
any
per<nent
“Bio”
informa<on.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 4 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 “Members
Prospec<ve”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
 Programming
Notes:

 clicks
from
the
Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
 to
match
that
subsec<on.

For
instance,
“Who
We
Are:”.


 Functionality: All pictures will have “Alt” content for the visually impaired. The colored orbs in the primary navigation bar will be buttons 6. 

Body
–
The
body
of
the
main
“Prospec<ve
Members”
page
will
include
a
short
 to other pages within the site. The TAGA logo will always link back to “Welcome”
message,
and
a
message
that
guides
them
to
check
out
the

 the “Home” page. Buttons along the left side change the text & graphic buZons
“on
the
leQ”
to
find
out
more
about
us.
 content of this page. There are “Quick Links” at the bottom of each page. 
 The
six
buZons
in
the
Secondary
Naviga<on
Pane
will
not
open
new
 pages,
so
much
as
they
will
change
the
text
content
and
any
associated
 Colors: “Pink-ish” sandstone background with red sandstone border. graphics
to
match
that
heading.


 Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and red borders. Title font is stylized (drop shadows) red, and white. 
 BuZon
1:

“Who
We
Are”

‐‐

Historical
&
Biographical
informa<on
 Body text will be red, white, dark gray, or black. 
 BuZon
2:

“What
We
Do”

‐‐

Mee<ng
Info,
Event
Info,
&
T‐Shirt
Info
 Images: There will be pictures or graphics on this page to break up 
 BuZon
3:

“When
We
Meet”

‐‐

Schedule
of
mee<ngs
(and
where!)
 
 the text. Pictures may be “Flash” photos that change much like the 
 BuZon
4:

“Where
We
Go”
‐‐

Graph
Expo,
BBQ’s,
field
trips,
etc.
 current TAGA website. Pics will be relevant to the textual content. 
 BuZon
5:

“Why
Should
I
Join”

‐‐

Value
of
Joining.

Relevance
of
TAGA.
 
 BuZon
6:

“How
Can
I
Join”

‐‐

Membership
Info/Instruc<ons/Contact
Info
 Text: The primary navigation buttons are Futura font. The Title and Subtitle font are Optima, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. 6
 Mary
Macin
Independent
Study
Project

  • 7. Last
Updated:
2/26/09
 
Page
#:
7
4/10/09
 7

  • 8. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

8
Type
of
Page:

 Current
Members
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
Members’
Pages’
secondary
naviga<on
pane
 will
include
buZons
that
will
change
the
text
content
and
any
pictures
on
 that
page
to
match
the
appropriate
subsec<on.

For
example,
in
the
 “Schedules”
subsec<on
of
the
“Current
Members”
page
will
include
the
 mee<ngs
schedule,
work
schedule,
and
any
upcoming
events
for
current
 members.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 4 Map”,
and
“Search”.


 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 Programming
Notes:

 “Members
Current”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
 clicks
from
the
Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
 Functionality: All pictures will have “Alt” content for the visually to
match
that
subsec<on.

For
instance,
“Schedules:
”.


 impaired. The colored orbs in the primary navigation bar will be buttons to other pages within the site. The TAGA logo will always link back to 6. 

Body
–
The
body
of
the
main
“Current
Members”
page
will
be
a
gateway
for
 the “Home” page. Buttons along the left side change the text & graphic current
members’
access
to
“Member
Only”
content,
and
any
informa<on/ content of this page. There are “Quick Links” at the bottom of each announcements
that
TAGA
leadership
wants
the
others
to
be
aware
of.

This
 page. could
also
be
a
poten<al
source
of
“social
networking”
for
members.
 Colors: “Pink-ish” sandstone background with red sandstone border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills 
 The
four
buZons
in
the
Secondary
Naviga<on
Pane
will
not
open
new
 and red borders. Title font is stylized (drop shadows) red, and white. pages,
so
much
as
they
will
change
the
text
content
and
any
associated
 Body text will be red, white, dark gray, or black. graphics
to
match
that
heading.


 Images: There will be pictures or graphics on this page to break up 
 BuZon
1:

“Schedules”

‐‐

Mee<ng,
Event,
and
Work
Schedules
 the text. Pictures may be “Flash” photos that change much like the 
 BuZon
2:

“Member
Access”

‐‐

Login
access
to
site.


 current TAGA website. Pics will be relevant to the textual content. 
 BuZon
3:

“Events”

‐‐


Link
to
Event
Gallery
&
Info
about
past/future
events
 
 BuZon
4:

“Contact
Informa<on”
‐‐

Officer/Sponsor/ISU
contact
info
 Text: The primary navigation buttons are Futura font. The Title and 
 
 Subtitle font are Optima, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Trebuchet (Bold). 8
 Mary
Macin
Independent
Study
Project

  • 9. Last
Updated:
2/26/09
 
Page
#:
9
4/10/09
 9

  • 10. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

10
Type
of
Page:

 Orders
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
Orders’
Page
secondary
naviga<on
pane
will
 include
buZons
that
will
change
the
text
content
and
any
pictures
on
that
 page
to
match
the
appropriate
subsec<on.

For
example,
the
“Our
Prices”
 subsec<on
of
the
“Orders”
page
will
include
TAGA’s
current
price
structure,
 whereas
the
“Specifica<ons”
subsec<on
will
have
informa<on
about
the
 kinds
of
orders
TAGA
can
fulfill.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 4 Map”,
and
“Search”.


 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 Programming
Notes:

 “Orders”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
clicks
from
the
 Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
to
match
that
 Functionality: All pictures will have “Alt” content for the visually subsec<on.

For
instance,
“Our
Pricing
”.

However,
the
“Order
Form”
and
 impaired. The colored orbs in the primary navigation bar will be buttons “Porrolio”
buZons
will
lead
the
visitor
to
separate
pages
within
the
site.


 to other pages within the site. The TAGA logo will always link back to the “Home” page. Buttons along the left side change the text & graphic 6. 

Body
–
The
body
of
the
main
“Orders”
page
will
be
a
gateway
for
customer’s
 content of this page. There are “Quick Links” at the bottom of each to
navigate
through
the
other
commerce
subsec<ons
of
the
site.

It
may
be
 page. beneficial
to
use
this
space
for
“instruc<ons”
that
guide
poten<al
customers
 Colors: Light Green sandstone background with Dark Green through
your
ordering
process,
<meframes,
what
to
expect,
etc.


 sandstone border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light green borders. Title fonts are dark & light 
 Two
of
the

four
buZons
in
the
Secondary
Naviga<on
Pane
will
not
open
 green. Body text will be either a very dark green or black. new
pages,
so
much
as
they
will
change
the
text
content
and
any
associated
 graphics
to
match
that
heading,
the
other
two
(men<oned
above,
are
links).


 Images: There will be Flash “ads” on this page, showcasing what TAGA can do for their customers. May also have Flash “prompts” to 
 BuZon
1:

“Our
Prices”

‐‐

Prices,
Buying
Op<ons,
lots
of
graphics.
 click on certain links (buttons) to access pertinent sections of the site. 
 BuZon
2:

“Specifica<ons”

‐‐

Guidelines
regarding
TAGA’s
order
process


 
 BuZon
3:

“Porrolio”

‐‐

Link
to
TAGA’s
Previous
Work
Gallery.
(“Porrolio”)
 Text: The primary navigation buttons are Futura font. The Title and 
 BuZon
4:

“Order
Form”
‐‐

Interac<ve
PDF
Order
Form.

Will
open
in
new
 Subtitle font are Helvetica, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary window.
 Navigation Buttons are Trebuchet (Bold). 
 
 10
 Mary
Macin
Independent
Study
Project

  • 11. Last
Updated:
2/26/09
 
Page
#:
11
4/10/09
 11

  • 12. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

12
Type
of
Page:

 Gallery
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
Gallery’s
Page
secondary
naviga<on
pane
 will
include
buZons
that
will
navigate
between
different
“slideshows”
of
 TAGA
pictures.

There
will
be
a
link
to
virtual
tours
of
the
facili<es,
any
videos
 TAGA
wants
to
share,
as
well
as
Event
photos,
a
past
work
“porrolio”
page,
 etc.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 4 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 “Orders”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
clicks
from
the
 Programming
Notes:

 Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
to
match
that
 subsec<on.

For
instance,
“Porrolio
”.


 Functionality: All pictures will have “Alt” content for the visually impaired. The colored orbs in the primary navigation bar will be buttons to other pages 6. 

Body
–
The
body
of
the
main
“Gallery”
page
will
be
a
various
formats
of
 within the site. The TAGA logo will always link back to the “Home” page. galleries.

There
will
likely
be
photo
slideshows,
videos,
virtual
tours,
and
I
 Buttons along the left side change the text & graphic content of this page. There am
working
on
a
concept
for
a
corkboard
“picture
board”
with
“Polaroids”
 are “Quick Links” at the bottom of each page. that
frame
each
picture,
and
possibly
will
be
interac<ve
to
the
point
that
 Colors: Orange sandstone background with “School Bus” Yellow sandstone they
can
be
“enlarged”
or
even
contain
videos
that
can
be
“entered”
by
 border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills clicking
on
the
picture.
*Not
sure
the
technology
exists
for
this,
but
this
is
my
 and light orange borders. Title fonts are white & subtitle fonts are purple. Body goal.


 text will likely be white, light orange, yellow, or purple to match other font themes on page. 
 BuZon
1:

“Porrolio”

‐‐

TAGA’s
past
work.

Possibly
member
porrolios?
 Images: All images will be in this section somewhere. The intro animation, 
 BuZon
2:

“Current
Work”

‐‐

Picture
slideshow
of
TAGA’s
current
work
 welcome video, and any other pictures on the site will also be here. May 
 BuZon
3:

“Event
Gallery”

‐‐

Pictures
of
TAGA
events
(see
“picture
board”)
 incorporate contemporary graphic elements such as “Polaroids” or a “bulletin 
 BuZon
4:

“Videos”
‐‐

Any
videos
(how‐to’s,
events,
Intro
anima<on,
etc.)
 board”. I have collected some images of these if you would like further 
 BuZon
5:

“Virtual
Tours”

‐‐

Virtual
Tours
of
the
facili<es.



 information. 
 
 Text: The primary navigation buttons are Futura font. The Title and Subtitle VERY
MEDIA
RICH
sec<on
of
the
website!!!
 font are Futura, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Futura. 12
 Mary
Macin
Independent
Study
Project

  • 13. Last
Updated:
2/26/09
 
Page
#:
13
4/10/09
 13

  • 14. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

14
Type
of
Page:

 Events
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
Events’
Page
secondary
naviga<on
pane
will
 include
buZons
that
will
change
the
text,
calendars,
and
images/graphics
on
 the
page
to
match
the
chosen
buZon.

The
sub<tle
of
the
page
will
change,
 as
will
the
body
of
the
page,
but
the
<tle,
buZons,
colors,
and
other
 elements
will
remain
the
same.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 4 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 “Events”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
clicks
from
the
 Programming
Notes:

 Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
to
match
that
 subsec<on.

For
instance,
“Upcoming
”.


 6. 

Body
–
The
body
of
the
main
“Events”
page
will
be
varying
calendars,
 Functionality: All pictures will have “Alt” content for the visually impaired. schedules,
pictures/graphics
to
match
the
upcoming
events
(a
Graph
Expo
 The colored orbs in the primary navigation bar will be buttons to other pages within the site. The TAGA logo will always link back to the “Home” page. logo,
for
instance).

TAGA
flyers
could
also
be
uploaded
and
students
could
 Buttons along the left side change the text & graphic content of this page. There download
and
print
them.


 are “Quick Links” at the bottom of each page. 
 BuZon
1:

“Upcoming”

‐‐

Upcoming
TAGA
events.

Graphics,
Calendars,
text.
 Colors: Yellow sandstone background with Orange sandstone border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light 
 BuZon
2:

“Mee<ngs”

‐‐

Schedule
of
upcoming
mee<ngs/work
sessions
 orange borders. Title fonts are Orange & subtitle fonts are white. Body text will 
 BuZon
3:

“Schedule”
‐‐

Could
be
a
“semester
view”
calendar.
 likely be white or dark orange to match other font themes on page. 
 BuZon
4:

“Event
Gallery”

‐‐

Link
to

gallery
of
TAGA
events
 
 
 Images: Graphics will be calendars, some logos, and/or pictures to 
 May
also
want
to
include
mee<ng
minutes
(if
applicable)
or
any
other
 complement the events and schedules listed. “Event”
related
content.
 Text: The primary navigation buttons are Futura font. The Title is Optima and the subtitle font is Helvetica. The Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Futura. 14
 Mary
Macin
Independent
Study
Project

  • 15. Last
Updated:
2/26/09
 
Page
#:
15
4/10/09
 15

  • 16. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

16
Type
of
Page:

 About
Us
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
About
Us
Page’s
secondary
naviga<on
pane
 will
include
buZons
that
will
change
the
text
and
images/graphics
on
the
 page
to
match
the
chosen
buZon.

The
sub<tle
of
the
page
will
change,
as
 will
the
body
of
the
page,
but
the
<tle,
buZons,
colors,
and
other
elements
 will
remain
the
same.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 4 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 “About
Us”
is
the
primary
sec<on,
and
any
buZon
that
a
visitor
clicks
from
 Programming
Notes:

 the
Secondary
Naviga<on
Bar
will
only
change
a
smaller
sub<tle
to
match
 that
subsec<on.

For
instance,
“History
”.


 Functionality: All pictures will have “Alt” content for the visually impaired. 6. 

Body
–
The
body
of
the
main
“About
Us”
page
will
be
text
and
pictures
of
 The colored orbs in the primary navigation bar will be buttons to other pages TAGA
throughout
the
years,
as
well
as
the
current
members.

Flash
 within the site. The TAGA logo will always link back to the “Home” page. “slideshows”
may
be
appropriate
on
this
page
to
add
visual
s<muli
although
 Buttons along the left side change the text & graphic content of this page. There the
main
purpose
of
this
sec<on
is
to
tell
the
story
of
TAGA.
 are “Quick Links” at the bottom of each page. Colors: Light Blue sandstone background with Dark Blue sandstone border. 
 BuZon
1:

“History”

‐‐

History
of
TAGA
organiza<on
&
Hx
of
TAGA
on
campus.
 Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light 
 BuZon
2:

“Mission
Statement”

‐‐

Statement(s)
that
explain
TAGA’s
purpose.
 blue borders. Title font is Dark Blue & subtitle font is white. Body text will likely 
 BuZon
3:

“Contact
Us”
‐‐

Link
to
contact
informa<on
page.
 be white or dark blue to match other font themes on page. 
 
 Images: Images will be picture slideshows featuring TAGA history, the TAGA 
 
 organization, and current members. Could also include some pictures of the GC facilities (“Where We Are”). Text: The primary navigation buttons are Helvetica font. The Title is Optima Extra Bold and the subtitle font is Helvetica. The Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Futura. 16
 Mary
Macin
Independent
Study
Project

  • 17. Last
Updated:
2/26/09
 
Page
#:
17
4/10/09
 17

  • 18. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

18
Type
of
Page:

 External
Links
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
No<ce
there
are
no
buZons
on
the
“External
 Links”
page.

At
this
<me
it
makes
more
sense
to
have
links
as
text,
or
as
 picture
links
(more
visually
appealing)
than
to
have
buZons
down
the
side.

 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 4 “External
Links”
is
the
primary
sec<on.

 6. 

Body
–
The
body
of
the
“External
Links”
page
will
consist
of
external
links,
 Programming
Notes:

 likely
in
the
form
of
picture
buZons.

May
have
short
descrip<ons
for
each
 link,
such
as
an
explana<on
for
why
we
have
provided
a
link
to
it,
or
just
a
 short
descrip<on
of
the
site
being
linked
to.
 Functionality: All pictures will have “Alt” content for the visually impaired. The colored orbs in the primary navigation bar will be buttons to other pages 
 The
following
organiza<ons
are
likely
to
be
included
on
the
“External
Links”
 within the site. The TAGA logo will always link back to the “Home” page. 
 page:

 Buttons along the left side change the text & graphic content of this page. There 
 
 
 are “Quick Links” at the bottom of each page. 
 
 1.
ISU
Tech
Department

 Colors: Light Blue sandstone background with Dark Blue sandstone border. 
 
 2.
ISU
Graphic
Communica<ons
Department
 Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light 
 
 3.
ISU
Home
Page
 blue borders. Title font is Dark Blue & subtitle font is white. Body text will likely 
 
 4.
Na<onal
TAGA
page
 be white or dark blue to match other font themes on page. 
 
 5.
GATF
 Images: Images will be picture slideshows featuring TAGA history, the TAGA 
 
 6.
Social
Networking
(Facebook?)
 organization, and current members. Could also include some pictures of the GC 
 
 facilities (“Where We Are”). 
 
 Text: The primary navigation buttons are Helvetica font. The Title is Optima Extra Bold and the subtitle font is Helvetica. The Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Futura. 18
 Mary
Macin
Independent
Study
Project

  • 19. Last
Updated:
2/26/09
 
Page
#:
19
4/10/09
 19

  • 20. Last
Updated:

2/25/09

Macin
Website
Storyboards
 Page:

20
Type
of
Page:

 Contact
Us
Page
 TAGA
–
Technical
Associa<on
of
Graphic
Ar<sts

 1 2 1. Logo
–
This
space
is
reserved
for
the
official
TAGA
logo.

This
logo
will
appear






 
 In
the
same
place
on
each
page.
 5 2. Primary
Naviga<on
Pane
–
Each
orb
on
this
pane
is
a
buZon
that
corresponds
 with
the
7
primary
areas
of
the
site
(Membership,
Orders,
Gallery,
Events,
 About
Us,
External
Links,
and
Contact
Us).
 6 3 3. 
Secondary
Naviga<on
Pane
–
The
“Contact
Us”
page
is
currently
a
“catch‐all”
 page
for
Administra<ve
tools,
Privacy
Agreements,
the
Site
Map,
etc.

As
 such,
there
are
links
in
the
Secondary
Naviga<on
pane
for
a
number
of
these
 func<ons.
 4. 
Quick
Links
–
Internal
links
to
three
basic
sec<ons
of
the
site:

“Home”,
“Site
 Map”,
and
“Search”.


 4 5. 

Title
–
Provides
a
visual
cue
to
the
visitor
as
to
where
they
are
within
the
site.

 “Contact
Us”
is
the
primary
sec<on.

Unlike
the
other
main
sec<ons,
the
 secondary
links
will
likely
lead
to
separate
pages
with
the
appropriate
 Programming
Notes:

 informa<on.

 6. 

Body
–
The
body
of
the
“Contact
Us”
page
will
be
neatly
organized
contact
 informa<on,
as
well
as
a
way
to
submit
email
from
the
site.

It
may
also
be
 Functionality: All pictures will have “Alt” content for the visually impaired. useful
to
set
up
a
contact
form
where
visitors
can
submit
messages
(or
email)
 The colored orbs in the primary navigation bar will be buttons to other pages within the site. The TAGA logo will always link back to the “Home” page. to
a
contact
person
for
more
informa<on,
but
this
will
depend
on
TAGA’s
 Buttons along the left side change the text & graphic content of this page. There needs.
 are “Quick Links” at the bottom of each page. 
 The
following
site
tools
are
linked
from
this
page:

 
 
 ‐

Site
Info
 Colors: Gray sandstone background with Charcoal sandstone border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and gray 
 
 ‐

Privacy
 borders. Title font is Black. Body text will likely be white, light gray, or black to 
 
 ‐

Search
 match other font themes on page. 
 
 ‐

Site
Map
 
 
 ‐

User
Agreement
 Images: There may be 1-2 TAGA related pictures on this screen, or possibly a 
 
 ‐

Add
Content
 graphic pertaining to the purpose of the page, but the only other graphics might be pictures that correspond to specific individuals contact information. 
 
 ‐

Edit
Content
 
 
 ‐

Administra<on
 Text: The primary navigation buttons are Helvetica font. The Title is Optima These
are
suggested
site
tools,
but
the
finished
site
may
not
include
all
tools.

The
 Extra Bold. The Quick Links are Futura. The body text will likely be Verdana, format
for
site
tool
pages
will
be
the
same
as
Contact
Us
with
appropriate
 Trebuchet, or Helvetica. Secondary Navigation Buttons are Helvetica. <tle.
 
 
 20
 
 
 Mary
Macin
Independent
Study
Project

  • 21. Last
Updated:
2/26/09
 
Page
#:
21
4/10/09
 21


×