early attempt at website storyboards (storyboarding)

TAGA Website Storyboards

By Mary Macin 2/26/09

4/10/09 1

IntroPage:

Thispageappearsbeforethehomepageloads,andhasanop<ontoskiptheintropageifthevisitorwouldratherproceedstraighttotheHomePage.

TheIntroPageisaFlashanima<on.Itisavirtualiza<onofat‐shirtgoingthroughthescreenprin<ngprocess.

Itwillprogressasfollows:

Scene1:Singlescreenprin<ngmeshframewithblackt‐shirtlaidoutunderneath,canseesomesortofimageonthe“screen”,butitshouldn’tbeclearyet.Scene2:Aglobof“RedbirdRed”inkdropsontothemeshscreenandasqueegeeappearsandispulleddownthemeshscreenappropriately.Scene3:ThescreenliQsoffoftheshirt,revealingascreenedimagethatisnotquiteclear.Scene4:Thescreenprin<ngequipmentisgone,andthet‐shirtisseen“flying”withonlythebackoftheshirtvisible.Scene5:Thet‐shirtspinsun<litisright‐sideupandfacingtheviewer.Thescreenedimageiss<lljustamassofcolors.Scene6:Thet‐shirtzoomsinun<littakesupthewholepagewhiles<llbeingabletoseethewholeformoftheshirt.Theimageisnowfront&center,andtheviewercanseethatitisablackt‐shirtwiththeTAGAlogoprintedonit.Thet‐shirtisblack.Thelogotextiswhite.Thelogohas“RedbirdRed”dripsonit.

Thescreenwillcontaina“SkipIntro”buZon.

Thisanima<onwillbedoneusingAdobeFlashandAc<onScript.ThelogousedwillbetheofficialTAGAlogo,andthebackgroundwilllikelybeasolidcolor,solidwhite,orsomethingtogivethescreendepth.Thisintroduc<onshouldlookandfeellike3D.

Thesite<tleonthevisitor’stoolbarwillread:“IllinoisStateUniversityChapterofTAGA”orotherappropriate<tle.

During Scene 6 of animation, the “Skip Intro” button will disappear, and an “Enter Site” button will replace it.

Alternatively, visitors could enter the site by clicking on the TAGA logo on the shirt at the end of the animation. There would have to be some prompt to alert visitors to this feature.

TAGA–TechnicalAssocia<onofGraphicAr<stsIntroduc<onAnima<on

4/10/09 2

TypeofPage:

MacinWebsiteStoryboards LastUpdated:2/25/09Page:2

ProgrammingNotes:

MaryMacinIndependentStudyProject

1 2 3

4 5 6

4/10/09 3

LastUpdated:2/26/09Page#:3

1.Logo–ThisspaceisreservedfortheofficialTAGAlogo.Thislogowillappear Inthesameplaceoneachpage.

1. PrimaryNaviga<onPane–EachorbonthispaneisabuZonthatcorrespondswiththe7primaryareasofthesite(Membership,Orders,Gallery,Events,AboutUs,ExternalLinks,andContactUs).

2. SecondaryNaviga<onPane–TheHomePage’ssecondarynaviga<onpanewillinclude2‐3picturesthatwillserveasquicklinkstoimportantsec<onsofthesite.IncludedonthisstoryboardisalinktotheNewMemberspartofthesite(“JoinUs”picture),andalinktotheOrdersec<onofthesite(“Orders”picture).AthirdpicturebuZoncouldpoten<allybeaquicklinktothe“Members”sec<on,the“PictureGallery”or“Events”sec<on.

3. QuickLinks–Internallinkstothreebasicsec<onsofthesite:“Home”,“SiteMap”,and“Search”.

4. WelcomeMessage–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“IllinoisStateUniversityChapter”isaplaceholderforasub<tle.

5. Body–ThebodyoftheHomePagewillincludeonlyafewelementstoavoidacluZeredappearance.The3essen<alelementsthatwillbeincluded:

