Wednesday, January 30, 2013

Thesis Response 3

Victoria Weldon
I liked this thesis because it was easy to read and flowed nicely. And, of course the topic intrigued me as well.  The viewpoint that marketing has targeted women over the last two centuries isn't a new concept but Victoria correlated our economic and social eras with that of women's role in U.S. culture. Her research was evident and thorough. I especially liked reading about the first female advertising agency established by Mathilde C. Weils as early as 1870. Victoria also reflected how advertising created stereotypes based on the social standing of the woman at given phases of our history:
  • Industrial Revolution and Westward Migration
  • Progressive Era and World War I
  • Great Depression
  • World War II
We went from the 1800s notion that woman didn't work outside the home to the 1920s when women were granted national suffrage. Victoria goes on to explain each phase in detail, cite references and gives examples in the changing roles of women and the parallel effect of the changes in advertising.

I'd like to look into the following passage:
“Advertising,” wrote one commentator in a trade publication, “helps to keep the masses dissatisfied with their mode of life, discontented with ugly things around them. Satisfied customers are not as profitable as discontented ones.” Advertisers, as historian Stuart Ewen notes, tried to endow people with a “critical self-consciousness.” (“chnm.gmu.edu”) (p 6).
as it may apply to a thesis idea floating in my head - consumerism vs. sustainability. 

Overall, I thoroughly enjoyed Victoria's paper and was able to read it, like a book you can't put down, to the end.

P1 Case Study and Presentation Week 4

P3 Tutorial Links

Frame by Frame - blog that posts stills and gif examples of frame by frame
Making Rotoscope Animation using Photoshop


Tuesday, January 29, 2013

Contests to Enter

43rd Media & Interactive Competition
Deadline: April 11, 2013
FV11 - Animated FilmCan be a long or short
Broadcast outlet is not specific
Must be completely animated
Project to Enter: P2 Rotoscoping Let's Move film

NM21 - Website, Public Service/Non-ProfitProject to Enter: P1 "It's Not Easy Being Green" for Save the Frogs using Parallax Scrolling and Interactivity

Communication Arts Interactive Competition
Currently Closed
W - Websites/Microsites
Websites used for any purpose (including advertising, news, e-commerce, education and entertainment, etc.) that utilize web browser-based technologies. Any interactive project created for digital distribution on disc, interactive kiosk, handheld device, online service or the World Wide Web is eligible.
Project to Enter: P3 HTML5 Canvas

Other contest to note:
National Web Design Contest - a team matching event

Project 2 Schedule

Week 3: Research and Tutorials

Week 4: Additional research and tutorials; Rough sketches

Week 5: Gather assets

Week 6: Reduce music video to one minute. Begin adding video clips to synchronize with music.

Week 7: Adjust video clips for consistent look.

Week 8: Add titles and polish in AfterEffects.

Week 9: Final due

Project 3 Proposal and Statement


Topic: Rotoscoping or Frame by Frame Animation

Rotoscoping is an animation technique that uses actual footage, say of a person, and then traces over the images frame by frame. The technique was invented by Max Fleischer in 1915 for a production he called "Out of the Inkwell, The Tantalizing Fly." I really like the piece towards the end [3:15] where the clown slips from the paper into the inkwell. One of my ideas was to take a M.C. Escher's print and make the image go from a 2D flat image on paper to a 3D image where the subject starts walking out of and around the paper.

Walt Disney used rotoscoping in the first full-length feature cartoon "Seven White and the Seven Dwarfs" in 1937. The technique was used mostly for the study of human movement rather than actual tracing. In the mid-1990s Bob Sabiston developed a computer-assisted "interpolated rotoscoping." Bob Sabiston was employed by Richard Linklater to create full-length features, "Waking Life" (2001) and "A Scanner Darkly" (2006).

My inspiration for this project came from AIS instructor, Bryan Schaeffer. He gave our class a brief introduction into rotoscoping and each week showed us the work he was doing on a personal project using the technique. Unfortunately, we weren't able to explore the technique in-depth due to time constraints. Bryan's final piece was a multimedia short titled "Looking to a Promising 2012." Bryan used Photoshop to create the rotoscoping animation. Since we weren't able to explore the technique in-depth it's my intent to learn more about it through this project.

Client:
Let's Move, First Lady Michelle Obama campaign for a healthier America

