This document contains storyboards for the introduction animation and home page of a proposed website for the Technical Association of Graphic Artists (TAGA).
The introduction animation will depict a t-shirt going through the screen printing process, with six scenes showing an increasing level of detail until revealing the finished TAGA logo printed on the shirt. It will include buttons to skip the animation or enter the site.
The home page storyboard outlines the main sections - logo, navigation bars, quick links, welcome message and recommendations. The primary navigation bar will link to main site areas, while the secondary bar and body will feature dynamic content like announcements and featured sections.
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
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
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
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
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
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 “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 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 “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
Mary Macin Independent Study Project
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
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
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
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