Funny Garbage is one of the top design companies throughout the entire world. They specialize in a distinct balance between talented design concepts and knowledge of technology. This enables them to create for many different types of media.
Originally, Funny Garbage was the name of a magazine. This magazine was made by two students at the School of Visual Arts, Peter Girardi and Chris Capuozzo. In 1996, John Carlin teamed up with Peter Girardi in order to create Funny Garbage, the design studio.




They first developed the company, placing particular emphasis on innovation and client solutions. In the mid to late 1990’s, they “developed broadband demos for Compaq Computers and AOL that were remarkably similar to what is now commonplace online.” They were ahead of the game as far as their technological understanding went. They really took the term “interactive media development” to the next level.

Funny Garbage has worked on many websites, entertainment, television channels, animation, and flash animation for some of the most well known companies. Their clients include such companies as ABC, adult swim, PBS, National Geographic, Cablevision, Comedy Central, and Cartoon Network. Many of the websites that they created had (or have) very uniquely created flash animation. On the Cartoon Network website for example, they designed many different flash animation games that would appear for kids. This site ended up being one of the most successful and most visited sites for kids throughout the entire world.

From a creative perspective, Funny Garbage has been able to create a newly designed world. On their website, it is stated that they chose to work on projects that they themselves love. In this way, they are able to make a unique partnership with each of their particular clients. Their style can be seen clearly in many of their animations and their work with characters that they have created. Their website states that they are very dedicated “to the idea that the core elements of character design and storytelling will always be the ingredients that define a superior animation studio”. On their design team, they have a very diverse crowd of talented individuals who each have specific skills. Some of the people who work at Funny Garbage are very skilled in 2D and 3D animation, while others are more skilled in flash animation.


I find their style to be quite unique and different from what you see coming from many design companies. For example, they used puppets in the creation of a show called Crank Yankers, which appeared on Comedy Central a few years ago. As I looked through their website, detailing their previous work, I noticed many designs or creations that I have seen. Cranium for example, is a game that I know of and own even, but it was very interesting to see the company behind these well-known images or productions.

Smart Smart Smart

Leo, a student in the media department of MIT, gave a lecture to the class. Going into the lecture, I was not sure what it was really going to be about… but it was fascinating!! I mean, I do read quite a bit about tangible media (such as the i-phone), but to look at the advance of technology and communication as a whole can be quite eye opening.
First, he spoke of tangible media. He spoke of ubiquitous computing, where computers almost completely disappear (paper that erases itself, objects that move, etc). Leo then broke this into four different sections: tangible interfaces, ambient displays, augmented reality, and wearable computers.
In the tangible interface category, he introduced one of his projects at MIT called the I/O brush. It gives the illusion that you can take any pattern from the real world and paint it onto a TV screen. In actuality, it scans the pattern. There is a little camera hidden inside of the paintbrush, allowing you to use any color you want, instead of limiting people to the palette of photo shop. Crazy!
In the ambient displays category, the example that caught my eye was the “livewire”. How do you show things that we can’t see? This was a way of using background devices to give information. I was really interested in the umbrella. When the weather forecast predicts that it is going to rain, the handle of the umbrella glows blue, so that you remember to take it with you (and to make you aware of the rain in the first place).
Someday… there will ONLY be computers that fit in our pockets and everything around us will have something to do with technology…

I found this lecture to be extremely interesting. Since it, I have checked out the websites that were given to us. It’s pretty amazing just how advanced things have become.
Infact, the other day I saw a preview that the Mac table (used with ipods) was going to be on Good Morning America. I was excited that I knew about it.

Just as a side note... If I were to create this project again... or tweaking it somemore... I would change the name of some of the links. Originally, I created the top navigation with similar headings as those found on my original site. While these fit in context with the website, they did not work out as well for me. Once I was working on my index2.html in Dreamweaver, I needed to apply things such as the lowerlevel page and the mov to these links.... and they don't match up quite right. For example, the "info" button takes you to the event page (which is not really info about the site...) and the "camp sites" button is the one used to activate the video pop-up. This was purely because I had to lessen the number of slices, once again creating a dilemma for myself.

And the lower level page....
To be honest, I had no idea what to put on this page. I looked around at some other camping websites and saw what sorts of things they advertised.
I like the way that it turned out. I like the color and I think that it fits well with the rest of the page. I also really like the tree image that is used on it.
I feel as though the font looks appropriate here. If it were a real site however, I would put some sort of link on it- in order to "reserve campsites" straight from the message.

I think that it looks fine on my full website. I like the way that it looks actually... but since I had some issues with the slices... it does not fit exactly where I would like it to be. It is slightly more to the right then I would like. This is because the slice that it is replacing, was a large piece of the site (not just the image where it should show up.)