Target Market:
Kindergarten through high school aged children and their parents, caregivers and techers.

Assets:
  • "Move Your Body" song by Beyonce
  • Movie clips of children playing or participating in an activity
Process:
  • Write script
  • Create storyboards
  • Accumulate videos
  • Splice videos together in AfterEffects
  • Import into Photoshop and begin illustrating animations
  • If time allows, put the whole thing together in Premiere Pro and sync with music
Links:
Snow White - short animation clip

Monday, January 28, 2013

Unit 3: How People Remember

Short term memory, or working memory, is quick information we try to store for short-term use. In order to remember the information we must keep our attention focused on it. Working memory activates the prefrontal cortex of the brain. Stress will have an adverse effect on to the working memory.

The magic number is 4 - that is four items that people can remember, or store, in the working memory if not distracted. Grouping things in "chunks" helps us remember. Examples include phone numbers, 205-546-5128, or social security numbers, 121-00-9988. These groupings are separated into three groups or chunks and we can remember them as three items. If these numbers, or items, are used repetitively or  related to something we know, like a family member, than the information moves into long-term memory. Another example of remembering things in groups is "schema" - the head can include the whole schema of eyes, nose, lips, hair for example.

Memories aren't stored in our brains like movies or files on a computer. Instead are nerve pathways that fire anew on each retrieval. The negative effect of memories is that they can change each time they're retrieved. This happens because of events that take place afterwards effects the original movie, particularly if its a related event or person. We'll also fill in gaps with "made-up" information, this is called reconstructive memory.

An accidental study with rats in a maze ended up in additional research showing that their brains were just as active in their sleep as they were while awake. The study implies that humans have the same condition and that our brains are consolidating new memories and creating new associations - basically deciding what to remember and what to forget. This doesn't always work in our favor, but it is what humans have inherited for survival to evolution. 

Forgetting Curve - we quickly forget information not stored in long-term memory. Our brains keep us alive by not remembering everything, because too much sensory input would be overwhelming to us.

