モーションデザインはUIの未来 | POSTD
最近、「モーションデザイン」という言葉がデザイン業界で急に出てきていることに気づいていますか？大小様々な企業が、これに特化した肩書きを持つデザイナーたちを雇いはじめています。最近ではGoogleが I/Oカンファレンス で、Googleの製品で統一化されているモーションランゲージの概要について話していました。 この騒ぎは何でしょうか？そして何の意味があるのでしょうか？ モーションはストーリーを語ります。 アプリにおける全ての物事は連鎖になっていて、モーションはあなたのガイドになります。ボタンをクリックして、画面が変わる度に、そこにはストーリーがついてきます。例えば、アイテムを作ったり削除する時、アニメーションがどのように役に立つかを見ていきましょう。 アイテムを消すことは劇的で破壊的な作業ですので、適切に反応するようにしましょう。アイテムをただ画面から消すだけということはしないようにしまし
Creating Animations and Interactions with Physical Models
Physics-based animations and interactions are becoming more common in UI. This page goes through some basic physical models and the kinds of interactions and animations that can be constructed from them. Scrolling on iOS is an excellent example of a physics-based interaction. When you drag your finger across the screen, the content tracks along with it, thereby scrolling, but when you lift your fi
The shape of materials to come • Endava
After the presentation of Material design this year, we couldn`t wait to see the new guidelines from Google. Animations became essential for screen designers, and Google gave us a preview where this trend is going to. At Five, our design team always tries to illustrate interactions to developers and clients. It helps us with testing and visualizing the final layout. In the near future, the advance
Animated SVG Icons with Snap.svg | Codrops
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using
Rippler · Effect that spreads like a wave in touch or click.
You can also use the buttons on the bootstrap. rippler-inverse rippler-default rippler-inverse rippler-default rippler-inverse rippler-default <a class="btn btn-default rippler rippler-inverse" href="#">rippler-inverse</a> <button class="btn btn-primary rippler rippler-default">rippler-default</button> <a class="btn btn-success rippler rippler-inverse" href="#">rippler-inverse</a> <a class="btn bt
How To Add Page Transitions with CSS and smoothState.js | CSS-Tricks
CSS animations (and a little JavaScript trickery) can let us add page transitions and move away from the hard-cut of page loads. My jQuery plugin smoothState.js helps polish those transitions and improve UI response times. Page transitions benefit the user experience Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating
Presenting: Fluidbox
Author’s note: the most recent version, 1.3, is published on January 4th, 2014. I love writing on Medium. The typography is nothing short of fantastic. The editor is simple, minimalist and distraction-free. The handling of images is perfectly done. The last point has especially piqued my interest. I adore the smooth transition offered by Medium’s lightbox module — no disruptive modal window, and o
アニメーションで問題を解決！サイトをより分かりやすくする為のアニメーションの使いどころ。
こんにちはMUUUUU.ORGの中の人こと、Quoitworksのムラマツです。 アニメーションをとりいれるとwebサイトが華やかになりイイ感じに見えますが、 サイトを分かりやすくする、目的を達成するために上手に使えていますでしょうか。 今回はオライリーから出ている「インタフェースデザインの実践教室 ―優れたユーザビリティを実現するアイデアとテクニック」を参考に（心理学とは別の兄弟本みたいなやつです） UIの領域での”問題を解決する為にどうやってアニメーションを取りいれるか”をまとめていこうと思います。（アニメーションによってデザインの力を増幅させる効果に関しては今回は置いておいてください） そもそもなんでwebサイトにアニメーションを入れる必要があるのか 小さな変化や、大きな変化に隠れて見逃されてしまいかねない変化に、ユーザーの目を向けさせるときに利用します 激しい状態の変化を把握しやす
Improve the payment experience with animations
It’s easy to see how designing forms can be seen as a chore that detracts from the time that could be spent on more exciting parts. Yet, if you think about it, the payment form is part of the checkout flow, the point at which a user is on the verge of committing to trusting you and your business with their vote of confidence. This experience should really be as great as possible, and using animati
On Scroll Header Effects with CSS Transitions
At the present time, eminent breeders try by methodical selection, with a distinct object in view, to make a new strain or sub-breed, superior to anything of the kind in the country. But, for our purpose, a form of selection, which may be called unconscious, and which results from every one trying to possess and breed from the best individual animals, is more important. Thus, a man who intends kee
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://impulse.luster.io/