web-dev-qa-db-ja.com

開発者のUIデザインスキルの一般的な欠如を克服する

私は多くの開発者がUIデザインが得意ではない(私はこれがどれほど本当かわからない)と言われ、自分にも気づきましたが、少なくとも私については本当ですです。

Web開発では、優れたコード開発スキルは、UIデザインの優れたスキルなしには十分ではありません。

ですから、私、そして私のような多くの開発者にとって、半分(十分な開発スキル)しかない開発者は、デザイナーに支払う以外に、残りの半分をどのように完了する必要がありますか?

少し変更を加えたオープンソースWebテンプレートを使用することがこれに対する最良の解決策ですか、それとも他のオプションがありますか?

17
Ali

私はデザインもあまり得意ではない開発者です。できるだけシンプルにするために、設計が必要なプロジェクトに取り組むときは、一生懸命努力します。私は非常に論理的なアプローチを採用し、ユーザーエクスペリエンスのみを考慮して設計しています。本当に美しく見せることはできませんが、ユーザーフレンドリーで見た目も比較的楽しいものにすることができます。

私はこれらの本のいくつかを読みました: http://www.uxbydesign.org/2009/06/24/20-user-experience-books-you-should-own/ そして彼らは本当に助けました私を出します。

編集する そのリストでの私のお気に入りは、Do n’t Make Me Think:A Common Sense Approach to Web Usability、2nd Edition by Steve Krug

11
Sydenam

デザインは(何でも)さまざまな利害関係者(顧客、開発者、ユーザー)のニーズ間の交渉です。利害関係者は、自分のニーズを最もよく理解し、他の利害関係者のニーズよりも上に置く傾向があるため、通常、最良の設計を作成するのに適した立場にありません。優れた設計者は、さまざまな利害関係者のニーズ(多くの場合、利害関係者自身が自分が持っていることに気づいていないニーズ)を特定し、すべての人に役立つソリューションを考え出すことができます。

あなたはおそらくこれを何度も自分で見たことがあるでしょう。ユーザーは、システムと対話する方法を、通常は既に慣れている他のシステムに関して考えます。開発者は主にシステムがどのように機能するかという点で考えます。顧客は通常、すべての問題を解決するものを必要とするか、または非常に特定の問題を最小限のコストで解決したいと考えています。

優れたデザイナーになるには、何かを実装する前に考えることをやめることを学ぶ必要があります。代わりに、他の利害関係者が何を必要として何を望んでいるかについてあなたが何を言っているかに焦点を当てる必要があり、行の間を読むことができる必要があります。開発者と同様に、顧客とユーザーは多くの場合、事前に想定されたソリューションを念頭に置いており、根本的な要件ではなくそのソリューションについて説明する傾向があります。 (とはいえ、顧客は、彼らが望んでいることを正確に伝えたときに、彼らが言うことを意味することがあることを理解することが重要です。わからない場合は、尋ねてください。)

さらに表面的には、UIの美的デザインも一部の開発者が問題を抱えているものです。それは、ソフトウェア開発者が美学のトレーニングをあまり受けないことが多いためだと思います-CSの学生は芸術の授業にあまり時間がないかもしれません。また、見た目よりも何かがどのように機能するかに関心があるため、これもまた一部です。ボタンの角の半径が9ピクセルか10ピクセルかは関係ありません。これら二つの要素は確かに関連しています。 UIフレームワークの形式の缶詰ソリューションに依存することでこれを克服できる場合があります。事前に設計されたコンポーネントを使用すると、同じシステム上の他のアプリケーションと自分の作業を視覚的に統合できるという利点があります。他の人の作品を読んだり、見たり、過去に無視したかもしれない視覚的な詳細に細心の注意を払ったりすることで、美的スキルを向上させることができます。また、視覚的な違いの背後にある論理を理解するように努める必要があります。角の丸いボタンは、丸いボタンとは異なる意味ですか?色の使い方は?等.

5
Caleb

ここに私が私を助けるいくつかの事柄があります:

  • 他のソフトウェアで好きな点/気に入らない点をメモしてください。私たちはプログラマーであり、人生の大部分をコンピューターで過ごしています。ソフトウェアを使用するときに好きなもの/嫌いなものをメモしてください。それがコンピュータソフトウェア、ビデオゲーム、モバイルデバイスなどであるかどうかは関係ありません。何が便利で使いやすいか、何がそうでないかを注意深く見守ってください。

  • あなたとあなたのユーザーのためにUIをスケッチするための使いやすいスケッチツールを見つけてください。私は Balsamiq を使用するのが大好きです。高速でシンプル、そしてWebバージョンは無料で使用できるからです。

  • あなたが何かを設計するのを助けるためにソフトウェア設計を専門とする誰かを見つける必要はないことを覚えておいてください-どのユーザーもそうします。私は、プロジェクトにまったく関係のない人たちがスケッチを実行することがよくあります。なぜなら、彼らが1日中ソフトウェアを使用していて、問題がないように見えたり、ユーザーフレンドリーかどうかを教えてくれるからです。それらが何をすべきかについてあなたにクレイジーなアイデアを与えることがしばしばあることを覚えておいてください、そしてあなたは何をするのが単に「クール」であり、何が実際に生産性を改善するのかを知る必要があります。

  • 詳細な質問については https://ux.stackexchange.com/ でお気軽に質問してください

