SlideShare a Scribd company logo
HOMEPAGE 
Navigation 
Displays main themes 
Quick asses to the major 
portion of the websites 
Might have dropdown 
menus if the themes 
have subtopics 
When clicked on the 
links will navigate to the 
main page of the theme 
Slider 
Features highlighed por-tions 
of the website 
Shows striking visuals to 
capture attention 
Small description of the 
article or story 
Four squares on left side 
are the pagination navi-gation 
Can show recently 
added content 
Exhibit Gallery 
Highlights featured sto-ries 
that aren’t listed in 
the slider 
The orangebar will pull 
up to reveal text when it 
is hovered over (jquery 
effect for interaction) 
When hovered the 
images will turn colored 
Articles 
Snippets of articles 
The text can be anything 
releated to the exhibit 
Just showing what 
bulleted lists and hyper-links 
will look like
WEB PAGE 
Featured header 
Shows the name of the 
theme & a brief, catchy 
description 
The background is an 
image relating to the 
theme 
Can also include a link 
to a feature portion of 
the theme 
Content Slider 
Serves as a small gallery 
of information that dis-plays 
an image and de-scriptive 
text 
The user can navigate 
through it using the pag-ination 
buttons at the 
bottom 
Dynamic content, stays 
on same page 
Content Text 
History of the theme 
General overview of the 
theme and what it en-compasses 
Sub-Navigation 
Navigation to access dif-ferent 
portions of the 
theme 
Highlights which page 
the user is currently on 
Will show submenu if 
there are multiple links 
under a category
Timeline Lightbox 
The lightbox allows an image to be viewed and explored in further detail. It loads as a new screen in the same tab window in the user’s web browser 
- Displays paragraph of information 
- Includes a snippet of the timeline in further detail 
- Magnifiying glass allows the user to view the image in further detail
Timeline 
The timeline is not the main focus of the this concept but an additional feature that enhances the user experience. As an educational tool, the timeline will help 
frame the time periods and how the stories overlap in a graphic format. It will color-coordinate the items listed on the timeline with respective color of the theme. 
- Displays image thumbnails with a brief description of what time period they took place in 
- Eras are divided by ta “three dimensional wall” 
- Timeline will scroll through when the user slides the bar to the next time period 
- When a thumbnail is clicked on it will bring up a lightbox of the respective image
Concept One 
Albany Institute of History & Art 
Designed by Adriana Morales

More Related Content

Similar to Albany Institue of History and Art Gallery storyboard

Technology Plan for new 4SiteStudios.com
Technology Plan for new 4SiteStudios.comTechnology Plan for new 4SiteStudios.com
Technology Plan for new 4SiteStudios.com
Riché Zamor
 
UI Design - Organizing the page
UI Design - Organizing the pageUI Design - Organizing the page
UI Design - Organizing the page
Vinod Wilson
 
Semantically Grouped Browser Tabs SteveJBayer
Semantically Grouped Browser Tabs SteveJBayerSemantically Grouped Browser Tabs SteveJBayer
Semantically Grouped Browser Tabs SteveJBayer
Steve Bayer
 
Storyboard
StoryboardStoryboard
Storyboard
morgandecker
 
microsoft powerpoint interface.pptx
microsoft powerpoint interface.pptxmicrosoft powerpoint interface.pptx
microsoft powerpoint interface.pptx
MariaSocorroButalAut
 
Modern SharePoint Content Management Training
Modern SharePoint Content Management TrainingModern SharePoint Content Management Training
Modern SharePoint Content Management Training
IT Industry
 
Website Analysis - Letting Go of the Words
Website Analysis - Letting Go of the WordsWebsite Analysis - Letting Go of the Words
Website Analysis - Letting Go of the Words
Drew Williams
 
Creating and editing a presentation with clipart
Creating and editing a presentation with clipartCreating and editing a presentation with clipart
Creating and editing a presentation with clipart
Wilmington High School
 
6 Navigation Bar Design Ideas for Web Designers
6 Navigation Bar Design Ideas for Web Designers6 Navigation Bar Design Ideas for Web Designers
6 Navigation Bar Design Ideas for Web Designers
Think Sumo Creative Media Inc
 

