Sunday, May 8, 2011

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




Tuesday, April 12, 2011

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

Monday, April 11, 2011

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.