Prototyperを使ったモックアップ主導のUI設計プロセス
ユーザーインターフェイスを設計するためのワイヤーフレームとモックアップの取捨選択とプロトタイピングに適したモックアップツールを記載しています。 UI設計はUXデザインプロセスの4段階目 アプリやWebサービス、サイトなどを作っていく全体の流れは以下のプロセスを行っています。基本的なUXデザインのプロセス通りですが、コンセプトやアイディアの前に調査（理解）を重視している点と、ワイヤフレームではなくインタラクティブなモックアップを作成している点が多少異なるかもしれません。その他のプロセスにご興味がありましたら詳細は問題解決型UXデザインアプローチを御覧ください。 理解 アイディア ストーリー UI ビジュアルデザイン 開発 フィードバック 今回は上記の中で画面の要素やレイアウトを検討する「UI」フェイズの「モックアップ」に関してを、整理していきながら記載していきたいと思います。このUIフェイズ
Froont – responsive web design tool
Design in the browser Design by modifying hundreds of ready made designs or start from scratch. Prepare your assets in Photoshop or Sketch and move them online right away. All you need is a web browser. Deliver faster Publish responsive pages with your own domain name or export your work to host it yourself. FROONT is great for decision making, prototyping and publishing single page websites. A vi
直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」
WEB以上にUIが重要視される、モバイルアプリ開発。当然情勢も刻一刻と変わっていきスピード感も求められます。今日紹介するのは直感的にスマートにモバイルアプリのUIが作れるモックアップサービス「fluid」。 ブラウザ上で、用意されたパーツを並べていくだけで簡単にUIを設計することができます。非常に直感的に操作できるようになっており、海外のサービスですが、説明やチュートリアル無しで制作していくことができました。 詳しくは以下 予めよく利用するパーツが取り揃えられれていますので、基本設計は用意されているパーツで十分行えると思います。 フリー版では1つのプロジェクトで10スクリーンまで、10MBのアップロード領域まで利用できるそうです。それ以上は、STANDARD、PROFESSIONAL、EXPERTと開発規模に応じて有料プランが用意されています。有料版の利用料金は料金は「Plans & Pr
webデザイン用のUIセットをまとめてダウンロードできる「Free download: Balio Web UI Kit」
TOP > WebService > webデザイン用のUIセットをまとめてダウンロードできる「Free download: Balio Web UI Kit」 webデザインでは、ユーザーがサイト内を遷移しやすいUI制作が重要。そんな中今回紹介するのが、デザイン感の統一されたUIセットをまとめてダウンロードできる「Free download: Balio Web UI Kit」です。 基本的なボタンデザインをはじめ、アプリストアリンクボタン・リボンデザイン・ログインフォーム・ページナビゲーション・グローバルナビゲーション・アンケート投票・ビデオやミュージックプレーヤーなど、webデザインに必要なさまざまなUIがセットになっています。 詳しくは以下 グレーとブルーを基調にしたシンプルなデザインで統一されたUIとなっており、それぞれのカテゴリーの中でもいくつかのデザインを選ぶことがで
Home - Pencil Project
An open-source GUI prototyping tool that's available for ALL platforms. Pencil is built for the purpose of providing a free and open-source GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms. The latest stable version of Pencil is 3.1.1 which contains stability fixes and many new features. More details can be found in the release notes. Proje
Firefox 4 がインストール済みの Windows7上に Pencil を同居させる | @jsakamoto
Firefox 3.5～3.6.x で動作するアドオンという形態になっている。 このため、Firefox 3.x が動作する OS であれば、Windows でも Linux でも MacOS でも動作する。 この手のアプリとしては、Microsoft の SketchFlow ( Expression Blend の一部 ) がある。 SketchFlow はかなり強力で、顧客との対話ツールから、Microsoft Word 形式の仕様書の出力までこなすという。 とはいえ、そこまでゴージャスじゃなくてもいいから、無償で気軽に使いたいときには、私個人としてはいくつかのツールを試用してみたものの、結論としてこの Pencil がイチオシである。 ただし、残念ながら、今日時点の Firefox 最新版、 Firefox 4 上では動作しない 模様だ。 Pencil スタンドアロン版Pencil
Android 2.3.4 GUI PSD (High-Density) | Teehan+Lax
Yes, we <3 Android, too! One of the challenges of an ever-changing digital channel, is that we find ourselves spending more and more time designing for various platforms and form factors. One such platform is Google Android. This doesn’t come as much of a surprise: a survey conducted in June, 2011 found that among consumers who plan on buying a smartphone in the next 3 months, 32 percent prefer an
Made by MartianCraft.
After more than a decade and over 1,000 apps shipped, we know what it takes to ship insanely great software. Our professionals work collaboratively across disciplines to create unequaled software. Our core process focuses on quality, performance, and sustainability. End to End Design & Development Remote Team Augmentation Enterprise Software Solutions We work with our clients through every stage o
iPhoneで画像ベースのモックを動かす·Briefs MOONGIFT
BriefsはiPhone用のオープンソース・ソフトウェア。iPhoneアプリはWebアプリケーションと大きく異なる動作が多い。画面遷移として定義しづらい場面も多く、実際に触れてみないとその動作がどうなるのか分からないのだ。 iPhone用モックアプリビューワー そのためモックアップやワイヤーフレームと呼ばれる類の存在が重要になる。サーバへの接続はなくとも、画面上に何かデータが表示され、それをクリックすると次の画面に変わると言ったのを見られるものだ。そのためのオープンソース・ソフトウェアがBriefsになる。 BriefsはApp Storeで15ドルで販売されているiPhoneアプリだ。全て同じという訳ではなく、オープンソース版は基本的な部分だけを抜き出したものだ。とは言え画面定義を行い、その画像切り替え時のアクション定義などは同じだ。画像を用意し、画面の指定した場所をタップ指定したり、
iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」 | ブロックワークス
iPhone向けモックアップ(UI遷移図)の制作ができる「iPhone Mockup」というサイトを見つけましたのでご紹介します。 どうやらこのページはHTML5＋jQueryで作成されているようです。（もしかしたら一部のブラウザでは上手く動作しないかもしれません。FireFox3.6.9では普通に動作しました。） 操作はとても簡単で、「追加したいパーツをドラッグする」「いらないパーツはゴミ箱へドラッグする」だけです。一部のパーツはダブルクリックで文字を変更することができるようです。 この手のアプリ開発は、大きく分けて UI（動き）のみを考える ソフトの外観（見た目のビジュアル）を作る UIと外観の両方を作る の3パターンの人がいるかとおもいますが、この「iPhone Mockup」では、「1.UI（動き）のみを考える」人に向いているのかな、と感じました。 2.や3.の場合は、例えば「fi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Balsamiq. Rapid, effective and fun wireframing software. | Balsamiq
Ionic: Enterprise App Platform
これが無料とは！ スマートフォン向けサイトやアプリのワイヤーフレームを作成するソフトウェア -Prototyper
新着記事
mockapp.com
はてなブログ | 無料ブログを作成しよう
CoolCoding.com is for sale | HugeDomains