Infographic on Memory Retention and the Forgetting Curve
Other Terms
Recall Task: "involves presenting a subject with material that is to be memorized. Once the material is removed the subject is to immediately demonstrate everything that they remember from the material" [Cognitive Atlas].
Recognition Task: easier because of context; "Subjects view a string of letters. After a delay, a probe letter is presented and subjects indicate if the presented letter was in the previously viewed group" [Cognitive Atlas] .
Recency Effect: recalling most recent information; "If you hear a long list of words, it is more likely that you will remember the words you heard last (at the end of the list) than words that occurred in the middle" [Alley Dog].
Suffix Effect: "the weakening of the recency effect in the case that an item is appended to the list that the subject is not required to recall" [Morton, Crowder & Prussin, 1971.

Saturday, January 26, 2013

Hotlinks

While exploring options for my projects I came across the following websites that I'd like to check out sometime:
Responsive Web Design: What it is and how to use it by Smashing Magazine
Build a responsive site in a week by .netmagazine
Create a mobile website with jQuery Mobile by .netmagazine

Thursday, January 24, 2013

P1 Links

Circular content carousel
Hover Effects with CSS3
HTML5 Canvas World map with KineticsJS

More Thesis Ideas

Flash is gone, what next? HTML5, Adobe Edge, Greensocks for js

HTML5 Links

Tutorial on HTML5 charts and graphs
Tutorial on Canvas Tile Swapping Puzzle
Case Study: Building Technitone
Gauge Charts using canvas and javascript
JS Animate with Greensocks
The Planetarium

P3 Links

Jacquie Lawson's animations in Flash have always impressed me: Midnight Clear,
Dragon Tail. This is the type of animation I hope to emulate using HTML5 canvas or other software tools such as, Adobe Edge Animate.

HTML, CSS and Canvas
How to create web animations with paper.js
CSS3 Keyframe animations
CSS Animation principles and examples
Spider-man CSS
CSS Tricks Node.js example
Examples using plugins for Canvas: My Life AquaticNardove.com

Raphael JS is a JavaScript library that works with vector graphics. Tutorials:

Adobe Edge
Create slick animations with Adobe Edge (reminds me of Pixar's animated logo with the lamp)

Other Examples



Wednesday, January 23, 2013

Unit 2: How People Read

Chapter 2: How People Read. This chapter "busted" some myths about type but also emphasized important facts about others.

  • All caps isn't necessarily harder to read. Our reading behaviors in society effects the way we see patterns and recognize words. All caps in our society means you're shouting or giving a headline or warning to grab your attention. If our society used all caps more frequently our brains would eventually recognize and learn the pattern.
  • Our eyes "read" in a saccade and fixation pattern - we're using our peripheral vision to read ahead and then jump back, all occurring at a very rapid rate.
  • Headlines help the reader comprehend what the context of the text means.
  • Most readers recognize letters instantly, regardless of their typeface. But using a decorative font attaches meaning to the context and effects the comprehension of the reader. In some cases, this could have a detrimental effect by causing the content to appear difficult.
  • Font size matters, regardless of the age of the reader. New fonts, such as Tahoma and Verdana, have larger "x-heights" to make it easier to read on screens. X-height can make a font appear than another even if they're the same font-size.
X-height font comparison

  • Computer Screen vs. Paper - I really appreciated the points made about how the light is reflected on screens and paper. But especially appreciated the emphasis on how computer screens are constantly refreshing and it's tiring on the eyes. Interesting to note was that Kindle using "electronic ink" which mimics ink on paper and doesn't refresh. Black text on white background is the best case scenario, white text on a black background is difficult to read.
  • Line Length: short vs. long. People prefer multiple columns but research shows that longer sentence length are faster to read because it interrupts our saccade and fixation movement less.



Thursday, January 17, 2013

P1, P2 and P3 Proposals

Project 1
Parallax Scrolling with Interactivity
Transition my "Its Not Easy Being Green" infographic into a parallax website
Use CSS3 Transforms enhanced with jQuery for additional interactive elements
Tutorial: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Project 2
Let's Movie PSA
Client: Let's Move - First Lady campaign
Song: Move Your Body by Beyonce
Tasks: acquire song and videos; splice together in Premiere Pro; adjust videos for consistency in AfterEffects
Length: 1 minute

Project 3
Frame by Frame Animation for the web using Photoshop
Inspiration: "Looking to a Promising 2012" by Bryan Schaeffer
Client: Let's Move - First Lady campaign
Song: Move Your Body by Beyonce
Tasks: use P2 to create a rotoscoping video geared for children and teens; import into Photoshop and begin illustration and animation

Thesis Idea: Web Design Sustainability

Article: Save the planet through sustainable web design by .net magazine
Topic: Sustainable Web Design
Synopsis: "Every website has its own carbon footprint. In regards to web design, sustainability is about layout, art, software, platforms, hosts, teams and business models. Sustainable web design meets the current needs of its users, without compromising the ability of those needs to be met in the future. A sustainable internet should be open to an expanding audience, while not reducing future access to its services. At a detailed technical level, we have articles promoting the meta X-UA-Compatible property as a sustainable strategy for handling legacy web browsers."
More Reading:
Sustainable strategies for the mobile web (video) by Jesper Waldiche
Design is the Problem (Book) by Nathan Shedroff (site has blog)
Design & Sustainability (PDF) by Jason Pearson (his TruthStudio site has visualizations)

Article: Sustainable Web Design and the Yoke Approach by Yoke
Sustainability is often mistaken as synonymous with "green" or environmentally friendly. Ecological sustainability is not the only consideration, for a product to be truly sustainable it must consider social and economic implications as well as ecological ones. A sustainable website serves its purpose effectively and can be managed and continued into the future without negative impacts to the environment, website users or the owner. Core areas of web sustainability include efficiency, openness and designing for good.

Article: Sustainable Web Design: A Blog Series by Tim Frick

Article: 12 Steps to Sustainable Web Design by InspiredMag

Article: Making the Web a Better Place: Guidelines for "Green" Web Design by Alison Fay Binney, Smashing Magazine







Wednesday, January 16, 2013

Thesis Response 2


Bryan Hill – Understanding Simplicity to Design a Better Tomorrow

Thesis Response 1


Flynn Joffray – Tangible User Interfaces
Flynn discusses the art of learning behavior in relation to user interfaces.

Overall, I enjoyed Flynn's thesis. It was informative and relevant to today's events in web technology. I also found similarities in our chapter reading to Flynn's thesis. There were grammatical errors but not severe enough to distract from the overall theme. While I enjoyed quite a few points of the thesis, most of it was references to other writers and I would have enjoyed hearing Flynn's take on the process and where, or how, he would apply the process. Below are some key points that caught my attention:
  • Really liked the example where he likens the Apple II computer to “form follows function.” The computer was simple in that it had a keyboard, a monitor and a disk drive and that these peripherals were there in order to complete an operation.
  • There are a lot of particular challenges that have gone into making the interfaces we see today, and of course, there are many methodologies that are utilized to execute these interfaces. Some of them concentrate on pure functionality while others concentrate more on humane levels of interaction. An interface is humane if it is responsive to human needs and considerate of human frailties. If you want to create a humane interface, you must have an understanding of the relevant information on how both humans and machines operate.
  • Cognetics: the ergonomics of the mind
  • Cognitive conscious and cognitive unconscious – play a role and are just as important a role as taking into account the size of a human hand when designing a keyboard. Unconscious processes are the processes we use unconsciously, like braking when we come to a stop while driving. A cognitive conscious process is something we have to do out of the ordinary, typically a new situation or learning process. These processes are also referred to as “branching.” Repetition of a cognitive process will make it an unconscious process.
 
 

Unit 1: How People See


Optical Illusions – the brain interprets what we see based on what we know.
2D/3D – Our eyes are hard-wired with sensitive cones that interpret light. We see in 2D and our visual cortex interprets the image into a 3D representation.
Peripheral and central vision – we can identify scenes if the peripheral elements are present and the central focus is blurred. “If you want viewers to concentrate on a certain part of the screen, don’t put animation or blinking elements in their peripheral vision.”
Recognizing Patterns – our brains look for, and recognize, patterns and take in white space as part of a pattern. Designers should use basic shape recognition and patterns in designs, preferably 2D, since this is a faster method for our user’s brain to interpret.
Geon: geometric icons; basic recognizable shapes used to identify objects
FFA: the fusiform face area; allows us to instantly recognize those we know and bypasses the usual channels of interpretation.
Facial Recognition – we prefer to see human faces and are drawn to them as early as newborns. The eyes are the main focus, letting us know if what we’re seeing is “alive.”
Perspective – we draw what we see in our minds. Most people will draw an object with angles and perspective.
Canonical Perspective: when an object is drawn from a “perspective slightly above looking down and offset a little to the right or left.” This is another technique designers can employ, i.e. with icons, to have a user instantly recognize an element.
Focus – user tend to ignore the top portion of a screen because they’ve learned it is less relevant and tend to look at the center of the screen. Therefore, the most important information a designer wants to convey should be at the top third of the screen or site.
Affordances: when an object gives you cues that help you interact with them; action possibilities in the environment. Affordances are helpful tools to a user that helps them interact with information on your page. 
Inattention blindness or change blindness – “when you pay attention to one thing and you don’t expect changes to appear, then you can easily miss changes that occur.” The “Gorilla” video is a prime example of inattention blindness.
Chromo stereopsis – the effect when one color jumps out while another recedes.
Color-blindness – a deficiency to see differences between colors. When using color employ other means of identification as well, for example using line weight and color to distinguish objects.

Tuesday, January 15, 2013

Rough Proposals for Other Projects

HTML5 Canvas and jQuery
Escher: Flash-type website that has moving elements in it, 3D images will move and climb off the paper and move around the site
Mobile Website
Create a web-based platform and adapt it to mobile and tablet devices using jQuery and Mobify http://www.mobify.com/
CSS3 and jQuery
Use CSS3 Transforms enhanced with jQuery to create a timeline with interactive menus
Client: Perot museum; history timeline
Parallax Website
Transition my frog infographic into a parallax website


Project 1 Proposal


Client
First Lady Michelle Obama’s “Let’s Move!” initiative

Objective
To create a 30 second video to promote “Let’s Move!” campaign

Target Audience
School-aged children and their parents

Tone
Upbeat, fun to engage and enliven the audience

Techniques/Software Applications
Cell-frame animation in Photoshop exported to Adobe AfterEffects

Assets
Move Your Body” song by BeyoncĂ©, specifically made for the initiative

Personal Goal
To learn cell-frame animation in Photoshop and use it purposely in product promotion

Thursday, January 10, 2013