ウェブデザインにおける咾の處竃について - WCAN 2014 Autumn
?
9 likes?3,211 views
WCAN 2014 Autumnでk燕した仝ウェブデザインにおける咾の處竃について々のスライド
ウェブデザインにおける咾の處竃について - WCAN 2014 Autumn
- 2. 表弥謡伏@yokozunat 嗤淹疉腑▲奪廛襯奪廛 デザイナ` dotgraphy.com
- 3. n} CSS、JS で咾のg廾が箔められる チ`ム坪でのイメ`ジの慌嗤
- 5. 3 つのポイント UI アニメ`ション インタラクション 擦┠修肇謄好 POINT 1 POINT 2 POINT 3
- 7. UI アニメ`ションを鹿めたサイトPOINT 1 UI アニメ`ション Hover States / The best new & interesting interaction design Use Your Interface http://hoverstat.es/ http://useyourinterface.com/
- 8. UI アニメ`ションの朕議POINT 1 UI アニメ`ション Sしさを擦┐ 篁を擦┐ 1 3 卞咾擦┐ 醜泣をgる 2 4
- 9. 1 Sしさを擦┐
- 10. 1 Sしさを擦┐ Apple - iPhone 6 https://www.apple.com/jp/iphone-6/
- 11. 1 Sしさを擦┐ VOTD.tv - Recognising a talented industry. http://votd.tv/
- 12. 2 卞咾擦┐
- 13. 2 卞咾擦┐ Soleil Noir ? Dream on http://www.soleilnoir.net/dreamon/#/findlost
- 14. 2 卞咾擦┐ Medium https://medium.com/
- 15. 3 篁を擦┐
- 16. 3 篁を擦┐ Kern Type, the kerning game http://type.method.ac/
- 17. 3 篁を擦┐ Huge. Digital agency. http://www.hugeinc.com/
- 18. 4 醜泣をgる
- 19. 4 醜泣をgる ANYI LU | Pre-Fall Available Now http://anyilu.com/
- 20. 4 醜泣をgる Plural App - News Reader, Social Browser & Media Center http://pluralapp.com/#/home
- 21. 伏き伏きとした咾をつけるために UI アニメ`ション ハロルド?ウィテ`カ`, ジョン?ハラス アニメ`ションのタイミング室隈 1983/03 POINT 1
- 22. POINT 1 オ`バ`ラップアクション UI アニメ`ション アニメ`ションのタイミング室隈 P60 歌孚 溌の悶が枠に咾串としっぽが瘁からついてくる
- 23. POINT 1 タイミングのA夛 UI アニメ`ション
- 24. POINT 1 UI アニメ`ション UI アニメ`ションまとめ 處竃のストックをやそう 徭隼順の咾を尖盾しよう
- 25. POINT 2 インタラクション
- 26. POINT 2 u瞳の恷弌g了のインタラクション インタラクション Dan Saffer 2014/03 マイクロインタラクション
- 27. POINT 2 マイクロインタラクションの夛 インタラクション トリガ` ex. ボタンが兀されたr ル`ル フィ`ドバック ル`プとモ`ド ex. 秘薦坪否がg`っていたので ex. エラ`メッセ`ジを燕幣する ex.３指エラ`だったらログインできなくする 1 2 3 4 咾の處竃
- 28. POINT 2 フィ`ドバックの叨護 インタラクション フィ`ドバックは´ ル`ルを尖盾してもらうため
- 29. POINT 2 インタラクション Gumroad https://gumroad.com/
- 30. POINT 2 インタラクション Ecommerce Software, Online Store Builder, POS - Free 14-day Trial by Shopify http://www.shopify.com/
- 31. POINT 2 インタラクションrのアニメ`ションの森 インタラクション 旋喘宀は恬Iをしているときは順が倭くなる 咾をつけることによって廣吭を陥すことができる ただし´ アニメ`ションが謹すぎるとストレスを湖じる
- 32. POINT 2 インタラクションまとめ インタラクション フィ`ドバックはル`ルを尖盾 してもらうためのもの 咾をつけると廣吭を陥せるが 聞いすぎるとストレスに
- 33. POINT 3 擦┠修肇謄好
- 34. プロトタイピングのNPOINT 3 擦┠修肇謄好 返宙きのスケッチ Adobe After Effects を聞う Google Web Designer を聞う gHにコ`ドをく 1 2 3 4
- 35. 返宙きのスケッチPOINT 3 擦┠修肇謄好 み スピ`ディ` 樋み 咾が屎_には擦錣蕕覆 クライアントに擦┐砲い
- 36. Adobe After Effects POINT 3 擦┠修肇謄好 み イメ`ジしている屎_な咾 樋み コ`ドに崔きQえづらい
- 37. Google Web Designer POINT 3 擦┠修肇謄好
- 39. Google Web Designer POINT 3 擦┠修肇謄好 み HTML、CSS、JS で恬られてい るためパラメ`タ`などをそのま ま送喘できる
- 40. gHにコ`ドをくPOINT 3 擦┠修肇謄好 み コ`ドをそのまま聞える 樋み rgがかかる
- 42. プロセスPOINT 3 擦┠修肇謄好 仟繁デザイナ`とベテランデザイナ`の Julie Zhuo Junior / Designers vs. Senior Designers ? The Year of the Looking Glass ? Medium https://medium.com/the-year-of-the-looking-glass/junior-designers-vs-senior-designers-fbe483d3b51e
- 43. デザイナ`もバ`ジョン砿尖を聞おう擦┠修肇謄好 GitHub Backlog POINT 3
- 44. テスト、テスト、テストPOINT 3 擦┠修肇謄好 テストをRり卦して張き貧げる
- 45. 擦┠修肇謄好箸泙箸POINT 3 擦┠修肇謄好 壼めにアウトプットし、 玉いスパンでテストをRり卦す 壼くイメ`ジを慌嗤できるように、 ツ`ルをうまく聞う
- 46. 云晩のまとめ UI アニメ`ションの咾の冩梢をしよう 咾のあるインタクラクションの朕議を深えよう テストをRり卦して張き貧げよう 1 2 3
- 47. 歌深にしたY創POINT 3 擦┠修肇謄好 Design in Motion. The new frontier of Interaction Design // Speaker Deck https://speakerdeck.com/myinteraction/design-in-motion-the-new-frontier-of-interaction-design Web Design / Motion Design // Speaker Deck https://speakerdeck.com/valhead/motion-design インタフェ`スデザインのg樹縮片DDれたユ`ザビリティをgFするアイデアとテクニック http://www.oreilly.co.jp/books/9784873116082/ Animations ? Web Fundamentals https://developers.google.com/web/fundamentals/look-and-feel/animations/ iOS ヒュ`マンインタ`フェイスガイドライン: アニメ`ション https://developer.apple.com/jp/devcenter/ios/library/documentation/userexperience/conceptual/mobileh ig/Animation/Animation.html#//apple_ref/doc/uid/TP40006556-CH57-SW1
- 48. Thanks