Case Study #1
Full-Width Artworks, Artwork Images, and Module Appearance/UX
The Issue (Artwork Example A | Full-Width):
It is currently impossible to:
A) Select an image file from Media Library as a Full-Width Artwork's main image,
B) Set the Full-Width Artwork's Image format [standard value]: to 'Artwork', and
C) Set the Full-Width Artwork's Image display [standard value]: to 'Grey display', without
D) 'Grey display' bleeding into Full-Width Artwork captions and button fields
The Context (Artwork Example A | 50/50)
Featuring "silhouetted" artwork images within web artwork modules has been part of the gallery's online workflow for many, many years. This allows for seamless viewing of artworks without any distracting backgrounds or shadows (if preferred).
Per existing workflows, the Photo Team typically "silhouettes" artworks within Photoshop, adds a bit of perimeter padding in-file, and exports images as transparent PNGs. JPEGs are used in some instances if the edges of an artwork are "hard" (perfectly lined), therefore requiring no further Photoshopping.
The David Zwirner Sales Team, as a result, has long been used to "artworks silhouetted on grey" as a visual option for various pages on the site (Exhibition Pages, Exhibition Checklists, OVRs, Art Fair pages, Homepage features, etc.). The introduction of the Full-Width Module, with its slight visual differences, has complicated the Creative Team's workflow and general ability to meet that expectation.
"Silhouetting artworks on grey" while maintaining clean captioning is achievable within 50/50 Artworks, and is visible when:
A) An image file is uploaded to Media Library and selected as a 50/50 Artwork's main image
B) A 50/50 Artwork's Image format [standard value]: is set to 'Artwork'
C) A 50/50 Artwork's Image display [standard value]: is set to 'Grey display'
Existing Workaround (Artwork Example C):
In order to mimic Artwork Example A | 50/50 Artwork appearance within a Full-Width Artwork, artwork images can be:
1st) Silhouetted (to the edge of the work) in Photoshop, rendered atop HEX:#F7F7F7 to mimic 'Grey display' settings/CSS, and saved as a wide JPEG for web
2nd) Uploaded to Media Library and selected as a Full-Width Artwork's main image, with Image format [standard value]: set to 'Thumbnail'
While this appears "as it should" on the front end of a webpage in both Full-Width and 50/50 renderings, its settings and main image present other issues:
- This workflow is quite time-consuming for the Photo Team, and opens up the opportunity for user error, artwork image misalignments, and other visual inconsistencies throughout webpages
- Different primary artwork images at different ratios = incompatibility between different artwork renderings (could be solved via customization and Artwork 2.0 features, but would be a nightmare logistically and time-wise)
- Padding around artwork edges is no longer uniform, responsive, or visually "neat" within artwork overlays, across devices, and different window sizes (this uniform padding can be observed in the artwork overlays of Artwork Examples A & B)
- JPEG images saved for web (artworks rendered atop HEX #F7F7F7 to mimic 'Grey display') have suddenly surfaced a visual difference between the front end's 'Grey display' (HEX #F7F7F7), the Desktop Artwork Overlay (HEX #EDEEF0), and the Mobile Artwork Overlay (HEX #FFFFFF) (Artwork Example D, slides 1 & 2)
1) Limit Image display [standard value]: 'Grey Display' dropdown functionality (within Full-Width Artworks) to div.greyDisplayArtworkImg only. This currently also affects div.artworkItem-details.greyArtworkColor.active within Full-Width Artwork Modules but not div.artworkItem-details.active within 50/50 Artworks)
2) Default div.greyDisplayArtworkImg, Desktop Artwork Overlay, Mobile Artwork Overlay HEX to #F7F7F7 when artwork Image display [standard value]: is set to 'Grey display', because:
A. Many legacy images have been formatted to match 'Grey Display' (HEX #F7F7F7) vs. the Desktop Artwork Overlay or Mobile Artwork Overlay HEX #s.
B. "Silhouetted artwork" images that include HEX #F7F7F7 padding (and are saved for web as JPEGs) could henceforth be used globally and/or specifically for 'click-to-zoom' artwork images. Currently, transparent PNGs are not a realistic option for the latter due to poor detail quality on top of massive file sizes when meeting the 2560x2560px click-to-zoom minimum. As a plus, these images would also appear seamless/responsive across the front end, within artwork overlays, on all devices, and in different window sizes.
3) Pursue a third Image display [standard value]: dropdown option of HEX #E8E8E8 (David Zwirner Photo's wall/tabletop value standard). If uniform across Front End, Desktop Artwork Overlay, and Mobile Artwork Overlay when selected, this would allow for a seamless "on-wall" experience akin to that outlined in 2) B. Though additional standardization of Photo Team workflows would be required, it would put an end to endless, web-specific rendering requests. This would also decrease image file sizes and wasted pixel space, resulting in faster load times, and improve UX.
*More context/visual examples below to come for this one!
To learn more about this artwork, please provide your contact information.
To learn more about available works, please provide your contact information