Early Attempt at Website Storyboards (Storyboarding)

TAGA Website Storyboards By Mary Macin 2/26/094/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 

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 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  Mary Macin Independent Study Project 

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 

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 

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 

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 

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 

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 oﬃcial 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 ﬁ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  Mary Macin Independent Study Project 

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 oﬃcial 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 ﬁ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  Mary Macin Independent Study Project 

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 

Early Attempt at Website Storyboards (Storyboarding)

by Mary Macin

Accessibility

Categories

Upload Details

Usage Rights

Statistics

Early Attempt at Website Storyboards (Storyboarding) Presentation Transcript