a. “WelcomeMessage”fromeitherthecurrentTAGAPresidentorfromtheTAGASponsor.Toaddtothemedia‐richcontentonthesite,thismessagewouldideallybeawell‐shotvideo.

b. “TAGAAnnouncements,”“SpecialPromo<ons,”or“What’sHappeningToday?”sec<on.Thiscouldchangedaily,weekly,etc.Itwouldbea2‐3itemlist,andwouldonlyincludeitemsthatarerelevantandshort‐term(suchasGraphExpoorasaleonmerchandise,etc.).

c. “RecommendedSec<ons”Textwouldbesomethinglike:“Newtooursite?Hereareafewofourfavoritesec<ons.Feelfreetoroamaround!”Sec<onslistedherewouldbefornewmembersornewcustomers(“Gallery”,“Events”,“Orders”,etc.)Purposewouldbetogivenewvisitorssomedirec<onofwheretostart.

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 within the site. The TAGA logo will always link back to the “Home” page. The pictures in the secondary navigation bar are also buttons. The body text will likely include several links to other parts of the site, and there are “Quick Links” at the bottom of each page.

Colors: White sandstone background with charcoal gray sandstone

border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and black borders. Font is Black, Dark Gray, Red, and White.

Images: There will be at least 2-3 pictures on this page. The “Join Us” picture will probably be a TAGA group photo, the “Orders” will probably be an image of a product, or of a current member working on a product. Page may also include a short “Welcome” video.

Text: The primary navigation buttons are Futura font. The picture 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.

TAGA–TechnicalAssocia<onofGraphicAr<stsHomePage

4

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 5


1. Logo–ThisspaceisreservedfortheofficialTAGAlogo.Thislogowillappear Inthesameplaceoneachpage.


3. SecondaryNaviga<onPane–TheMembers’Pages’secondarynaviga<onpanewillincludebuZonsthatwillchangethetextcontentandanypicturesonthatpagetomatchtheappropriatesubsec<on.Forexample,inthe“WhoWeAre”subsec<onofthe“Prospec<veMembers”pagewillincludethehistoryofTAGA,thecurrentmembers,andanyper<nent“Bio”informa<on.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“MembersProspec<ve”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“WhoWeAre:”.

6. Body–Thebodyofthemain“Prospec<veMembers”pagewillincludeashort“Welcome”message,andamessagethatguidesthemtocheckoutthebuZons“ontheleQ”tofindoutmoreaboutus.

ThesixbuZonsintheSecondaryNaviga<onPanewillnotopennewpages,somuchastheywillchangethetextcontentandanyassociatedgraphicstomatchthatheading.

BuZon1:“WhoWeAre”‐‐Historical&Biographicalinforma<on BuZon2:“WhatWeDo”‐‐Mee<ngInfo,EventInfo,&T‐ShirtInfo BuZon3:“WhenWeMeet”‐‐Scheduleofmee<ngs(andwhere!) BuZon4:“WhereWeGo”‐‐GraphExpo,BBQ’s,fieldtrips,etc. BuZon5:“WhyShouldIJoin”‐‐ValueofJoining.RelevanceofTAGA. BuZon6:“HowCanIJoin”‐‐MembershipInfo/Instruc<ons/ContactInfo

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 within the site. The TAGA logo will always link back to the “Home” page. Buttons along the left side change the text & graphic content of this page. There are “Quick Links” at the bottom of each page.

Colors: “Pink-ish” sandstone background with red sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and red borders. Title font is stylized (drop shadows) red, and white. Body text will be red, white, dark gray, or black.

Images: There will be pictures or graphics on this page to break up the text. Pictures may be “Flash” photos that change much like the current TAGA website. Pics will be relevant to the textual content.

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.

TAGA–TechnicalAssocia<onofGraphicAr<stsProspec<veMembersPage

6

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 7