3
Rachel

正直に言うと、UIのデザインはすべて異なるものです。開発者は常に微妙なデザインを考え、デザインに関してはあまり創造的ではありません。私が感じる明確なアプローチは、UIデザインの別の開発者を維持することです。それはコストを追加しますが、間違いなくあなたがより良い結果を達成するのに役立ちます。

自分で両方を行う人にとっては、決して最高の結果が得られることはありません。したがって、これら2つの異なる側面を2つの異なる開発者に割り当てる必要があります。異なるCMSの場合は、スキニングとテーマ開発のためのHTMLとCSSの知識が少し必要ですが、まったく新しいデザインを開発する必要がある場合は、UIデザイナーに相談してください。

2
Pankaj Upadhyay

enter image description here

Joel Spolskyの本 プログラマーのためのユーザーインターフェースデザイン をお勧めします。この本では、彼はあなたが探しているアプローチをかなり取り入れています:プログラマーにとってUIデザインが重要である理由の説明オンライン関連の資料の場合:

自分の生活をより良くするためのデザイン

2

UIデザインは多くの人にとって自然なものではありません。しかし、私は最近、いくつかの簡単な原則に従うことで、はるかに上手になりました。

  1. おびえないでください、あなたが思うほど難しくはありません。

  2. 最初にデータ構造とエンジンをモデル化します。実世界に対応する明確なモデルを作成します。明らかに、これはあなたが時間をかけて顧客が何を必要としているのかを理解していることを前提としています。

  3. 今、紙と鉛筆で、座って、画面の論理的なレイアウトを描き始めます。これは通常、組織化された方法でデータモデルをユーザーに提示するだけです。あなたの目標は単純でなければなりません:

    a。アプリがデプロイされる環境を模倣します。たとえば、それがWindowsアプリの場合は、Windowsアプリのように動作する必要があり、Webアプリの場合は、自分よりも人気のある同様のWebアプリケーションのように動作する必要があります。

    b。あなたの目標は、彼らが予測するような方法で、データモデルを通してユーザーを導くことです。ユーザーインターフェイスは、ユーザーがアプリケーションで何かを行うときにうまく設計されており、ユーザーが期待するとおりに動作します。

    c。これには時間がかかり、それは学習曲線ですが、誰でもそれを行うことができます。

  4. ボタン、背景などのグラフィックについては心配しないでください。この時点での唯一の目標は、ページの論理的なレイアウトです。

  5. Html、gtk、cocoa、Android、Windows.Formsなど、使用しているgui libを、イベント処理メカニズム、レイアウトエンジン、入力の取得と表示について理解している範囲で習得する必要があります。データ。すべての開発者が少なくともこれを実行できる必要があります。

  6. ここからグラフィックデザイナーを引き継ぐことは恥ではありません。ただし、少なくともステップ5を通過できる必要があります。これは、アプリ全体のワークロードの95%です。

以下は、私を貧しいGUIデザイナーからはるかに優れたGUIデザイナーに変えた役立つ記事です。

http://www.joelonsoftware.com/uibook/fog0000000249.html

2
Jonathan Henson

まだウェブ開発では、優れた開発スキルはデザインの優れたスキルなしでは十分ではありません

この言葉が本当かどうかはわかりませんが、どこで働いているかによると思います。

たとえば、小規模な会社ではスキルセットをもっと柔軟にする必要があるでしょうが、大規模な会社では同じ期待がなく、実際に開発チームが設計に取り組んでいる間、すべての時間を費やすことができます。

マイクロソフトは実際にツールセットを更新して、開発者とデザイナーの明確な分離を強調しています。彼らはWPFでExpression Blendを導入しました。これは、開発者がソフトウェアの機能に取り組み、他の誰かがその設計を行うことができることを意味します。どちらも異なるツールを使用しており、両方とも同時にプロジェクトで作業できますが、1つは機能を実行し、もう1つはデザインを実行します。

開発者はデータポイントを指定し、デザイナーはそれらを表示します。

1
AndrewC

また、「類似」サイトの成功例を探して、レイアウト、グラフィック、デザインのアイデアを得ることができます。お気に入りのペイントプログラムを少し調整するだけで、たくさんのアイデアを借りて自分のものにすることができます。あからさまにコピーしないでください。マナーが悪いだけでなく、ほとんどの場合違法です。

