Design Exploration - Machinarium

I found this very nice game called Machinarium. The graphics are amazing and the game itself is pretty fun, challenging and with lot's of humor. I could not stop to play. The details on its graphics are impressive and the game is very intelligent. Check it out at http://machinarium.net/demo/ and try it for yourself, this is only their demo. I wish I had time to play, I would buy it for sure.

New Media Exploration

MoMA - Elastic Mind

MoMa's (Museum of Modern Art) online exhibition "Design and the Elastic Mind" is a very fun site. the site is always looping with new pictures and colored paths. They have arrows that appear when you want to move over to a side of the screen, they even managed to make the scroll bar background black(or should I say transparent)

The information is very interesting to, if you find yourself bored of even YouTube then maybe you should check out this site and learn some interesting new facts.

MoMa's (Museum of Modern Art) online exhibition "Design and the Elastic Mind" is a very fun site. the site is always looping with new pictures and colored paths. They have arrows that appear when you want to move over to a side of the screen, they even managed to make the scroll bar background black(or should I say transparent)

The information is very interesting to, if you find yourself bored of even YouTube then maybe you should check out this site and learn some interesting new facts.

HBO - Imagine

HBO's Imagine website is very interesting, the interface resembles a web and each section gives you more information on different parts to a story. Some elements are a simple as a newspaper article, or an audio clip, and some are multiple movie-clips showing different angles to the same story. The goal is to figure out the true story and not get fooled by a false perception of what really is going on.

I really enjoyed the the movie clips from different angles, it made watching videos more hands on, cycling through the different angles to find more information about the mystery.

The new interfaces that are emerging are quite interesting, it makes you wonder what direction we are heading in and what the future of information architecture holds.

Design Exploration

!! WARNING BLOODY!!


one of the flash websites i found is Joe Cartoon. a flash comedy website. the Creator use buttons and animation to make fun story's. the 1 i like the most is the frog bender 2000. :) Therese some games as well most of the games are easy to play and simple.
point and click type.





another 1 i found was when i was looking up so gameing sites and found this 1. Dark Siders, a new game coming out soon.



one of the cool things about this site is the intro into the site.

with the charater jumping down and hitting the text was a nice tuch.

Studio Exploration - Metajive

Many of our class blogs to date have focused on flash tools or very interesting and "artful" applications of flash technology. I chose to present a small, design house that produces high quality commercial websites using only flash, javascript and PHP technology, in order to demonstrate the "practical" but still artful applications of the technology.

Metajive, based in Encinitas, CA, is a full service interactive design agency. All of their websites are developed entirely in Flash, using javascript to call Flash code into the webpage and also utilizing PHP for their sites. The proprietors (who are neighbors) have indeicated that it is very difficult to find AS3 and PHP programmers with the prerequisite experience.

Many of their clients are "action sports" brands and the use of flash and video is very effective for attracting a youthful audience. Their websites are generally visually rich and, especially for their action sports clients, the use of video supports the action sports experience.

To explore their work, visit the "Work" page of their website and visit the client links. I particularly like these websites.

The DC Shoes/King website just won an ADobe Site of the Day award. After the introductory video, visit the Dublin link, as an example, and take a look at the Source for the page and you'll find very little pure html, other than html code for the navigation bars. From a design perspective, I particularly like the "drama" and ceremony created by the dropping"cloak" and the swinging cloak behind the text continues the experience.

The Carrier Johnson website demonstrates a really interesting use of flash as an integral part of the navigation for the website. (Use the Firefox browser because I had some trouble viewing it with IE). Note the navigation of the page and especially how the use of flash movies creates an interesting visual navigation experience.

Studio Exploration - Resn

Resn is a New Zealand Design Group that specializes in all works of design. I found Resn through FWA. They had an award for the Shapeshifter site. The site is pretty interesting and has dual focus being a band website but it also showcases a lot of visuals for your viewing.

Their site is awesome. It has a lot of abstract, street influenced, collage like graphics. Their whole approach to things is very unprofessional (or maybe corporate is the word), which caters to the younger, hipper, style. They don't seem to be concerned with how people view them.

They created a site for The Black Seeds (a band), which was very jungle like. It has a lot of animation as pages load and a lot of really interesting graphics coming through. Whether or not you end up liking the band, the website makes you want to explore to see what else will animate in and travel through the rest of the site.

Over all I really enjoy the abstract approach and daring way to convey things. The design isn't super clean since it has so many images, but it creates something really interesting and doesn't allow boredom whatsoever. Seeing their work makes me want to venture out and create some "weird" designs.

For my blog exploration I have chosen a studio exploration, I came across a company called 2advanced.

