Design Exploration

For my birthday my brother sent me an e-card with these two adorable characters named
hoops&yoyo. Taking this flash class made me curious as to how they made these characters look like they were talking and so animated. They both have such a distinct personalities. Their head, eyes, eyebrows, tails, nose, legs, body and mouths all move to make them look more real. But the thing that really brings them to life are their voices. These characters are extremely likable and entertaining. They could make anyone laugh or smile on their birthday. They have a lot of energy that flows from their movements. This is a great example of an effective flash media.

After researching a little bit about hoops&yoyo I found out that Mike Adair (who lives in Southern California) is one of the creators and voices of hoops&yoyo. I went on his site to and found these other cute characters named Kip And Zips. It is of an elephant and a fox. I didn't find them as entertaining or likeable as hoops&yoyo because they did not have any voices. I think this is just the beginning of a cartoon he is creating. I think he has an extremely good start with the animations. The fox and elephant are adorable. At the beginning Kip really looks like he is bouncing on a ball. I think once they have voices they will really come to life.

After looking at these animations. The best way to make effective animations is to make characters that has all body parts moving and then adding voice. Voice is what seems to really bring the animation to life and have the biggest influence.

Studio Design ~ Colonial Williamsburg

Colonial Williamsburg is the completely restored 18th century American colony of Williamsburg, Virginia. It is a popular tourist destination, as well as a focal point for students and teachers studying early American history and folk art. Visitors experience life in the colonial days, listen to speeches by actors portraying Thomas Jefferson and Samuel Adams, listen to period harpsicord music, watch reenactments of witch trials, participate in arts and crafts of the time, eat and drink colonial fare, all in a place where unpaved streets are still lit by candles. There is an extensive historical library and Folk Art and Decoaritive Arts Museums.

For students and teachers confined to the classroom, there is also the on-line version, http://www.history.org/, which is the official website of Colonial Williamsburg. The site offers a plethora of rich multimedia features that make the user's experience both entertaining and educational. From their main page you can "Tour the Town Online", where the user can meander the colony on their own, go inside "buildings", view timelines, and enjoy many of the colonial experiences available to the traditional visitor. There are many on-line historical and art exhibits, interactive games, puzzles, activities, open discussions, all of which are constantly expanding with new features and content. The website is as amazing as the actual colony and it’s museums.

New Media / Technology Exploration - ooma Core VoIP Phone System

This new device called "ooma" is a VoIP System that allows you to speak over the Internet with no monthly charges. More and more we are getting on the free world of technology. Remember when you had to pay a monthly fee to have an email? Well the open source world is bigger than ever and day after day there are new services offered for free that in the past you had to pay big bucks for it.

ooma is nice piece of software that allows you to do unlimitted calls to anywhere in US for free, just need to have a high speed internet connection and you are set. The systems has also many cool features just as voicemail, call forwarding, caller id, and many others just like your at home. Of course some of these features and International calls are extra, but the basic common features are free, no gimmies.

The device is now on sale for $200 at amazon and other retailers but as you know competitors will come and this price will for sure be smaller in the future. I used only Skype already at home with a $3 monthly fee for unlimited call to US and a small adapter that you pay less than $20 to have your calls ring on your home phone as well instead of your computer only, but this system is away nicer.

If you are interested, check this video below:
http://www.amazon.com/gp/mpd/permalink/m2FZB995F4S596

Design Exploration

The first site I have found is ecodazoo.com. It is a site built to exhibit ways to live more "eco-friendly". It creates a storyline in a somewhat childish way. But the fact that it is all Flash makes it really not childish. The site opens up and has a clear and solid white border around the content. I really like that because the content itself is very bright and cartoony.


As you go into other sections of the content such as the pop-up book, The background becomes very blurred, and the foreground stays clear. This really makes it easy to receive the message and not become distracted by the background. And in blurring the background, the logo in the top left corner becomes clearer, but doesn't take away from the other elements.

The navigation part could be pretty confusing to someone who doesn't have much experience with flash websites. Considering it is supposed to be a fun, informational site, I find it to be okay. To navigate you click and grab the content and pull it in the direction you want to go. The design does contain a lot of key components for most websites.


The next site that I found was a Japanese design studio. I think the site was done with a CSS background and Flash on top. Overall the site is clear. Most people's eyes start in the left corner then work their way around. The logo is stationed top-left corner for this purpose. All the content on the main page is left aligned, although the navigation is indented a bit with I think creates a bit of proximity and you eye is drawn towards it. The navigation buttons are huge and very clear. The capital letters make them seem very important.

When you enter their portfolio, a smal bar appears in the right corner for the navigation to different types of portfolios. The main navigations gets smaller and moves in the background a bit but is still visible and available to get to. They keep most of the colors to only black and white in the background and the text remains white. To me, this creates a little bit of an issue because it makes it hard to read. I think this site is pretty cool.

