The arts scene in Washington, DC lacks variety in its representation of what all art can be—and more notably lacks diversity in which specific artists and designers are seen as more prominent.
To solve this, the fictionalized DC Arts Festival brand and website showcases Black artists, designers, and creators in a speaker series event which highlights all types of arts, including architecture, design, photography, and music.
Timeline
3 weeks
Wireframing and Branding: 1 week
Web Design: 1 week
Protoyping: 1 week
Web Design: 1 week
Protoyping: 1 week
My Role
Brand and logo design
Web design
Prototyping
Wireframing
Goal and Brief
Showcase this year's theme, A Celebration of Black Voices, to feature some of the DC area's most prominent Black artists, designers, musicians, and creators.
Create an engaging and interactive web experience that allows for exploration and discovery of the DCAF speaker series event.
Due to prototype limitations, interactive elements are disabled during animated sequences.
Process
Low-Fidelity Wireframes
These wireframes served as inspiration for the general structure of the site, with the three images as 'frames' which would fill the viewport with the active experience—Home, Explore, or RSVP—each indicated by an icon in the navigation on the bottom left.
Branding and Logo Design
The branding uses bold type and color to express vibrancy and friendliness. The individual colors from the gradient workmark are used distinctly to differentiate the five events. Using ITC Avant Garde Gothic as the base for the logo, I adjusted several letterforms to provide more of a dynamic feel—used Avant Garde Gothic along with Termina to form the typographic styles for the site.
Color Palette
Website and Interaction Design
Splash and Home
The overall site design follows a dark mode theme which presents users with an experience that feels immersive, sleek, and professional. The muted dark gray colors allow for the vibrant color palette to stand—bringing a sense of unity across the several different flows within the site.
Onboarding
As the Explore page presents users with more of an open-ended experience, a brief onboarding tutorial helps them understand what actions they can take, identify unfamiliar icons, and encourage site exploration. Users can use a mouse or trackpad to pan the map, filter events based on Metro lines, and select location pins to open horizontal event cards.
I chose to featured the DC Metro lines as a main element of the map to make navigating to the speaker events more accessible to users who may have limited access to private transportation.
Explore Experience
Map View
The main section of the site—'Explore'—offers users with a full screen view of the map of DC, with an overlay of pins representing the location of the events. While event cards are color-coded, large numerical pins stay fixed to event cards throughout the experience to distinguish the events without the use of color.
Speakers
The person icon in the upper right navigation transitions the explore page into a carousel of speaker photos color-coded to their respective event color—with respective event information fixed below speaker names. Clicking on the event module below each speaker photo opens that specific card in the Events list view.
Events List and Calendar View
The vertical event card carousel present users with event information in an engaging, carousel format. The numbered event pins remain fixed to the respective card to bring unity to the various screens of this Explore experience. Clicking on a horizontal card within this view opens a new tab in the user's default Calendar app, with information including event address, date, and time ready to be added to their calendar.
Alternatively, users can click the grid icon in the right navigation to transition to a week-long calendar view, more easily seeing how the events are scheduled in the context of the month of July.
RSVP
As the DCAF website offers a more exploratory look into the invite-only speaker series event, users can add their name to the waitlist to stay tuned for more information to come leading up to the month of the event—with more information about event specifics sent to their email.
Outcome
Takeaways
This site serves as a celebration of just a few of many Black artists and creatives local to the DC area – it was great finding more information about the design and art community of DC and learning more about all kinds of art and design during the process. Combining a bold color palette, experimental typography, and simplistic iconographic elements bring a sense of excitement to the DCAF branding—creating a vibrant, engaging, and enjoyable website experience used to promote DC Arts Festival—A Celebration of Black Voices.
