開発者からデザイナーへのパス：方法

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

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

デザイナーになった元開発者として、私が提案したいことがいくつかあります。何よりもまず、設計に取り掛かりましょう！能力がある場合は、既にUI / UXデザイナーであるメンターを見つけて、プロジェクトで彼らと協力してください。私は、実際にプロジェクトに取り組み、何年もこれをやっている人々から知識を吸収することで、本を読むことで得た以上のことを学びました。

そうは言っても、もしあなたがUI / UX /などを読みたいなら、私はこのすばらしいスレッドを見てみたいと思います。私の個人的なお気に入りはSteve Krugの「Do n't Make Me Think」だと思いますが、最終的に自分のお気に入りが見つかると確信しています。

最後に、Photoshop、Illustratorなどのツールに関しては、心配しないでください！最終的には、あなたに最適なツールが見つかります。個人的には、鉛筆と紙のモックアップから始めて、プロジェクトに応じてBalsamiqまたはAxureのいずれかに移動するか、場合によってはまっすぐなHTMLとCSSに移動します。これはプロジェクトのサイズ、スコープなどに依存します。あなたにとって最も快適です。結局のところ、重要なことは、使用したツールではなく、設計に対するビジョンを明確に伝えることです。

私は長い間デザインと開発を混ぜてきました。しかし、初期の頃は、優れたデザインを作るものよりも、編集ツールの学習に多くの時間を費やしていました。Photoshop、Illustrator、Fireworksなどの使用方法を学ぶためのチュートリアルはたくさんありますが、デザインのセンスと方向性があると便利です。これはまだ上手になりたいものです。

私のインスピレーションの1つは、Robby Ingebretsenという名前の男です。彼は開発と設計の両方を非常にうまく行っているからです。彼のウェブサイトはnerdplusart.comにあります。

彼から見てみたいことがいくつかあります...

• デザイナー向けの必読の書籍の（非常に）短いリスト
• 開発者向けの設計の基礎
• 設計上の問題を攻撃して勝利する10の方法

彼がすべてのプレゼンテーションで語っているように、あなたのデザインのインスピレーションを見つけることが重要だと思います。優秀なデザイナーでさえ、このようなものを薄い空気から単純に思い付くことはありません。私のブックマークの1つは、印刷物で主に見られる「新しいグラフィックデザイン」のコレクションです。それらのほとんどは非常にシンプルで、多くの場合、タイポグラフィ自体を主要なグラフィック要素として使用します。簡単そうに見えますが、このようなものを閲覧するだけでデザインを形作ることができます。

Visual Studioを学ぶことは優れたソフトウェア開発者ではないように、Photoshopを学ぶだけでも優れたUIデザイナーにはなりません。

正式なルートに進みたい場合は、アート/グラフィックデザイン、ヒューマンファクター、心理学、情報アーキテクチャ/図書館科学の教育がすべて注目の場所になります。

非公式に、仕事に取り掛かる！;）学ぶための最良の方法は、それをすることです。

私は正式に訓練を受けたグラフィックデザイナーで、仕事でソフトウェア開発スキルを習得しています。私は純粋な必要性から始めました。

個人的には、最高のUXチームメンバーは両方のスキルを組み合わせたものだと思います。だから、あなたは正しい軌道に乗っていると思います。

Watrall＆Siartoの本「Head First Web Design」（O'Reillyから出版）を読むことから始めます。それはかなりナンセンスで、消化しやすく、デザイナーが考慮しなければならないことすべてをあなたに説明します。綿密な調査ではありませんが、次に答える必要がある質問を知ることができます。ナビゲーション、構成、レイアウト、文章、色、アクセシビリティをカバーしています。

また、PhotoshopやAdobe Illustratorなどに飛び込む前に、デザインをワイヤフレーム化して、余分な時間をかけて見栄えを良くする前にすべてが適切な場所にあることを確認します。紙やホワイトボードにスケッチしたり、ツールを使用したりできます。このステップで本当に役立つツールは、Balsamiq Mockupsです。最初にサイトの構成とレイアウトについて考えることができます。

