Hip-Hop Slang: process book

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