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


8

私はデザイナーになりたい開発者なので、ウェブサイトやモバイルアプリなどに一流のUIを作成する方法に本当に興味があります。しかし、PhotoShopや、HTMLとCSS以外のデザインに関連することは何も知りません。

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

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

ありがとう!

回答:


4

UIについては、PhotoshopよりもFireworksを使用することをお勧めします。Photoshopはクリエイティブで複雑なアートワーク(印刷物またはWeb)に最適ですが、私の意見では、Web関連のUIには非常に複雑なツールです。

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

Fireworksは、Photoshopに非常によく似たツールセットを使用しますが、膨らみはありません。そのため、Web UIの作成に必要なすべてのことを実行できます。

FireworksはAdobe Creative Suiteの一部でもあるため、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を作成することです。私が作成したアートワークは、アプリの芸術的価値と機能定義の両方の役割を果たします。私は常に完成したアートワークを中心にロジックを構築し、その逆は決してしません。これは常にユーザーを第一に考えていることを意味します。

これが少なくとも出発点になれば幸いです。


1

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

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

以下は、基本をカバーするチュートリアルですので、物事のスイングを得ることができます:

あなたはその下のすべてを取得したら、私が 見つけ サイトいくつかの本当に革新的なデザインのチュートリアルを持っているGoogleでを。

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

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


ありがとうございました。1つの質問:「光沢のある」とはどういう意味ですか?ありがとう
ドナルド

物事をピカピカに見せる-ボタン、ナビゲーションバー、ヘッダーなどboonage.pjss2.net/2007/04/15/perfect-shine-button-or-icon
Christopher
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.