For the Pasión Y Arte Flamenco Dance troupe of Philadelphia, I created an informational website ahead of their hosting the 2012 Philadelphia International Flamenco Festival.
I worked with the troupes artistic director to create design, content I worked with the troupe’s artistic director to create design, content, and marketing goals. We also collaborated on the site’s information structure, although I ultimately constructed the IA and collected all of the necessary content from existing flyers, announcements, and similar materials, which were then collated into a cohesive whole with the help of a copywriter.
The site’s primary function was to inform people about the troupe’s works and shows, while also showcasing the organization’s flamenco instruction school and its classes and other offerings.
The site was designed to be an inspirational promotional piece for the 2012 Philadelphia International Flamenco Festival, conveying the intensity and excitement of both the troupe and flamenco as a whole.
Aesthetics & UI:
Following an in-depth analysis of the artistic dance space where Pasíon y Arte operates, I developed an aFollowing an in-depth analysis of the artistic dance space where Pasíon y Arte operates, I developed an aesthetic direction report, which I presented in person, along with a mood board and initial homepage mockups for the website.
The idea was to emphasize the “passion” aspect of Flamenco, using dark and vibrant colors, with eroded textures and patterns evoking its old world appeal and romantic intensity. I wanted to highlight the Caravaggio-like intensity of the tableaus the troupe creates, as well as the rich lineage and enveloping music that informs and delights the dancers.
The design direction relied on video motion graphics backgrounds with simple color and text overlays and new CSS functionality at the time. When this site was designed, mobile-first design was still in its early stages, and most of PYA’s audience, an older demographic, mainly accessed the web from computers rather than the 3-year-old modern smartphones of the time, which had small screens. This site was primarily designed for desktop use and focused on capturing the essence of the dance troupe, as well as promoting their various activities, events, and classes.
Another interesting aspect of this period in web design history is that it was technologically far removed from today’s highly flexible and extendible front-end landscape.
This limited my web typography options, including the available fonts and formatting choices. I circumvent some of these limits by using image text for titles, buttons, and so on.
Similarly, the technologies to use video backgrounds and color/image and text overlays were just hacks to bypass the very real limitations of CSS and browser compatibility, especially at the time of the still dominant MS Internet Explorer.
Motion Graphics:
We wanted to feature evocative background videos on some of the site’s pages, incorporating the textures and colors of the performances to emphasize the emotional content of the troupe and flamenco. These composited videos, like the still illustrations, blend existing documentation videos with textures, patterns, and colors to convey the emotions, passion, and sounds of flamenco.
Screenshots of the live site:
UX/IA Content Direction:
The UX and Information Architecture work for this website was relatively simple, as it lacked complex user-facing functionality, but it still had to be easy to navigate, present relevant information clearly, and be visually engaging and inspirational.
Bellow, the UX/IA content structure Wireframe Deck, This was created with the UX diagraming tool Omnigraffle.
