HIP-HOP
B
C
D
F
H
2
3
Altamont
Altamont
ideation
TOPIC RESEARCH The goal of this project was to create an interface that told a narrative. Whether it was historical, personal or theoretical, the topic needed to hold enough depth to sustain a semester’s worth of research and refinement. After some deliberation, I settled on a potential three topics worth exploring. Each topic shared the thread of an unexplored or forgotten area with plenty of depth. These were presented to the class in 11" x 17" format.
Brief Inception
What Went Wrong
Impact
‘60s Festival Culture
Hell’s Angels
Similar Incidents
Success of Woodstock
Meredith Hunter
Band Mentality
Purpose Audience Sound Media
Choice of Venue
The Murder Case
This interface will chronicle the various causes behind the disaster that was 1969’s Altamont Free Concert, cited as the “end of an era.” By studying this incident, we can understand how concert culture has changed, and why the hippie mentality of the ‘60s couldn’t last. Classic rock fans, primarily. The project also appeals to cultural historians and anyone who lived through the ‘60s as a youth. Music from the festival, provided by the Rolling Stones and the Grateful Dead. Photo and video-intensive website. Plenty of historical footage.
4
5
IDEATION
House Parties
House Parties
Brief Who
What
Why
Hosts
The Location
Local Culture
Musicians / DJs
Cost
The Crowd
Legal Issues
Historical Precedent
Purpose Audience Sound Media
This interface will follow the thought process behind throwing a house party in Philly. Who does it best, and what are their secrets? By analyzing the process of having a party, we can understand youth culture and celebratory rituals. There’s also room for historical comparisons—from ballroom galas to block parties. Anyone who enjoys a good time, but especially promotions employees / the social crowd. This will probably skew younger.
AltamontSlang Hip-Hop
Hip-Hop Altamont Slang
Brief Inception Topic
What Went Decade Wrong
Impact Region
‘60s Festival Criminal Culture
Hell’s 1980s Angels
Similar West Coast Incidents
Success of Woodstock Personal
Meredith Hunter 1990s
Band Mentality Midwest
Choice of Venue Social
2000s
The Murder TheCase South
Minimal. Either for affordances (clicking / hovering) or for musical purposes. Possible use of modern dance music and classic party hits. HTML / CSS-coded website. Highly interactive, with lightbox elements incorporated into sliced diagrams and imagery. Some video content, including interviews, will be necessary.
Economic
East Coast
Purpose Audience Audience Sound Media Sound
Media
This interface will document chronicle the various causes theterms disaster This a truncated historybehind of slang as that was 1969’s Free Concert, cited as the “end of an era.” used in rap and Altamont hip-hop music. By allowing studyingusers this incident, we can understand how concert By to navigate by year, geographical regionculture and has changed, and why hippiewill mentality of the how ‘60s slang couldn’t subject matter, the the interface demonstrate haslast. permeated culture shaped daily interactions. Classic rockmainstream fans, primarily. Theand project alsoour appeals to cultural
historians and anyone whocitizens. lived through theand ‘60s a youth. From teenagers to senior Rappers rapasfans alike will appreciate analysis of theirbyculture. Additionally, Music fromthe therich festival, provided the Rolling Stones detractors of this can learn more about the genre and gain a new respect for and music the Grateful Dead. the depth of its linguistics. Photo and video-intensive website. Plenty of historical footage. Several snippets from rap songs, from the ‘80s up until now, will be used.
Motion graphics that illustrate song lyrics will be created in After Effects and used as transitions in a Flash-based interface.
6
7
IDEATION
Nullam dictum tempus dolor in consectetur. Morbi eget justo eget velit suscipit ornare. Nunc eu lobortis nibh. Quisque ornare porta metus vel congue. Phasellus vitae ultrices urna. Fusce vel eros felis. In vitae augue nulla, id convallis lacus.
WEST COAST
Nullam dictum tempus dolor in consectetur. Morbi eget justo eget velit suscipit ornare. Nunc eu lobortis nibh. Quisque ornare porta metus vel congue. Phasellus vitae ultrices urna. Fusce vel eros felis. In vitae augue nulla, id convallis lacus.
WEST COAST
VISUAL DIRECTION 1 The intro screen will provide a short summary of the project, as well as introduce the nav bar to the right. This interface opens up to a US map, with each hip-hop region outlined in distinct colors. Upon selecting a region, the map will dynamically zoom into that area, which will be filled with slang terms to choose from. Once again, a short description will be used to describe that area’s culture. Once a word is selected, the user has several choices. He or she can read the definition, listen to it in a song, find out about its impact, or discover who invented the term.
A HISTORY OF HIP-HOP SLANG Nullam dictum tempus dolor in consectetur. Morbi eget justo eget velit suscipit ornare. Nunc eu lobortis nibh. Quisque ornare porta metus vel congue. Phasellus vitae ultrices urna. Fusce vel eros felis. In vitae augue nulla, id convallis lacus.
NOUN, ADJECTIVE
ARTIST SONG
SOUND
ALBUM YEAR
WEST COAST
E-40 (featuring Keak da Sneak) Tell Me When to Go My Ghetto Report Card 2006
Hyperactive. Typically used in a descriptive sense, such as to “get hyphy.” The term is also the label of a Bay Area musical movement that promotes letting loose of one’s inhibitions in the pursuit of a good time. If you’re hyphy, you can probably be seen shaking your dreads at this weekend’s party or ghostriding the whip down the street.
INTRO
HYPHY
MAP
ARTIST
E-40 (featuring Keak da Sneak)
ALBUM
Tell Me When to Go My Ghetto Report Card
YEAR
2006
SONG
SOUND
SOUND
8
IDEATION
VISUAL DIRECTION 2 This interface is more graphically driven, with a strong focus on history. The intro screen features three infamous rap families to illustrate a change in style, both musically and visually, over time. After the user chooses a decade, they can read up on its history or dive straight into the vocabulary. Visualized categories break up the content with entertaining pictograms. A hidden page would test the user’s knowledge of hip-hop slang with a Mad Libs interactive game.
9
10
11
IDEATION
1990s
DEFINITION SOUND
USAGE
IMPACT
A popular style of street dance that was created and developed among African Americans and Latino youths in New York City. The dance consists of four primary elements: toprock, downrock, power moves and freezes/suicides. It is also referred to as “b-boying” and “breakdancing,” but hip-hop’s elite prefer this term.
VISUAL DIRECTION 3 In this interface the words take center stage. Using the timeline, the user can scroll through a visual representation of how slang has developed over time. The hover will indicate region. On the definition page, the words replace the timeline. The user can choose from any word while on any definition page, or they can explore the specific facets of that word. The impact section will have a hover-based gallery. When the user selects an image, the box will turn into a text frame that describes the significance of that image.
1980s
1990s
REGION East Coast The South
1980s Abc
Midwest West Coast
REGION East Coast The South Midwest West Coast
IMPACT SOUND
USAGE
DEFINITION
IMPACT SOUND
Without the breaking culture, there would be no dance crews. The b-boy movement has spiraled into dozens of unique dance styles and is the main focus of MTV’s popular show America’s Best Dance Crew.
USAGE
DEFINITION
12
13
DESIGN
14
DESIGN
ALPHABETICAL
ALPHABETICAL
ALPHABETICAL
DECADE
DECADE
DECADE
REGION
REGION
REGION
SITE MAP My interface is quite linear, but its wealth of content is difficult to translate to site map form. As the user can jump back to the timeline and category functions at any point in the interface, everything must be visually connected.
chillin’ def dope fresh hip-hop new jack
chillin’ cream dead presidents def fresh
wack yo
hip-hop holla back jiggy new jack wack yo
bling-bling chillin’ chronic cream crunk
1980s
EAST COAST
da bomb dead presidents def dope fo’ sheezy fresh hip-hop holla back hyphy jiggy new jack
DEFINITION
ICON
MUSIC
DEFINITION
ICON
MUSIC
DEFINITION
ICON
MUSIC
Awesome, great.
The D.O.C.
The D.O.C. – “Mind Blowin” New Boyz – “So Dope”
Thousands of dollars.
Yung Chris
Rick Ross – “B.M.F.” Jay-Z / Kanye West – “Gotta Have It”
Pumped-up, hyper.
Three 6 Mafia
Lil Jon – “Who U Wit?” OutKast – “Rosa Parks”
og phat racks ridin’ dirty shawty sizzurp
chronic cream da bomb cream dead presidents
stuntin’ swag tipsy trap trill wack yo
fo’ sheezy holla back jiggy og phat trill
bling-bling crunk da bomb racks ridin’ dirty shawty sizzurp stuntin’ tipsy trap trill
1990s
bling-bling crunk hyphy racks ridin’ dirty
THE SOUTH
chronic dope fo’ sheezy hyphy og phat swag
shawty sizzurp stuntin’ swag tipsy trap 2000s
WEST COAST
16
17
DESIGN
DEF
1980s
1990s
2000s
STRUCTURE
Russell Simmons co-founded the influential record label Def Jam in 1984, along with producer Rick Rubin. Lucrative endorsement deals have made him the third-richest man in hip-hop.
As the design evolved, it became evident that its structure would work best as a series of horizontal zones. The old structure had no clear focal point and its components clashed with one another. Now, its final design emphasizes the shifting nature of the timeline function. It unites main navigation, subnav and content.
ICON
fresh homeboy hip-hop ill def new jack
1980s
wack dope yo chillin’ word dis
DEF 1990s
2000s
1980s RUSSELL SIMMONS FOUNDER OF DEF JAM RECORDS
DEFINITION
perfect, excellent, first-rate.
PART OF SPEECH
noun, adjective
1990s
2000s
SAY IT
Mr. Simmons is an American business magnate. He started Def Jam along with producer Rick Rubin. His clothing fashion lines Phat Farm, Argyleculture, and American Classics have helped him become the third richest figure in hip-hop, having a net-worth estimate of $340 million as of April 2011.
RUSSELL SIMMONS FOUNDER OF DEF JAM RECORDS
def
Mr. Simmons is an American business magnate. He started Def Jam along with producer Rick Rubin. His clothing fashion lines Phat Farm, Argyleculture, and American Classics have helped him become the third richest figure in hip-hop, having a net-worth estimate of $340 million as of April 2011.
ORIGINS
MUSIC
18
19
content
WORKING WITH WORDS I wanted to choose words that made an impact beyond hip-hop boundaries. The slang terms chosen for this interface have crossed over into the mainstream lexicon. Words like jiggy, bling-bling, DOPE and PHAT have reached such prominence that they are featured in Merriam-Webster and Oxford dictionaries. In order to properly appreciate the slang terms, I chose to include representative music and pronunciation samples. The diction and phrasing of rap music is an art in and of itself. Certain rappers are renowned for introducing or owning certain words; they are credited thusly in the interface.
20
CONTENT
21
22
23
FINAL
TYPOGRAPHY As the site developed, I explored the possibility of further categorization through type styles. I utilized Quicksand, with its many weights and variants, to communicate subject matter in a subtle-but-organized fashion. Quicksand Dash is used for language about money and vanity, with lowercase for nouns and uppercase for adjectives. Its bold is used for complimentary and pejorative adjectives as well as miscellaneous verbs and interjections. Light is used for cultural movements, sub-genres and tropes.
24
FINAL
NAVIGATION
WORD
CATEGORIES
HOVERS
The timeline provides users with a visual representation of hip-hop slang over 30-plus years. By clicking the dots, users can automatically scroll through 29 of the most popular slang words.
By default the words are organized in alphabetical order.
The timeline, and thus the word list, can be reordered by alphabetical order, region or decade of origin.
Each word has a unique hover behavior based on its meaning and color-coded by its region of origin. Every hover, however, features the word’s pronuncation.
SUBNAV
HIDDEN BUTTON
DEFINITION
EXTERNAL LINKS
ICON
MUSIC SAMPLES
LYRICS
The secondary navigation allows users to automatically scroll through content. They can jump through the definition, icon or musical examples.
When the user clicks one of the three options, the word re-appears to guide them back to the pronunciation sound if they so desire.
A concise definition is accompanied by internal links that reference other parts of the slang dictionary.
All external links open an IFrame to allow for the display of additional content without leaving the main page.
This section provides some background on a rapper (or rap group) noted for their use of the word.
By clicking the album artwork, users can listen to the word in its intended, natural context.
The user can peruse lyrics as they listen to a sample from the song.
27
COLOPHON This project was completed as partial fulďŹ llment of the requirements of GDES 403, Problem Solving, in the Graphic Design Department at the University of the Arts, Philadelphia, PA. Fall 2011. Nick Porcaro, designer. Don Kline, advisor.
J
N
O
P
R
S
T
W
Y