UIデザインのプロ向けガイド

著者: Randy Alexander
作成日: 25 4月 2021
更新日: 16 5月 2024
Anonim
【目次付き】日本語で学ぶ Daily UIの始め方。UIデザインのスキルがメキメキ上がる!
ビデオ: 【目次付き】日本語で学ぶ Daily UIの始め方。UIデザインのスキルがメキメキ上がる!

コンテンツ

私がキャリアを始めたとき、私はウェブデザイナーでした。私は中小企業のサイトから始めて、最終的にはより大きなクライアントに移るまで、4年間ウェブデザインに携わっていました。私が興味を持ったのはグラフィックデザインではなく、より大きなブランド名で働いていなかったことがわかりました。私は、Webページの視覚的なデザインよりも、ページ付けのパターン、人々がフォームを操作する方法、知覚されるパフォーマンスなどに興味がありました。

私がSF映画を見たとき、私はインターフェースを見ました。そして、ビデオゲームをプレイするとき、メニューがどのように配置されているかを観察しました。これらの特性のいずれかがおなじみのように聞こえる場合は、UIデザイナーでもある可能性があります。

私は代理店の仕事を辞め、自分の会社を始めました。 LinkedInのページで、新しいキャリアの目標を要約しようとしました。それは、最高のソフトウェアを実現することです。フリーランサーとしてスタートして4年になりますが、旅は止まりません。最近、私はという小さなUIデザイン会社の経営を手伝っています 単核症。最近、4人目のチームメンバーを迎えました。


この記事では、UIデザイナーであることがどのようなものであるかを説明したいと思います。これには、仕事の内容、最適な学習リソースの場所、技術を向上させる方法などが含まれます。

UIデザイナーは何をしますか?

一般的に、ユーザーインターフェイスデザイナーの仕事は4つのカテゴリーに分けることができます。クライアントと通信し、調査し、設計とプロトタイプを作成し、開発者と通信します。これらの各フェーズについて詳しく見ていきましょう。

クライアントとのコミュニケーション

クライアントとのコミュニケーションとは、クライアントの問題を理解することです。目標はクライアントのビジネスを把握することであるため、プロジェクトの開始は通常、多くの話し合いを構成します。開始時にクライアントのドメインについてあまり知らないのは問題ありません。考えられる設計ソリューションを思い描いている間、クライアントのビジネスを新鮮な方法で見ることができます。


優れたUIデザイナーになるには、最終的にクライアントのビジネスと一緒に考えることができる必要があります。たとえば、クライアントが航空にいる可能性があります。彼らのために働くことは、最終的にあなたがその業界についてかなり知識を持つようになるでしょう。ですから、ここでのあなた自身の幸せのための秘訣は、あなたが賢く働いている業界を選ぶことです。そうすれば、あなたはあなたが気にしない、または興味のない何かの専門家になることはありません。

プロジェクト中、コミュニケーションは止まりません。デザイナーとして、あなたは常にあなたの作品を発表します。私たちの会社はリモートチームであるため、直接会うことはあまりありません。代わりに、ビデオ会議による画面共有を多用しています。 SkypeやSlackなどのコミュニケーションツールが毎日使用されています。

同期通信方式と非同期通信方式を組み合わせると便利です。すぐに多くの情報が必要な場合は電話をかけるのが最適ですが、同時に立ち会う必要があります。 Slackは「仮想ウォータークーラー」と考えており、Basecampを使用して複雑な設計プロジェクトを管理しています。 HTMLとCSSを使用してプロトタイプを設計する場合、GitHubの問題を使用してコードについて直接話し合います。


研究

クライアントとのコミュニケーションだけでなく、多くの調査を行います。これには、フィールドスタディ、クライアントとのワークショップ、競争の分析、戦略の定義などが含まれます。基本的には、目前の問題を理解するのに役立つほぼすべてのものです。

研究はあなたのデザインの選択に情報を与えるものです。これは、かつて読んだ記事、またはAppleがリリースしたばかりの新しい記事です。特定のデザインを選択した理由を説明するときは、調査によって裏付けられます。

