center for creative photography redesign

68
Center for Creative Photography Redesign John Gutmann, Modern Dancer in Extreme Position, 1939

Upload: rebecca-blakiston

Post on 19-Aug-2015

335 views

Category:

Education


3 download

TRANSCRIPT

Center for Creative Photography Redesign

John Gutmann, Modern Dancer in Extreme Position, 1939

The project team (envisioned)Name Role Hours per

weekRebecca BlakistonWeb Product Manager

Project LeadCommunication

6

Ginger BidwellWeb Developer

Technical LeadWeb designGraphic designDrupal modulesInformation architecture

6

Katharine MartinezDirector of CCP

Lead for CCPKnowledge of content, issues, usersDelegating work to CCP staff as needed

2

Samantha BarryWebsite Student Assistant

WritingDocumentationUsability testing

5

Jenny Gubernick Student Volunteer

WritingGoogle Analytics

3

The project team (reality)Name Role Hours per

weekRebecca BlakistonWeb Product Manager

Project LeadCommunication

610

Ginger BidwellWeb Developer

Technical LeadWeb designGraphic designDrupal modulesInformation architecture

620

Katharine MartinezDirector of CCP

Lead for CCPKnowledge of content, issues, usersDelegating work to CCP staff as needed

2

Samantha BarryWebsite Student Assistant

WritingDocumentationUsability testing

515

Jenny Gubernick Student Volunteer

WritingGoogle Analytics

3

Not to mentionName Role Hours per

weekJosh Williams(April – August)

Visual design lead 30

Gene Spesard Technical support 5

Monique PerezStudent Assistant

Adding metadataUpdating/fixing links

2

User Research phase

Website purpose

Target audience and personas

Competitive analysis

Card sort

Voice and tone

Defining a purpose for the site.ID Number: 98.120.248

Maker: Otto Hagel

Title: California Water

Date: 1961

Credit line: Hansel

Mieth/Otto Hagel Archive

Copyright: © 1998 Center

for Creative Photography,

The University of Arizona

Foundation

The CCP’s vibrant website exposes its unparalleled collections to the

international photography community, makes them easily discoverable and

accessible, offers unique interpretations of these collections, and inspires the

creation of new knowledge.

ID Number: 2000.126.45

Maker: Gutmann, John (1905-1998)

Title: The Shadow Knows (Nose)

Date: 1939

Credit line: John Gutmann Archive

Copyright: © 1998 Center for Creative

Photography, Arizona Board of Regents

Defining a target audience.

The average CCP website visitor

ID Number: 2000.146.58

Maker: Gutmann, John (1905-1998)

Title: VIsitor Looking at Oceanic Art

Exhibit

Date: 1939

Credit line: John Gutmann Archive

Copyright: © 1998 Center for Creative

Photography, Arizona Board of Regents

Is in the US (79%) and not in Tucson (67%)

Found the site by searching Google

Is visiting the site for the first time (71%)

Lands on the homepage

Visits 3 web pages and spends 4 minutes on the website

Researchers (Primary)

ID Number: 2000.157.82

Maker: Gutmann, John (1905-1998)

Title: The Scholar's Discovery, China

Date: 1945

Credit line: John Gutmann Archive

Copyright: © 1998 Center for Creative

Photography, Arizona Board of Regents

Scholars, curators, teaching faculty, graduate and undergraduate students, dealers, museum professionals, auctioneers, collectors, and reference librarians.

Some are local but many are out of state or international.

Primary Tasks for Researchers

● Is this a museum, a research center, a library, or what exactly?

● What is in the collection? ● Can I arrange to see items in person?● What research services are available? ● How do I obtain the rights to use it?● What is the current exhibition?

Conducting a competitive analysis.

ResearcherWebsite name What is in the

collection?Can I arrange to see items in person?

How do I obtain the rights to use it?

Other notes

National Gallery of Art

The Collection > No Resources > Visual Services

Hard to navigate

Harry Ransom Center

Collections > Research > Using the Collections

Using the Collections > Reproductions and Publication

Easy to navigate initially but content is very dense

Archives of American Art

Research Collections >

"How to Use This Collection" section

Yes. In collection record under "How to Use": Use requires an appointment

FAQ > "How do I get permission to publish documents or images?"

Very easy to use

Getty Research Institute

Search Tools and Databases > Search the Collection

Library > Using the Library

Library > Using the Library > Rights and Reproductions

Pretty but not that easy to navigate

Drafting an information architecture.About Us Our Story

PressAnnual ReportsConnect with us on FacebookPublications/Store

Ask Us FAQContact Us

Collections Fine Art PrintsRecent AcquisitionsRare Books and ReferenceOral Histories

Study and Research Research AssistanceFor EducatorsFellowships & Internships

Exhibitions and Events CalendarExhibitionsSpecial Events

Rights and Reproductions For EducationFor Publication

Visit HoursGetting Here

Establishing a voice and tone.

Conversational, not passive.Approachable, not intimidating.

Passionate, not ambivalent. Knowledgeable, not preachy.

Helpful, not frustrating.Welcoming, not full of jargon.

Professional, not pompous.Creative, not uninspired. Direct, not complicated.

Build phase

Wireframes

Documentation and deployment decisions

Structured content

Wireframes and initial designs

These designs went through a few iterations as static web pages, outside of Drupal.

