web-dev-qa-db-ja.com

美しいユーザーインターフェイスデザインの作成

私は通常、アプリケーション/ウェブサイト(特にウェブサイト)に適したUIを設計するのに苦労しています。

これにトリックはありますか?私を助けて/導くことができる良い本はありますか?またはライブラリなど。これを支援できるNetAdvantageまたはテンプレートの作成者ですか?

Web開発の場合、レイアウトの開発に使用できるMicrosoft Expression Blendのような本当に優れたUIデザインツールはありますか?

1
Chibueze Opata

トリック?あんまり。他の手工芸品と同様に、これも平均以上の製品を提供するために必要な視覚的、相互作用的、およびユーザーエクスペリエンスのデザインスキルを習得するために、時間、集中力、およびハードワークを必要とします。

とはいえ、これらはいくつかの優れた読み取りであり、1つ目は理論に焦点を当てた(入門を読む必要がある)、2つ目ははるかに実用的な焦点が当てられた。一緒に彼らはあなたに良いキックスタートを与えるでしょう!

Jesse James Garrettによるユーザーエクスペリエンスの要素
スマッシングブック#2

頑張って楽しんでね!

4
davidvb

秘訣は分析、テスト、そして経験です。設計は何よりも有益でアクセスしやすく、(これは重要です)製品の目的に関連している必要があります。デザインを配置する前に、ユーザビリティテストを実行して問題を特定できます。最後に、試してください。手作業で小さな1ページのモックアップを作成するか、適切なワークフローに慣れるために試してみたいツールを使用します。

ビジュアルレイアウトを開始してフロントエンドをコーディングする前に、ワイヤーフレームを作成することを強くお勧めします。手でワイヤーフレームを作成することは珍しいことではありませんが、ソフトウェアに関しては、基本的な幾何学的形状を描画できるツールであれば何でも実行できます。

Webサイトを構築するために、上記を行った後、私は個人的に手作業でコーディングするのが好きです。おそらく HTML5 Boilerplate のようなフレームワークのボイラープレートを使用します。

2

本当に近道はありません。他の人が述べたように、それは経験とともに来ます。私が始めたことの1つは、Evernoteを使用して、私が特に興味を持っているWebサイトをクリップすることです。それは私が参照できるような種類のパターンライブラリになっています。 非デザイナーズデザインブック も参考になりました。

1
superduperfly

いくつかのコーナーを切るためのヒントを求めているなら、あなたは本当にできない、私見。完全な設計スペクトルを確認する必要があります。

しかし、ここを見てみてください、私はそれが役立つと思うはずです: http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/

ツールに関しては、ワイヤーフレームは任意のツールを使用して(私はイラストレーターが好きですが、それはすでに私の手に持っているためです)紙から始めます。実際のデザインはフォトショップにこだわります。特に次期バージョンのCS6は素晴らしいものになるでしょう。ドキュメント全体のテキストスタイリング(CSSを考える)とレイヤー検索/フィルタリングが含まれます。