Monica’s 315 Homepage Concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s 315 Homepage Concept

As I posted before, I really liked the idea of showing a grid of thumbnails of the different videos. I imagine that once the user is on the homepage, it would look something like this. To add some motion and life to it, the thumbs from each of the videos could animate randomly for a few seconds at a time. When the user rolls over the thumbnails, a title and brief caption will appear in the thumbnail area.

To incorporate the video transitions and the idea we came up with in setting the environment on a table/desk, we could lay the grid over an empty area of the dark wood tabletop, and once the video is clicked, the camera could move over the table to the appropriate genre transition. The wires laying on the table at the top right corner tie in the appearance of other objects on the desk. The video could scroll up to show the rest of the headphones attached to those wires as it moves to the “About” page, or some other subpage. Once the transition is over and the subpage has been reached, a translucent box for the video player will appear over the table/objects, and then once the user presses Play, the video will go to full screen.

And as much as I didn’t want to go with orange and blue for a color scheme, it worked well with the dark wood texture. It doesn’t have to be blindingly obnoxious orange like we’re used to at SU, but a paler orange and a light blue. Dark, textures, warm, and ambiguous enough for all the genres.

Danielle: Live from the 315

April 5, 2010 |  by  |  Project Four, Student Work  |   |  Comments Off on Danielle: Live from the 315

For my design, I tried to form a skyline out of objects that represent different videos. For example, the Tots video is represented by french fries. I thought a skyline plays up the idea that the projects are about music specifically in the 315 area. The map in the background also relates to this idea.

On rollover, the silhouette will become the object and show a still and description for its corresponding video. Once the user clicks the video, the skyline will drop down and the video will become full screen.

Renée’s homepage design

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  , ,  |  Comments Off on Renée’s homepage design

here is the environment I was visualizing:

My concept is taking the “desk” idea to a lower level. I wanted to show the different genres of music with footwear. These are  stock images for now, but I visualize using our own photos with our preferred footwear to give the flavor of the music you will see when you click to the subpages. I also included a music player on the home page that would play clips of different music that is featured on the site. I wanted to use the circle of feet to show the unity of all these different styles coming together. I thought that the different pants and leggings showed diversity as well. In terms of functionality I see the circle theme playing a huge part in the interaction. Perhaps the user could rotate the feet to chose their selection. You can play with the feet for transitions, people walking, feet dancing, etc. I think it could be a fun and unique way to showcase the variety of music we have, and also allows for additional music to always be added later.

Miller site concept

April 5, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Miller site concept

The concept for this video came from the idea that music is all around us, all the time. It is an integral part of our community. I wanted to somehow show these videos within the context of Syracuse/CNY. I decided to keep the interface and user experience really clean and simple, while using the transitions to give you a sense of place and distinct personality.

