読み込み中...
読み込み中...
UIビジュアル基礎 | BONO | BONO
レッスン一覧へ
シェア
UI
UIビジュアル基礎
0
%
デザインしながらUIの見た目を作る基本理解を進める実践型コンテンツ
スタートする
コンテンツ
クエスト
01
シリーズの説明
1
08:02
【進め方】デザイナーはやってる見た目の”キホン”をマスター！
クエスト
02
TRY1 : コンセプトを考えてリデザインしよう！
1
TRY1:プロフィールUIをリデザイン！
2
15:00
1-1. 【解説①】アイデア：誰が使うか？で見た目を考える方法
3
21:53
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
4
07:16
【7分】TRY1解答！見た目だけ考えるのはNGなんです
5
20:20
TRY1解答！ユースケースから見た目のアイデアを作る流れ
クエスト
03
TRY2 ビジュアルシステムでリデザインしよう！
1
05:02
TRY2 : ホームUIをリデザイン！
2
16:23
2-1.良いUIを作るコツは見た目の"システム化"
3
26:07
2-2.システム化でUI作成が楽になる5要素とは
4
17:35
2-3.Figmaで見た目のシステムを作る方法
5
11:10
【解説】TRY2解答
6
05:30
【5分】TRY2解答 システムを適応して見た目を整える
クエスト
04
TRY3 レイアウトのきほんでリデザイン！
1
05:01
TRY3:動画詳細UIをリデザイン！
2
11:14
3-1.サイズの決め方：倍数で管理しよう
3
37:31
3-2.情報を優先度とグループで整理する
4
07:51
3-3.余白は論理でサイズと種類を決めよう
5
17:55
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
6
05:03
3-5.ボーダーの基本
7
08:24
TRY3:レイアウト解答
クエスト
05
4.配色の基本
1
05:11
TRY4 : スマホの動画詳細UIをリデザイン！
2
18:39
4-1.ここからはじめる配色設計
3
08:32
4-2.テーマカラーの決め方
4
12:12
4-3.配色はメインUIを引き立てよう
5
12:24
4-4テーマカラー2つ以上の時の考え方
6
08:32
TRY4の解答
クエスト
06
5.画面幅で変わるUI
1
03:13
お題:レスポンシブなホームUIをデザイン
2
09:59
5-1.知らないと怖い”高解像度"ディスプレイについて
3
13:33
5-2.レスポンシブ5つのポイント
4
17:24
5-3.異なるディスプレイサイズのUI作成
5
09:45
TRY5レスポンシブ解答
クエスト
07
6.UI構造の理解
1
05:35
UI構造を意識してリデザインしよう！
2
09:28
6-1.平面の”階層”表現について
3
13:04
6-2.UIを構成する3ブロックを知ろう
4
23:50
6-3.シャドウの基本
5
11:02
6-5.モードと遷移 "←"と"×"の違い
6
17:17
6-6.モーダルとモードについて
7
08:49
TOP6:UI構造 - お題の解答
レッスン一覧へ
シェア
UI
UIビジュアル基礎
0
%
デザインしながらUIの見た目を作る基本理解を進める実践型コンテンツ
スタートする
コンテンツ
クエスト
01
シリーズの説明
1
08:02
【進め方】デザイナーはやってる見た目の”キホン”をマスター！
クエスト
02
TRY1 : コンセプトを考えてリデザインしよう！
1
TRY1:プロフィールUIをリデザイン！
2
15:00
1-1. 【解説①】アイデア：誰が使うか？で見た目を考える方法
3
21:53
1-2.【解説②】表現の方向性 : コンセプトを決めて見た目をデザインする方法
4
07:16
【7分】TRY1解答！見た目だけ考えるのはNGなんです
5
20:20
TRY1解答！ユースケースから見た目のアイデアを作る流れ
クエスト
03
TRY2 ビジュアルシステムでリデザインしよう！
1
05:02
TRY2 : ホームUIをリデザイン！
2
16:23
2-1.良いUIを作るコツは見た目の"システム化"
3
26:07
2-2.システム化でUI作成が楽になる5要素とは
4
17:35
2-3.Figmaで見た目のシステムを作る方法
5
11:10
【解説】TRY2解答
6
05:30
【5分】TRY2解答 システムを適応して見た目を整える
クエスト
04
TRY3 レイアウトのきほんでリデザイン！
1
05:01
TRY3:動画詳細UIをリデザイン！
2
11:14
3-1.サイズの決め方：倍数で管理しよう
3
37:31
3-2.情報を優先度とグループで整理する
4
07:51
3-3.余白は論理でサイズと種類を決めよう
5
17:55
3-4.グリッド - 統一感あるサイズ簡単に組むテクニック
6
05:03
3-5.ボーダーの基本
7
08:24
TRY3:レイアウト解答
クエスト
05
4.配色の基本
1
05:11
TRY4 : スマホの動画詳細UIをリデザイン！
2
18:39
4-1.ここからはじめる配色設計
3
08:32
4-2.テーマカラーの決め方
4
12:12
4-3.配色はメインUIを引き立てよう
5
12:24
4-4テーマカラー2つ以上の時の考え方
6
08:32
TRY4の解答
クエスト
06
5.画面幅で変わるUI
1
03:13
お題:レスポンシブなホームUIをデザイン
2
09:59
5-1.知らないと怖い”高解像度"ディスプレイについて
3
13:33
5-2.レスポンシブ5つのポイント
4
17:24
5-3.異なるディスプレイサイズのUI作成
5
09:45
TRY5レスポンシブ解答
クエスト
07
6.UI構造の理解
1
05:35
UI構造を意識してリデザインしよう！
2
09:28
6-1.平面の”階層”表現について
3
13:04
6-2.UIを構成する3ブロックを知ろう
4
23:50
6-3.シャドウの基本
5
11:02
6-5.モードと遷移 "←"と"×"の違い
6
17:17
6-6.モーダルとモードについて
7
08:49
TOP6:UI構造 - お題の解答