3. SecondaryNaviga<onPane–TheMembers’Pages’secondarynaviga<onpanewillincludebuZonsthatwillchangethetextcontentandanypicturesonthatpagetomatchtheappropriatesubsec<on.Forexample,inthe“Schedules”subsec<onofthe“CurrentMembers”pagewillincludethemee<ngsschedule,workschedule,andanyupcomingeventsforcurrentmembers.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“MembersCurrent”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“Schedules:”.

6. Body–Thebodyofthemain“CurrentMembers”pagewillbeagatewayforcurrentmembers’accessto“MemberOnly”content,andanyinforma<on/announcementsthatTAGAleadershipwantstheotherstobeawareof.Thiscouldalsobeapoten<alsourceof“socialnetworking”formembers.

ThefourbuZonsintheSecondaryNaviga<onPanewillnotopennewpages,somuchastheywillchangethetextcontentandanyassociatedgraphicstomatchthatheading.

BuZon1:“Schedules”‐‐Mee<ng,Event,andWorkSchedules BuZon2:“MemberAccess”‐‐Loginaccesstosite. BuZon3:“Events”‐‐LinktoEventGallery&Infoaboutpast/futureevents BuZon4:“ContactInforma<on”‐‐Officer/Sponsor/ISUcontactinfo


Colors: “Pink-ish” sandstone background with red sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and red borders. Title font is stylized (drop shadows) red, and white. Body text will be red, white, dark gray, or black.

Images: There will be pictures or graphics on this page to break up the text. Pictures may be “Flash” photos that change much like the current TAGA website. Pics will be relevant to the textual content.

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

TAGA–TechnicalAssocia<onofGraphicAr<stsCurrentMembersPage

8

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 9




3. SecondaryNaviga<onPane–TheOrders’Pagesecondarynaviga<onpanewillincludebuZonsthatwillchangethetextcontentandanypicturesonthatpagetomatchtheappropriatesubsec<on.Forexample,the“OurPrices”subsec<onofthe“Orders”pagewillincludeTAGA’scurrentpricestructure,whereasthe“Specifica<ons”subsec<onwillhaveinforma<onaboutthekindsofordersTAGAcanfulfill.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“Orders”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“OurPricing”.However,the“OrderForm”and“Porrolio”buZonswillleadthevisitortoseparatepageswithinthesite.

6. Body–Thebodyofthemain“Orders”pagewillbeagatewayforcustomer’stonavigatethroughtheothercommercesubsec<onsofthesite.Itmaybebeneficialtousethisspacefor“instruc<ons”thatguidepoten<alcustomersthroughyourorderingprocess,<meframes,whattoexpect,etc.

TwoofthefourbuZonsintheSecondaryNaviga<onPanewillnotopennewpages,somuchastheywillchangethetextcontentandanyassociatedgraphicstomatchthatheading,theothertwo(men<onedabove,arelinks).

BuZon1:“OurPrices”‐‐Prices,BuyingOp<ons,lotsofgraphics. BuZon2:“Specifica<ons”‐‐GuidelinesregardingTAGA’sorderprocess BuZon3:“Porrolio”‐‐LinktoTAGA’sPreviousWorkGallery.(“Porrolio”) BuZon4:“OrderForm”‐‐Interac<vePDFOrderForm.Willopeninnew

window.


Colors: Light Green sandstone background with Dark Green

sandstone border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light green borders. Title fonts are dark & light green. Body text will be either a very dark green or black.

Images: There will be Flash “ads” on this page, showcasing what TAGA can do for their customers. May also have Flash “prompts” to click on certain links (buttons) to access pertinent sections of the site.

Text: The primary navigation buttons are Futura font. The Title and Subtitle font are Helvetica, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Trebuchet (Bold).

TAGA–TechnicalAssocia<onofGraphicAr<stsOrdersPage

10

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 11




3. SecondaryNaviga<onPane–TheGallery’sPagesecondarynaviga<onpanewillincludebuZonsthatwillnavigatebetweendifferent“slideshows”ofTAGApictures.Therewillbealinktovirtualtoursofthefacili<es,anyvideosTAGAwantstoshare,aswellasEventphotos,apastwork“porrolio”page,etc.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“Orders”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“Porrolio”.