They are based in Aliso Viejo, CA and have been in Business since 1999, Now in their tenth year, 2Advanced Studios is a world-renowned, award-winning interactive agency dedicated to pushing the creative boundaries of design and technology to deliver high impact rich media solutions.

With an exceptional reputation in Adobe Flash design, 2Advanced Studios also offers an array of design and development services including interactive design, development, CMS solutions, Ecommerce, motion graphics, 3D design, rich media, custom audio, video production and corporate identity. From their own words they pride themselves in their ability to push the boundaries of design and technology and to deliver the best next generation solutions through the notion of "Progressive Design Technology".

Their corporate website is entirely done in flash and showcase some of their technology as well as their achievements. To cite a few of them, They have done work for Activision, Adobe, Bacardi, Capcom, Diesel, Electronics Arts, Eidos, Ford, Fox, KB Homes, Lexus, Lucas Arts and the list goes on. They are a Adobe Xtra Alliance Partner which is a recognition for their knowledge, resources and skills to deliver best of breed solution utilizing adobe technology.

They have been enlisted by Adobe along Big Spaceship and Blitz to create and interactive experience for this year Max Conference. They have been featured in numerous magazine's articles and online articles for their achievements and they are the recipient of dozens of awards. Check out their site and see it for yourself!

New Media Exploration

monoface

Monoface is a site that composes a face out of different parts (eyes, nose, mouth, etc.) from many different people. The possibilities are very grand and the outcome is quite interesting.

I would assume that the different parts have decreasing opacity the closer it gets to a different face part. For example. left_eye.png for Sally is surrounded by head_shoulders.png for Jon. The opacity for each decrease the closer they are to each other. That way the blend appears seamless.

I think this is the beginning of creating video games with characters that actually take on the appearance of their player. I could see that website "Jib Jab" be a lot more realistic.

WaterLife

WaterLife is a website that aims to inform you of the Great Lakes water condition and how it is everyone's responsibility to ensure we help prevent it from getting worse. The thing that sets Waterlife apart is that the interface is layed out very differently then most websites. They make exploring very interactive and pretty entertaining, each page is very different. There is also a traditional style navigation on the left that appears if you roll over it that helps you find specific things you are looking for, or just reorient yourself to where you are in the massive site.

Every time I move from one section to the next you kind of guess as to what shape or form the interface is molding to.

Ribbit Developer Community

Ribbit is a provider of web based telephone communications. Part of their product offering includes a Flash Toolkit /API for integration of voice and rich communication features into your Flash applications. The toolkit is free but does require registration on their developer site http://developer.ribbit.com/register. Upon completion of the registration process you are offered a free $25 credit to use the service when testing your applications. You will be required to setup an account and provide credit card information. The API is copied to your flash components folder and is accessible from the flash interface

This product offers some functionality if you would like to add voice and rich communication features to your flash apps. However, you will most likely have to wrestle with it to get the desired results. The documentation is weak and there is virtually no tech support. The 4-5 hours I have spent with it have been frustrating.

Aviary.com

"Aviary is a suite of powerful creative applications that you can use right in your web browser. We're on a mission to make creation accessible to artists of all genres, from graphic design to audio editing."

Cloud computing is the next era of internet. Aviary.com offers online tools written in flash such as an image editor they name Phoenix. This editor seems like the most complete one of all the online image editors I have found. It has all the basic functions of Photoshop with a familiar and simple GUI.

Aviary also offers online tools such as an effects editor they call Peacock. I have not gotten into this program that much but from the looks of it offers great features if you need some simple effects for your video. They also offer a vector editor called Raven and if you're familiar with Illustrator or the open source program InkScape, you'll fill at home.

Their newest addition to their online tools is an audio program called Myna. They have tons of loops and it has the ability to upload your own music loops if you would like to make a song. Sample songs range from Hip-Hop to movie scores that sound like a Horror movie. Best thing is, it is a very in-depth program that you get to use for free.

What is great about Aviary is that if you happen to be over at a friends or family members house and need to do something using Photoshop or Illustrator and they don't have the programs, you can easily use Aviary's tools to get the stuff done. Since they are made within Flash and almost every computer comes with Flash, you are pretty much guaranteed, as long as there is an internet connection, to use these online tools.

Design Exploration - Flash 2

The following is a clean, clever example of an interactive timeline.

To celebrate basketball star Michael Jordan's induction into the Basketball Hall of Fame in September, Jordan Brand (a sub-brand of Nike) launched a mini-site, www.nike.com/jumpman23/historyofflight/.

