web-dev-qa-db-ja.com

PhotoShopなどで優れたインターフェイスを作成する方法

デザイナーになりたいデベロッパーである私は、ウェブサイトやモバイルアプリなどで最高のUIを作成する方法を学びたいと思っています。

どこから始めればいいですか?美しいデザインのWebサイトとインターフェイスを作成する方法を学ぶにはどうすればよいですか?

お勧めの本、チュートリアルなどはありますか?

ありがとう!

8
donald

UIについては、PhotoshopではなくFireworksを使用することをお勧めします。 Photoshopは、創造的で複雑なアートワーク(印刷またはWeb)には最適ですが、私の意見では、Web関連のUIには非常に複雑なツールです。

Fireworksは、PhotoshopではないWeb指向のオーサリングツールとして特別に設計されています。 Fireworksのツールセットは、Photoshopが提供する複雑なクリエイティブな作業ではなく、Web UIの構築を対象としています。

FireworksはPhotoshopと非常によく似たツールセットを使用しますが、肥大化は排除されているため、Web UIを作成するために必要なすべてを実行できます。

FireworksはAdobe Creative Suiteの一部でもあるため、Photoshopをお持ちの場合は、Photoshopも必要です。

Fireworksに固有ではなく、一般的なUIの参考資料。

http://www.jankoatwarpspeed.com/

彼の記事を読んで、彼の作品を見てインスピレーションを得ることを強くお勧めします。彼が非常によくカバーしているUIには2つの側面があります。それは、インターフェースとインターフェースの使用経験です。 UIおよびUXとも呼ばれます。

アプリケーションの使用方法の学習は、オンラインのチュートリアルで見つけることができます。 Envatoには素晴らしいチュートリアルネットワークがあります http://tutsplus.com/ 、WebのメインチュートリアルサイトはPhotoshop指向であるが、Photoshopで行うほとんどのことは同じ、または同様の方法で行われます。 、Fireworksで。

また、独自のデザイン特性や、将来のシナリオでプロジェクトに適したUI要素を持つサイトをブックマークすることもよくあります。たとえば、一意のタブ構造、アコーディオンスタイル、またはページャーです。

基本レベルのデザインUIは、データ表示の領域に分類されます。開発者のバックグラウンドがあるため、ロジックの観点からデータを表示する方法を知っています(メニュー、アコーディオン、タブなど)。今では、これらのコントロールまたはモジュールを使用して視覚的な観点からUIを構築しているだけです。

UXに関するいくつかの追加の読み物:

http://uxmovement.com/

開発者のバックグラウンドもあるので、アプリを作成するときの最初のステップは、アプリの機能を定義するUIを作成することです。私が作成したアートワークは、アプリの芸術的価値だけでなく、機能定義でもあります。私は常に完成したアートワークを中心にロジックを構築します。これは、常にユーザーを最初に置くことを意味します。

これが少なくとも出発点になることを願っています。

4

あなたは幸運です。多くの人がWebデザインの世界にやって来て、同じ質問をしています。多くの場合、少なくとも1人のコーダーと1人のグラフィックデザイナーで構成される人々のチームが表示されます。 Photoshopでの良い選択-それが私が固執していることです。

Adobe Photoshopの最新バージョンであるCS5により、非常に高度になりました-単純なツールで複雑なタスクを実行したり、複雑なツールでさらに複雑なタスクを実行したりできます。ただし、Photoshopの優れた機能をすべて学習すると、栄養素が不足する可能性があります。 :)

こちら は、基本をカバーするチュートリアルです。

すべてを取得したら、 Ifoundabunch of sites = Googleで、いくつかの本当に革新的なデザインチュートリアルがあります。

あなたが学ぶ必要があるかもしれないいくつかのテクニックがあります。先端、光沢は通常、最近の良いステップです。真にユニークなデザインを得るには、任意のWebサイトテンプレートから好きな機能を見つけて、独自の方法で使用します。

それがお役に立てば幸いです。さらに情報が必要な場合はコメントを残してください。

1
Christopher