Design Exploration wix

www.wix.com

I was looking into flash animation best websites on the web and I found this interesting site, which is actually a designer’s website. This site provide reference and links to many useful resources and websites. It is an interesting resource for a lot of things to do with flash and web design and I noticed its navigation menu which was interesting. The combination of graphic elements and other web design elements make it interesting and attractive. This website does a good job of combining typical Flash elements, such as videos and details graphics, with the development portion of the website. My favorites were under Flash Animation and element of different language up the right of top. Color combination and use of top buttons have been designed very nicely and professionally and colors change when you move the pointer over.

NEW MEDIA EXPLORATION SKINIT.COM

Skins are adhesives that not only looks good, they protect their respective device. Skin it.com uses flash to allow its customers to custom design their own skins. When you enter the sight, you first select what device you are going to create a skin for. Second, you have the option to chooses from their stock designs or create your own. When you click on the button to create your own, that is when the flash program launches. There, you have the option to upload your own designs and or photos. You can use shape from their catalog. If you chooses to add your text with their program you are limited by the amount of fonts you have to chooses from.

All in all, it's a neat program. The design is very clean and very easy to be self guided through your creation.

http://www.skinit.com/loadCustomizer.php?default=true

Design Exploration Mercedes

This website does a good job of combining typical Flash elements, such as videos and details graphics, with the development portion of the website. The sketches combined with the images show the progress of how the cars move from the drawing board into post production. Also, the gallery is set up like a book and you can flip through the pages to check out the options and different available vehicles.

There is also an area on the site that allows you to build your own model. This allows the user to pick and choose different elements of the vehicle. The selections range from interior material and colors to what type of engine you would like in the vehicle.

Also a nice element is the way the navigational menu expands off of the previous menu. This allows all of the different menu items to be viewed at the same time, without taking much focus off of the main content on the page. The combination of very polished graphic elements and more "hand drawn" elements make for an interesting combination. It works to lead the viewer through the development of the vehicles. It takes the viewer from the literal drawing board to the showroom floor.

http://www.mercedes-amg.com/#/e63-overview

Artist Exporlation

Here is an artist website that I found that I thought was very interesting.

http://www.pelinakat.com/

I unfortunately was not able to get any screen shots to put up as the site is all flash. But if you go to her portfolio and look around you can see some of the cool things she designed using Flash. My favorites were under Flash Animation Banner and IStockphoto.  If you look there she has created some interesting designs that look pretty easy to design. Especially from all that we have learned so far in class.  My favorite under the IStockphoto was the Christmas greeting card, but really under the IStockphoto I really liked all of them. I hope you will look around as this is nice artist site.

MOUSE PARTY!!

I was looking through flash animation websites on the web and came across this interesting site called mouse party i think this is very interesting because its an interface that would be attractive to teenagers so they can learn about drugs..... this demonstrates one of the many ways that flash can be used to teach or show information in an appealing and interactive way.

another really cool website that i found was Japanese drums, i really like this because i can see how much time and effort was put in to synchronizing the audio with the video in this animation. i hope to one day be able to create animations as cool as this!

Design Exploration

http://www.bchydro.com
Hierarchy was present, making it very easy to fine what I thought was important. Everything was laid out in a logical manner. Anything having to do with Rebates was under that heading. With the most important information at the top and things of lesser importance following consecutively there after.
The site was consistently clean, with columns of text in the same place from page to page and the same with pictures.
The point of this site is not just one but several with the most important being conservation of power/water, this is implied as well as stated. To emphasize this they publicize contests and award prizes. They show examples of well known (in the area) people and tell what they have done to conserve. They even have a game of conservation, which is fun and gets the point across to kids. They even give the opportunity to build a team at work to enter and possibly win. Their prizes are tickets to local attractions and events. The call to action was obvious. Tell us what you will do, do it and document it. Then we will reward you!
The drop down menu at the left side of the main screen has the same titles as the tabs at the top the main screen, but the left menu does a further breakdown of the contents of each section with one click access. Very nice.

