Hip Hop & The Web

How A Culture Can Define A Process

As a creator of the web, there are two things I am constantly thinking of: finding things that inspire me and also perfecting my workflow. That inspiration might be a new tool, framework or technique to use in a project. Above all I’m always trying to define a process that I can use to effectively do work.

Hip Hop is more than a genre of music; it’s a culture rich in history. It started as a form of expression and rapidly grew as a part of American culture. I grew up on Hip Hop and it has shaped me. In the same way, I’ve come to love the web and the potential it has to shape change and affect lives by connecting.

Hip Hop has been categorized in four pillars or elements: Emceeing, DJing (or turntabalism), Graffiti and Breakdancing. I began seeing a lot of similarities and parallels in this world and the world of the web.

What if there were elements of the web? Elements that we can use from the parallels of hip hop to define the steps and techniques we use in design and development. I started patching elements I can take from one to help define the concept for the other. I eventually narrowed down to six approaches to web design from the perspective of Hip Hop. For lack of a better name I call them the elements of the web.

Influence

Some of the most influential rappers chose to use their environment as inspiration for their rhymes. Whether it was their everyday situations, the current surroundings or even deeper social issues, rappers where able to combine words and tell stories because of their deep immersion in what influenced them.

In the web world, we get blindsided with all the complexities of a project before we start to even make sense of anything. We tend to get anxious and jump right into any project that is given to us. We want to hurry up and start a repo, create branding, etc.

The influence step entails fully diving into the details of a project before you begin any design or coding. Taking the time to understand everything you can. When we rush all of these things, we’re more than likely losing the big picture of what we are ultimately trying to do. When you allow yourself to completely take in every detail of the project and the possibilities that it offers, it allows you to first and foremost understand the problem you are trying to solve. Then you can relate it to your client, the audience your are designing for and gain inspiration for the project.

Freestyle

Freestyling is the improvised, on-the-spot rhymes that demonstrate the skills of hip-hop MCs. Freestyling is a very flexible art. In its purest form, Freestyling is Brainstorming. Coming up with quick ideas and visuals of what we think the project should look like or how it should flow.

Think about everything. Don’t worry about how neat your sketches are or getting something in an appropriate format. The important thing at this stage is to capture your findings for everything you can possibly think about. Then open up what you have so far to your team members so they can see and make notes and suggestions on what you’ve created so far.

Mix & Flow

On top of being attracted to the slick rhymes and wordplay rappers put together, you also could have been attracted to them because of their particular style and flow. It’s easy to come off the top with lyrics, but it gets more difficult when it comes time to refine what you came up with in order for it to make sense.

Mix & Flow to us is combining your findings, content and other outputs with design and direction. We can’t just throw elements and words on a page with nice fonts and pretty colors and expect our users to walk away with the main message. We structure content with meaning, like headers, navigation and footers. In the same way, Lyrical content is structured with meaning. You have bars, verses and choruses.

The chorus would represent the consistent elements or the elements that will be present from page to page. The verse will represent the main content of a page. These elements differ from page to page and are for the most part unique in nature outside of the main styles and elements you use for hierarchy. Then your hook can be considered your most attractive elements on a web page, your call to action or ultimately whatever the next steps you want your users to take. All these work together to create a flow that your users can follow.

Demo

Mix tapes were usually tailored around a theme or mood, to a highly personal statement tailored to the tape’s intended recipient. Back in the day, if a rapper wanted to be seen or heard by a large audience, he would gather all of the songs and tracks he made on a mix tape.

For designers and developers, this stage represents are prototyping stage. From the resources we collect and learning how we want to structure our content, we can begin to rapidly put together prototypes.

For quick in-browser prototyping you can’t go wrong with Foundation as a starter. I prefer using Foundation because you can get going with a code base ready for you to start working with. Prototyping in this way also lets you design to what you would be potentially using in project and it gets conversation started on finalized content with clients.

Studio

When rappers enter the studio and go into the booth, they perfect their flow, rewrite and restructure their lyrics where it’s most needed and connect all their elements together to come up with an effective piece, which eventually leads up to the final product or album.

This is also our opportunity to refine our masterpiece. With your process mapped out, you can come up with more structured wireframes, defined content, core styles, colors, and even web fonts. More importantly, this is our opportunity to test our websites thoroughly.

Showtime

After you’ve refined, it’s time to show the world what you’re made of. Rappers are known for rocking the stage and energizing the crowed with the lyrics that they’ve refined. But like any performance all shows have a sound check.

Performance matters in this phase. Make sure you have all your right metrics in place for what you wanted to accomplish with the site. Also listen to feedback that others give you after the show.

Test the performance of your application while you’re developing them. Preparing your applications for deployment is important as well. Compressing and using minified files all help the final product perform to the best of its ability.

After the launch is done, you also look at the performance use tools like Google Analytics and Social Media Analytics, like how Facebook provides information on performance and how others are interacting on or with the site.

This is by no means a process or framework you have to follow, but it helps to illustrate a different and creative approach to what we do. Jay-Z recently said, “We don’t have any rules, everybody is trying to figure it out. That’s why the Internet is like the Wild West. The Wild, Wild West. We need to write the new rules.”

Just like how rappers each have their own style, we as developers and designers should have our own style. And as you practice more and more to refine the art, you become better at your style. Next time you hear a new Hip Hop record, or listen to any of the timeless pieces, know that it didn’t just happen. It was crafted, just like how our sites should be.

You can check out the slides for this deck here.