ワイヤーフレーム制作の５つのアプローチ - everything might happen tomorrow - yhassy - builder by ZDNet Japan
ワイヤーフレームを作るときに、とりあえず「どのソフト・道具を使って作ろうか」という考えが先に来てしまいますが、どのようなワイヤーフレームを作るのかのほうが重要です。情報をどれだけ見せるのか、何を表現したいかによってワイヤーフレームの見せ方が異なります。つまり、サイトの属性や目的に応じてワイヤーフレームの作り方を調整するとより効果的になります。また、予算や時間に合わせてワイヤーフレームを作成する目安にもなり、制作チームやクライアントとの情報共有がしやすくなる可能性があります。 ワイヤーフレーム制作は、主に５つのアプローチが考えられます。それぞれメリット・デメリットがあり、得意分野も異なります。複数を組み合わせたり、アレンジすることで目的にあったワイヤーフレームを作ることが可能になるでしょう。 コンテンツブロック型 内容や記載せず、おおまかなブロックで枠組みするワイヤーフレーム。サイト制作の早
10のアプリケーションロールパターン ― ＠IT
インタラクションデザインパターン（2） アプリケーションロールデザイン、 基礎の10パターン ソシオメディア 上野 学 2007/3/19 前回の「80年代のAppleに学ぶUIの部品化とガイドライン」では、インタラクションデザインの作業にパターンを活用することの有用性について説明しましたが、今回からは、実際にどのようなデザインパターンがあるのかを考えていきたいと思います。 私はこれまでの連載（ユーザビリティのヒント、Webアプリケーションのユーザーインターフェイス）を通して、インタラクションやユーザーインターフェイスのデザインはプログラムが出来上がってしまってから最後に付け加えるというものではなく、システムの基本的な品質を決定する重要な要素として設計の初期段階から考えなければならないものであると主張してきました。なぜなら、そのシステムが提供しようとしている機能を、画面の見た目や操作の流れ
ペーパープロトタイピング事例集 | 秋元@サイボウズラボ・プログラマー・ブログ
実際に動的なウェブサイトを作ってしまう前に、紙上でデザインや部品の配置、画面遷移などを確認するペーパープロトタイピングという設計技法があります。書籍もありますね。 ペーパープロトタイピング 最適なユーザインタフェースを効率よくデザインする そのペーパープロトタイピングの事例を集めたページというのがありました。たとえば次のこれは、2000年5月31日にスケッチされたtwitterのプロトタイプです。当時はstat.usという仮名で、これによるとtwitterはLiveJounal(ブログサービス)とAIM(インスタントメッセンジャー)から最初の着想を得てから実装まで5年以上の間があったことになりますね。 FlickrのPlacesページやVimeoなどのペーパープロトタイプの写真も紹介されています。 こちらは韓国のポータルサイトDaumのAjaxウェブメール開発時に行なわれた、ペーパープロト
その情報、後から見られますか？【ユーザビリティTips】
『MarkeZine』が主催するマーケティング・イベント『MarkeZine Day』『MarkeZine Academy』『MarkeZine プレミアムセミナー』の 最新情報をはじめ、様々なイベント情報をまとめてご紹介します。 MarkeZine Day
Interaction Design Pattern Library - Welie.com
Pattern library All patterns are listed here. It's quite a bunch of them, but I have tried to group them meaningfully. User needs Patterns that meet a direct need of the user. Navigating around· Accordion · Headerless Menu · Breadcrumbs · Directory Navigation · Doormat Navigation · Double Tab Navigation · Faceted Navigation · Fly-out Menu · Home Link · Icon Menu · Main Navigation · Map Navigator ·
blink design library
By default, Kayak.com shows you results from all airlines. If you want to see results from a single airline, the "only" link de-selects all others in a single click: All Selected One selected The results automatically update as you select/de-select from the options, which gives the interface a very responsive feel. Grouping like items together is a way to make scanning a list of items easier. For
視点を分けて業務システムを可視化
間違った業務システムを効率的に開発しても、そのシステムへの投資は無駄になってしまいます。無駄な投資を抑えるためには、業務から論理的にシステム要求を導かなければなりません。 そのためには、業務を可視化すること、すなわち、モデリングが必要です。業務を可視化する手立てと進め方があれば、現場のコミュニケーションが活性化し、使われる、使えるシステムを開発できるようになります（図1）。 モデリング技能を磨くためには、実際に自分で手を動かしてモデルを作成することが必要です。そのため、この連載では架空の会社を取り上げ、一連のシナリオに沿った演習問題の形式で、具体的にモデリングを解説していきます。 モデリングでは着目する視点が重要 モデリングでは、着目する視点を考えることが重要です。なぜなら、業務システムは複雑で、複雑な物事を複雑なまま扱うことは困難だからです。ですから、着目する視点を分けて単純化し、理解し
ITPro: 基本設計におけるレビューの勘どころ
どんなに基本設計をしっかりやっても，その後のフェーズで「欠陥」が見つかれば意味がない。欠陥が発見されれば手戻りが発生し，進ちょく遅れや収益悪化といったプロジェクトの混乱を招く。基本設計フェーズにおける品質向上のプロセスや成果物のレビュー方法について解説しよう。 「考慮していない外部システムとの連携が詳細設計で見つかった」，「仕様間の不整合が実装フェーズで発見された」――。どんなに基本設計をしっかりやっても，その後のフェーズで「欠陥」が見つかれば意味がない。欠陥が発見されれば手戻りが発生し，進ちょく遅れや収益悪化といったプロジェクトの混乱を招く。基本設計フェーズにおける品質向上のプロセスや成果物のレビュー方法について解説しよう。 「欠陥防止」を徹底する 改めて言うまでもないが，基本設計の成果物の品質を向上させるプロセスは，(1)設計作業を実施する，(2)成果物をレビューして欠陥を洗い出す，(
- JUDEで体感UML設計ツール
UMLは、手書きすることもありますが、ここではツールを使います。 UMLを描くのになぜツールを利用するのでしょうか？主なメリットを挙げてみます。 きれいな図がかける 自動的にサイズなど調整してくれる 他人とUMLを交換・共有しやすい Undo/Redoで試行錯誤しやすい 誤った図をかくと注意される 図だけでなく、ツリーや表上でデータを編集できる データを再利用、2次利用できる データ間の関連を管理できる 初心者にとってのツールを考えてみると、4, 5が特に意味があると思います。 例えば、間違ったらいつでも簡単にやり直せますし、パッケージからクラスに関連を描こうとすると、 ツールは「そのような関連はかけません」と教えてくれます。また、クラスを抽象クラスに設定すれば、 自動的にクラス名が斜体になります。その他にも、各要素の形と名前の対応関係をツール上で常に確認できます。 ツールにUMLを教わる
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Design Stencils - Yahoo! Design Pattern Library
ウェブの画面設計に使えるまとめ - DesignWalker