私は実際にUX DesignerからUI Developerに反対のアプローチを取りましたが、Designに取り掛かるとき、開始するいくつかの領域をお勧めします：

「Do n't Make Me Think！」という本を見てみましょう。スティーブ・クルーグ著、これはウェブ上でデザインするためのデザインに関する素晴らしい本だと思います。

SmashingMagazine.comやPSDTuts.comなど、すばらしいWebリソースがたくさんあります。これらは、デザインとWeb技術の世界で最新の記事を提供しています。

また、UXデザイナーになることを特に検討している場合は、HCIの原則を理解することも検討します。

幸運と幸せなデザイン！

私は、ウェブサイト、モバイルアプリなどの最高のUIを作成する方法を学ぶことに本当に興味があります。

さて、それは幅広いトピックです。「美しい」、「一流」、プロ並みのWebサイトを作成したいので、人々が何かを「美しい」と認識している理由を知る必要がありますよね？幸運なことに、美は本当に主観的ではありません。

美しいビジュアルデザインの鍵の1つは、調和です。

調和の欠如は、あなたのデザインをアマチュアに見せます。

そして、最良のことは、視覚的な調和が数学に帰着することです。直感を感じることではありません。

他の人が指摘しているように、自分でウェブサイトをデザインすることをお勧めします。すぐに使用できるフレームワークを使用する代わりに、学んだ設計原則を適用してみてください。最初は難しいかもしれませんが、あなたが良くなるのに役立ちます。

ウェブサイトのデザインに調和を埋め込む方法

以下は実用的な例であり、あなたが今できる面白い小さなエクササイズです。

私が個人的に好む方法の1つは、モジュラースケールを使用して、Webサイトの要素を調和の取れた比率でサイズ設定することです。モジュラースケールの生成に役立つWebサイトは、これです。modularscale.com

モジュール式スケールを使用する利点は、スケールから数値を選択するのと同じくらい簡単にサイズ決定を行えることです。

たとえば、Webサイトの見出しのサイズを変更します（視覚的な階層を伝えるため）。

私が選択した19px本体フォントサイズ（使用しているフォントで最適に見えたため19pxですが、この手順を省略してデフォルトの16pxサイズを使用できます）と比率1.412（いいえ私がこの比率を選んだ理由を詳細に検討する必要があります。あなたのプロジェクトでは、比率がまったくない方が良いでしょう。

それを見て、H1を2.815em、H2を1.994em、H3を1.412emに選択します。本文のフォントサイズよりも大きい最初の3つの数字。簡単だよね？本文は1em（私の場合は19px）です。次に、H4-H6のサイズを1emに設定し、コントラスト（異なるフォントの太さまたはスタイル）を使用して、本文と区別します。

だから、今これを試してください：

1. 独自のモジュラースケールを生成する
2. プレーンHTMLドキュメントを取得します（実際のコンテンツ、Lorem Ipsumは使用しないでください）
3. スケールを使用して見出しのサイズを変更します。
4. 次に、他のサイズ決定（マージン、パディングなど）にスケールを使用してみてください

それは、より良いデザインに向けた小さな一歩ですが、あなたの役に立つことを願っています。

これが役立つと思うなら、HTMLとCSSを知っている初心者のウェブデザイナーのための7つのヒントの私の他のリストを読むことができます

PS：本当にたくさんの読書があります

他の人が言ったように、読んでください：

• アレクサンダー・ホワイトによるグラフィックデザインの要素
• ロバート・ブリングハーストの活版印刷スタイルの要素
• スティーブ・クルーグ作ってはいけない

また、ここに注目すべきブログやコミュニティなどのオンラインリソースの膨大なリストがあります：enboard.co/webdesign/