6. Body–Thebodyofthemain“Gallery”pagewillbeavariousformatsofgalleries.Therewilllikelybephotoslideshows,videos,virtualtours,andIamworkingonaconceptforacorkboard“pictureboard”with“Polaroid's”thatframeeachpicture,andpossiblywillbeinterac<vetothepointthattheycanbe“enlarged”orevencontainvideosthatcanbe“entered”byclickingonthepicture.*Notsurethetechnologyexistsforthis,butthisismygoal.

BuZon1:“Porrolio”‐‐TAGA’spastwork.Possiblymemberporrolios? BuZon2:“CurrentWork”‐‐PictureslideshowofTAGA’scurrentwork BuZon3:“EventGallery”‐‐PicturesofTAGAevents(see“pictureboard”) BuZon4:“Videos”‐‐Anyvideos(how‐to’s,events,Introanima<on,etc.) BuZon5:“VirtualTours”‐‐VirtualToursofthefacili<es. VERYMEDIARICHsec<onofthewebsite!!!


Colors: Orange sandstone background with “School Bus” Yellow sandstone

border. Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light orange borders. Title fonts are white & subtitle fonts are purple. Body text will likely be white, light orange, yellow, or purple to match other font themes on page.

Images: All images will be in this section somewhere. The intro animation, welcome video, and any other pictures on the site will also be here. May incorporate contemporary graphic elements such as “Polaroid's” or a “bulletin board”. I have collected some images of these if you would like further information.

Text: The primary navigation buttons are Futura font. The Title and Subtitle font are Futura, and the Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Futura.

TAGA–TechnicalAssocia<onofGraphicAr<stsGalleryPage

12

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 13




3. SecondaryNaviga<onPane–TheEvents’Pagesecondarynaviga<onpanewillincludebuZonsthatwillchangethetext,calendars,andimages/graphicsonthepagetomatchthechosenbuZon.Thesub<tleofthepagewillchange,aswillthebodyofthepage,butthe<tle,buZons,colors,andotherelementswillremainthesame.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“Events”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“Upcoming”.

6. Body–Thebodyofthemain“Events”pagewillbevaryingcalendars,schedules,pictures/graphicstomatchtheupcomingevents(aGraphExpologo,forinstance).TAGAflyerscouldalsobeuploadedandstudentscoulddownloadandprintthem.

BuZon1:“Upcoming”‐‐UpcomingTAGAevents.Graphics,Calendars,text. BuZon2:“Mee<ngs”‐‐Scheduleofupcomingmee<ngs/worksessions BuZon3:“Schedule”‐‐Couldbea“semesterview”calendar. BuZon4:“EventGallery”‐‐LinktogalleryofTAGAevents Mayalsowanttoincludemee<ngminutes(ifapplicable)oranyother

“Event”relatedcontent.


Colors: Yellow sandstone background with Orange sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light orange borders. Title fonts are Orange & subtitle fonts are white. Body text will likely be white or dark orange to match other font themes on page.

Images: Graphics will be calendars, some logos, and/or pictures to complement the events and schedules listed.

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.

TAGA–TechnicalAssocia<onofGraphicAr<stsEventsPage

14

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 15




3. SecondaryNaviga<onPane–TheAboutUsPage’ssecondarynaviga<onpanewillincludebuZonsthatwillchangethetextandimages/graphicsonthepagetomatchthechosenbuZon.Thesub<tleofthepagewillchange,aswillthebodyofthepage,butthe<tle,buZons,colors,andotherelementswillremainthesame.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“AboutUs”istheprimarysec<on,andanybuZonthatavisitorclicksfromtheSecondaryNaviga<onBarwillonlychangeasmallersub<tletomatchthatsubsec<on.Forinstance,“History”.

6. Body–Thebodyofthemain“AboutUs”pagewillbetextandpicturesofTAGAthroughouttheyears,aswellasthecurrentmembers.Flash“slideshows”maybeappropriateonthispagetoaddvisuals<mulialthoughthemainpurposeofthissec<onistotellthestoryofTAGA.