The only contrasting elements that I was able to find were the change in color between some of the pages. While most of them are green with some blue trim, there are a few that have no green. I found it interesting that these seemed to be pages that may not receive as much attention as the green and blue pages. The layout was still consistent.
All in all a very professional appearing site. It is well thought out and put together. I enjoyed going through it. Nicely designed site.

Resources and Exploration

I found several sites using google search engine that were valuable resources for a designer to stay current on trends, and technologies in the design field.

One site is http://www.flashkit.com/ it has tutorials on how to add things into your flash project. Some tutorials explain new aspects of CS5, while others tell how to add neat things like a animated ball circling a logo. Some are vidoes from youtube and others are step by step instructions. Most tutorials include all files needed to follow along and do what they do.

Incredible http://www.incredibletutorials.com/ is another good site to learn to do some of the newest things in flash. This site has one author that makes youtube vidoe tutorials. The tutorials often use the same character to show animation, so they are easy to understand.

An interesting resource for a lot of things to do with flash and web design is www.allwebdesignresources.com/webdesignblogs/graphics/flashalternatives-ultimate-list-of-flashlike-animation-software/ . This is a good site for web and graphic design resources. There are articles, blogs, forums, and job postings. There is a good article about all different programs that can be used to create flash animation.

Another good site to find current information about flash designing is http://www.levitated.net/ . It has information about upcoming exhibitions, publications, and has an open source area to post designs. On the site there are interactive flash design for you to see and interact with. There are also links to flash conventions all over the world, and published books and works of art.

Machete & Jay-Z Hits Collection - Design Exploration

