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