12 Principles of Animation

Posted: May 23, 2013 in Uncategorized

Here are 4 quick animations that demonstrate the 12 basic principles of animation with a brief description of what you’re looking for in each one.

http://youtu.be/WbryghUzcec – Karate kid stickman. This video demonstrates follow through, slow in and outs as well as arcs. The follow through is with the arms catching up to the body and moving fluently with it. The slow in and outs can be seen near the end with the figure waving as there as more frames at the end the movement is more fluent and smooth. Arcs can be seen in the whole animation as the body flows and moves together seamlessly.

http://youtu.be/974cXB-gHtI – Stickman/Anvil. This video shows anticipation, staging and appeal. The anticipation is demonstrated by the man standing and waiting with the bird flying over head. The viewer is anticipating something is going to happen. This also demonstrates staging as the man waiting is the focal point and he is going to do something or have something done. The animation is done in black and white for a different look and a bit of appeal. This could be demonstrated more clearly but works for this short animation.

http://youtu.be/h02mVXfUwGI – Bouncing Ball. The bouncing ball demonstrates squash and stretch, straight head/ pose to pose and timing. The squash and stretch can be seen when the ball makes impact with the ground and squashes out a bit then back to form. Straight ahead or pose to pose is done by having key drawings of the ball at different frames to give it the effect of falling and bouncing back up again. Timing can be seen in the falling speed and the bounce of the basketball. Whether or not it flows smoothly or has a choppy fall.

http://youtu.be/MyUAqW1Qpd4– Rolling Eyes. This one shows secondary action, exaggeration and personality. The exaggeration and personality can be seen in the drawing of the face alone. The large facial features give it a cartoon look and some personality. Combine that with the rolling eyes you get the feeling he is annoyed with something.

Leap Motion 3D

Posted: April 29, 2013 in Uncategorized
Tags: ,

A new and unique control i’ve found is something that HP is going to be putting into they’re new laptops and desk units. It’s called Leap Motion 3D. This device which is going to be soon embedded in all of they’re machines allows the user to interact with the computer or program using they’re own gestures. Whether you want to just swipe a screen away, zoom in or out or design and draw in a program, this will allow you to do so without having to actually touch the computer. This opens up new windows for design possibilities and new programs to fully utilize this type of technology.

I think this is unique because it allows us to interact with technology in a way we haven’t really been able to do before. The technology itself has been around for awhile but not at a price for the average everyday joe. I’m sure we will see more products like this coming out in the future but for now this is the first like it that I have seen.

Here is a link to some picture and information about Leap Motion 3D:

http://www.extremetech.com/computing/153541-leap-motion-gesture-control-tech-to-be-embedded-in-hp-computers

Screen Shot 2013-04-29 at 10.04.10 AM

There are a couple of different types of controls when it come to web design. Different looks and functions to get different results. Below are some examples of different styles of interface controls.

Imperative Controls: An imperative control is when you expect an immediate actions when it has been used. Examples include –

1) Buttons – Your everyday normal buttons on a computer. They can be styled or just a simple ok button.

Image

 

2) Recognizable Buttons – Buttons that look like buttons you would see in the real world. Thus when you click it you expect a result.

Image

3) Icons – An icon is a graphic used to portray an image or a program. You know what the program is just by looking at the image.

Image

 

Selection Controls: These allow the user to make a choice using the button or contra

1) Flip-flop Buttons – An on/off slider to turn music on a website off. 

Image

2) Radio Button – Allows for a choice but only allows you to make one choice.

Image

3) List Controls – Allow you to make one or multiple selections in a menu. Drop down menus or changing settings in a computer is a good example.

Image

 

Input Controls: These allow the user to input information into a field on the button on control.

1) Spinner – Allows the user to change the input via the mouse or keyboard. Example would be changing dimensions in word or photoshop.

Image

2) Slider – The user can move a bounded control left and right changing something on the screen. Changing the brightness is your computer settings would have a slider.

Image

3) Text – When the user can enter information into a text field. Sometimes the choice will be limited to either date or age on a form for an example but in an email or search the user can enter information with no restrictions.

Image

 

Display Controls: A control or menu that is displayed visually as opposed to text or numerical.

1) The colour menu in photoshop would be a good example of a display control.

Image

2) Progress Indicators are another example which could be seen in the form of a health bar in a fighting game or the progress bar in a youtube video.

Image