研究は非常に広範囲に及ぶ可能性があります。私はよく、研究目的で新しいデバイスをテストしたり、新しいWebアプリにサインアップしてそのユーザーインターフェイスを調べたりします。

デザインとプロトタイピング

デザイナーとして、あなたはおそらくあなたの時間のほとんどをデザインとプロトタイピングの仕事に費やすでしょう。 UIデザインプロジェクトは、スケッチから詳細デザイン、コーディングまで、さまざまな方法で前進できます。

使用する方法は、プロジェクトのタイプによって大きく異なります。何をデザインしていますか?それはウェブサイトですか、それともアプリと呼びますか?ネイティブテクノロジーを使用していますか?それは再設計ですか、それともゼロから始めていますか?

当社では決まったプロセスはありませんが、ほとんどのプロジェクトは同じ大まかな順序に従います。スケッチとワイヤーフレームから始まり、詳細なビジュアルとインタラクションデザインに進み、プロトタイプで終わります。

デザイナーとして、私たちは自分たちのツールについて考えることに多くの時間を費やしています。優れたツールは重要ですが、最も重要なものではありません。 Adobe Creative SuiteやSketchなどのアプリを適切に使用できることは、鉛筆を使用して描画したり、ブラシを使用してペイントしたりできることと同じです。あなたはまだ絵を描く必要があります。

そうは言っても、ツールへの健全な関心は良いことです。生産性を高めるのに役立つ新しいツールを試すのが大好きです。私のお気に入りのベクター編集ツールはIllustratorですが、最近のビジュアルデザイン作業のほとんどはSketchで行われています。他のチームメンバーは、AffinityDesignerなどの新しいツールに切り替えました。

ツールは非常に個人的な選択です。私たちが簡単に協力できる限り、誰もが自分で自由に選ぶことができます。クライアントとの設計について話しやすくするために、InVisionを使用してプロトタイプを作成します。ただし、より高度なプロトタイピングには、HTMLとCSSを使用します。必要なツールはすべて、それを使ってやりたい仕事によって異なります。

開発者とのコミュニケーション

UIデザイナーの仕事で忘れられがちなのは、開発者とのコミュニケーションです。最近では、設計を開発者に送信し、正しく実装されることを期待するだけでは解決できません。最高の設計者は、課題が設計の作成ではなく、承認を与える必要のある利害関係者だけでなく、それを実装する必要のある開発者にも伝達することであることを知っています。

設計の伝達には、詳細な仕様、資産の提供、設計のレビューなど、さまざまな形式があります。各インスタンスで何を提供するのが理にかなっているのかは、プロジェクトがネイティブであるかWebアプリケーションであるかによって大きく異なります。

従来のアプローチは、画面デザインの隣にアセットを配信することです。画面デザインを使用して、デザインが全体としてどのように見えるかを確認できます。アセットはすぐに使用できるアイコンのPNGおよびSVGであるため、開発者はグラフィックエディタを使用する必要がありません。

私たちの会社では、それ以上のものを提供することを支持しています。コンポーネントスタイルガイドを使用して、設計の一貫性を維持します。 Webプロジェクトを扱っているときは、HTMLとCSSの詳細なセットを、実装の準備ができて、1つずつ文書化して提供します。私は、ソフトウェア開発のすべての段階でデザインの目を持っていることが、世界クラスのソフトウェアを作成するという私の目標を達成する唯一の方法であると信じています。

Webとネイティブアプリ

プラットフォーム(iOSやAndroidなど)用のネイティブアプリを設計する場合、特定のガイドラインに従う傾向があります。 Web向けにデザインする場合、ガイダンスはそれほど多くありません。通常起こることは、あなたのクライアントが物事がどのように見えるべきかを決定する彼らのブランドのための一連のグラフィックガイドラインを持っているということです。

ただし、これらのガイドラインはマーケティングWebサイトに合わせて調整される傾向があり、そこにあるものが必ずしも適切なユーザーインターフェイスの決定につながるとは限りません。フォントは、読みやすさの理由ではなく、マーケティングの理由で選択される傾向があります。色は大胆で印象的かもしれません。これは広告キャンペーンでは機能しますが、日常的に使用するアプリでは機能しません。これらのガイドは解釈する必要があります。