1. Machete (http://www.vivamachete.com/)
The promotional site for the movie Machete is a nice example of Flash design that is simple yet effective. First of all, the color of the whole design scheme is very cool, with lots of hot colors and high contrasts. The text effectively conveys the dirty, gritty, stoic nature of Machete, and the title text also implies the kind of tongue-in-cheek action movies that this is a throwback to.
I really like the way the site is a grid of images of the different characters, with very nice rollover effects and easy visual access to the links to the Story, Video, and Gallery.

Clicking on any of the characters will load in an on-demand high-resolution image of the character that fills the screen. This is all one page in Flash; clicking on anything won't take you to another web page, but just load in on-demand content.

Down at the bottom corners you have a couple of links for social networking sharing.

Rolling over any of the buttons also has a sound effect, but there is no background music for the whole site.

This site really appeals to me because of its simple yet visually rich and clear layout & design, and Flash works well here to make it happen.

2. Jay-Z Hits Collection (http://www.jayzhitscollection.com/)

Found this site through the FWA; it's really neat. It's for Jay-Z's Hits Collection, and kind of shows the history of his music career, and has photos of him. The site uses Flash very nicely, with lots of cool rollover effects (i.e. having the years 1989-1998 pop up underneath "The Beginning", the cool effect with the water when you roll over it).

The transitions when you go from one page to the next are short clips of video in New York with an overlay quote by Jay-Z. The whole site feels extremely classy and legit, and lends to Jay-Z's image as a mature rapper.

The black and white color scheme and corporate, expensive feeling text also adds to this image.

Furthermore, you have background audio - clips from various Jay-Z songs, that really help the website feel more (inter)active, with controls for volume.

Studio Exploration: Trollbäck + Company (Sharon DeCaro)

Trollbäck + Company is a creative studio that weaves compelling narratives using motion graphics and live-action. This firm creates innovative campaigns for the advertising, broadcast and entertainment industries and is led by creative directors, Jakob Trollbäck and Joe Wright. Their beliefs are that the viewer should be immersed in storytelling and an idea that is focused with a compelling message is essential for successful communication. Past and present clients include HBO, CBS, DSPN, Nike, TED, AIGA and The New York Times Magazine. The goal of Trollbäck + Company is to sustain their dynamic blend of high-profile, commercial projects as well as its more avant-garde collaborations with emerging and established talents in film, music, architecture, magazines and fashion.

Last year, I got the opportunity of attending a presentation given by Jakob Trollbäck, who was a speaker at San Diego AIGA's Y15 Conference. I found his work to be compelling and cutting-edge.  I was mesmerized by his presentation of sound and visual media. I was also inspired by his firm's use of motion graphics, design and sound. Watching his presentation and reviewing his website etched a memorable mark in my brain.  Here are a few of my favorite examples of their  client work and their own work, such as their advertising and branding work montages:

TED2010

 ThingsIThinkAboutBeforeSleep

CookingChannelMontage

 




CBS Re-branding

Trollback's Advertising Montage 07

I've included a few more links to their client work, which, I think, is aesthetically and technically amazing:
Visual Acoustics - History of Modernism, Pop!Tech05-Open, TravelChannel-AmericanJourney, HBO-Mid-WinterImageSpot, HBO-Revolution.

Studio Exploration-Devin Cox

The studio that I found to make high quality flash websites is a company called Blue Fountain Media.  I found them off Google after I viewed previous results.  It was the first site that had taken time to make sure their business was well represented with a professional website.  There is nothing special to it besides it doesn't look like junk.  They were recognized as being in the top 10 flash development companies.  I know the main point of the blog was to review the studio's site itself.  But If I were to do that, it wouldn't be a great example.  I think It's easier to design somebody elses website for them to design a website for yourself.  With that in mind I want to review 2 Blue Fountain Medias projects.
The First is Nike:
What's really cool is the opening page has a video you can watch embedded in flash.  Right from the outset It is an eye appealing website, with a fitting background image fitting Nike's reputation. Their Nike Logo turns into a drop down menu which has categories for all of Nike products.  I thought that was a real nice feature.  An added navigation to places that would normally be found inside of another page.  Here you are able to skip a step by using that menu. There is a cool feature on the Nike Id page where it shows one of their popular shoe models and you can scroll over a color icon and when you click on it, the picture stays the same but the shoe turns to be the color you selected.

The Second Website is Kaplan College: 
The main page is very vivid. Strong colors, high resolution images.  It has the colors that fit Kaplan colleges logo.  There is a frame with pictures of people and their story or their goals and it shuffles between images.  That looks real nice with this website.  The navigation bar is neat too. When you click on an option the headings move up and down to default alignment but the heading you clicked on is still an available feature with all the subheadings displayed.   When you go to click on one of those subheadings, it directs you to a non flash section of the website.  But I think the most important thing is that it has your attention from the start, and it just looks professional.

Resources

Here are four sites that I found that have really nice tutorials. 

1.Entheos Flash tutorials

This site is useful as it has step by step instructions with images. Also, each one includes an example so you can easily tell if this is a feature you want to try/use for whatever you are trying to create.

2. Smash Magazine - Best flash tutorials

 

This site is some of the best flash tutorials via what Smash Magazine recommends.  I like these tutorials as some of them are unique and not what I would think of when researching for an idea but now expands my thinking of what I can do in flash.

3. Good Tutorials 

 

Good Tutorials website is an excellent website to look for a tutorial if you are not sure exactly what you want or need an idea as this site has the most tutorials I have seen while researching.  It has over 150 pages of tutorials.

4. Creative Cow 

 I saved the best site for last.  This website has some of the most interesting flash tutorials.  My favorite one is this snow globe.  There is a lot of action scripts but they provide the detail. I would not consider this tutorial for beginners but I think our class could handle. 

Artist Exploration: Roth Aniko

This is an example of a very simple site where just a few animations and sound effects create a very playful atmosphere. This website is a portfolio of sorts, where you can also purchase or request artwork. It is a very simple site all contained within one common backdrop, which ties everything together. The background is done in the same style as the artists’ advertised pieces and everything melds together. While it does help to create a seamless effect, it also does nothing to accentuate and have us focus on the artwork available for sale. Everything looks very similar, and it can be hard to differentiate each piece from one another.

However, the small details are what make this site fun. The rollover buttons ripple, as though they are part of the water, which is a significant part of the background image. Also the interactions, like the ability to pop the balloons, make the fish speed away, and blow the ship’s horn, keep the page fun and entertaining. Even at this point in the class, knowing just the basics of Flash, we, as students, could probably recreate something very similar to this page. Again, it helps us to see that complexity does not make a site successful. It is the interactivity and the ability to draw the user in, and keep them looking for more.

http://www.rothaniko.hu/eng_fs.html

Design Exploration - The Egg Republic

I added this site to my favorites last month and I will probably use this for my in class demo.  The Egg Republic is a NY based creative agency that specializes 3D...www.theeggrepublic.com.  The home page is great!  It loads quickly and starts off with a 3D animation and a thank you to the FWA .

The site has subtle background music and a really neat pageload that draws a long red tube as you switch to a new menu item.

http://www.georgeglenparker.com/Flash_Design.html

http://www.georgeglenparker.com/Flash_Design.html

Glen Parker is a flash web designer. His site offers what seems to be an endless resource of other interesting websites. One of the products he offers is SEO for flash based sites. I looked through his portfolio. I like the variety of design that he offers to his clients. The sites are very busy with a lot of motion, but some how it all works. It does not seem to distract from the content or products the site offers.

Happyinggreenville

I have posted other flash website on our class blog last week and planned to show it to you guys. However I just got caught up with this site in last minutes. It is Happyinggreenville which is a homepage of St. Francis Health System. The website is full of simple drawing flash with many different characters; each one represents for individual fun, creative and unique animations. At the front page (home page) of website, each mouse clicking will take you to discover different place in South Carolina City or a famous attraction. The website uses flash elements in every single subject, from drop down menu to lead you to different pages on the site. The colors theme of website is just simple in 3 colors: black and white and other color which you can change it by click on one flash character at the home page to paint it in different colors. The background music and animation sounds are quite often used on the site. After browsing around the website I can say happyinggreenville site is very interactive and creative website, each flash element is distinctive design that makes you want to click on it.

Verbatim Championship

While searching some Japanese anime sites I came across Verbatim website which run by an American storage media company, the world’s leading storage media brands. The site was launched in November 2009 to introduce Verbatim’s global brand to Japanese market. Verbatim Championship site is rendered in flash and 3D, very clean and thriving design. Verbatim site has achieved many awards such as Innovative Online Game Award, Tokyo Interactive Award, Webby Award, Cyber Silver Lion in the category Animation and Cyber Bronze Lion at Cannel Lions International Advertising Festival .

Verbatim site allows you to create your own monster by selecting different devices of their removable media. After you successfully name your new monster then you can choose your opponent monster on Verbatim Championship or you can pick random match and start the fight. The website actually keeps data records of your monster on their site but I am not sure how you can get back that character if you want. In addition, during a fight, there are three buttons on the screen that you can use to control your monster. Every time you win it will give you points and your character will get bigger and more powerful. Furthermore you can even take snapshots of cool fighting scene stills from your fights and you can view a record of a previous match.

Digital Invaders - Website Exploration

http://www.digitalinvaders.org/en/Digital Invaders is a group of designers/professors that offer courses in digital creativity. This site has a very neat drawn style interface. You plop down and land in a strange mystery world on the surface of a chalkboard. Here you will find bizarre creatures bouncing around the environment, spitting out monsters, transforming into even weirder things, and growing tentacles across the screen. Within this chalkboard land you will float across the interface dragging the site up down and around to navigate it. All aspects of the interface are either animated or interactive, and every transition has tons of movement. They created a very distinct and consistent look; this whole interface is using only pink white and grays drawings on a blackboard.

One thing I really like about the interface is that you can access the different sections in several ways. There is a small menu monster that follows you around the site and he will list the sections for you to navigate. Or you can move around the site on your own, find other sections and load those up on your own. After sections are opened they are accessible at any time; I can navigate away from a video and move it around the screen at any time. This freedom of movement is really nice to me.

They also include some extra fun games. There mini video game in intergrated right into the main chalkboard. Navigate over to the center left section of the board and you will find "video games." Here is a very well designed little game of UFO Abduction. On the bottom right section of the chalkboard there is another mini-game. This one will let you draw with a piece of chalk your self, as well as save and send to friends via email.

Throughout the site were strange noises and interactivity that made the interface alot of fun to explore. I wanted to stay on the site and search through the whole page because it was so strange and interesting. The music and sound effects are very fitting to the spacey alien theme. Everything was very appropriate and cohesive in their design and I think it is very fun.

Hotscripts Flash Library - Resource Exploration

http://www.hotscripts.com/category/flash/


HotScripts is a pretty big site, and they host a ton of scripts for many different programming languages. I was looking specifically at their Flash resource page, and they have an enormous collection of actionscript files, .fla files and tutorials. It looks promising. I really like the code side of web design, and this site seems to focus on actionscript programming, which is nice.





Some of the scripts do cost $, but it looks like the majority of them are free. They have everything organized into sections, and for each one there is a link off to the website of the designer to see an example of the script in action. This feature is really great, because you can see what kind of thing you're downloading.


The site itself is not a work of art, but it has a very clean and organized design, and it was one of the better looking sites in the area of resource sites. I've never used any of these resource sites in Flash design, but after researching this one a bit, I can see it might come in handy in the future.

Frank

Moodstream - Musics of the Mood - Site Exploration

The moodstream site (http://moodstream.gettyimages.com/) is one of unique intelligence it doesn't do a plethera of unique tasks it just does one to a very unique aspect. Moodstream allows you to mode around some sliders to create a unique mood of music that is then streamed through the player to you and accompanied by images that are meant to continue the mood.

While exploring your audio and video mood the player than allows you to create saved moodboards in which you can sace the audio and image that is paying and create a board that would flow through the saved images and audio so you could come back to and enjoy. The player is best left in explanation as an exploration of your mood and audio-visual tastes.

When using the player it's rather simple you jump in and can figure it out quite easily looking at the sliders and presets you can start playing with moods as soon as you eneter the real unique part is the ability to save audio and images to create your own board that can be reviewed and played later consisting of your favorites.

Red - New Media Exploration

I chose the site for the new movie "Red" for my new media exploration blog. http://www.red-themovie.com/

This movie is chock full of some of my favorite actors and the site makes you really want to see it. 

The site is entertaining and it shows a bunch of great clips from the movie.  It also has a few fun games.  I spent more time on this site than I had anticipated!  The first screen shot is the opening page which downloads quickly and plays an exciting clip form the movie.

Below is the 'View the Gallery' page which shows all of the major actors and you can view each one individually.

There is also a 'Meet the Team' link which allows you to read more detail about each character.

Here is one of the games.  It's multiple choice asking which actors played in a movie.

The only thing I did not like about the games is that you had to allow your facebook information to be read before you could play.

www.bijan.com
The website of famous cloths designer has been a favorite of rich people all around the world for many years. I like the way flash based website displays his work in a book design. Nice and colorful and each page has attractive color with animated slide show. There is an awesome navigation bar that you can see each page with just a click. There is also nice list of event page where the page goes forward and backward with a different color. Each time you click on a tab you can change your page very fast. My favorite part in the site is good combination of colors. It’s very well done and is super professional. Definitely a site you can be proud about, If you were part of the design team. There are so many details into thelayout.




I don't think technically the website is "different" from many other flash websites but it is artistic, simple and attractive.

Blitz Marketing - Studio Exploration

For my studio exploration I chose Blitz Integrated Marketing Agency.  http://www.blitzagency.com/ 

Blitz seems to do just about everything related to on line advertising.  

Their clients range from Starbucks to Adobe and Microsoft.  The site is elegant and it displays the message of 'cutting edge'.  The navigation is very easy and music is used appropriately throughout the site.

The home page first displays information relevant to advertising and then shows recent ads they have done.  Above is their Guitar Hero ad

They have recently won the FWA award for the John Mayer music video.

The 'our agency' page has a great introduction with a video describing what the company does and how they do it.  It also has a section where the user can scroll through and view the bio on their employees.

I looked at many sites before deciding on this one.  I found trouble navigating on many of the sites or they just took forever to load.  Although the content on some sections was lacking, overall I found this site to be the best site that I could find for a design company.  They have also received awards as one of the ten best places to work...for anyone who may be interested in going to LA.

The Flagship Experience/ American Airlines - Site Exploration (Sharon DeCaro)

Welcome to Business Class - Your Flagship Experience Awaits

 










American Airlines' new ad campaign is spear-headed by their award-winning, flash interactive website that promotes their Business Class seating and its amenities.

When you go to the website, the user is asked to choose a language so that the user can view the site in his/her language. This main page is rather bland; it's more informational so it can get the user to the right place. However, once you click on the site, you are taken to the welcome page that shows a 3D photo of a Business Class seat with interactive icons swirling above it that represent the following categories of web pages within the Flagship site: Lounges, Entertainment, Work, Dine, Sleep, Wine, Relax. When the user clicks on an icon, the Business Class seat is disassembled into many pieces then re-assembled quickly while the user waits and views how quickly he/she is transported to the new setting. What the viewer is supposed to glean from this new environment is how quickly the traveler/user is transported to a new, comfortable destination within the Business Class seating environment and the wonderful amenities that the traveler will enjoy with a Business Class reservation.

Here are some of the page examples:

A Glass of Wine is a Beautiful Thing

When you click on the wine glass icon,  it says now boarding while it loads the interactive page and says "A Glass of Wine is a Beautiful Thing." Then the page opens up to a virtual wine cellar/bar with music that makes you think you're in an upscale bar, yet the focal point is still the Business Class seat, which is placed in every scenario. On each page the sound button can be turned off. It's clever in that it tries to convey the new Flagship experience of American Airlines Business Class. When it transitions to each page, the business class seat is disassembled and re-assembled in each photo with flash. It's really cool and each page has interactive buttons that provide pop-up info about the menu or wine or recreation (depending on the page) or other interesting info for that web page.

For example, on the menu page, when you press on the button, info about the chef will pop up or when you press another button, a full menu of dinner items is shown.

Kick Back, Relax and Unwind

On this page, there are blue flash buttons that open up to relaxation tips. Another pop-up info screen talks about escaping with a movie or music or a novel, where you can use their acoustic Bose Quiet Comfort 3 Acoustic Noise Cancelling Headphones. The sounds of the Relax page are birds and trickling water, and the water moves in the background (flash) to give it that virtual 3D effect.

Additionally, the site allows the user to upgrade to First Class. In the righ-hand corner, there is an upward arrow on which to click. After that you see:

You've been Upgraded. Welcome to First Class.

On this page, the user is transported to a First Class Seat and has the virtual experience of what it would be like to upgrade to First Class.

Here are some examples of the First Class pages:

Entertainment in First Class

In this section, we see a computer within a computer, flashing movies and various forms of visual entertainment that are available to first class passengers.

Wine and Dine in First Class

The user is taken to a virtual dining experience, complete with steam rising from the meal.

Overall, this is an interesting website, but I think there are a few things that could be made better. The First Class environment in this website is not as exciting as the Business Class pages. Although the First Class pages are a 3D interactive environment, it is clear that the target audience for this site is the Business Class traveler.