{
"componentChunkName": "component---src-pages-values-overview-mdx",
"path": "/values/overview/",
"result": {"pageContext":{"frontmatter":{"title":"Overview","description":"Animation is a powerful communication tool. It brings our work to life, guides viewers through complicated problems, tells meaningful stories and helps make progress—from here to there, now to next, start to finish."},"relativePagePath":"/values/overview.mdx","titleType":"append","MdxNode":{"id":"b4232696-a4cc-5b81-ad0a-3031b955c42e","children":[],"parent":"1054482f-7b06-5a72-8962-cbf53effa1fc","internal":{"content":"---\ntitle: Overview\ndescription:\n Animation is a powerful communication tool. It brings our work to life, guides\n viewers through complicated problems, tells meaningful stories and helps make\n progress—from here to there, now to next, start to finish.\n---\n\nimport poster from './images/animation-overview-pe-poster.png';\n\n\n\nAnimation is a powerful communication tool. It can bring our work to life, guide\nviewers through complicated problems, tell meaningful stories and help make\nprogress—from here to there, now to next, start to finish.\n\n\n\n\n Approach\n Productive and expressive\n Applications\n\n\n\n\n## Approach\n\nHow we communicate through animation is just as important as _what_ we\ncommunicate. Every element we set in motion is an extension of our voice—it must\nserve a purpose, embody precision and communicate clearly. No matter the format\nor subject matter, these themes are universal when correctly capturing our tone\nand approach to motion.\n\n\n\n\n\n\n\n\n### Effective\n\n\n\n\n\nAnimation at IBM amplifies the meaning inherent in any design. It doesn’t\nobscure or distract. Motion is uniquely effective in its capacity to explain\nideas sequentially and rapidly refocus on what’s important. Endeavor to capture\nattention through action, demonstrate function and process with compelling\nperformances, and break down complex ideas into digestible steps that\nprogressively build toward understanding.\n\n\n\n
\n\n\n\n\n\n### Concise\n\n\n\n\n\nConsider the scope of your story. Define the message and craft your animation to\nbe straightforward and succinct in how it conveys that message. Respect the\nviewer’s time and attention by communicating both promptly and clearly and with\nan expertise that answers questions in advance.\n\n\n\n
\n\n\n\n\n\n### Simple\n\n\n\n\n\nAnimate only what’s vital. Needless flourishes or overcomplicated actions\nwithout clear reason have no place in our animations. The essential elements\nwithin a design should be animated to move with restraint—enough to effectively\ndemonstrate function and purpose while avoiding gratuitous decoration and\noverexaggeration. Often the simplest solution is the most elegant and correct\none.\n\n\n\n
\n\n\n\n\n\n### Engineered\n\n\n\n\n\nAny animation at IBM begins with a clear goal in mind and, much like our\napproach to design itself, should be finely engineered, precise and produced\nwith confidence. This meticulous attention to detail is vital to establishing a\nconsistent attitude and tone of motion in everything we create.\n\n\n\n
\n
\n\n## Productive and expressive\n\nOur approach to animation is guided by two essential types of motion: productive\nand expressive. The distinct impression created by each type offers a clear\nmeans of creating contrast, but also a sense of cooperation—man and machine,\norganic and engineered.\n\n\n\n### Types\n\nProductive and expressive motion each evoke a particular tone that’s\nidentifiably IBM:\n\n– _Productive_ motion leans toward efficiency and\nresponsiveness.
– _Expressive_ motion is enthusiastic and\nvibrant.\n\nWhile there are countless ways to interpret and depict either type, they also\nserve as the foundation of an animation vocabulary, a shorthand to describe how\nan object should move, the feeling it should evoke.\n\nWhile there’s no specific formula for creating motion, it’s the rationale behind\nchoosing to apply each type that’s important. Each type on its own is useful,\nbut they’re greater together.\n\n### Harmony\n\nOur animation is at its best when the conversation between productive and\nexpressive motion is clearly apparent. Each type has an important role to play\nin a piece, and the energy between the two provide a compelling contrast,\nbringing a nuanced personality to each element in motion.\n\nBeyond how each individual element is influenced by either type—or the interplay\nbetween them—every piece of animation can similarly benefit by being weighted\ntoward either productive or expressive motion as a whole.\n\n### Tone\n\nUsing either productive or expressive motion alone will inherently create\ndifferent impressions. For example, productive elements may appear professional,\nconfident, smart and efficient, while expressive elements may evoke more\npersonality and emotion.\n\nThinking in expressive and productive terms opens a broad range of tone. Our\nmotion toolbox can evoke everything from cheerful and lighthearted to forthright\nand reserved while steering clear of the silly or overly dramatic.\n\n## Applications\n\nAnimation can help recognize moments throughout the user interface experience.\nFor example, you might use productive motion to confirm completion of tasks, or\nexpressive motion to mark the beginning of a process. Animation can help guide\nusers through complex experiences, or highlight progress through a process.\n\n### Illustration\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### User interface\n\nOur point of view can be applied to any narrative in every style; from simple to\ncomplex, ambient loop to feature brand film.\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n\n\n
\n","type":"Mdx","contentDigest":"f9cc116ad3bffb21a1f1919984ac43c8","owner":"gatsby-plugin-mdx","counter":418},"frontmatter":{"title":"Overview","description":"Animation is a powerful communication tool. It brings our work to life, guides viewers through complicated problems, tells meaningful stories and helps make progress—from here to there, now to next, start to finish."},"exports":{},"rawBody":"---\ntitle: Overview\ndescription:\n Animation is a powerful communication tool. It brings our work to life, guides\n viewers through complicated problems, tells meaningful stories and helps make\n progress—from here to there, now to next, start to finish.\n---\n\nimport poster from './images/animation-overview-pe-poster.png';\n\n\n\nAnimation is a powerful communication tool. It can bring our work to life, guide\nviewers through complicated problems, tell meaningful stories and help make\nprogress—from here to there, now to next, start to finish.\n\n\n\n\n Approach\n Productive and expressive\n Applications\n\n\n\n\n## Approach\n\nHow we communicate through animation is just as important as _what_ we\ncommunicate. Every element we set in motion is an extension of our voice—it must\nserve a purpose, embody precision and communicate clearly. No matter the format\nor subject matter, these themes are universal when correctly capturing our tone\nand approach to motion.\n\n\n\n\n\n\n\n\n### Effective\n\n\n\n\n\nAnimation at IBM amplifies the meaning inherent in any design. It doesn’t\nobscure or distract. Motion is uniquely effective in its capacity to explain\nideas sequentially and rapidly refocus on what’s important. Endeavor to capture\nattention through action, demonstrate function and process with compelling\nperformances, and break down complex ideas into digestible steps that\nprogressively build toward understanding.\n\n\n\n
\n\n\n\n\n\n### Concise\n\n\n\n\n\nConsider the scope of your story. Define the message and craft your animation to\nbe straightforward and succinct in how it conveys that message. Respect the\nviewer’s time and attention by communicating both promptly and clearly and with\nan expertise that answers questions in advance.\n\n\n\n
\n\n\n\n\n\n### Simple\n\n\n\n\n\nAnimate only what’s vital. Needless flourishes or overcomplicated actions\nwithout clear reason have no place in our animations. The essential elements\nwithin a design should be animated to move with restraint—enough to effectively\ndemonstrate function and purpose while avoiding gratuitous decoration and\noverexaggeration. Often the simplest solution is the most elegant and correct\none.\n\n\n\n
\n\n\n\n\n\n### Engineered\n\n\n\n\n\nAny animation at IBM begins with a clear goal in mind and, much like our\napproach to design itself, should be finely engineered, precise and produced\nwith confidence. This meticulous attention to detail is vital to establishing a\nconsistent attitude and tone of motion in everything we create.\n\n\n\n
\n
\n\n## Productive and expressive\n\nOur approach to animation is guided by two essential types of motion: productive\nand expressive. The distinct impression created by each type offers a clear\nmeans of creating contrast, but also a sense of cooperation—man and machine,\norganic and engineered.\n\n\n\n### Types\n\nProductive and expressive motion each evoke a particular tone that’s\nidentifiably IBM:\n\n– _Productive_ motion leans toward efficiency and\nresponsiveness.
– _Expressive_ motion is enthusiastic and\nvibrant.\n\nWhile there are countless ways to interpret and depict either type, they also\nserve as the foundation of an animation vocabulary, a shorthand to describe how\nan object should move, the feeling it should evoke.\n\nWhile there’s no specific formula for creating motion, it’s the rationale behind\nchoosing to apply each type that’s important. Each type on its own is useful,\nbut they’re greater together.\n\n### Harmony\n\nOur animation is at its best when the conversation between productive and\nexpressive motion is clearly apparent. Each type has an important role to play\nin a piece, and the energy between the two provide a compelling contrast,\nbringing a nuanced personality to each element in motion.\n\nBeyond how each individual element is influenced by either type—or the interplay\nbetween them—every piece of animation can similarly benefit by being weighted\ntoward either productive or expressive motion as a whole.\n\n### Tone\n\nUsing either productive or expressive motion alone will inherently create\ndifferent impressions. For example, productive elements may appear professional,\nconfident, smart and efficient, while expressive elements may evoke more\npersonality and emotion.\n\nThinking in expressive and productive terms opens a broad range of tone. Our\nmotion toolbox can evoke everything from cheerful and lighthearted to forthright\nand reserved while steering clear of the silly or overly dramatic.\n\n## Applications\n\nAnimation can help recognize moments throughout the user interface experience.\nFor example, you might use productive motion to confirm completion of tasks, or\nexpressive motion to mark the beginning of a process. Animation can help guide\nusers through complex experiences, or highlight progress through a process.\n\n### Illustration\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n\n\n\n \n\n\n\n \n\n\n \n\n\n\n \n\n
\n\n### User interface\n\nOur point of view can be applied to any narrative in every style; from simple to\ncomplex, ambient loop to feature brand film.\n\n\n\n\n\n\n\n\n\n
\n\n\n\n \n\n\n\n\n\n
\n","fileAbsolutePath":"/opt/build/repo/src/pages/values/overview.mdx"}}},
"staticQueryHashes": ["1364590287","137577622","2102389209","2456312558","2746626797","2881613939","3037994772","768070550"]}