Development and deployment decisions

We use Subversion and Redmine for source control, deployment and documentation. We applied that to Drupal by using features.

Features SubversionRedmine

drupal.org/project/features subversion.apache.orgredmine.org

The Drupal deployment problem

Features is a module that solves a Drupal problem: configuration and content are both stored in the database.

Drupal database

Content

Configuration

Drupal DeploymentHow do you test in dev, then stage then production?

Dev

Stage

Production

Make the same configuration changes once in each environment?

No, that's boring and error-prone!

Copy the database or specific tables from one to the other?

No, that's also error-prone and if you mess up you might be losing content.

Pfff. Just do everything in production - it's faster that way.

Just - no.

Our solutionUsing the Features module to export Drupal configuration to code. The code can then be deployed to stage and production using subversion and Features will manage changing the database settings to match.

Dev

Stage

Production

Make a change in the UI

Put that change into a feature

Use subversion to deploy the feature to stage and test it out

Use subversion to deploy the feature to production

Commit the feature code to subversion

Redmine

We used redmine for tracking bugs and work that was not yet done.

Redmine

Our workflow started with documenting work in redmine tickets. When code was committed with the changes (using features) we could reference the ticket and see it in Redmine's UI.

Structured content

We structured CCP's content to make it easier to maintain automatically. We were already on board with Drupal, but we decided to re-build the site using Drupal 7.

Existing Drupal site

The existing Drupal 6 site had a page title and HTML from the previous (static) website pasted into the body.

Copy this

Un-bold that

Delete this

Paste here

Paste in a new event here

And watch out for:

Did you paste from Word or an email message? Make sure the font is the same as the rest of the page.

Are you using bold and italics the same way for each event?

Right amount of whitespace?

Don't touch this heading

Existing Drupal 6 site

The existing content needed manual changes all the time, and the process was error prone. Updates for the events page went something like this.

Current events appear here, sorted by date

When events are over, they move automatically to the Past Events section.

New site

The content manager enters the event data one time including a date. Events automatically change their display when they're over.

Artist content type

A content manager can now enter data about an artist one time, and it can be displayed in an image list, a table on another page and potentially even on another website.

Image credits on the old website

Content managers had to copy-paste or re-enter credit information each time an image was used on the site. Lack of structure meant that they could not be easily styled consistently.

Artist name (linked to full artist record)

Credit line

Copyright

Image file (automatically sized for different contexts)

Title, date

Consistent credits on the new site

The content manager now enters metadata about the image and the display is controlled automatically resulting in a much more consistent style.

Promoting content

On the old Drupal site, the homepage was in PHP code input format. Content managers didn't have control over it.

Promoting content

In the new site, content managers can define what's most important within the content structure. We also added a random element on the homepage to keep content fresh even when staff were not available to select content.

Maintaining a form

In the old site, the form for requesting rights and reproductions was difficult to use and change.

Maintaining a form

In the new site, Webform module provides a WYSIWYG UI for managing the redesigned forms.

Design and front-end development

Photo source: http://ccp.uair.arizona.edu/item/33268

Mobile vs Desktop use

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205

http://gs.statcounter.com/#mobile_vs_desktop-ww-monthly-201105-201205http://smartonline.com/smarton-products/smarton-mobile/smartphones-pass-pc-sales-for-the-first-time-in-history/

Responsive Web Design vs. Separate Mobile Site

http://ccp.uair.arizona.edu/item/21795

Responsive Design

Media Queries

@media (max-device-width: 480px) {

// mobile styles

}

@media (min-device-width: 481px) {

// desktop styles

}

allow developers to check properties or states of a device

Fluid Gridsallow content to adapt to fit available space

Fluid Grids = More Math

Use percentages rather than pixels to define widths. To get these percentages, we use this simple formula: target / context = percentage

http://ccp.uair.arizona.edu/item/31561

Target 500px

Context 900px

Fluid Mediamax-width = 100%

Design Requirements

ID Number: 2000.127.68Maker: Gutmann, John (1905-1998)Title: Ordinance Rule Penalty, San Francisco WaterfrontDate: 1939Credit line: John Gutmann ArchiveCopyright: © 1998 Center for Creative Photography, Arizona Board of RegentsCCP Rights & Reproductions

http://ccp.uair.arizona.edu/item/23192

Thumbnail Credits On Hover

ColorsUniversity of Arizona's secondary color palette

CSS Preprocessors

SCSS Mixin

Compiled CSS

http://ccp.uair.arizona.edu/item/24345

"major website concerns"

"let's have another meeting""we don't like the font. the colors are awful."

http://ccp.uair.arizona.edu/item/37349

Takeaways

http://ccp.uair.arizona.edu/item/32538

Next steps.

Maker: Gutmann, John

(1905-1998)

Title: In Two Directions

Date: 1939

Credit line: John Gutmann

Archive

Copyright: ©1998 Center for

Creative Photography, The

University of Arizona

Foundation

Questions?

Ginger Bidwell [email protected]

Rebecca Blakiston [email protected]

Josh [email protected]

Maker: Andreas Feininger

Title: ????? - >Orb weaver webs decorating the

ironwork of a bridge across the Housatonic River

in Connecticut, n.d.

Date: n.d.

Credit line: Andreas Feininger Archive

Copyright: ©1999 Center for Creative

Photography, The University of Arizona

Foundation