Design Exploration: Black Angus

For design exploration I chose what initially appears to be a rather simple site, Black Angus Restaurants. The Flash intro movie is what immediately caught my eye, but then as I looked further I realized that the site was well-designed overall and met the criteria that we've been discussing in class. Though it may be hard to read from my captions, it has a logo, content area, and navigation that also serves as a page identifier when you change pages. The navigation text subtly changes color on the page you're viewing to act as a page identifier.



What I also like is the cleanliness of the site. It's pretty easy to figure out which page to go to for a given reason. The color scheme is consistent with the image the restaurant is trying to present. The other minor thing that annoys me is that some of the pages are slightly different sizes so it jumps a little occasionally. However, that's probably nitpicking when considered to the overall site's look.

Another thing that crossed my geeky mind is that in addition to the Flash intro movie the site makes extensive use of Javascript to load the images (client-side) on the pages. Some of the pages also use .php and/or .asp for server and perhaps database communications. This allows the web site to be a lot more powerful than just the traditional web site.

Due to Black Angus adherence to good web design principles I'd give it a 4.9 out of 5. However, the fact that I haven't eaten breakfast yet probably biases my opinion. :)

Design Exploration: Champion Hoody Remix

For anyone who likes clothing, art and design, this is a pretty cool site. Champion allows you to design a Hoodie of your liking with the possibility of it actually being made. The interactive website allows you to choose colors and pattern by dragging and dropping. You can also look at the design runner-ups and get ideas and inspiration. The flash on this site seems pretty simple, it might be a good place to get some ideas! You can check it out here: Champion Hoody Design.

Studio Exploration - BACKFLIP LTD

Backflip Ltd. is a UK-based company responsible for the design and construction of rich internet applications. They work primarily in Flash, but also utilize CSS, HTML, PHP and other tools to put their sites together. Their past clients include major British news network BBC as well as Aardman Animation, the creators of Wallace and Gromit; I'll come back and give you some samples of their work once we get further into the exploration.

One of the things that got me interested in Backflip is that none of their projects seem "normal." Each of them has its own unique artistic style. They have tried out a number of flashy interfaces, many of them making much use of CS4's new 3D tools. Even though a few of these interfaces do feel a bit difficult to use, it's cool that Backflip isn't afraid to risk new ideas, and sometimes they strike gold. They are working on an interactive book project for BBC called BBC Subtext, and if it turns out the way they plan, it could well be one of the coolest sites on the web.

And now for some project reviews. I picked out one that I didn't care for and one that I liked, to balance things out.

Wildlife Gallery is a site Backflip developed for Adobe in order to showcase Flash Player 10's 3D functionality. It's basically a picture and video viewer, showing various animals categorized under mammals, reptiles, fish, and so on. A standard text navigation panel on the right allows you to pick a starting point, but you can also drag the line of frames around in 3D space and click any of them to shoot forward. The color scheme is random, so if you hit F5 you might for example see all mammals labeled orange and all reptiles blue. These features look cool, but end up being somewhat gimmicky; this was one of Backflip's projects that I didn't like so much. Even though the main point was the use of 3D and not the actual content of the site, I would have preferred to see Flash's abilities showcased in ways that make things more intuitive, such as in their upcoming project BBC Subtext.

The second project I looked at was Me and My Health, a media viewing interface designed for BBC to help them spread awareness of health issues. I liked the light feel of the interface, the gradient background and the playful font. All the videos are loaded dynamically, so even though the site is hosted in the UK, the load times aren't too bad. All the movies are sorted by category, and once you pick a category, thumbnails of each clip appear along the bottom. I like how hovering the mouse over a thumbnail causes a preview to play; it makes me feel like I'm interacting with a living site, instead of browsing static thumbnails. Clicking on a thumbnail opens up the main movie, as well as providing some common options like "email to a friend" and "related links." All in all, this site shows how Flash can be used simply and effectively to enhance a viewers experience, while Wildlife Gallery shows the downside of using flashy elements just because they're available.

Design Exploration - Off-Lo-Hi

Off-Lo-Hi is an award-winning television commercial production company from Hong Kong. It's site uses an interactive 3D sculpture for video navigation.

Henry Chu, creative director at Pill & Pillow, creators of this Flash site says "We turned the canvas to ribbons, each representing the works of a director/division. We figured out that the 3D ribbons can serve as both video viewing and navigation."

 The spiral video navigation ribbons were created using Papervision 3D to create the 3D world. A rigid body dynamic was applied to the ribbons so that they don't fold up, ensuring that the ribbons will open up to occupy the space evenly.

A sound control allows viewers to change the level of sound: Off, Lo, and Hi. Video controls allow you to stop and play each video as needed and pop-up navigation offers you a scrollable feature to choose which videos you'd like to watch by title.

