Thursday, February 12, 2009

Blog 3: Motion and Web Design

Motion Design

Point, Line and Plane: AT&T-04
Point is used, as a way of conveying depth is this video. The points are used effectively to create abstract computer mouse’s. They are also used very effectively in creating a room by skewing and changing the sizes of the dots, by doing this perspective is achieved. The lines act as a directional tool, guiding us through the ad. Planes are used as television screens, acting as transitional elements.

Rhythm and Balance: ESPN-01
The elements within this piece seem to follow the rule-of-thirds, which make this a well balanced work overall. The pacing of the music coincides with content of the work, by making you think there will be this great crescendo when the athlete completes their task, but are left disappointed.

Scale: Aero-01
Scale plays a huge role in this piece. All of the dots range in size from the most minuscule to ones that take up a good portion of the screen. By having these dots range in size this creates a sense of depth for the face. If the face were to be created out of all dots of equal size the piece wouldn’t have nearly the same effect.

Texture: TeleText-03
In this ad it is all about the texture, all of which is created by letters. The size, proximity, colors, and juxtaposition of all of the letters is key to the texture. By grouping the letters closer together you create harder lines. Some really beautiful transitions occur in this piece by focus large amounts of text together, creating this large mass that is undistinguishable and then morphing into something else.

Web Design

Point, Line, Plane: http://erraticwisdom.com/

Point is used throughout this site as a background grid, with two sizes of dots comprising of the grid segments. Planes are used at the top of the page, acting as these puzzle pieces. They also act as backdrops for the text to reside on. Some of the lines on this site are implied, such as those that are implied on the grid. Lines are used to create separation of the puzzle pieces at the top of the page, as well as separating the top and bottom of the page.

Rhythm and Balance: http://www.electriclead.co.uk/
The main elements on the page (links, telephone, images, body text) are all placed in respect to balance. The images on the page are predominately placed to the right of the page, while the body text takes up the left, making the page well balanced. The main image has great rhythm and movement that seems to tie everything together.

Scale: http://www.biggs-gilmore.com/
Scale is used beautifully in this piece by having your mouse change the perspective of the environment. By changing the perspective some of the images become smaller, others become bigger, and the lines within the background either move closer or become farther away based on their scale.

Texture: http://bfish.free.fr/
This site has really simple, yet beautiful texture. The simple gradations, from black to gray, create this inkblot shaped texture. The kerning and letting of the text on this site also add their own texture.

Point, Line, Plane, etc...

POINT, LINE AND PLANE

Web
http://www.monoblock.tv/
I like this site because it is fun. It shows good use of both line and plane that are used in a fashion that is isn't seen too often. The whole image consists of lines (all of the same thickness) and these lines make up small images and by grouping all of the images tightly together it creates a kind of plane. This plane seems fairly flat and continuous, that is because of the use of a single color and the even spread of white space across it.
http://www.toucouleur.fr/
There seems to be point line and plane everywhere you look in this site. The main elements are the lines that meander across the page. By using multiples of this red line that all follow the same path it creates a plane, but when you think about it it's still only a grouping of lines. The images in the background on both the left and the right of the page use both points and lines to create a delicate texture that kind of fades into the background. I also like how the site title 'toucouleur' uses lines and planes as well and helps unify the whole site.

Motion
http://www.youtube.com/watch?v=u46eaeAfeqw
I am a big stop motion fan, so for point, line and plane I chose a piece that was made for Minilogue. It is all done on a white board and concentrates a lot on the line. I like the idea of how lines can turn into planes and then into completely different planes and then maybe back into lines and then again into something completely different. This is a fun and interesting use of line in a motion piece.

RHYTHM AND BALANCE

Web
http://blogsolid.com/
I think this site has a lovely sense of rhythm and balance. The 3 repeated center boxes are the main focus on the page and act as a grounding point. The 3 swirly vine like things around the page give the site its natural and fluid feel while drawing your eye in to the boxes in the center. There is strong but subtle repetition in this site which gives it a very unified feeling. There;s the repetition of the 3 boxes which are all the same size and same layout, there's the 3 swirly things, the same speech bubble logo inside the boxes, and the logo for blogsolid is the same shape repeated 3 times and fitted together like a puzzle.
http://www.strawpollnow.com/
This site, which I'm not going to say a lot about, shows good use of balance in a page design. The page is framed by a horizon line along the bottom and has a strong defining site title at the top. The information on the page is organized into 3 columns, with the outer columns being the same size - creating an even balance for the columns.