WebのUIガイドラインはほとんどありません。ウェブはさまざまなスタイルのるつぼであると言えるでしょう。ウェブサイトというよりもアプリのように感じるものを作成する場合は、BootstrapやZURBFoundationなどの広く使用されているフレームワークについて知っておく必要があります。車輪の再発明をしたくないので、フレームワークは物事がどのように見えるべきかを決定し始めます。そして、それはおそらく良いことです。

私たちの会社では、Bootstrapを使用するのが好きです。ボタン、データテーブル、モーダルなどの一般的なUI要素に適切なデフォルトサイズを提供します。

ウェブデザインでは、ウェブの技術的能力によってより制約を受けます。以前は、ウェブサイトに丸みを帯びた角のような単純な視覚的繁栄を実装することは困難でした。最近はもう昔のことです。今では、たくさんのシャドウ、トランジション、アニメーション、さらには3Dを備えたユーザーインターフェイスを自由に描くことができます。

デザイナーとして、ブラウザでプロセスとデザインを制御する方がはるかに現実的です。多くのUIデザイナーがネイティブアプリのUIプログラミングを引き継ぐのを見たことがありませんが、ウェブアプリのHTMLとCSSを行うデザイナーはよくあることです。独自のデザインをコーディングできれば、コーディングしていないピアよりも優位に立つことができます。私にとって、これがWebの仕組みを真に理解する唯一の方法です。

Webの制約

あなたが学んだすべてのクールなトリックがすべてのブラウザでサポートされているわけではないことにすぐに気付くでしょう。それがウェブ向けのデザインの現実です。プログレッシブエンハンスメントのようなよく知られた原則に従うことをお勧めします。プログレッシブエンハンスメントでは、可能な限りエンハンスドコンテンツをロードしますが、コンテンツの劣化についても検討します。

最近、「からしを切る」が人気になっています。 BBCのウェブチームによって支持されており、これには「良い」ブラウザと「悪い」ブラウザを区別し、「悪い」ブラウザに限定されたエクスペリエンスを提供することが含まれます。ただし、実際にはコンテンツサイトでのみ機能します。

アプリケーションのようなエクスペリエンスに関しては、開発を容易にするために、多くの人がサポートを少数の主要なブラウザーのみに制限しています。残念ながら、これにより、コンテンツを表示するために特定のブラウザが必要になる1996年の状況に戻ることができます。

スキルセットの改善

では、どのようにして動きの速いWeb業界の最新情報を入手し、スキルセットを向上させるのでしょうか。スキルを高めるためのいくつかの異なる方法を見てみましょう...

プラットフォームの知識

デザイナーの武器の大部分はプラットフォームの知識です。さまざまなオペレーティングシステムと、人々がそれらをどのように使用しているかについて知っておく必要があります。デザイナーとして、私たちはMacを使用する傾向がありますが、そこにいる大多数の人々が仕事を遂行するためにWindowsボックスを使用していることを忘れがちです。

自分で使って初めて本当に理解できると思います。私は自分のMacを使ってデザインすることを好みますが、他のさまざまなプラットフォームの進化に追いつくのに多くの時間を費やしています。 Macに仮想マシンとしてWindowsのコピーをいくつかインストールしています。私は、MicrosoftのInsiderProgramを使用してWindows10の新しいビルドをテストし、UIのさまざまな変更を確認することに忙しくしています。

また、定期的に新しいハードウェアを購入して、その動作をテストしています。プラットフォームをテストするためだけにAppleWatchを購入しました。それが私の人生にそれほど影響を与えていないと感じたので、それからそれを売りました。

これに加えて、Webは独自のオペレーティングシステムと見なすことができます。それは絶えず進化しており、毎週すべてのブラウザベンダーに新しい機能が追加されています。ブラウザの技術的な側面、特にCSSとグラフィックスの機能について知ることは非常に価値があります。 SVGとWebGLとは何か、およびWeb AnimationsAPIをどのように使用できるかを知る必要があります。