Some videos are in english, some in chinese and some are mixed. The only downfall is the initial screen which takes some time to load. A simple design overall with a very simple navigation that delivers a very effective interactive experience. 

Happy Tree Friends!

This is one of my favorite flash animations. Its a bit graphic but very well done. The Happy Tree Friends are lovable characters that have brutal fatalities. As far as the animation goes, these animations are brilliant.

Happy Tree Friends

New Media: Becoming Famous

The internet has proved to be a successful method of becoming famous (or in some cases infamous). Two examples are below:

www.livingthemap.comThis is a guy who graduated from USC and after 40+ rejections decided to try 50 different jobs in 50 different states. Always intrigued about where people lived, where they worked and what they did, he decided to find out first hand and share his experiences on his website. The result? He has been interviewed by countless radio and TV stations, featured on websites and has received many job offers.

Nicks’s Big Show, featured on Atom.com, is a series of “webisodes” starring Nick, an up and coming comedian. Each “webisode” is a 6 minute comedy skit, debuting weekly. You can view Nick's Big Show by going directly to his site www.nicksbigshow.com/ or by going to http://www.atom.com/, a site that showcases comedy shorts by amateurs. Atom.com allows amateurs to reach a huge audience, earn money, and can gain distribution across the Web, on phones, and even on Comedy Central. Atom accepts video uploads for review as well as searches the internet for content to license. Once accepted, the videos are featured on the site where visitors can view, vote and offer comments. I liked "webisode" #3, it is funny, you'll laugh!

Studio Exploration: 2Advanced Studios

http://www.2advanced.com/

2Advanced Is a studio based out of Aliso Viejo, Ca just a little bit north of us. They do a lot of New Media design for big names corporations like Adobe, Lucas Arts, and Ford. Most of their work is based around the web, but they also dabble is design concepts, photography, and basically anything else that will help forward their company.

What first caught my eye was their home page. Everything is set in this futuristic Landscape.

Get Directions

* approximate times

-

Category:

Unverified listing

As you navigate through the site, the scenes change showcasing different parts of their world. One of the small things that I noticed, is their use of using different URLs to house their pages. So their entire site is not completes one Flash site, but rather many different sites.I'm assuming this is done to make it easier to navigate, and find in search engines.

When looking through their portfolio I noticed that a lot of their work they do for other companies has that same Futuristic style. It's something they do well... so stick to it right. It's not that all of their work takes place is a new Utopian society. Their work with Locks of Love, Bombay Sapphire, and Evans Fruit Company, showcase that they can do just about whatever the client needs to help promote their brand.

Go Wild

This is a fun little site. I have kids, and they love looking at all of the different cartoon kids.
But aside from the "cuteness" of it there is some impressive flash implemented here, and really
shows how Flash can be used for more than these uber sites we all associate it with. The power of Flash isn't just in amazing eye-candy, it's power is in the ability to make these quick apps that draw people in and bring attention to the masses.

www.buildyourwildself.com

Design Exploration OneClikidea.

    For my design exploration I found OneClickIdea. Onclickide is a web design firm and it’s a team of experienced Designers and Programmers producing Corporate Identity and Advanced Web Design. This is a very simple interactive web sit to explore with few features to navigate like: about us, biography, contact, services, interactive, and traditional.  The web site is basically like a playing card table. The guy’s name on the video is Javier Beareciartua and he is an Art Director. He was born in Buenos Aires, Argentina and Educated in graphic Design and Animation at an Argentina institute and privately with professionals from the University of Buenos Aires. He is waiting for you to play your cards or expecting you to click on one of the options. He does some sort of gesture if you make him wait like: looking up an down to his card, looking at his watch, or even if you make him wait longer to click an option, he smokes a cigarette. When you finally click and option he throws a card to the screen and the card on the screen will show some other options. When you click an option, Javier gets the car back and then he throw them all to cover the screen with the cards. Another nice staff on the web sit is the music. You can listen to the previous, next, stop, volume up or volume down.

This is very cool web site.

 

Design exploration: dogscapes

I chose the website dogscapes for my design exploration because it is of contemporary style, which is the style I prefer. Dogscapes website is clean, easy to navigate, beautiful to look at, and really creates a beautiful frame for the service/product they are trying to sell. The background is not distracting, therefore the focus is the work.

Navigation is smooth and easy, the only thing that might be a little frustrating depending on your internet connection would be the opening of the portfolio, that can take a little bit more time. The extra time taken to open the portfolio is well worth it. The portfolio also incorporates music, which really adds to slideshow. I really like this websites flow, ease of use and just how beautiful it is to look at. It is quite simple with a white background and just a navigation bar in the lower right hand side of the page, but it is clean, elegant and modern.