While the site is styled with sophisticated graphics that resemble pop-up cards, it's clear that the site's focus is on 24 years of Jordan game shoes. Therefore, the Jordan branding experience continues, but in a fun, experiential-based way.

First, a truly linear timeline makes it easy for the user to explore the site. After clicking on any year (from 1985-present), a beautiful collage springs to life, again with a Jordan shoe as the centerpiece. Click on any of the graphics and the user is treated to complementary details, each shoe's design information as well as events that happened during the year. Regarding the shoes, we learn in 1985, that the red-and-black Air Jordan 1 was banned by the NBA. However, Nike happily "paid the fine for the exposure generated by Jordan" in his amazing rookie year. Jumping to 2002, we learn, after clicking on a saxophonist, that "the AJXVII was inspired by jazz. The shoe had jazz notes molded into them."

Regarding the design, again, we have an environmental, exploratory timeline that employs pop-up captions, Lightbox features and opportunities to relive Jordan's greatest moments through video. It is no accident that the pop-to-life imagery is a metaphor for the jumping skills of Michael Jordan. Also, interestingly, though fans are used to seeing Jordan's shoes in color, these are featured in a tonal light gray, with emphasis on bright graphics. Lastly, the white background and spare number of links border display a minimalist look and guide the user to the middle.

Design Exploration

The following are both sites that promote an artists work in very creative ways.

The first site is www.javierferrervidal.com It is the portfolio site for photographer Javier Ferrer Vidal. What makes it different is that it comes off more like a commercial than a standard web portfolio site. The opening animation is great and continues to move as you move your cursor across the window. There is not allot of information about the photographer other than contact information on the site, but he does show his photography off in a unique and engaging way. It's not your usual slideshow, but a moving floating three dimensional layering of his photos. When you click on one of the photos, it then displays in a larger format. I find his technique for showing his portfolio very interesting.


The second site is www.theturn.tv/. It is the portfolio site for Fredo Viola. Fredo spent his youth studying art and music and later studied to be a film director. Out of school first he tried editing and animation design, and set himself up with a home recording studio. He then got to work on making my own music.

In 2004 he had one of his songs licensed for use in Jonathon Demme’s Manchurian Candidate. Then he made his first music video, The Sad Song, which was a pretty huge hit on the net. .

In 2006 Vidal signed with trés chic French music label, Because Music, and has his first album scheduled for release in mid 2008, along with a lot of digital video art.

This website is set up like an interactive game. You can adjust the controls at the top of the page changing the colors, speed, etc. You then click on the start button. When you drag one of the objects over the target, you launch that video clip. I find his technique for showing his portfolio different and interesting.

Design Explorations

I have an interest of living in Japan one day and so I thought it be fitting to look at a few Japanese Flash Designers. I thought some of there work were really quite inspirational. There was a lot of creativity and the use of powerful colors. The first website I looked at was by Toshiyuki Kuwabara. Below is a screen shot of his website.



http://toshiyukikuwabara.com/flash.html

This is a very exciting flash site that uses great animation but all good contrasting colors. It seems that the trend he uses for his designs seems to be using two power contrasting colors such as black and white or pink and blank. Here is his main website.

http://www.tk-de.org/


Another designer that uses power textures and art work is by Takashi Okada.
His portfolio site is http://www.hybridgraphic.com/portfolio/ This isn't a fancy website but the images are powerful. There is a lot going on but overall I think people are memorized by the amount of powerful imagery. In his okadada.com website he doesn't use a whole lot of colors. The black and white and motion graphics are just powerful enough and intriguing. I think both of these designers incorporate graphic design principles of contrast, color usage, and placement techniques. I hope these will be inspirational for future flash designers.

Resource Exploration

for my exploration i chose a resource. i for this website called Entheosweb. they have writen step by step info for making some stuff like: tweens, layers, and ect... it has a tips for your every day flash work to help speed things up.

At the bottom of the page is some photo gallerys if you will to spend the money for them that is lol.

the site not only has just flash info, but other website making programs as well.

Design Exploration

For my first exploration I chose the website http://www.redbullsoapboxracer.com/.

The site is a flash site and a very fun way of interactive functions. It lets you build your own soap box car with choices of materials, paint, even sawing your own wheels. When you are done building your car, you can race it on the racetrack.

There are different race tracks available and you can choose to race "the bull".

Explorations: MarcioKogan (architect) and JibJab (fun-stuff)

Hey this is Siska.

For my explorations I have two totally different website that I like; with one being more serious than the other :) The first one is one of my favorite architect from Brazil whose designs are described as: "Elegant, calm, minimalist, clean and beautiful" (source: thecoolhunter.net).