Motion
http://www.youtube.com/watch?v=CLy0Cm8Pp_M
The is the opening title sequence for Hard Candy. I feel that this motion piece handles balance and rhythm very well. The rhythm is constant: smooth and clean and ties in with the dream-like music. The red square that we follow through the piece shows balance in each frame that it is in. Each time it stops, it works with the elements around it to create a perfect still image. White space and negative space is handled well and at no point does any element look out of place.

TEXTURE

Web
http://www.cameronmoll.com/portfolio/
I like the texture in this site a lot. It gives the site it's warm earthy traditional kind of feel. This is a site for graphic designer Cameron Moll and I believe it is effective at obtaining clients. It is soothing and inviting and reminds me of hand made paper and other traditional crafts. I believe that clients will like the feeling that this site gives them and will be more likely to choose this designer because of it.
http://bfish.free.fr/
This site is all about the texture. It is one big gray scale paint or ink stain that serves as the background to the site. From what I could tell by looking at the about section of this site (which is all in French) the site seems to be for some kind of artist or web designer. Textures say a lot about the site and so from the use of this paint splatter we should have already presumed that this is a site for some kind of artist. The use of black and white may suggest that he is old fashioned and the haphazard feeling the site conveys may say a lot about the artist as well.
http://www.kulturbanause.de/
I'm not going to go into detail on this site, I just really liked the cracked texture it uses and wanted to point it out.

Motion
http://mmbase.submarinechannel.com/titlesequences/video.jsp?video=32669
This is the title sequence for the film Lucio. The film is about a famous money and document forger, and so this motion piece uses a lot of paper textures in it. They are just simple paper textures, but they help set the movie's theme. A lot of the backgrounds are also magnified which provides an interesting composition and creates another different texture.

SCALE

Web
http://www.trinta.art.br/
I think this site shows use of scale very well. The huge number 30s contrast the much smaller type in the page. We can see especially in the lower laft that the large 30s are on the verge of being transformed into a design element that sinks into the background. I like this use of scale because it takes ordinary things like recognizable numbers and scales them up and uses them in a way that they would not normally be used.
http://cayena.es/
The scale in this site is obvious. Very large type is placed on an image of a cayenne pepper that is highly zoomed in so that the pepper appears huge. The type and the image work well together and provide a powerful opening image for the site. The site is effective at using small type as well which appears at the top of the page without distracting from the larger image.

Motion
http://www.youtube.com/watch?v=R1NnyE6DDnQ
I chose a coca cola commercial for my scale piece. Scale is obviously a large part of the commercial because it has the coke bottle portrayed as being huge, when we are used to it being much smaller. The interaction between all of the tiny characters and the large bottle is fun to watch and gives the viewer a whole new perspective on the product.

blog III

Rhythm and balance
This video I found I think shows a remarkable style of rhythm and balance. http://www.youtube.com/watch?v=A08HQP_SlOA
The way the paint explosions are conducted with the music and the way it just all sinks together is amazing.

Scale
This next site I thought was scaled well. The images are large enough that they stand out but yet they do not dominate the whole page. Every thing seems to have its space.
http://www.epitaph.com/


Texture
This site has many different textures that are very pleasing to the eye.
http://www.texturewarehouse.com/gallery/


Point and line
I feel this video I fond shows good point and line. The type starts and ends on the same plan and our eyes are always centered to the screen
http://www.youtube.com/watch?v=TOPJ90FRZHI

Motion & Web: Blog 3

Texture

Motion: http://www.youtube.com/watch?v=P5zfJXbrBUo&feature=related
- This is quite an amazing little short tying rhythm to texture movements. The textures grow/expand and contract. The creator is quite away of the use of space when moving the textures in and out of the scenes.

Web: http://www.juxtinteractive.com/
- Juxt's web site creates a common grunge texture and theme persistent through the design of their site. All of the elements tie very well together especially with some of the images they use as overlays or integrations with the textures they use.

Point, Line, Plane

Motion: http://www.youtube.com/watch?v=Be6jlCuMvVQ
- This particular music video contains many instances of point perspective and line movements to create a flow. In addition to these basic elements some use of planes as doorways to videos of the artist singing are used. This also contains good use of rhythm to tie the movements to the music.

Web: http://www.colorsmagazine.com/victims/
- While looking through the sites listed on the left recently I remembered Colors design for their name. When looking at the magazine's page again the recent volume on Victims has very nice use of line for dividing their main page about their current issue. The image placed in the background acts as a plane behind said lines to exemplify them from just basic lines.

Scale