3) Maps are also an example of Graphical displays. They can be used in maps of cities and roadways or in a game showing the surrounding terrain.

Image

 

The website http://www.floridaflourish.com has very clever buttons and animations. The buttons are visually designed very well and create animations on the page when clicked on them. The look of them suits the website very well and is fun to have a look at. Go check it out!

On the other side of the scale the website http://www.hyperbubble.net has some awkward controls. When you land on the homepage you see a pretty basic design but not bad design for a menu but when you hover over the choice nothing happens. You can’t see what you are selecting in anyway which makes it difficult to navigate and kind of confusing. 

 

Accessibility is the degree to which a product, device, service, or environment is available to as many people as possible. In today’s day and age with everything being digital or available online it’s not easy for everyone to access some things. This is where accessibility becomes an issue. Designers now have to account for and create devices and programs that accessible to as many people as possible.

There are already a large assortment of devices that can help or aid people with accessibility issues. One of those devices is the SmartView Synergy PI 20″ video magnifier. This device allows people with trouble reading small print or that have vision issues. It has a 20″ screen that allows easy viewing of anything put under the magnifier. You can find information on this product here.

Image

Two websites I checked for accessibility issues were the TSN website and the NFL website. Here’s what i found:

TSN – The TSN website had a few errors but nothing overly significant. There was a couple empty links and some contrast errors. Not to bad at all compared to other sporting sites I visited. The empty links can simply be filled in or taken out on the back end of the code.

NFL – The NFL website has a lot of errors. There is over 60 empty links, no defined document language, and about 35 redundant links. The whole site could use a cleaning up of it. The empty links could be filled in properly or removed right from the site so users aren’t stuck trying to get somewhere and get no results. There is a lot going on on the website itself as well. It’s not overly complicated to navigate but visually there is a lot to take in.

I’l be doing a quick review of the Pine Point website which can be found here. This is a really fun and engaging website with a feeling like it doesn’t take itself very seriously. That being said it IS put together really well though. The images chosen and text give it a down to earth but fun small town feel. The story is engaging in itself but also encourages you to move along through the site with the sounds and music changing along with the feeling and mood of the page you are viewing.

This type of website would fall under the category of controlled media. The site allows you to control the audio and some of the features on pages. You can move at you’re own pace through the site or replay a page or clip if you’d like. The site has a search field allowing ease of use in searching the site for particular information. This is a fun, engaging and interactive website that should give users what they are looking for when they visit.

Image

Task-Based Design

Posted: April 10, 2013 in Uncategorized

The question asked to us was: “As a student, what tasks would you like to perform electronically? What do you need to be able to do electronically? What would you like to be able to do electronically? What information would you like available to you digitally?”

There aren’t many tasks that I would like to perform electronically that aren’t currently able to do so. I need to be able to access my marks and online material that is required and I am able to do both these tasks online quite easily for the most part. If i’m unable to make it to class or a lecture it’s nice to be able to go online and see what i’ve missed and get caught up. This is possible for the most part unless the assignment is changed or the material isn’t already on webCT. A nice addition would be a blog or thread with the current and upcoming projects and the corresponding due dates in the order that they are coming up. This could easily be updated and kept up as the year moves along and would help organize projects and be in a place that every student could view. 

Overall though I wouldn’t say there is much I would like to be able to do electronically that isn’t already possible. This would apply to both personal and school life. I find almost everything is available online in some sort of capacity and fairly easily accessible depending what it is you are looking for.

Comparing Orientation Systems

Posted: April 10, 2013 in Uncategorized

In this blog post i’ll be comparing the two interfaces that Facebook uses. The primary online interface and then the interface used for the Facebook app available on the iPhone. Both the online interface or mobile app for Facebook are very easy to use or figure out even for a first time user. The mobile interface has a very straightforward uncluttered view of the news feed which is easily viewed by scrolling up or down. The online interface has a menu bar on the right with areas such as favourites, apps, groups and pages while the mobile version does not. A quick swipe to the right of the screen on the mobile version lets you access the menu bar that is available on the full web version. The Facebook chat is located on the bottom of the browser on the web version while on the mobile version a quick swipe to the left on the screen will allow you to access that menu. An easy to use navigation is located on the top of the screen on the mobile interface the same as it is on the web interface. Both interfaces are simple to use with a good look. I think Facebook did a good job of incorporating the same options and usability into the mobile version that they have on the primary web interface without sacrificing anything and while also staying true to they’re look and brand.

Image              Image