His name is Marcio Kogan and this is his awesome flash website: http://www.marciokogan.com.br/ (designed by graphikonstruct). What I like about the website design is that they mimic the minimalist theme of Marcio Kogan's work. From the moment that the website load up we know we are in for a "design-discovery". The website has a pleasant surprise effect at the intro of the site (when it asks me to "Drag Me") and everything starts to unfold. I also like the innovative UI, navigation and photo-slide-show. My dream house is the "Paraty House" ;)

The other website is called: http://jibjab.com and it is a super-fun-sendable-flash-site with a clever interactive UI. The one I like the most are the video-sendables where we can upload our own pictures, cropped our faces to fit the characters and send it to our friends and family.

They also have a section call "Originals" where they have originally-made flash-movies. Here's one on President Obama (warning: super hilarious!): http://sendables.jibjab.com/originals/hes_barack_obama

Resource Exploration: Game Programming

by Miles McQuerter

As our course stresses the ability to design with analytically driven code, I dived into the Internet to look for sites geared towards self tutorials for designing games with ActionScript in Flash.

Two sites I came across offered a number of free and purchasable tutorials including CD's with a wide variety of game types. Price ranges vary but I'd consider them reasonable if your really into game development.

The first site I checked out was dezinerfolio.com which offered 20 free tutorials to Create Your Own Flash Game including: a Racing Game, Balloon, Space and Sniper Shooting games, Guessing game, Word games, Survival, Dodge ball,  and one of my favorites Pool game with high scores, and one that really fits today's cell phone environment, a Flash game for Mobile Devices.

The games range from very simple to more advanced programming and player ability. Overall, the site offers a number of tutorials for anyone interested in developing an online game.

The second site I found was Cartoon Smart.com which offered a great array of tutorial Flash topics including: Drawing, Animat

ion,, Wed Design, Gaming, AS 2 & 3, as well as other Aldus programs. The site also offers a variety of Templates, however, you'll need to pay for these.

The Courses in Gaming allows you to choose between AS2 and AS3 for programming. I found the quality of the game tutorials to be very easy to understand. In fact each one describes the various code options you will learn, approximate time it will take to learn, and the difficulty level of programming. I tried one called Tank Game which is an Overhead-View game. Each tutorials gives you enough to understand how to create the game and to  later stylize the game to fit your own desires and/or create tons of variations of the game.

Each site allows you to play the games so you tell if your really interested and/or what capabilities the game may have that you want to learn. Have fun, I certainly did.

Advanced Special Effects...for fun

Sometimes my the ideas I have go way out of the scope of my knowledge... actually, they generally all do. Well, I am attempting to make a jellyfish animation with realistically moving tentacles. In my attempts to do so I came to realize that in order to do so it would have to be done progammatically. I searched high and low for several...minutes, until I stumbled upon a site called http://asluv.com/.This guy is a pretty amazing Flash programmer, and has created a lot of cool effect using only AS3.

The image shown above is of one of the special effects that created thousands of particles that drop onto his logo (name) to reveal it by bouncing off of it, like in the movies when a creature is invisible so the good guy has to throw sand on it to reveal it's position.

The next image is the effect I was looking for, if you take a gander you'll notice the flowing hair. That hair is 100% programmed. And the movement as though it is moving through the wind is pretty amazing also.

Design Exploration

You may have seen the Saab commercial, however, I found this website through thefwa.com. It is changeperspective.saab.com. I was attracted to this site because of the reoccurring ideas and uncluttered layout. The design of the site reflects the "efficiency" of the product. At first, the intro video begins, but there is also a link to skip to the 'desk.' The white background, spacious layout and piano music complements the site and reflects its simplicity.





The music is synced to rollovers and enhances the experience. Music gradually gets faster and more exciting as you progress, conveying a sense of hierarchy through the pages. The objects on the desk are balanced to each other in a informal, radial design. At the center is a looping animation of hands gesturing "imagination" (or what one does with their hands while they are thinking). Buttons are aligned at the top in the navigation bar. Subtle notes encourage the viewer to interact with each object laying on the desk, however, there are easy access buttons at the top left. This makes it easy to go back without getting lost.

The second website I was browsing through is dreamworks.com. The home page features the DreamWorks movies. At the bottom are six rollover menus, each containing video clips, sideshows, and movie synapses. It also includes links to shop through their library.





There are small consistent animations throughout the site. Under 'Studio' - 'A Day in the Life' are videos that change with what the viewer rolls over. You can click on the videos to experience how they make their movies. The videos open into their own dragable player with buttons to more, buy now, close, etc. The player can also be moved around the stage as desired. The site is not too complicated and keeps their viewers interested with fun games and information on upcoming movies.