Skip to main content

Museums and the Web

An annual conference exploring the social, cultural, design, technological, economic, and organizational issues of culture, science and heritage on-line.

Differentiating Online Gallery Spaces within Larger University Branding Initiatives

Lauren Razzore, William Paterson University, United States

http://www.wpunj.edu/

Abstract

William Paterson University underwent a lengthy Web branding campaign in 2010 that unified the online presence of the college. Overall university templates drive the design of every website on campus. While this may be appropriate for the vast majority of college departments and groups, it has remained important for the University Galleries, Art Department galleries and cultural art spaces to differentiate themselves online. Through a series of design phases and hard-fought compromises I have been able to give each of the online galleries its own unique design, while still complying with the overall University branding campaign. Using case studies as models, the paper identifies key aspects for integration into the William Paterson's cultural and gallery websites. By sharing the websites of the University Gallery, the Center for Chinese Art, the Center for Computer Art and Animation and the Art Department, together with the evolution of those sites throughout the process, I will demonstrate keys ways for online galleries to differentiate themselves within an overarching design scheme while still complying with university branding goals.

Keywords: design, branding, university galleries, content management systems, web design

1. Introduction

William Paterson University completed an expensive Web branding campaign in 2010 unifying the online presence for the college. Overall university templates drive the design of every website on campus by using a back end Content Management System (CMS) that limits changes to the overall design and branding of websites. While this is appropriate for the vast majority of the college's departments and groups, it has remained important for the University Galleries, Art Department galleries and cultural art spaces to differentiate themselves online.

Using a series of basic Web design principles I compared case study university gallery websites with the larger branding of their respective schools. Based on those findings I developed a series of goals for our own website projects, highlighting areas within the William Paterson University CMS system where gallery spaces could distinguish themselves. With those results in mind, I then focused my research on the implementation of those goals within the William Paterson University websites. Through a series of design phases and hard-fought compromises, each of the online galleries and cultural spaces has its own unique design features, while still complying with the overall University branding campaign. In this paper I will present each of the case studies examined and the implementation of those findings into our own websites.

2. Case studies

For the purpose of this study I identified the primary goals and functions of university website design dealing specifically with online gallery and cultural spaces. Using industry-standard Web design principles such as relevance of content, site organization, and presentation of material, the sites were evaluated for effectiveness, outreach and uniqueness of design.

The following questions were posed when reviewing each website:

  1. Is this website for a gallery or cultural space branded in the same way as the overall university or does it have unique design features?
  2. What are the navigation options? Is it easy to access the university websites from the gallery homepage?
  3. Is it easy to enter the online gallery/cultural spaces from the main university page? How many clicks does it take?
  4. Does the website showcase art work prominently? How many clicks are required before a user can see art work?
  5. Does the website use interactive tools such as flash to showcase itself and the work being done at the gallery?
  6. Does the site use common outside sources to engage users such as Facebook, YouTube, Myspace or any other networking and information-sharing source? Are those directly related to the school or unique to the sub-site?

