2-3.Figmaで見た目のシステムを作る方法 | UIビジュアル基礎 | BONO | BONO
一覧
UIビジュアル基礎
0
%
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つ以上の時の考え方
TRY4の解答
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. 2-3.Figmaで見た目のシステムを作る方法
クエスト3: TRY2 ビジュアルシステムでリデザインしよう！
完了にする
お気に入り
シェア
続きを読むにはメンバーシップの登録が必要です
ログインする
メンバーシップ登録へ
前
2-2.システム化でUI作成が楽になる5要素とは
次
【解説】TRY2解答