Motion: http://www.youtube.com/watch?v=uG2tV-X5NiQ&feature=related
- This motion piece created in After Effects was inspired by Jackson Pollock's paintings. The emphasis on scale comes into play as we maneuver into the paint itself as if it was a living breathing entity.

Web: http://www.mountaindew.com/
Mt. Dew's site usually has interesting attempts to make unique web pages. While usually they are nothing that amazing I found that the types of scale they use for navigation in this current rendition interesting. Instead of standard links they scale the page to be housed partially underneath the main page or page options.

Rhythm and Balance

Motion: http://www.youtube.com/watch?v=F99IuKUCAc4
- In addition to great typography this music video by Mika also hold great rhythm and balance in the form of not only shape but color use. The rhythm of object, character and text movement coincides with the music seamlessly. The balance of color used during the different scenes of the music video is very nicely done because of the color choice of harmonious similar colors in most instances and throwing in a contrast or more neon color now and then to keep the piece lively and energetic.

Web: http://www.stylecraft.com.au/
- The website has a nice sense of balance. The design houses the images of the company’s creations on the left and balances it with the links and information on the right hand side. The two aspects feel as if they counter weigh each other.

blog #3 motion

Plot, Line, Plane:
Tetley "Red" Advertisement
http://motionographer.com/tetley-red/

This advertisement uses a different sort of line rather than just that of a drawn line. I thought it was very inventive to use the deep colored "lines" that come out of tea leaves as it diffuses into the water. They use it to draw out these "exotic" things that we think of when we think of Africa, such as giant trees and elephants, and it also helps give out the idea that the tea brews deeply, with much color and flavor, that these lines possess.

Rhythm, Balance:
Fleet Foxes Mykonos
http://vimeo.com/3089176

This music video uses cardboard pieces in order to create objects such as birds, etc, to help give a rhythm to the song that is played. Much of the pacing follows the soft drum beat in the background which helps keep with a certain pace to the video, along with it much of the shapes are repeated and often have a reflection which interacts with itself and help give a balance to its counterpart.

Scale:
Guinness Music Machine
http://www.youtube.com/watch?v=E63MgKAi8EE

This is an older commercial which portrays the begining of a guinness as a bunch of little men who turn out to be the head on a guiness. This uses scale well because at first you see the commercial as being a bunch of guys getting cannoned into drums and you wouldn't initially think guiness. The area around it uses the dark brown area and the guys are dressed in tan which represents the foam on the guinness. Soon though it scales out to normal size and you are revealed with the guiness being served.

Texture:
Dexter Intro Reel
http://www.youtube.com/watch?v=W_Nmek2IDfE

When I thought of texture in a motion piece, first thought was from Showtimes series Dexter, about a serial killer, who kills only other serial killers. The concept behind the opening credits in my opinion is brilliant, by using extreme close-ups on someones normal morning routine and using the texture, of eggs, squeezed grapefruit etc, create these wonderfully grotesque textures which mimic a less gruesome look of what could be left after a murder.

Shapes and Lines and Dots, Oh My!

Dot, Line, Point

www.psyop.tv/aero - Motion
I really love this company that we found in another class of mine the other day, they have amazing colors and use of shapes. This is a really good example of dots used to create a picture in motion. Really this piece I think is such a great gathering or texture, dots and rhythm, the way thing everything comes together.

http://www.tiptopland.com/ - Website
The use of line in this website is very nice, though sometimes the dots can be a bit distracting, I think the lines are very bold and eyecatching.


Rhythm and Balance

www.psyop.tv/nokia - Motion
The rhythm in this is really subtle but it really stuck with me when I watched it, the way the music flows and the people along with it and as it picks up in speed so does the rhythm in the motion.


http://rareformbranding.com/ - Website
I think this website has a really nice balance between the imagery and the text, it's not too overpowering but your eyes flow really nicely throughout and your eyes seem to fall exactly where they want you too.


Scale


www.psyop.tv/mtvhd - Motion
This is the first piece I saw with this company and it really made me fall in love with them, the way they use the scale of the objects to transition through to new settings was really fluid and done with such amazing skill, you focus in on the birds throughout the entire commercial which keep changing in size and scale.


http://www.kvarch.com/ - Website
The scale used to navigate throughout this website is really amazing and keeps the users attention, its a really nice way to show off your work I think.



Texture


www.psyop.tv/smithnephew- Motion
The texture used in this commercial is just really beautiful as they slowly create each character and where there movement is being focused on, how you can see the yellow path that follows each one, I love how fluid the texture is I think it really matches the feeling of the brand and commercial.

http://www.davebarnes.com/
- Website
I love the texture effect in this website, it gives off the look of cutouts and it all really compliments each other really well.