Fire!!
Next came the animated gif file. The instructions were pretty clear on this one. It took me a little while to come up with an idea for the animation. Again, what does a camping website lend itself to? The example 'wheel animated gif' looked awesome on screen... just by rotating the simple image.
For awhile, I was trying to figure out some kind of animated gif that would not involve a photograph (like Mari's animated that was like an 8bit picture). Yet.... I ended up using a photograph. I like the way it turned out though! I put the fire photo that I got from the internet into photoshop. I used about 7 different layers, each time using the burn tool to change the image a little more. It sort of makes the illusion that the fire is glowing (and that smoke is coming from it).
I didn't find it too much of a challenge to transform this file into an actual animated gif in fireworks.
Also, it wasn't too hard to attach this, along with the banner, to my homepage in Dreamweaver.

Once I finally got the html into Dreamweaver (index2.html), things began to snap into place much quicker.

Tent Tips

It took me forever to find a quicktime movie for my website. What kind of movie can you add to a "camping" website?! I find quite a few home made movies of people camping (which obviously was not what I was looking for). The Professor suggested a short clip from the Blair Witch Project or something along those lines (people in the woods...). All that I could find in this area though, was the trailer for the movies.
After awhile I find a movie that would work. It is a short quicktime video explaining a step included in properly setting up a tent. I figured the content was about as closely related to the website as I could find.
It's a little bit bigger than I wanted, but it will do just fine.

details

Once I finally got the html document to work in Dreamweaver, I had to set all of the appropriate attributes (such as the black background). This wasn't too difficult. For each of the small detailed parts of the project, the packet that we received in the beginning of the year was very helpful. They were just simple things to set...
Next comes the additional content for the page (movie, lower level events page, animated gif, banner...)

Wireframe

So the wireframe proved to be more of a challenge than I had expected. I had thought that it was just the first step, but it is the building block for the way the entire site is set up. It took me awhile to decide how I wanted the lay out to look and what kind of image to use. I used two images of young people participating in sports.
Once the wireframe was finally created in photoshop, I opened it up in Fireworks. I did not find it difficult to create slices over the wireframe or to create roll-over behaviors in Fireworks, but exporting the file into html format posed as a problem for awhile. I was trying to make too many slices, making it more confusing. Finally, I was able to simplify the slices enough to make it work. Someone mentioned to me that Fireworks likes things to be lined up like a grid... which was very helpful.

Right now, we are working on making the "wire frame" for our websites.
I have taken inspiration from my reference websites. Firstly, I would like my remote roll-overs to be like the navigation on surfingthemag.com. When you put the mouse curser over the part that you want (ex: "home") it will change to one of the accent colors, allowing you to know where you are. My color palette is simple- monochromatic background (dark grey with black font) with blue and green acting as accent colors. I would like the navigation on my redesign of the website to be much easier to use. It should be simple, ledgible, and not so cluttered.
Also, like on many of my reference websites, I would like to have a large image on the screen... just under the navigation. I find that on my reference websites, this catches the eye. Also, having a picture instead of a bunch of text makes the website look cleaner (in my opinion).

Powerpoint and website

Last class I presented my powerpoint to the class. There were some aspects of it that really worked and I enjoyed, however I also recieved some very helpful critiques. Since my icon is made with a font that is not found on most computers, I ran into some difficulty trying to get it to work on the main computer in the class.
I learned that... well, firstly it would just be easier NOT to use fonts that are not in most computer... but also, that if I want to do this in the future, I will have to use photoshop (making the text with the unknown font almost like a picture) to make the pieces of the powerpoint.
The other thing that I learned through presenting, was to test out my powerpoint before I actually present it. This, of course, is helpful information. I ran into the common problem, in which the background screen of my powerpoint looked fine on the regular computer, but showed up very very dark on the overhead projecter. I was aware of this issue going into the presentation, but I guess I had not lightened it enough. Regardless, a test-run would have solved this problem ahead of time for me.

So... we have printed out our powerpoints, everyone has presented, and we are beginning to layout the framework for our new website. I am still in the beginning stages of the layout... but here is the existing website that I am redesigning- just to give a taste of what it will NOT look like (hopefully!).

My logo was created using the font called "Blackout"

I have chosen to redesign campingsites.com
It does not appeal to the gen-next demographic.
There is no clear logo and it needs a lot of help.

In order to create a usable logo for the site, I shortened "camping sites online"
to "camp". For the most part, I just played around with different fonts until I came
up with one that I liked. I looked at many font on dafont.com.

Screenagers are technologically savvy people. They are people who have grown up with access to the internet, television, downloading, video games, instant messageing, and cell phones. Screenagers know a great deal about electronic devices and are skilled in operating them.

Reference Websites

American Eagle Outfitters website at www.ae.com
I really like the bright colors used on this site. The large typeface in different colors really sticks out.
Surfing Magazine website at www.surfingthemag.com
I like the logotype of this websire. The bold-then light-then bold heading catches my eye.
You Tube at www.youtube.com
This site is very clean, simplistic, not cluttered.

1st post

For next class:
-choose 5 reference websites aimed towards screenagers
(2 recommended by others)
-choose 1 traditional website, not aimed at our age group