読み込み中...

4-3.配色はメインUIを引き立てよう | UIビジュアル基礎 | BONO

UIビジュアル基礎

UIビジュアル基礎

1

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター！

2

TRY1 : コンセプトを考えてリデザインしよう！

TRY1:プロフィールUIをリデザイン！

1-1. 【解説①】アイデア：誰が使うか？で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答！見た目だけ考えるのはNGなんです

TRY1解答！ユースケースから見た目のアイデアを作る流れ

3

TRY2 ビジュアルシステムでリデザインしよう！

TRY2 : ホームUIをリデザイン！

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法

【解説】TRY2解答

【5分】TRY2解答システムを適応して見た目を整える

4

TRY3 レイアウトのきほんでリデザイン！

TRY3:動画詳細UIをリデザイン！

3-1.サイズの決め方：倍数で管理しよう

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本

TRY3:レイアウト解答

5

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン！

4-1.ここからはじめる配色設計

4-2.テーマカラーの決め方

4-3.配色はメインUIを引き立てよう

4-4テーマカラー2つ以上の時の考え方

6

5.画面幅で変わるUI

お題:レスポンシブなホームUIをデザイン

5-1.知らないと怖い”高解像度"ディスプレイについて

5-2.レスポンシブ5つのポイント

5-3.異なるディスプレイサイズのUI作成

TRY5レスポンシブ解答

7

6.UI構造の理解

UI構造を意識してリデザインしよう！

6-1.平面の”階層”表現について

6-2.UIを構成する3ブロックを知ろう

6-3.シャドウの基本

6-5.モードと遷移 "←"と"×"の違い

6-6.モーダルとモードについて

TOP6:UI構造 - お題の解答

UIビジュアル基礎

UIビジュアル基礎

1

シリーズの説明

【進め方】デザイナーはやってる見た目の”キホン”をマスター！

2

TRY1 : コンセプトを考えてリデザインしよう！

TRY1:プロフィールUIをリデザイン！

1-1. 【解説①】アイデア：誰が使うか？で見た目を考える方法

1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法

【7分】TRY1解答！見た目だけ考えるのはNGなんです

TRY1解答！ユースケースから見た目のアイデアを作る流れ

3

TRY2 ビジュアルシステムでリデザインしよう！

TRY2 : ホームUIをリデザイン！

2-1.良いUIを作るコツは見た目の"システム化"

2-2.システム化でUI作成が楽になる5要素とは

2-3.Figmaで見た目のシステムを作る方法

【解説】TRY2解答

【5分】TRY2解答システムを適応して見た目を整える

4

TRY3 レイアウトのきほんでリデザイン！

TRY3:動画詳細UIをリデザイン！

3-1.サイズの決め方：倍数で管理しよう

3-2.情報を優先度とグループで整理する

3-3.余白は論理でサイズと種類を決めよう

3-4.グリッド - 統一感あるサイズ簡単に組むテクニック

3-5.ボーダーの基本

TRY3:レイアウト解答

5

4.配色の基本

TRY4 : スマホの動画詳細UIをリデザイン！

4-1.ここからはじめる配色設計

4-2.テーマカラーの決め方

4-3.配色はメインUIを引き立てよう

4-4テーマカラー2つ以上の時の考え方

6

5.画面幅で変わるUI

お題:レスポンシブなホームUIをデザイン

5-1.知らないと怖い”高解像度"ディスプレイについて

5-2.レスポンシブ5つのポイント

5-3.異なるディスプレイサイズのUI作成

TRY5レスポンシブ解答

7

6.UI構造の理解

UI構造を意識してリデザインしよう！

6-1.平面の”階層”表現について

6-2.UIを構成する3ブロックを知ろう

6-3.シャドウの基本

6-5.モードと遷移 "←"と"×"の違い

6-6.モーダルとモードについて

TOP6:UI構造 - お題の解答

プレミアムコンテンツ

この動画を視聴するにはメンバーシップの登録が必要です

ログインするメンバーシップ登録へ

4. 4-3.配色はメインUIを引き立てよう

クエスト5: 4.配色の基本

何に色を振るべきか？

配色の目的は”必要なものをしっかりと視認してもらう”ことがまず最低限あります。
雰囲気作りも必要ですが、UIにおいて機能性はグラフィックデザインより重要性が高いため、まずはそこを担保する必要があります。

□ スライドのURL
https://www.figma.com/proto/pV89k1DFkWyDeGJ56d6fs8/DAY2-りょうた[スライド付]?page-id=0%3A1&node-id=33%3A3055&viewport=241%2C48%2C0.15&scaling=min-zoom&starting-point-node-id=33%3A3055&show-proto-sidebar=1

続きを読むにはメンバーシップの登録が必要です

ログインするメンバーシップ登録へ