プロトタイプ ギャラリー

プロトタイプ ギャラリー

Indigo Studio Website

Indigo Studio Website

このプロトタイプは Indigo Studio の新しいサイトを構築する際に作成されました。Web サイトがどのように見えるか、また、ユーザーの導線をどのようにするかをデザインしています。

Desktop Weather

Desktop Weather

このプロトタイプは次のインタラクションのショーケースです。1. 有効なオプションを表示するメニュー。2. それぞれの日のタイルを選択することで気温グラフが変動する。3.検索ボックスへの値の入力。ぜひダウンロードし変更してみてください。このプロトタイプは複数のがめんで再利用可能なスクリーン パーツ機能を利用しています。

IFTTT onBoarding

IFTTT onBoarding

このプロトタイプは Tes Mat の記事で作成されているプロトタイプを Indigo Studio でどれくらい実現できるかということで我々が作成しました。

このプロトタイプを作成するにあたり、製品コンセプトをご紹介することに集中するため、意図的に配色をグレースケールし、製品に含まれているアイコンを利用しています。日常のプロトタイプ構築の際には角丸ボタンなどの詳細までは実装しないでしょう。このプロトタイプは約 1 時間で構築することができました.

World Stats

World Stats

このプロトタイプは gapminder コンセプトをベースとしてユーザーの操作に対して複雑なチャートを表示するアプリケーションを表しています。World Stats では GDP と平均余命の相関関係を見て取ることができます。

Sign up Validation

Sign up Validation

会員登録のフローを示すプロトタイプです。このプロトタイプでは情報入力時の検証エラーを表示するように作られています。エラー状態へは入力項目に何も入力せず、sing up ボタンを押すことで遷移することができます。

GetBootstrap

GetBootstrap.com

このプロトタイプは getbootsrap.com のサイト デザインを再現しており、Indigo Studio のレスポンシブ デザイン機能を利用しています。 Bootstrap を利用した 4 つのブレーク ポイントが設定されています。

ブレークポイントは予め 4 つ用意されており選択することが可能です。1. XS (モバイル) 2. SM (タブレット) 3. MD (デスクトップ) 4. L (大画面デスクトップ)

このプロトタイプでは UI が 12 列の構造でできています。
なお、デザインを再利用する場合は getbootstrap.com の著作権情報を参照の上ご利用ください。

Money App

Money App

この UX プロトタイプは経費精算アプリを模しています。いくつかの機能は未実装ですが、次の作業をシミュレートできます。1. 経費の追加/編集/削除。2. カテゴリ別の経費の閲覧。3. 年別の経費のトレンド。

Find the panda!

Find the panda!

このプロトタイプは jp.indigodesigned.com でユーザビリティ テスト テストを実施するためのサンプルとして構築されました。

その他のプロトタイプ

全てのプロトタイプを閲覧