Contents
デザイン動画一覧
Contents
デザイン動画一覧
Contents
デザイン動画一覧
戻る
UI
Web
キャリア
初心者
UIビジュアル
情報設計
UXデザイン
トレーニング
Figma
質問
勉強会
コミュニケーション
コンテンツ一覧
メンバーシップになる
トップ
/
UIデザインの基本-応用
/
作成したUIを実機で確認
UI
Web
キャリア
初心者
UIビジュアル
情報設計
UXデザイン
トレーニング
Figma
質問
勉強会
コミュニケーション
コンテンツ一覧
コミュニティ
マイページ
アカウント
ログイン
メンバー登録
コンテンツ一覧
コミュニティ
13
作成したUIを実機で確認
July 6, 2021
UI Design
保存
保存中
すべてを閲覧するにはBONOメンバーシップに登録しよう
BONO - プロと学ぶUIとUXのコミュニティ
詳細
新しく作ったUIパターンの2つを実機で確認していきます。
新しく作ったUIパターンの2つを実機で確認していきます。
UIデザインの基本-応用
全
15
本
STEP-01
アイデア出し
111
アイデア出し
お題：友人が聴いてる音楽がわかる機能の使い始めをデザインしよう
2:02
お題：友人が聴いてる音楽がわかる機能の使い始めをデザインしよう
目的の達成に必要な要素を洗い出そう
08:06
目的の達成に必要な要素を洗い出そう
既存フローを整理してアイデアを出そう
05:41
既存フローを整理してアイデアを出そう
起点になる画面てアイデアを組む
08:04
起点になる画面てアイデアを組む
STEP-02
まずはラフにUIをすべて作り切る
11
まずはラフにUIをすべて作り切る
UIアイデアのリサーチ
3:30
UIアイデアのリサーチ
パターンを1度作り切る
7:58
パターンを1度作り切る
パターンを作り切るpart.2
10:35
パターンを作り切るpart.2
セルフチェックのために遷移をつける
6:40
セルフチェックのために遷移をつける
UIグラフィックのリサーチ
4:37
UIグラフィックのリサーチ
STEP-03
もう１度UIをカイゼン。完成へ。
22
もう１度UIをカイゼン。完成へ。
紙ラフでUIパターンを出す
9:29
紙ラフでUIパターンを出す
新しいUIパターンを出すpart.1
13:01
新しいUIパターンを出すpart.1
新しいUIパターン出しpart.2
40:19
新しいUIパターン出しpart.2
作成したUIを実機で確認
4:30
作成したUIを実機で確認
条件を満たすUIにカイゼンする
25:36
条件を満たすUIにカイゼンする
まとめ
4:58
まとめ