Transitions will be movie clips of different scenes around Syracuse, different people doing different things (or objects that represent syracuse –(salt…. other things?). They don’t necessarily have to relate directly to the video they are tied with, the point is that this music is all over the community and sometimes we don’t even realize it. It’s just a natural part of things. So people in Syracuse in their natural environments will usher in these videos, unaware that they are part of this musical experience. It’s just life.

Once you click on one of the random scenes from the home page, the experience goes full screen, and you are taken into the scene. It lasts for a few seconds. In the case of the waitress, she serves a cup of coffee to “the user” at a table, and the camera (represents user-eye-view) zooms into the coffee cup, which then becomes one of the music videos. At the end of the video, the camera zooms out of the coffee cup and the screen returns to the home screen as the clip goes shrinks to its original size.

HOME PAGE

The home page is a big movie clip grid that moves around (maybe to a subtle music beat?) When you hover over one of the clips the clip wiggles a bit, encouraging you to click it.

The process for getting to a video clip:

  • Click on one of the stills on the home page
  • Zooms into the clip the user selects, e.g.  the potato

  • Some sort of action happens – the potato gets chopped and chopped until all the pieces “fill” the screen into blackness
  • The video starts.

This concept would be applied to all the clips- something happens in the scene and part of the scene becomes where the video player resides (inside a cup of coffee, a graffitied wall, a pile of chopped potatoes, etc. etc.) At the end of the clip the video transitions out of whatever element in the scene it came from.

sort of like…. this

Michelle’s brainstorm

March 31, 2010 |  by  |  Project Four, Student Work  |  Comments Off on Michelle’s brainstorm

5 words: community, diversity, original, quirky, honest

5 websites:

Ayumi Hamasaki

Of all the music players that I looked at, Ayumi Hamasaki’s was the only one that appeared exclusively in a second window above the website. I like the design of her website and the way that her music player is integrated into the site using colors and repeating design elements. Overall, I think that this music player is pretty slick.

Evanescence

I really like the way that flash is used in this site. I particularly think that the movie clips that play when the site is first opened are particularly slick. I’m not as big of a fan of this site’s music player, mostly because it starts playing as soon as the site is opened. I don’t like sites that fling music/sound unexpectedly in the visitor’s face. The player itself is simple: it has only an “on” and an “off” button, followed by the name of the song.

David Cook

David Cook’s website had two audio players on it. It had a basic audio player that plays the song “Permanent” on the home page. If the user clicks on “play music” it opens a separate window with a playable library of all of his songs. I like the double nature of these audio players: it serves to highlight the song “Permanent”, while still giving access to the rest of his music.

Nickelback

The music player on Nickelback’s website is fairly basic. It allows the user to play through Nickelback’s songs as though they are using an iPod Shuffle (meaning that the user cannot select the song, but they can use the forward and backward buttons to select a song that they like). I’m not exactly pleased with how the music player is placed in the site: it doesn’t exactly jump out at the user, and I almost overlooked it when I visited the site.

Edwin McCain

This is another site that starts playing music at you the second you enter it. As I already mentioned, I’m not a big fan of this. I do like how this site gives you the option to launch a “standalone player” to play the music in a separate window, however. I also think that the texture and the layout of the site overall is clean and very nice looking.

Design thoughts

I’m not exactly sure where I can see our class’s design going. I was out sick on Monday, so I think I missed a lot discussion about the videos and the site objectives as a whole. I’ll have a better idea after I’ve been to class on Wednesday.

Aaron Katchen: LiveFrom315 Proposal

March 31, 2010 |  by  |  Project Four, Student Work  |  Comments Off on Aaron Katchen: LiveFrom315 Proposal

5 Words:

Importance
Human
Organic
Fundamental
Rock (Base)

Visual Concept:

I believe from the few videos that I viewed (my computer seems to want to only play the audio and display a black screen), that clearly the commonality here is music, but there’s something else. These videos all include what music means to the people involved, it’s perceived importance. This made me think that this is a very human element, not something mechanical or electrical, but something very organic that can be traced back to our roots (or fundamentals).
I therefore propose a very natural and organic feel to the website design. I’m not sure of specifics, but it should reflect the 315 natural environment (not necessarily winter). The environment should not necessarily convey happiness nor sadness, but just the organic nature of music and what it has always meant for humans.
This design would probably have a lot of earth tones and textures, perhaps a simple navigation for time’s sake where the user could explore the content from the photo class, but possibly also explore some history of music. The history could be very video specific. For example, when view the hardcore punk video, there may be some information on the side of the video that explains the roots of hardcore punk in the Syracuse area and what genre of music it stems from. This website should be built around the idea of roots and stems, figuratively and literally.

5 Awesome Websites:

1. SAAB Site – This site incorporates the modern world and the natural environment very well together while using video to do so. A bit over our heads here, but great for inspiration about how to incorporate interactivity and video.

2. GE Smart Grid Site – This site again gives some inspiration into how to display the environment in our browser. It seems a bit plain and doesn’t suck the user in as much, but still interesting.

3. Lacoste Red Site – This site has nothing to do with the environment, but is a stunning example of how to combine video, music, and the user experience. Thought it was stupid at first, but man is it amazing.

4. HBO Voyeur Site – This site has it’s programming kinks, but overall a great concept of how to provide cool, interactive, video content to the user.

No fifth site… I liked these four a lot though

Dani’s brainstorm….or mental drizzle

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Dani’s brainstorm….or mental drizzle

5 Words : Talking Heads | Quirky  | Underground | Niche | Community

Some Baller Sites To Get The Juices Flowing

1. Walk the Line Festival

I like the website for the Walk the Line Festival because it is simultaneously simple and complex. The lines and doodles and uncomplicated but still contain a lot of interactivity.

2. Buildup!

The above site is actually for an Asian builder’s association but they have a feature tat allows the user to “build” music from construction sounds. Overall, I like the textured background paired with collage-esque designs.

3. Musicovery.com

This site looks a little nickelodeon but it uses an interesting navigation system. The user starts of by clicking their mood from a grid which creates a winding path linked by different songs that might strike your fancy.

4. Moodstream

This site has lots of pictures and music but isn’t really about video hosting. Nonetheless it is super sweet! It lets you chose from a range of emotions including happy, sad, lively etc. and then creates a playlist/slideshow to fit your mood.

5. Second Story

I figured at least one of the five sites should have a more traditional, clean look to it. Nonetheless, I like how different videos/projects on the site can be reached through a grid on the home page and then clicked through like a slideshow. The background can also be changed to better match the mood of each piece.

Thoughts

I like the idea of designing a site that can unite the similarities of the videos while also showcasing their differences. This could be achieved through by varying color or associating each video with it’s own graphical element.

Also, since this site is about music specifically in the Syracuse, perhaps the site itself can reference the city. For example, the home screen might be some sort of map or other representation of the SYR and each video nestled on a different “street” or “corner” of the map.

Monica’s Brainstorm

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on Monica’s Brainstorm

5 WORDS: Irreverent   |   Passion (yes, we said it in class, but it came up several times in the clips)   |   Casual   |   Hopeful   |   Lifestyle

5 KICKASS SITES:

Not anywhere near “kickass” but I liked the way the video clips were laid out in a grid here with thumbs. When you click on one it covers the whole player and then shrinks back down when it’s done.

 This is a much slicker way to lay out the videos in a grid like I mentioned with the CNN site.

I liked the interactivity and the retro feel of this.

Dark colors, intimate setting that makes the viewer feel involved. Could work for multiple genres of music.

Although it’s not really consistent with what my “vision” entails, it seemed pretty slick and had a lot of potential for not getting caught up in only one particular genre of music. (and for more night club style inspirations…)

MY “VISION”:

I had this vision of vintage concert posters with vintage type, and dark wood in the back., not a lot of color Something like a combination of these things:

   

I would want as minimalistic a frame as possible, focusing on the videos and the thumbs. There is SUCH a wide variety of styles with this project that to cater to any genre in particular would be a crime to the other artists. You can’t cater to the tater (aka Tots) and then leave the Mother Earth lady hanging. I thought something evoking a pretty generic, vintage poster would fit the style of just about everyone.

I watched some of the videos full screen and some of them in a window filling about half the screen, and I enjoyed my viewing experience much more when they were full screen (especially on those big beautiful lab monitors). The people are passionate and the visuals are great, so its much easier to be absorbed into it when you’re not distracted by outside elements around the player. So the videos will definitely go to full screen.

MaXx – Live From 315

March 31, 2010 |  by  |  Project Four, Student Work, unfathomable  |  Comments Off on MaXx – Live From 315

5 words|  expression, passion, hard-working, commitment

-5 websites that kickass
1)White stripes video player, I really like the whitestripe’s website, this is the video page: http://whitestripes.com/video/video.html
2)I really like the concept of pushing a button and having a hand rummage through a box of records.  http://franzferdinand.co.uk/lucid-dreams/
3) MUSE: I like the square grid of records at the bottom, and the large scale image BG, (maybe we could have snipits of the video you are hovering over play on the full bg) http://muse.mu/media-player/muse media
4) grooveshark.com: it’s a too music oriented for our site, but I think it is a good looking flash site (and it works really well)
5) {I’m going to try to find this before class}
visual concept|
My idea for the site is a lite solid color background with a simple frame around the edge of the site, and at first the only thing that can be seen is an old record player (or speaker of some sort). Vector lines/shapes for (in the style of the designer I posted before Bdesign http://www.flickr.com/photos/bdesignbe/2607510687/) come out of  the record player. everything should have very smooth movements, and use a limited color palate (play with one or two colors and their variations) to give a feel of silhouetted (maybe very simple detail added) . the bar at the bottom right will have slices of each video that you can scroll over and it will rotate and then you can click on one and it brings it up on the page. there should also be a button to make the video expand to take up the full frame.
Inspiration:h
Here’s  quick idea for a  layout  (I think I would like to add smooth vector graphics like the bdesign):

Sam’s LIVE From 315 Brainstorm

March 31, 2010 |  by  |  Project Four, Student Work  |  , , ,  |  Comments Off on Sam’s LIVE From 315 Brainstorm

I just realized how terribly hard it is to find good music sites! I went through my itunes and was looking at websites for some of the artists that might have enough $$ to have an awesome site, and I was very disappointed! Some really crazy/talented/wellknown musicians have really ugly/boring sites. Some of them don’t even have any music on them!

Top 5 Sites!

1. purevolume.com

This site was pretty clean and simple. The method of listening to music was also really simple and easy to do. It wasn’t like a big box with a playlist like most sites had, which I really appreciated.

2. JasonMraz.com

I really love this site. The use of sound is hilarious. I really wouldn’t expect anything less. It makes it really easy for the user to get rid of the sound or switch to music or back to the voice too. I love the voice though.

3. http://www.kttunstall.com/

The site’s music player isn’t amazing, but it uses what looks like a tooltip, that doesn’t go away, to let you know that the song is playing. It is simple, and a little above that little box playlist that I really don’t like.

4. http://www.mikasounds.com/

Mika’s site has that little box, but alas, it was integrated pretty well. It doesn’t stand out and look hideous. What I do love about this site is the navigation. The big loopy circle actually moves when you want it to, and it is really cool.

5. http://www.adele.tv/

Overall this site has little to be desired. It is really rather boring, but I do like the integration of video as the header image. It has a pull down menu on the bottom right corner that easily allows the viewer to switch videos, and simply clicking on the video pauses it. Very convenient considering the real lack of play/pause/stop buttons.

5 WORDS!

Connection/ing, unity, dedication, movement, time

and I really wanted to include wood, since in one of the videos the man said that almost all instruments are made out of wood, and wood can provide really nice visuals and textures. 🙂

Visual Concept

I am not exactly sure where I can see this going visually quite yet, I may magically think of something right before I go to sleep, but right now I am thinking of something more raw and organic. Musically comes so naturally to these people and people in generally are naturally attracted to music, so to me it seems appropriate. The two things that I am visualizing in my head are wood and a brick wall, both which could/would be defaced/graffitied appropriately to suit the video and music style. When one would chose or click a video it would appear and the artwork on the surface would start to appear and grow, giving the viewer a sense of what they may be seeing/listening to.

renée’s live from 315 brainstorm

March 30, 2010 |  by  |  Project Four, Student Work  |   |  Comments Off on renée’s live from 315 brainstorm

{5 words}

diversity | healing | rhythm | movement | impact

{visual concept}

I am picturing a website based on a single line. The line is a metaphor for the starting point for all musicians. Everyone starts off in at the same place, and then they make it their own art as it evolved into a song and creates a purpose. This line will be the basis for the animation and transitions to the different sections of the site. Each one will draw out art to fit different styles of music and can even show the beats of music. Whenever you go back to the home page, it will bring you back to the basic core of all music, which is shown visually through this line. This concept can go in many different ways, and I think its flexibility will help visually umbrella the diversity of the music that will be featured on the site. I see the site being very colorful with a dark background, but that could change depending on the page you are on.

{kick-ass sites}