Projects About Connect

    Projects About Connect
Wu-Tang Clan

Hip-Hop Music Group Website

Wu-Tang Clan

Self

2010 - Present

Art Direction

Interaction Design (IxD)

Quality Assurance

Responsive Web Development

Strategy

Typography

User Interface Design (UI)

User Research

Adobe Illustrator

Adobe Photoshop

Brackets

  • The Overview

Wu-Tang Clan, the supergroup mega-power of 90's New York Hip-Hop. While they were terrorizing the world through beats and lyrics, they also changed and transcended what “golden era” Hip-Hop was all about. Since 1993, I have thoroughly enjoyed and studied their music and wanted to pay homage to the group and the lyrics they created.

Within the text and pixels I've tried to encompass the dynamically vast set of personalities (and fighting styles) that embody their ever evolving form of entertainment. Minimalistic in design, yet complex in material and quality.

Share Facebook  +  Twitter

Preview
  • The Challenge

Upon my search for information on the group, I've come to identify that a single source of information (while their main site is active, some of the information is currently not updated) was needed to showcase their greatness.

Besides finding and sorting the various information for not only the group but also their associates, there wasn't much of a challenge. Any possible challenge upon beginning would've been the layout and structure for the site.

  • The Process

The process was relatively simple considering that I've went through various mockups, sitemaps and iterations in completing it. Synopsis… I've utilized HTML5 and CSS (along with JavaScript/JQuery) to build the site, which was first introduced using a one-page layout structure for just the group.

Once I added additional sections (such as ‘Groups & Collabs’ or ‘Affiliates & Associates’) to the site, I separated everyone and added a newspaper-like paragraph structure for desktop revolutions to minimize space. What was also an added plus was in adding desktop wallpapers for everyone.

Creating the Logo  

The branding and logo designs were preexisting, so no modifications or changes were needed/required. Though, I have utilized their logo within other forms of mediums (such as desktop wallpapers and posters).

Wu-Tang Clan - Visual Identity
Bard

A B C D E F G H I J K L
M N O P Q R S T U V W
X Y Z
1 2 3 4 5 6 7 8 9

Lato

A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9

Lato Bold

A B C D E F G H I J K L M
N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9

Color Palette  

The color palette for the group is primarily black & gold, it made perfect sense to stick with those colors while incorporating various shades of gray. With previous iterations of the site though, I have utilized both light and dark backgrounds to find the best solution. The end result: the darker color scheme.

  • #FFFFFF
  • (255,255,255)
  • 0,0,0,0
  • #EEEEEE
  • (238,238,238)
  • 5,4,4,0
  • #999999
  • (153,153,153)
  • 43,35,35,1
  • #000000
  • (0,0,0)
  • 75,68,67,90
  • #FFD700
  • (225,215,0)
  • 1,13,100,0
  • Screenshots: Desktop
  • Screenshots: Desktop
  • Screenshots: Desktop
  • Screenshots: Desktop
  • Screenshots: Desktop
  • Screenshots: Desktop
  • Screenshots: Tablet
  • Screenshots: Tablet
  • Screenshots: Tablet
  • Screenshots: Tablet
  • The Results

From a one-page layout structure to a card-based selective layout, the site has seen its share of iterations. Since completing, I am always searching for new ways to present one of my favorite supergroups. Wu-Tang forever!

Interesting in working together?