Similar to Albany Institue of History and Art Gallery storyboard (9)

Technology Plan for new 4SiteStudios.com
Technology Plan for new 4SiteStudios.comTechnology Plan for new 4SiteStudios.com
Technology Plan for new 4SiteStudios.com
 
UI Design - Organizing the page
UI Design - Organizing the pageUI Design - Organizing the page
UI Design - Organizing the page
 
Semantically Grouped Browser Tabs SteveJBayer
Semantically Grouped Browser Tabs SteveJBayerSemantically Grouped Browser Tabs SteveJBayer
Semantically Grouped Browser Tabs SteveJBayer
 
Storyboard
StoryboardStoryboard
Storyboard
 
microsoft powerpoint interface.pptx
microsoft powerpoint interface.pptxmicrosoft powerpoint interface.pptx
microsoft powerpoint interface.pptx
 
Modern SharePoint Content Management Training
Modern SharePoint Content Management TrainingModern SharePoint Content Management Training
Modern SharePoint Content Management Training
 
Website Analysis - Letting Go of the Words
Website Analysis - Letting Go of the WordsWebsite Analysis - Letting Go of the Words
Website Analysis - Letting Go of the Words
 
Creating and editing a presentation with clipart
Creating and editing a presentation with clipartCreating and editing a presentation with clipart
Creating and editing a presentation with clipart
 
6 Navigation Bar Design Ideas for Web Designers
6 Navigation Bar Design Ideas for Web Designers6 Navigation Bar Design Ideas for Web Designers
6 Navigation Bar Design Ideas for Web Designers
 

Recently uploaded

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Designforuminternational
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
qo1as76n
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
881evgn0
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 

Recently uploaded (20)

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
Discovering the Best Indian Architects A Spotlight on Design Forum Internatio...
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
哪里办理美国中央华盛顿大学毕业证双学位证书原版一模一样
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
一比一原版美国哥伦比亚大学毕业证Columbia成绩单一模一样
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 

Albany Institue of History and Art Gallery storyboard

  • 1. HOMEPAGE Navigation Displays main themes Quick asses to the major portion of the websites Might have dropdown menus if the themes have subtopics When clicked on the links will navigate to the main page of the theme Slider Features highlighed por-tions of the website Shows striking visuals to capture attention Small description of the article or story Four squares on left side are the pagination navi-gation Can show recently added content Exhibit Gallery Highlights featured sto-ries that aren’t listed in the slider The orangebar will pull up to reveal text when it is hovered over (jquery effect for interaction) When hovered the images will turn colored Articles Snippets of articles The text can be anything releated to the exhibit Just showing what bulleted lists and hyper-links will look like
  • 2. WEB PAGE Featured header Shows the name of the theme & a brief, catchy description The background is an image relating to the theme Can also include a link to a feature portion of the theme Content Slider Serves as a small gallery of information that dis-plays an image and de-scriptive text The user can navigate through it using the pag-ination buttons at the bottom Dynamic content, stays on same page Content Text History of the theme General overview of the theme and what it en-compasses Sub-Navigation Navigation to access dif-ferent portions of the theme Highlights which page the user is currently on Will show submenu if there are multiple links under a category
  • 3. Timeline Lightbox The lightbox allows an image to be viewed and explored in further detail. It loads as a new screen in the same tab window in the user’s web browser - Displays paragraph of information - Includes a snippet of the timeline in further detail - Magnifiying glass allows the user to view the image in further detail
  • 4. Timeline The timeline is not the main focus of the this concept but an additional feature that enhances the user experience. As an educational tool, the timeline will help frame the time periods and how the stories overlap in a graphic format. It will color-coordinate the items listed on the timeline with respective color of the theme. - Displays image thumbnails with a brief description of what time period they took place in - Eras are divided by ta “three dimensional wall” - Timeline will scroll through when the user slides the bar to the next time period - When a thumbnail is clicked on it will bring up a lightbox of the respective image
  • 5. Concept One Albany Institute of History & Art Designed by Adriana Morales