Finished Project for Final Critique

Here it is! The finished Scratch Team website for final class critique.

I know, I still need to figure out how to get the whiskers smaller...

Ack! Need help on Flash menu!

Download Flash file

OK. Here's the Flash file draft of the website so far. Here's the lingering questions:

1. When I get to the content menu, how do I get it to stop and only display certain frames (I put each type of content in its own layer), wait for the user to click a button, but not stop the whole Flash file? Do I need to add the content as their own little movies? - this part was confusing in the handout

2. I can't test if the embedded links work because it don't stop...(Could I make them have some sort of rollover animation to make it more obvious that they are hyperlinks?)

3. When I reduce the logo down to the top left, the whiskers on the cat don't reduce down so it looks like mustaches in the smaller version...I tried changing the line width to no avail.

4. Can I make one image have many image mapped like links? (aka on the homepage, it'd be cool if you could click on the images on the right to go to the content.)

Next steps, exporting video to a Quicktime format small enough to play on the web and plugging it into a blank HTML file to play from Flash site.

Next next steps...maybe add more photos in Flash menu (using blocks created in Photoshop with photos inside?), making the navigation buttons more animated, making a PSA video for youth and a PSA shorter version of the current video. Oh and I've got to eventually edit down the current full length video, incorporating input from MIT and ICCN folks and new video/photos I hope to gather in the next couple months.

Rough Draft of Flash Website Intro

Check out the rough draft of my Flash animation intro for the website. I can't seem to get the ENTER button to work (missing that 3rd page of the Motion Graphics with Flash Tutorial!). I'm also wondering how to incorporate this animation and the full menu together in Flash.

I also finished the movie (which is about 7 minutes long) and will have a DVD to present of the rough cut in class.

I got too involved in editing the video to focus on creating the Flash interface for the website, so I plan to work on that over the next couple weeks. I also hope to get some feedback from the MIT Media Lab and the other folks in the video so I can update it a bit. In the extended future, I also hope to cut down the video into shorter PSA's and hopefully incorporate some more footage I'm still waiting to get from a few folks.

NEW Logo

The software also has the icon of a little orange cat. The cat is also a useful icon because it is synonymous with curiosity, dexterity, flexibility, and sometimes being a bit mischievous. Most teams have mascot, why not us?

I worked on several iterations of the logo, where the cat looked slightly sinister, so I decided to add a pair of cat heads with less slanted eyes, the second a little smaller, because most peer mentor relationships involve a little bit older pre-teen working with a slightly younger peer.

Interface

The menus of the website mirror Scratch command blocks and try to be tonque and cheek around using command such as "if" and "when" while still listing the information that will be on the website. I think it's important to keep the interface very clean and not cluttered because the tutorials and videos will be chock full of complex images.

I'm still very undecided on this one - I think I could use a few of these for a DVD menu and not necesarily the web page. I also am wondering about the old practice of including text versions of graphic buttons on the bottom of the page....it doesn't seem like many web designers still do this, since connection speeds have gotten better and less people turn off the graphics. I'm also undecided if I think it's better to have the navigation on the top versus on the left side of the page. Either way, it needs to be consisent.

Theme - Scratch Blocks Transformed

For the look and feel of the website, I think it's important to retain the look of the software itself, but I really like the visual metaphor of building blocks as well. One of the most relevant usuability factors of Scratch as software for youth is that it incorporates different types of multimedia (sound, image, animation, triggers, movement, scoring, sprites interacting) and allows people to build on each component. I'd to mirror this metaphor with the peer mentoring aspects, so I used a lot of references to the Logo command block shapes and used the same colors used in the software's interface. Also, some react to the software that it look too "kiddy" so I also want to be conscious of it not looking TOO boxy or pre-school like. The audience is primarily youth and staff working with youth in technology afterschool programs, so as I brainstormed the graphic look of the website, I thought about how they would react to colors and if they would understand the references to the software.

I also have a huge pool of photos of youth using technology at the Computer Clubhouse, most of it taken by youth themselves. I tried to stylize these photos to look more like cartoons or rasterized movies like Waking Life. It also make the photos look more like the clipart many of the youth use in Scratch interactive projects. In addition, I cropped the images and removed some distracting backgrounds in order to focus on the intended theme of each image. Each of these images represent different parts of the Scratch experience, such as images/photos, sound, and connecting with the physical world through sensors. I also used photos of youth being mentored by adults and by other youth, and tried to represent these aspects all together as building blocks of Scratch Team. (A progression of these images in an animation may make a great splash page.)

If you'd like to see all the images from my finished image assignment PDF, download it here!

I Heart the new Photoshop CS2!

1st draft Scratch Team Logo

Here's a first go at a logo. I'm using the same color scheme as the Scratch software, and trying to stay true to what shapes of blocks are what colors. I'm afraid my cat looks a little more like a fox and perhaps a little evil, but I was trying to not make it too young kid-ish. I'm also thinking that I want to add a second character, to metaphor the one-on-one mentoring, but I'm undecided if it should be another cat, or maybe a mouse.

After playing with it a bit, I do like the new features in Photoshop CS2 like grouping layers, all the layer styles and the "morph" option under the Transform menu. Since we've got a week reprieve on the PDF presentation, I'm hoping to use the block theme more and use some old photos of the kids at the Computer Clubhouse using Scratch and other multimedia tools...and maybe do some cool filters like rotoscope-ish look like Waking Life.

Preliminary Website Files

Here's my preliminary html files - no colors, no images.

index.html
about.html
research.html
training.html
video.html

Site Map

New Project Content Idea

Well, projects change depending on demand, and so shall I. The peer mentoring project pilot might not be happening, mostly because timing is bad for the afterschool programs and it's been hard to get a prospective meeting together, let alone getting a training together.

But new ideas arise! Here's part of an email from Natalie at MIT Media Lab about an idea for a video project:

• Since the peer mentoring timing isn't working out, I have a related idea. I wonder if you would be interested in putting together a Scratch peer mentoring video --including footage of some kids who are already using Scratch--including asking for clips (perhaps from Raed, Lucky, Oswaldo, Luversa,etc) teens around the world? I was really impressed with a couple of the high school teen mentors at the Museum of Science who do Scratch--one Carolina moved a year ago from Colombia, and is making bilingual Scrach projects using broadcast, etc. Well, I know you're good at making videos happen, so it's a thought.

SO my new idea is to create some videos highlighting some of the examples of peer mentoring going on and develop some materials. Next comes a site map...