Framer: A Free Prototyping Tool for Teams
High-fidelity interactive design, minus the code.So how does it work? Import from any of your favorite UI design tools or start from scratch in Framer. Simply right-click to swap out static elements and replace them with interactive components. Try it out now Motion that works like magic.Ready to design your first animation? Drag and drop with Magic Motion to create an immersive prototype. Just us
Framer - スマホアプリ用プロトタイプ作成ツールキット - モバイル/タブレット向けオープンソース紹介 - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル
スマホアプリ開発で大事なのは何と言ってもUI/UXですよね。デザインを作り、それを実際に動かして検証して改善を行う。それを何度も何度も繰り返してはじめて優れたUXが生まれるものです。 そのためにはいちいち作って確認するのではなく、プロトタイプを作成してスクラップ&ビルドを繰り返さないといけないでしょう。そのためのツールキットがFramerです。 Framerの使い方 FramerではHTMLは殆ど手をつけず、JavaScriptでUIを実装していきます。その意味ではよりプログラマー向けのツールと言えるかも知れません。 例えば同梱されているサンプルアプリケーションのコードは次のようになっています。 imageLayer = new Layer({x:0, y:0, width:128, height:128, image:"images/icon.png"}) imageLayer.cent
UIデザインのアニメーションまで共有できるモック作成ツールまとめ | Goodpatch Blog
先日、Goodpatch代表の土屋がWebSig会議というイベントで講演をしました。講演は「ハートに響くUIを生み出すためのデザインプロセス」というタイトルで行われ、起業までのストーリー、GoodpatchのUI設計プロセスなどについて話しました。講演内容は↓のslideshareを参照してください。 その講演の中でGoodpatchはデザインする際にプロトタイプを作成していると話しました。以前にMEMOPATCHでもインタラクションや導線の動きを伝える上でプロトタイプ作成が重要という趣旨の記事をアップしています。 （参考: これからのUIデザインのために、デザインカンプをやめてプロトタイプを作ろう（前編）, （後編）） プロトタイプ作成というとHTML, CSS, JavaScriptで実装する方法がメジャーかと思いますが、これだとリソースをかなり割くことになってしまいます。そこで今回は
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
