開発者のためのデザイン

メモ: 下記の通り、このモジュールは現在、カリキュラムの概要/シラバスにすぎません。将来的には、時間の許す限り、このモジュールを完全なコースに変換する予定です。

このモジュールのアイディアは、開発者にデザイン思考を（再）紹介することです。デザイナーとして働きたいとは思わないかもしれませんが、基本的なユーザー体験やデザイン理論を身に付けることは、ウェブサイト構築に関わるすべての人にとって有益です。少なくとも、最も技術的な「デザイナーではない」開発者であっても、デザインの概要や、なぜそのようにデザインされているのかを理解し、ユーザーの考え方を理解できるはずです。そして、それは彼らのポートフォリオをより良く見せる手助けにもなります。

さらに、フロントエンド開発者は、自分のプロジェクトでさまざまなデザイン作業を行うという課題を課されることもよくあります。クライアントや雇用主は、ウェブサイトの視覚的な要素に関与しているため、彼らにはそれができると想定することが多いです。過去には、「ウェブ開発者」は現在よりも、デザイナーと開発者の複数の役割を兼ね備えた存在でした。

前提知識

このモジュールを始める前に、 HTML と CSS を理解しておいてください。

メモ: 自分のファイルを作れない コンピューター/タブレット/その他の端末で作業する場合、コードの実例の大半を JSBin や Glitch などのオンラインコーディングプログラム内で試すことができます。

レッスン

基本的なデザイン理論

学習成果:

  • UI デザインの基本:
    • コントラスト
    • 書体
    • 視覚階層
    • スケール
    • 配置
    • ホワイトスペースの利用
  • 色の理論
  • 画像の使用

リソース:

ユーザー中心デザイン

学習成果:

  • 私たちの行動はすべてユーザーのためにあることを理解すること。
  • ユーザー調査/検査の入門、およびユーザーの要件。
  • アクセシビリティを考慮したデザイン — 対象とするユーザーを考慮し、彼らが持つことができる追加のニーズを検討します。 最初からそうした人々を念頭に置いてデザインします。
  • デザインパターンとは何か、そしてウェブで使用される一般的なパターンを理解すること。例えば、
    • ダークモード
    • パンくずリスト
    • カード
    • 遅延/非積極的な登録
    • 無限スクロール
    • モーダルダイアログ
    • 斬新的な開示
    • フォーム/登録/設定の進捗状況の表示
    • ショッピングカート

リソース:

デザイン概要

学習成果:

  • デザイン言語を話すことで、デザイナーとコミュニケーションを取ること。
  • 設計要件を解釈し、実装を作成すること。
  • デザイナーが開発者にメッセージを伝えるために使用する典型的なツール（例: Figma）。

関連情報