何回か借りると、成功したサイトのデザインをよりよく理解できるようになり、それらのデザインを作成するためのツールも(小さな調整で)理解できるようになります。

1

コードだけでなく、設計もテストできることを覚えておいてください。簡単なことから始めて、少人数のグループでデザインを試してみて、彼らのフィードバックを記録してそこから行きましょう。これは、設計の問題を特定し、何が異なって実行できる/すべきかについてのアイデアを提供するのに役立ちます。次に、デザインを修正して繰り返します。

1
harald

HTMLの導入により、見苦しくないシンプルなサイトを作成するのは困難になりました。あなたはコンセプトを持っているかもしれませんが、それを正しくするためには、いくつかのトリック、ツール、既製のグラフィックス、CSSの知識が必要です。また、シャープな外観のページを作成するには、ユーザビリティ技術やデザインプロセスに影響を与えるその他の人的要因も必要です。

開発者は、ほとんどの時間を複雑な言語、OOP、ORM、SQL、T-SQLなどの学習に費やしています。また、Webサイトを作成するためのツールに投資することはほとんどありません(ほとんどが高価です)。

その結果、多くの開発者は、見事なWebページを作成できないことに悩まされています。必要なツールを学べば、いいページも作れると思います。

また、アプリケーション開発プロセスでの役割を知ることも重要です。あなたはウェブデザインが必須スキルではなくスキルを持っているのがいいと感じるかもしれません。大規模なプロジェクトでは、少なくとも上記の理由から、それはプログラマーの仕事であってはなりません。

このツールは素晴らしいツールであることがわかりました。

アーティスト

それを見て、デモを試してください、それは本当に良いです。

1
NoChance

あなたはそれを偽造して他のデザインをコピーしなければならないだけです。ユーザーにとって大きなメリットとなる1つまたは2つの機能を除いて、派手なものは避けてください。フォント、色、乱雑さを制限するいくつかの基本的な慣例に従ってください。

UI.stackexchange.comに質問を投稿することを恐れないでください

0
JeffO

あなたの専門分野ではありませんが、UIの作成方法を学ぶことは常に興味深いと思います。現在、ほとんどのWebページは非常に動的であり、コンポーネントを作成してページの要素との相互作用を設定するときに、いくつかのUIスキルを知っていることは確かに役立ちます。私はバックエンドのみの開発のバックグラウンドを持っているので、インターフェースを作成するときにどれだけ関与するかに驚いていました。

私がウェブデザインについて読んだ特に良い本があり、それは開発者向けです。

開発者向けのWebデザイン: http://pragprog.com/book/bhgwad/web-design-for-developers

プレーンなスケッチやプロトタイプのUIからHTML + CSSを使用したデザインの作成まで、インターフェイスを作成する際のすべての段階に触れることができる本は読みやすいです。

UIスキルをさらに向上させるために、PeepCodeのRyan Singerによる最新のスクリーンキャストもお勧めします。 http://peepcode.com/products/ryan-singer-ux

0
Fabio Kenji

UX/UI /グラフィックス/タイポグラフィの基本を習得することは、確かに貴重な努力だと思います。もちろん、常に「包括的な」スペシャリストのチームがいるわけではありません。多くの場合、人々は複数の帽子をかぶらなければなりません。優れた開発者は、自分のドメイン外のものについて学ぶことに時間を費やすことに価値を見いだし、少なくとも設計における優れた作業を認識することができるはずです。

しかし、デザイナーが何をすべきかについては、言うべきことがある。開発者は、設計の領域でしか多くのことを行うことができません(確かに他のものよりもいくつかあります)。特に、狭いニッチを超えた大規模な公開プロジェクトは、実際の設計専門家を採用することで大きなメリットを得ます。そして、CSSとHTMLのカラーコードを振り回せる人を単に意味しているのではありません。タイポグラフィのようなものをYEARSで勉強し、読んで理解した人 Josef Alberの色に関する本 は、新聞紙に木炭が崩れている状態で美しいスケッチを作成できます。これらは貴重なスキルであり、これらを認識し、これらのスキルを集中的に使用できるプロジェクトは、競争で決定的なエッジを持っています。

とはいえ、デザイナーと開発者がスキルを重ねることができる領域がいくつかあります。特にUXとそのサブドメインであるUI。私はお勧め ...

0
Angelo

プロを雇う。

真剣に、開発者からのUIはひどい評判を持っています。これは、開発者が設計において平均を下回っているからではなく、開発者が助けを求める際に平均を下回っているからです。

開発者は、自分の道に来るすべてのデジタルの課題に取り組む傾向があります。

(私は10年間プロの開発者で、妻は20年間ユーザーインターフェイスデザイナーでした)

0
Kris Van Bael