My Role:
Art Direction, UX/UI, Design
Art Direction, UX/UI, Design
An Online Exhibition of a Global Art Project
INSIDE OUT is a global participatory art project launched by large-format street “pasting” artist JR. INSIDE OUT gives everyone the opportunity to share their portrait and make a statement for what they stand for. It is a global platform for people to share their untold stories and transform messages of personal identity into works of public art. With over 150,000 portraits across 8,000+ locations INSIDE OUT needed a method to exhibit individual projects and group actions online as well as display portraits from their traveling photo booths organized by cause and location.
Colors, Type, & Textures
Since the portrait posters are printed in halftone I decided to go with a monochromatic color scheme with one highlight color for contrast. The whites, blacks, and grays made for a very subdued aesthetic so I had to find a highlight color that was bold, could be used sparingly, and provided a sense of direction for the user.
Proxima Nova Condensed felt like a strong display font to carry its own weight in contrast to the bold imagery and was also available as a web font so it was a double win!
Wanting to carry the visual theme of paper posters, halftone printing, and street art I brought in a lot of the same textures found in the physical world to the online experience.
Proxima Nova Condensed felt like a strong display font to carry its own weight in contrast to the bold imagery and was also available as a web font so it was a double win!
Wanting to carry the visual theme of paper posters, halftone printing, and street art I brought in a lot of the same textures found in the physical world to the online experience.
Footage From The Streets
A major componete of the INSIDE OUT PROJECT is the documentation that takes place after the posters have been pasted in a public place. The INSIDE OUT team wanted a way to feature videos from their YouTube channel in correspondence with its location on a map. A featured video panel would be available on initial load and scroll down out of view once a user started engaging with the map.
Project Preview
With each individual and group action having its own dedicated profile page I wanted to provide a way to quickly preview several actions within the context of the map. A selected map marker indicates cause, location, action title, total number of portraits, and small gallery of featured portraits. The viewer has the option to dive deeper to the actions profile page or preview other surrounding actions.
Participate
Three options to participate by starting a new project, volunteer for upcoming or ongoing projects, or making donations all relative to your geolocation.
Sort By Location or Cause
A simple vertical scrolling list on the left reorients the map and highlighted projects on the right. By default the map is available at the world view and is available to be scaled to provide more or less detail on the projects within a specific area.
Photo Booths
Another aspect of the INSIDE OUT PROJECT is the traveling and semi-permanete photo booths where visitors can come, get their picture taken, have their portrait printed on the spot and then paste their poster in a public space as part of an overarching cause or statement. Each photo booth can produce several thousand portraits with locations in the USA, Japan, China, Switzerland, France, Israel, Palestine, and United Arab Emirates. The INSIDE OUT team wanted a way to highlight a few portraits from each location and link to a dedicated site for the individual photo booths.
Project Profile, Gallery, & Press
Each project has a dedicated profile complete with a statement, portraits, documentation photos or video, local/national press the project may have received, and a dedicated URL for easy sharing. To easily navigate between the map and profile a small map display is shown to give location context and location/cause tags are listed to encourage users to view related projects. Each individual portrait within a project is given a dedicated URL and can display the printed portrait and any documentation footage corresponding with that specific portrait.