blog #3 websites

Plot, Line, Plane:
Website: http://acko.net/

Although this site is pretty standard set up with scroll downs to most recent news, the banner, and headlines use Plane and Line very well as well as color to create a depth of field. I found this site to various diagonals to create a sense of weighty 3 dimensional line. The navigation bar on terms of aesthetic as well as the entire site has a lot of appeal, and looks very slick.


Rhythm, Balance:

Website: http://music.vodafone.com/

This site I found to have incredible balance and interactivity. The most apparent balance and rhythm is from the color Using almost a muted color scheme but contrasting that with some brighter colors, and using very simplistic shapes which you can throw around and have them effect the other. Very fun little site.


Scale:
Website: http://www.designbyhumans.com

This is a pretty cool t-shirt company which sells shirts designed by people. First off though the way they place each page is very unique in the way you navigate through the pages which brings you to see each new shirt in the foreground someone wearing it and re-emphasis' it by placing the same image on the t-shirt in the background. Personally I thought the design of the pages in advertising the shirt was a very nice way to emphasize the "art" on the shirt whereas many other sites its very hard to tell whats even on the shirt.


Texture:
Website: http://www.happyingreenville.com/

This website I found to be a playful for St Francis Health. It used a light childish soundtrack but more importantly it told a story of a town in the way of using child-like drawings and simple pencil textures. I thought this was an incredible site by advertising a hospital which is usually associated with sickness, and trying to make it seem a lot less stressful by using this cheerful adaptation to help its patients.

Blog 3

Dot, Line, Point

http://www.youtube.com/watch?v=dIYrLoO9GYA
This animation contains quite a few good examples of line and shape. The characters and forms are constantly morphing into something else, so the lines are always changing, creating new shapes. I love how fluid the motion is.

http://www.relientk.com/home.aspx
This website uses lines in interesting ways. The diagonal green lines create motion, and the scribble lines give the page more texture and interest. I like how the tables are not made of up even lines, but rather sloppy, pencil lines.

Rhythm and Balance

http://www.klf.org/
This site has a lot of rhythm to it. The cloud shapes help move the eye across the page, in a very rhythmic way. The logo even has intersecting lines that seem to cause more rhythm. The page overall feels very balanced as well.

http://www.youtube.com/watch?v=oP5J4W5GQ3w
This advertisement for Sony is amazing. Thousands of tiny balls bounce down a hill in San Fransisco. The balls create lots of rhythm and motion, and the song playing in the background also helps tie in the rhythm of the balls.

Scale

http://www.yellowicon.com/
Yellow Icon’s website uses interesting scaling. The text and buttons are all relatively tiny, while the pictures are quite large, giving a greater contrast between the two. This also gives an elegant look to the whole page.

http://www.youtube.com/watch?v=YwNVE37BGVE
This is a funny animation about a bunny who’s depressed about his sex life. Several times during the animation, the bunny changes his location in relation to a fixed camera. His scale changes quite significantly. Other bunnies in the background and foreground better define the scale of the pieces as well.


Texture
http://macthemes2.net/
This website contains a lot of interesting textures. The desk-like layout has been used many times in the past, but this site pays attention to the minor details, giving it a much more realistic look. The blue graph paper is a great texture.

http://www.youtube.com/watch?v=tch8mHk81ug
This is a cool, somewhat creepy cg animation about an futuristic apocalypse. The textures and lighting are beautiful throughout. The human-like characters are realistic and again, the lighting and shading is beautiful.

Second Post

RHYTHM AND BALANCE:

http://www.us.playstation.com/patapon/ -Patapon Rhythm and Balance Web- this is a playstaion portable games website, the choice of color and placement give great balance.

http://www.youtube.com/watch?v=QWkcO00Rfos - T Pain Rhythm and Balance Motion- this video use of complimentary colors and composition are what stand out to me.

SCALE:
http://www.youtube.com/watch?v=g2VCfOC69jc –Honda ad Scale Motion- this commercial uses scale of items and car parts to give a good varity of scale that make this ad work well.

http://na.square-enix.com/starocean/ – Star Ocean scale web- the scale of the main hero is giantgantic compare to the planets allude to a epic quest. It works.

TEXTURE:
http://www.youtube.com/watch?v=sLV28V9984g&feature=related – lrg drawing human texture motion, this add uses humans as texture and it is very interesting.

http://www.littlebigworkshop.com/en-us/ Little big planet texture web. This website has so many different textures that give great depth.

