Early Attempt at Website Storyboards (Storyboarding)

TAGA Website Storyboards

By Mary Macin
2/26/09

4/10/09  1

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

Last Updated: 2/26/09 
 Page #: 3 

4/10/09  3

Type of Page:   Home Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2
1.  Logo – This space is reserved for the oﬃcial 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 ﬁlls 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 

 Page #: 5 

4/10/09  5

Prospec<ve Members Page 
Type of Page:  
1 2
1. Logo – This space is reserved for the official TAGA logo.  This logo will appear       

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. 

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 

 Page #: 7 

4/10/09  7

Type of Page:   Current Members Page 
1 2

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. 


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/
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 ﬁlls   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” ‐‐  Oﬃcer/Sponsor/ISU contact info 
   
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 

 Page #: 9 

4/10/09  9

Type of Page:   Orders Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

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. 


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 
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”) 
  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 

 Page #: 11 

4/10/09  11

Type of Page:   Gallery Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

6
3 3.  Secondary Naviga<on Pane – The Gallery’s Page secondary naviga<on pane 
will include buZons that will navigate between diﬀerent “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
“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 “Polaroid's” 
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 ﬁlls 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 “Polaroid's” 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 

 Page #: 13 

4/10/09  13

Type of Page:   Events Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

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
“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, 
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 ﬂyers 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.   
  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 ﬁlls 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 

 Page #: 15 

4/10/09  15

Type of Page:   About Us Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

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
“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. 

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 ﬁlls 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 

 Page #: 17 

4/10/09  17

Type of Page:   External Links Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

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 “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. 
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      
    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 ﬁlls 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 

 Page #: 19 

4/10/09  19

Type of Page:   Contact Us Page  TAGA – Technical Associa<on of Graphic Ar<sts  
1 2

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 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 
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

 Page #: 21 

4/10/09  21

Early Attempt at Website Storyboards (Storyboarding)

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

Early Attempt at Website Storyboards (Storyboarding)