BuZon1:“History”‐‐HistoryofTAGAorganiza<on&HxofTAGAoncampus. BuZon2:“MissionStatement”‐‐Statement(s)thatexplainTAGA’spurpose. BuZon3:“ContactUs”‐‐Linktocontactinforma<onpage.


Colors: Light Blue sandstone background with Dark Blue sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light blue borders. Title font is Dark Blue & subtitle font is white. Body text will likely 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.

TAGA–TechnicalAssocia<onofGraphicAr<stsAboutUsPage

16

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 17




3. SecondaryNaviga<onPane–No<cetherearenobuZonsonthe“ExternalLinks”page.Atthis<meitmakesmoresensetohavelinksastext,oraspicturelinks(morevisuallyappealing)thantohavebuZonsdowntheside.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“ExternalLinks”istheprimarysec<on.

6. Body–Thebodyofthe“ExternalLinks”pagewillconsistofexternallinks,likelyintheformofpicturebuZons.Mayhaveshortdescrip<onsforeachlink,suchasanexplana<onforwhywehaveprovidedalinktoit,orjustashortdescrip<onofthesitebeinglinkedto.

Thefollowingorganiza<onsarelikelytobeincludedonthe“ExternalLinks” page: 1.ISUTechDepartment 2.ISUGraphicCommunica<onsDepartment 3.ISUHomePage 4.Na<onalTAGApage 5.GATF 6.SocialNetworking(Facebook?)


Colors: Light Blue sandstone background with Dark Blue sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and light blue borders. Title font is Dark Blue & subtitle font is white. Body text will likely 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.

TAGA–TechnicalAssocia<onofGraphicAr<stsExternalLinksPage

18

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 19




3. SecondaryNaviga<onPane–The“ContactUs”pageiscurrentlya“catch‐all”pageforAdministra<vetools,PrivacyAgreements,theSiteMap,etc.Assuch,therearelinksintheSecondaryNaviga<onpaneforanumberofthesefunc<ons.


5. Title–Providesavisualcuetothevisitorastowheretheyarewithinthesite.“ContactUs”istheprimarysec<on.Unliketheothermainsec<ons,thesecondarylinkswilllikelyleadtoseparatepageswiththeappropriateinforma<on.

6. Body–Thebodyofthe“ContactUs”pagewillbeneatlyorganizedcontactinforma<on,aswellasawaytosubmitemailfromthesite.Itmayalsobeusefultosetupacontactformwherevisitorscansubmitmessages(oremail)toacontactpersonformoreinforma<on,butthiswilldependonTAGA’sneeds.

Thefollowingsitetoolsarelinkedfromthispage: ‐SiteInfo ‐Privacy ‐Search ‐SiteMap ‐UserAgreement ‐AddContent ‐EditContent ‐Administra<onThesearesuggestedsitetools,butthefinishedsitemaynotincludealltools.The

formatforsitetoolpageswillbethesameasContactUswithappropriate<tle.


Colors: Gray sandstone background with Charcoal sandstone border.

Navigation Bars are 49% transparent with “Plastic” Graphic Style fills and gray borders. Title font is Black. Body text will likely be white, light gray, or black to match other font themes on page.

Images: There may be 1-2 TAGA related pictures on this screen, or possibly a graphic pertaining to the purpose of the page, but the only other graphics might be pictures that correspond to specific individuals contact information.

Text: The primary navigation buttons are Helvetica font. The Title is Optima Extra Bold. The Quick Links are Futura. The body text will likely be Verdana, Trebuchet, or Helvetica. Secondary Navigation Buttons are Helvetica.

TAGA–TechnicalAssocia<onofGraphicAr<stsContactUsPage

20

TypeofPage:


ProgrammingNotes:


1 2

3

4

5

6

4/10/09 21


early attempt at website storyboards (storyboarding)

Design