POINT LINE PLANE:
http://www.youtube.com/watch?v=G0LtUX_6IXY – human Tetris point line and plane motion.

http://na.square-enix.com/remnant/landing.html Last Remnat Point line plane web, with this site I wanted you to focus on the firey flame points that give and average page movement.

designElements

Motion Design

Point Line Plane Guinness
This piece represents the epitome of the use of these three elements. It uses a dot to sprout and propel all the motion in this video, by creating lines that turn into shapes defined by the movement of the dot. The lines that are created divide the space in dynamic ways to create effective and interesting compositions. Plane is used as a staging ground for creation of differnt scenes in which the dot plays a different role every time.

Rhythm and Balance Lugz
This commercial uses line as a very active element which defines the depth of the space present around the breakdancing figure. The line is generated in form of a stroke in such a way that compliments the dancing of the figure, giving it a sense of balance. The speed at which the stroke is generated reflects the beat of the music creating a rhythmic path for the viewer's eye to follow.

Scale Renault Clio
The use of scale in this commercial is very clever, it has a playful approach to how scale works in the real world. It uses a very large scale for the main character to exaggerate his presence in the video and to show a fun interaction between him and the other people in the video.

Texture
Canalplus - nodomain
This piece uses texture formed from repetition of oe object as the main elements of the piece. The texture is that of fluffy clouds that cover a landscape, the texture is used effectively because it bring a level of suspense at first and then aids in the dilevery of the message by forming into a word.

Web Design

Point Line Plane HYPE
The HYPE communication website uses all three of these aspects quite well, in that they all work together to create an organized and efficient interface. The lines form connections between a category and the links within it which are represented by circles that can be considered points. Even though the points are arranged in a seemingly ambiguous fashion they are well balanced and through subtle movements generate interest in that part of the composition. Behind all of the lines and points are larger planes in the shapes of circles, which serve the purpose of dividing the page into coherent chunks for easy visual digestion by visitors to the site.

Rhythm and Balance What a lovely Name
This website uses a lot of patterns in its design to allow the viewers eyes to progress rhythmically across the choices with which they are presented. The website also achieves balance through the use of these patterns, though I must say that its so balanced that it becomes monotonous after viewing the website for more than about twenty seconds, so perhaps too much balance is not a good thing...

Scale Vodafone
Scale is used effectively in this site as it creates a very distinct hierarchy among the elements. The bigger elements demand the viewer's attention be focused on them and are the source of the websites purpose, while the smaller elements provide access to additional information supporting the sites goals.

Texture
Helmy Bern
This site uses texture to convey its brand as a brand that these extreme sports enthusiasts can relate to. The cardboard textures used to house the menus act as a link to the homegrown origins of their products as well as the origins of extreme sports. The darker asphalt-like texture in the background gives the necessary context for product placement in the minds of the site's visitors.

Wednesday, February 11, 2009

Graphic Design Basics in Motion/Web Design

Plot, Line, Plane:


Motion Design: http://www.eyeballnyc.com/ (under live action)

About half way through the clip point, line and plane (mostly line and plane) are used to create a moving plane in which the dancers move on. The lines and overall composition are what make the motion and transitions in the clip.

Web Design: http://yehrin.proteinos.com/typography/index.html

Although this is really on print, I liked it so much I posted it. The series of planes really sharpens the letters in a dynamic way. They also create a beautiful series of shapes the bring the eye right in to the main focus.


Rhythm, Balance:

Motion Design: http://www.imaginaryforces.com/featured/7/514

The rhythm in this clip follows a certain pace and is visually demonstrated through the movement of the Pepsi logo and the type. Each time the clip progresses of the letters, or logo, move there is a new balance for each shot.

Web Design: http://www.capacity.tv/

The little characters interacting with the word “Capacity” direct the viewer across the word in a very smooth “s-shape”.


Scale:

Motion Design http://www.capacity.tv/ (click the “Click here for rebrand montage”)

Throughout the clip, we see the characters close-up, far-away and them traveling in between which helps the motion progress from one character to another. If the character is going away from the viewer, then they become small to recede. The opposite occurs when the characters get close to pop out at the viewer, consuming the eye.

Web Design: http://www.abelic.net/

The large scaled background image of the sunken ship dominates the webpage compared to the small scaled navigation left of center.


Texture:

Motion Design: http://www.eyeballnyc.com/


The texture in this motion is very interesting because it communicates the carbon footprint idea and it interacts beautifully with the characters in the piece.

Web Design: http://www.melkadel.com/

This site was designed to look like a sketch pad and is successful in doing so through the use of texture representative of different kinds of paper.