Princeton University Art Museum (http://artmuseum.princeton.edu/)

  1. The Princeton University Art Museum has a unique design that has clearly been inspired by the overall university branding (colors, fonts) but has its own separate identity. The website has a more intimate feeling, using more white space and cooler gray tones. Additionally, the use of images is more prominent on the gallery site and within the layout. While it clearly identifies with the university brands, it has been created to have a distinguishable identity.
  2. The site's navigation is museum-centric. Only one small icon on the bottom indicates a way to return to the main university page. In the main navigation bar, all links lead to museum-branded pages within the website, rather than outside to overall university links.
  3. In the main Princeton University web navigation bar is a section called "Arts" for users to access all online cultural spaces, including the museum. It takes two easy and intuitive clicks to access the museum website through this route. Additionally, a link can be found under the section "campus life". It takes three overall clicks to enter the museum webpage through that portal, and it is not extremely intuitive.
  4. On its homepage the website shows a sampling of linked images featuring current collections. The collections section is robust and full of images and it is easy to access from both the navigation bar and the homepage links.
  5. The site uses primarily HTML pop-ups for images and straightforward design without interactivity. In the "Web Projects" section, however, there are several interactive flash pieces that highlight some of the museum's online projects. Each of these animated interactive mini-sites has a unique design (but still fits with overall branding).
  6. The museum has its own Twitter feed and Facebook account as well as having an email collection option on the site. These are separate from the university branded social networking and are specific to the happenings at the museum.

Yale Art Gallery (http://artgallery.yale.edu/)

  1. The Yale Art Gallery has a unique design that departs greatly from the overall university branding. It has a completely separate identity in its use of colors and fonts as well as layout and styling. Unlike the very consistent design of the university pages, the gallery pages change color and integrate more creativity, using rollovers and interactivity as well.
  2. Users cannot get to the university homepage from the Yale Art Gallery homepage. The site exists as its own entity with no links directly to the school, although it does reference resources for students in some sub-pages.
  3. In the main navigation for the university under the "Academic Programs" section is a "Museums and Galleries" subsection. From here, users can navigate to the main gallery website. It takes three clicks to get to the Yale Art Gallery site through this route.
  4. The main page of the website has an image of the gallery, and the first item on the navigation bar is "The Collection" which directs by category to images from each of the robust collection of works. The website is organized in an easy-to-use fashion, directing users to an extensive database of images with minimal searching.
  5. The site uses primarily HTML pop-ups from its collections to show larger versions of the works. There are interactive and reactive menus throughout the site adding to the overall user experience. Similar to the Princeton University Gallery, the Yale Art Gallery site features online-only exhibitions. In these stand-alone mini-sites are several interactive flash pieces highlighting the online projects the museum is working on, each with its own unique branding.
  6. While the university has its own social networking presence, the gallery does not integrate any social media into its website.

Montclair State University Art Gallery (http://www.montclair.edu/Arts/galleries/)

  1. The Art Gallery website has the same layout and look as all other Montclair State University pages and differs only in its color scheme. While the main university pages feature school colors prominently, the gallery pages use a cooler color scheme and more gray tones. This distinguishes it slightly from the overall branding but keeps it within university-generated templates.
  2. The site sits within the main university template and therefore retains top-level university navigation making it seamless to go from one site to the other. The navigation for the gallery is secondary to the main university navigation.
  3. Locating the gallery website takes several clicks. Currently the user must infer that it exists under the "Campus Life" section and from there click on "Arts". Once there, links to the arts section are easy to access.
  4. There is a prominent presence of images on the main gallery page featuring works in the current exhibitions. The exhibition section of the site features a variety of images from the collections, and each subsection of the website features images from the gallery. Images from the collections are served on HTML pages that require the user to go back and forth from each image to see more. It is a time-intensive way to serve images and discourages users from digging further due to poor information serving and heavy click counts.
  5. The website does not make use of any interactive online galleries or tools.
  6. While the university has its own social networking presence, the gallery does not integrate any social media into the website.

Mount Holyoke College Art Museum (http://www.mtholyoke.edu/artmuseum/)

  1. The Mount Holyoke Art Gallery has a unique design that departs greatly from overall university branding. It has a separate identity in its use of colors and fonts as well as layout and styling. Unlike the very colorful overall university website, the gallery website features mainly grey and white tones. The navigation, design, layout and branding are completely separate and unique.
  2. The navigation of the page leads to the gallery only. It does not pull any navigation from the main site. Gallery navigation is at the top and one can only access the university website by scrolling to the bottom of the page and clicking on the Mount Holyoke College logo.
  3. On the main university website the users have to intuit that if they rollover "Student Life" they will find the arts. This is not always easy for users to put together quickly, but since the navigation features an easy-to-use rollover drop down menu, it becomes more accessible. Once the user rolls over "Student Life" there is a subcategory for "Cultural Centers". While it takes four clicks to access the art gallery website, the path seems to be fairly logical and easy for users to decipher, although the click count is higher than most of the websites looked at for this study.
  4. The website features clickable images prominently on the homepage leading to related works. Each page of the site features images from the collections, and the exhibitions page allows users to dig more deeply into the library of images.
  5. The website makes use of the JavaScript 'light box' effect, creating an easy-to-use interactive tour through gallery images. It is a self-contained technique that avoids turning off pop-up blockers and does not open any new tabs. The technique is used effectively throughout the site.
  6. The gallery retains its own presence on Facebook as well as keeping an online art blog about the happenings at the museum. Additionally, it has an online sign-up for an email distribution list.

Pratt Institute Galleries (http://www.pratt.edu/about_pratt/visiting_pratt/exhibitions/)

  1. The Pratt galleries are branded using an overall university template and do not deviate from the standard layout of all other university pages.
  2. The website uses the overall university branding template and therefore retains upper level navigation specific to university links. As a result, all pages in the university website can easily be accessed from the navigation bar at the top of the page.
  3. Users looking for the university galleries page have to search through the upper level navigation (which does not feature drop down menus). As a result, users have to click on each section until they discover the gallery links can be found in "About Pratt". From there, a link in the main content of the page brings users to gallery websites. It takes three total clicks to enter the site, but it is through a route that may not be intuitive for users.
  4. The website features a robust amount of written information about the exhibits currently being shown and only a sample image from each show. In the "Past Exhibitions" section, there is a much larger group of images from each of the previous shows.
  5. In the "Past Exhibitions" section, images from exhibitions are served in a dynamic and interactive flash slideshow.
  6. The gallery has a reserved space on its website for a blog that has currently not been populated with any content. While Pratt Institute has an overall Facebook presence, the galleries themselves do not.

School of Visual Arts Student Art Online Gallery (http://www.schoolofvisualarts.edu/sa/index.jsp?sid0=201&sid1=202)

  1. This gallery space features student works and is an online-only gallery. As a result it fits within the overall design for the school.
  2. The website uses the overall university branding template and therefore retains upper level navigation that is specific to university links. All pages in the university website can easily be accessed from the navigation bar at the top of the page.
  3. "Student Art" is one of the top five major navigation options throughout the website and therefore is easily accessed from any point below the main level with one click.
  4. The website is robustly filled with images of artwork. Within the student art gallery a large number of images are featured on the top level of the page.
  5. The website relies heavily on flash animation and interactive tours through each department and its respective student work. The user can choose to advance through the works or the slideshow will proceed on its own.
  6. The School of Visual Arts makes use of social media in the form of iTunes U, blogging, Twitter, Facebook, and through an email distribution list. None of these services is specific to the Student Art section of the gallery but rather for the university as a whole.

3. Design Process

Based on these case studies, aspects of each site that were working effectively were identified and chosen for integration into our own website projects. Initially, the William Paterson University website had a completely separate design from the College of Arts and Communication and its sub-sites. During the conversion to a university-branded content management system, the challenge was to retain some of the uniqueness from our old design while still fitting within the new CMS-driven template. Goals for the new design based on our case studies included: integrated use of interactive tools such as flash (for images and video) and JavaScript-driven interactivity ('light box' effect), effective use and linking to social media outlets, prominent use of art and exhibition images throughout all sites, ease of navigation to and from the university main pages with minimal clicking, and creativity of design within the template.

4. Self evaluation

By answering our own case study questions once the new CMS site was implemented, we can gauge how well we accomplished our goals as compared to the six case studies. A cross section of five online gallery and cultural spaces was evaluated after design implementation. Each of the six case studies represented something relevant in our own group of sites and informed our final design decisions. By answering the questions posed to each of the case study websites, we can evaluate how well we achieved our goals.

William Paterson University Galleries (http://www.wpunj.edu/coac/gallery/)

  1. This section of the William Paterson website fits within the new university branding template with no obvious deviation.
  2. The website uses the overall university branding template and therefore retains upper level navigation that is specific to university links. As a result, all pages in the university website can easily be accessed from the navigation bar at the top of the page.
  3. "Cultural Events" is one of the top nine major navigation options throughout the overall university website and is therefore easy to access from any point below the main level. The gallery website is also on the top level of the secondary navigation within the College of the Arts and Communication website.
  4. The website features a large number of images from its permanent collection but does not showcase current show images prominently. This remains an area for improvement.
  5. The site makes use of interactive flash animation slideshows that play automatically.
  6. The College of the Arts and Communication maintains its own Facebook, Twitter and YouTube accounts featuring content from the three departments as well as in the galleries and cultural spaces.

William Paterson University Art Department Student Galleries (http://www.wpunj.edu/coac/departments/art/student.dot)

  1. This section of the William Paterson website fits within the new university branding template with slight deviation. Unique to this site is integration of the 'light box' JavaScript popup effect for student image previews. The galleries are located within the Art Department sub-site, which features a more creative use of the university-branded template. Despite working within a core template, creative use of images and interactivity sets this sub-site apart.
  2. The website uses the overall university branding template and therefore retains upper level navigation that is specific to university links. As a result all pages in the university website can be accessed from the navigation bar at the top of the page easily.
  3. "Academics" is one of the top nine major navigation options throughout the website and therefore is easy to access from any point below the main level. From there, users can access the art department site, where the "Student Art Gallery" is featured prominently in the main content as well as throughout in the secondary navigation.
  4. Artwork is the focus in this section of the website and can be easily accessed with one click.
  5. The site makes use of interactive flash animation slideshows that play automatically or can be advanced by the user. Additionally, the interactive 'light box' effect is employed to view larger versions of student images.
  6. The College of the Arts and Communication maintains its own Facebook, Twitter and YouTube accounts featuring events from the three departments as well as in the galleries and cultural spaces.

William Paterson University Center for Chinese Art (http://www.wpunj.edu/ccart/)

  1. This section of the William Paterson website fits within the new university branding template but with its own unique style. Singular to this site is a revised color scheme. Although the site still fits within the university template, it is the only one on campus (thus far) to alter the background color. To reflect the essence of the Center for Chinese Art, the background color has been changed to red, effectively integrating its own unique logo and branding.
  2. The website uses the overall university branding template and therefore retains upper level navigation that is specific to university links. As a result, all pages in the university website can be accessed from the navigation bar at the top of the page easily.
  3. A link to the "Center for Chinese Art" is found within the College of Arts and Communication website. From there, users navigate into the cultural center's website. It takes intuitive clicking to find the center within the university's website as a whole, but it is featured prominently within the College of Arts and Communication. Promoting this space throughout the site remains an area for improvement.
  4. The website features a sampling of images from current and past exhibitions. While not a robust collection, the imagery used represents the variety of work being done by the center. Creating an image catalogue with more depth remains an area for improvement.
  5. The site makes use of interactive flash animation slideshows that play automatically. More interactive content and online exhibitions are future goals for this site.
  6. The College of the Arts and Communication maintains its own Facebook, Twitter and YouTube accounts featuring events from the three departments as well as in the galleries and cultural spaces.

William Paterson University Center for Computer Art and Animation Gallery (http://www.wpunj.edu/coac/departments/art/computer-art-and-animation/animation-gallery.dot)

  1. This section of the William Paterson website fits within the new university branding template with no obvious deviation. Unique to this site is a video player embedded within the template.
  2. 1. The website uses the overall university branding template and therefore retains upper level navigation that is specific to university links. As a result, all pages in the university website can easily be accessed from the navigation bar at the top of the page.
  3. "Academics" is one of the top nine major navigation options throughout the website and therefore is easy to access from any point below the main level. From there, users can access the art department site, where the "Center for Computer Art and Animation" is featured prominently in secondary navigation.
  4. Animation is featured throughout this section and can be easily accessed with one click.
  5. The site makes use of an interactive video player that serves a large variety of student animations. Each video is selected and advanced by the user.
  6. The College of the Arts and Communication maintains its own Facebook, Twitter and YouTube accounts featuring events from the three departments as well as in the galleries and cultural spaces.

5. Conclusion

Overall, based on case study findings the sites within William Paterson University featuring gallery and cultural spaces have done well in achieving most of the goals set out. The integration of interactivity, social networking, diverse use of images, and creativity within the template have been achieved. While there is still work to be done and there are areas designated for improvement, the site continues to be evaluated and compared to those being developed at comparable universities. Future upgrades to the site will integrate more vibrant images and information about current shows in the galleries. Additionally, integration of online exhibitions like those at Yale and Princeton Universities are currently in progress. This project will make use of our art history, design and photography faculty and become a large part of the gallery site going forward. While unique branding and color scheme has been the cornerstone of the design in the Center for Chinese Art website, more images of current events and exhibitions as well as video content will enhance the user experience. True of all the William Paterson University gallery and cultural websites is attention to developing and integrating a robust collection of images online and continuing to develop easy, intuitive ways for users to access each of the sites.

6. References

California Institute of the Arts (online). Available: http://www.calarts.edu (accessed 15 December 2010).

Hunter College (online). Available from URL: http://www.hunter.cuny.edu (accessed 15 December 2010).

Hunter College Department of Art (online). Available: http://www.hunter.cuny.edu/art (accessed 15 December 2010).

Massachusetts College of Art and Design (online). Available: http://www.massart.edu (accessed 10 January 2011).

Montclair State University (online). Available: http://www.montclair.edu (accessed 25 January 2011).

Montclair State University Art Gallery (online). Available: http://www.montclair.edu/Arts/galleries/ (accessed 25 January 2011).

Mount Holyoke College (online). Available: http://www.mtholyoke.edu (accessed 25 January 2011).

Mount Holyoke College Art Museum (online). Available: http://www.mtholyoke.edu/artmuseum (accessed 25 January 2011).

Otis College of Art and Design (online). Available: http://www.otis.edu (accessed 15 December 2010).

Pratt Institute (online). Available from URL: http://www.pratt.edu (accessed 25 January 2011).

Pratt Institute Galleries (online). Available: http://www.pratt.edu/about_pratt/visiting_pratt/exhibitions/ (accessed 25 January 2011).

Princeton University (online). Available: http://www.princeton.edu/ (accessed 25 January 2011).

Princeton University Art Museum (online). Available: http://artmuseum.princeton.edu (accessed 25 January 2011).

School of Visual Arts (online). Available: http://www.schoolofvisualarts.edu (accessed 25 January 2011).

School of Visual Arts Student Art Online Gallery (online). Available: http://www.schoolofvisualarts.edu/sa/index.jsp?sid0=201&sid1=202 (accessed 25 January 2011).

William Paterson University (online). Available: http://www.wpunj.edu (accessed 25 January 2011).

William Paterson University Art Department Student Galleries (online). Available: http://www.wpunj.edu/coac/departments/art/student.dot (accessed 25 January 2011).

William Paterson University Center for Chinese Art (online). Available: http://www.wpunj.edu/ccart/ (accessed 25 January 2011).

William Paterson University Galleries (online). Available: http://www.wpunj.edu/coac/gallery/ (accessed 25 January 2011).

William Paterson University Center for Computer Art and Animation Gallery (online). Available: http://www.wpunj.edu/coac/departments/art/computer-art-and-animation/animation-gallery.dot (accessed 25 January 2011).

Yale University (online). Available: http://www.yale.edu/ (accessed 25 January 2011).

Yale Art Gallery (online). Available: http://artgallery.yale.edu/ (accessed 25 January 2011).

Cite as:

Razzore, L., Differentiating Online Gallery Spaces within Larger University Branding Initiatives. In J. Trant and D. Bearman (eds). Museums and the Web 2011: Proceedings. Toronto: Archives & Museum Informatics. Published March 31, 2011. Consulted http://conference.archimuse.com/mw2011/papers/differentiating_online_gallery_spaces