すべてのプラットフォームは時間の経過とともに進化し、ユーザーインターフェースデザイナーとして最新の状態に保つことがあなたの仕事です。結局のところ、設計しているものはすべて孤立して存在するのではなく、より大きなソフトウェアエコシステムの一部です。

基本に戻る

今日私たちが苦労していることは、20年前に私たちが苦労していたこととそれほど変わりません。本にはたくさんの良いアドバイスがあります。ジェイソン・フリードとマシュー・リンダーマンによるWebの防御設計を試してみてください。まずは、スティーブ・クリュッグの「考えさせないでください」を試してみてください。

モダリティやアフォーダンスなどの概念がわからない場合は、よく読んでください。フィッツの法則が何であるかを説明できる必要があります。ゲシュタルトの近接法則?これがUIデザインの基本です。

ゲームや映画からインスピレーションを得てください

UIデザイナーとして、私は自分の仕事をするために他のインスピレーションの源を利用しています。ゲームにはたくさんのインスピレーションがあります。一部のゲームは非常に複雑であり、UIデザイナーは、ビジネスプロジェクトに取り組んでいるUIデザイナーと同じ複雑なインターフェイスの問題を解決する必要がありました。

ゲームはトレンドを表すこともできます。 Colin McRae Rallyのメニューに見られるミニマリズムは、iOS7の方向性を思い出させます。ある意味、今流行りのUIアニメーションデザインは、何年も前にゲームに登場していました。スキューモーフィズムからむき出しの機能的なインターフェースと「フラットなデザイン」への移行は、ゲームでも明らかです。 2006年の忘却と2011年のSkyrimを比較してください。どちらのゲームも同じシリーズのRPGですが、違いは際立っています。

アイアンマンのようなマーベル映画の未来的なインターフェースも私にインスピレーションを与えてくれました。これらは正確に使用できる例ではありませんが、コンピューティング全体についてもっと考えさせられます。画面の未来が欲しいのか、それとも画面が消えるのか。これはおそらく、デザイナーでいっぱいのパブでポーズをとるのに良い質問です。

あなたは、ハードワーク、粘り強さ、仲間との会話、そしてひどい本を読むことを通して、デザイナーとして成長します。約1年前、私はニューヨークタイムズで、80代になり、技術を磨き続けている人々についての記事を読みました。まだ始まったばかりのような気がします。あなたはどうですか?

私たちの出版物
Microsoftアカウントのパスワードを回復する方法
続きを読む

Microsoftアカウントのパスワードを回復する方法

このアカウントはすべてのMicrooftサービスにサインインできるため、MicrooftユーザーはMicrooftアカウントに精通しています。パスワードがないと、ユーザーはMicrooftにアクセスできませんでした。この記事では、これまでの上位3つの方法でWindow 10 / 8.1 / 8でMicrooftアカウントのパスワードを回復する方法をリストします。方法1.覚えているときにMicroo...
RARパスワードをハッキングするためのトップチョイス
続きを読む

RARパスワードをハッキングするためのトップチョイス

同僚は、他の従業員によってロックされているロックされたRARファイルで作業する必要がある場合があります。多くの場合、パスワードを持っている人は利用できません。したがって、特定のソフトウェアを使用してこれらのファイルのロックを解除する必要があります。あなたがする方法を知っているなら RARパスワードをハックする そうすれば、他の従業員を待つ必要はありません。ロックを解除して、ハードルなしで作業を続け...
TimeMachineバックアップを削除する2つの簡単な方法
続きを読む

TimeMachineバックアップを削除する2つの簡単な方法

タイムマシンは、Macの個人用ファイル、設定、およびドキュメントを外部ディスクに安全にバックアップしておくのに役立つ、非常に便利なMacOの機能です。ただし、ディスクに存在する古いバックアップが多すぎる場合は、新しいバックアップ用のスペースを確保するためにそれらを削除する必要があります。について混乱がある場合 古いバックアップを削除する方法 タイムマシンから、この記事はあなたにとって最高の助けです...