Some before Process

the 3 display fonts we used mainly

So before our website was complete,we went through a lot of different colors and screen before we reached our final idea. 

What our screens looked like before. Our criticism was to look into color more and making it more fitting towards the audience. It looked too clean and too blue making it relate a lot to the "social networking" but was too much of it.

Our workshop page before

Workshop together page before

One of our homepage color changes 

Our video popout page

the different icon look and feel of for the homepage. Even our navigation bar was different in that it was located at the bottom

Adding in spray paint to the design of it. Our blue spray paint navigation  before

Adding display fonts to the backround and making our blue nav darker and adding in purple to the logo as well

An inspirational website Tara found by searching for hip hop artists. Loved the idea of the video having paintstrokes around the frame and wanted to mimic that

The purple from CSS design awards was the perfect purple to use. 

Different color variations and color palettes

The actual color palette didn't come into play until inspiration was found from a shirt. Purple, pink, and blue were used and worked well. Decided to incorporate it into the website.

 This was our navigation bar before, but then we realized it wouldve been difficult to display the subnav and getting people to understand where they were on the page.

Our new navigation. Notice the chat on the right, the social links in the mid, etc. It was moved in the final because it made it more balanced in spacing and it makes sense as to put more important info near the left where most people would be clicking

Our new stencil. Before it was blue, but our color changes added this. For the final we added a drop shadow and the bottom bar with the highlander stuff because highlander was sort of in the background and awkwardly placed at the top right.

 Playing with graphics and images at first, trying to figure out the left sub navigation part out and getting the right contrast

a middle progress, where we added the roll call title at the top and an "X" so they can "X" back to home

Criticism - get rid of manila folder color and the X, and the title at top. Liked the left notebook nav.

The final of it though. After looking at inspiration on patterntap and the notebook working into play with this and the small navigation to help ease into transitioning . 

Our before forums pages. Critcism - too large of icons

Another criticism was to go back and grid everything out to make sure it was proportional and everything being lined up. Well, we did just that to make sure and it definitely helped to make sure all of our frames are lined up with each other

FINAL!!! WOOOOP!

Click Here!!

annotation

1st screen = homepage layout
2nd screen = when login is clicked
3rd+4th screen = when the social media, tweets, photos, videos, etc are rolled over
5th screen = when the left nav is rolled over
6th scren = when forums is clicked
7th screen = when a topic is clicked, threads are displayed
8th screen = when a thread is clicked, thread is displayed
9th screen = when the open lyrics is clicked
10th screen = when workshop is clicked
11th screen = when the full experience is clicked to reveal description and video pops up
12th screen = when about highlander is clicked in nav
13th screen = when workshop goals is clicked in nav
14th screen  = when open mic is clicked in main nav

Final Screen Shots Walk Thru

Click on each screen shot to get to the next screen shot:
Hip Hop Workshop - The Dialogue Lens

cause we're awesome

More Inspiration & Research

35 Creative & Inspirational Hip Hop Websites : March 31, 2011 (Visual Inspiration and Research)
CSS Awards: March 30, 2011 (Visual Inspiration)
Highlander Cultural Program: March 28, 2011 (Research)
Tribeca Film: March 28, 2011 (Visual Inspiration)
Love Letters to the Future: March 28, 2011 (Visual Inspiration)
Hip Hop Inspires Us: March 28, 2011 (Research)
Pattern Tap: March 18, 2011 (Visual Inspiration)
Hip-Hop Association: March 10, 2011 (Research and Visual Inspiration - Color)

Critique: April 4

• It's friendly, positive, and bright.
• It was a good idea to keep the background.
• The highlander logo looks slapped on there.
• We should move the text that says, "created by Highlander Research and Education Center". Maybe to the bottom? We might want to frame the website a bit with a bottom bar that could hold the text. 
• Do the background in photoshop. Add a drop shadow under the text. 

 

• There is a lot going on. 
• The roll call lyrics have weird spacing. It looks generics. Give it more personality.
  
• On the video/workshop page, get rid of the word "activate". It is confusing. Maybe use a triangle play symbol instead, or just use the word "play", something more clear. 

• On the "About Highlander" page, the text is daunting. Change it to two columns. The background color is boring. Rethink the title.

• On the open mic page, the elements are too close to the top of the page. Also, no white outline on the text. 

• On the forums page, where is the title? The categories' titles seem too large. It is unclear what the system for the title sizes is. When the lyrics pop up, they look out of place. Stylize it a bit, and make the window proportional to the text. 

• Make sure all pages have a similar grid system to ensure that all the texts and boxes have a similar hierarchy system.

New updated frames!!

So we updated the navigation and the color scheme!

We decided to go with black with bright colors of blue, purple and pink to give it some splash of color. 

This is an idea of what the homepage would look like, minus the background, as we are still working that out.

The workshop page containing what one of the videos would look like. THe Roll call screen

Start to working with the Forums

Working on color palette and the set up of the forums. Not going to use these colors, but this is a good start to the forums area. The font is nice too.

Crit Reflection

*How to make it less "Facebook-y"
     *Change Color? Font?
*Implementing the interactive background in the workshop area
*Background expirimentation
*Pop up area of workshop content
*What to do with text and downloadable material

Everyone loved the second version and felt that it really nailed our goal statement on the head. We are addressing the issues above in the coming days.

Look and Feel V2

 In this version, the photos, videos, twitter feed, and digg articles related and submitted to our site load on top of our "Hip Hop Won't Stop Workshop" text.

 As one navigates around the page, the different elements highlight when the mouse runs over them. They can then click the specific element and it will open in a larger window within the site.

 The connect feature (in the upper left) drops down when clicked on, so that users can connect  YouTube videos or other content from Facebook, Twitter, Digg, etc. to our site. This is the user generated content that is constantly updated in the background of our site. The chat drops down into a constant converstation. The navbar on the lower left opens when scrolled over.

This is the content area, which is the part we need to work on the most. We want to integrate the background idea here while still having a clear hierarchy.

Look and Feel Frames, V1

For this set of look and feel frames, we stayed pretty true to the virtual workshop, but tied in photos from the physical workshop. This clues the viewer in to the idea that this website stemmed from a real workshop, right off of the bat.

You can see the social media icons are very present, as well as the right interactive side column.

Inspirational Sites

We Are All Fans:
We love the visual way that the site is connected via user generated content. Similar to what we've been working on. Also the portrait section (on the right side) is AWESOME, but we can't get the whole thing to work.

Love Letters to the Future:
We love this super positive site based on social change. It is also set up in a really beautifully laid out.

Tribeca Film:
We love the energy that this website gives off! It's got a great design to it.

Presentation PDF and Notes

Presentation PDF
This hashes out our first general ideas regarding the site. There are a few things that we are going to change off the bat. Most of all, we want more of an emphasis on the workshop content.

Disclaimer: We want to keep a really positive vibe on our site. So some of our terminology that is negative sounding are just placeholders. For example, "rap roulette" will actually be called "open mic". Instead of "random battle" or "choose your battle", it will be called "random mic" and "choose your mic".

Final Goal Statement:
Uniting people under the banner of hip hop through a site focused on networking. 

Our Song: Where is the Love?

Where is the Love?
By: Black Eyed Peas
This video focuses on positivity. It prompts us to take a critical look at the world around us and to start spreading love instead of hate. We felt that the workshop had a conscious hip hop focus and we wanted our song to really make mention of that. Also, the song really hits on social issues, and we are the dialogue lens!