シリーズ目次

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

フィルターUIをデザインしよう

コンテンツのリストをある条件でフィルターするUIはよく出てくるパターンの代表格です。
何をフィルタするか?フィルタできる変数の個数は?でもちろんUIの内容は大きく変わります。

今回はシンプルなフィルターUIを題材に、”どこに配置すべきか?”、"デザインする時の状態の基本"などをデザインをトレースしながら学んでいきます。

動画の目次

  • 00:12 今日のポイント
  • 04:22 盗むUIをまず探す
  • 11:21 UI配置位置を考える
  • 18:07 絞り込みUIのデザイン
  • 28:28 スタイルの微調整
  • 36:52 ON状態のUIをデザイン
  • 46:50 次で最後

ポイントのスライド

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

こちら〜!

https://www.figma.com/file/GMEs9Al3RXlXUEfhOTCsih/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-(Copy)?type=design&node-id=421%3A23292&t=EB03GQ1RVMJgSrKb-1

フィルターUIをデザインしよう

コンテンツのリストをある条件でフィルターするUIはよく出てくるパターンの代表格です。
何をフィルタするか?フィルタできる変数の個数は?でもちろんUIの内容は大きく変わります。

今回はシンプルなフィルターUIを題材に、”どこに配置すべきか?”、"デザインする時の状態の基本"などをデザインをトレースしながら学んでいきます。

動画の目次

  • 00:12 今日のポイント
  • 04:22 盗むUIをまず探す
  • 11:21 UI配置位置を考える
  • 18:07 絞り込みUIのデザイン
  • 28:28 スタイルの微調整
  • 36:52 ON状態のUIをデザイン
  • 46:50 次で最後

ポイントのスライド

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

こちら〜!

https://www.figma.com/file/GMEs9Al3RXlXUEfhOTCsih/%F0%9F%A7%81%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB%E3%81%A7%E5%AD%A6%E3%81%B6UI%E8%A6%8B%E3%81%9F%E7%9B%AE%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9-(Copy)?type=design&node-id=421%3A23292&t=EB03GQ1RVMJgSrKb-1

フィルターUIをデザインしよう

コンテンツのリストをある条件でフィルターするUIはよく出てくるパターンの代表格です。
何をフィルタするか?フィルタできる変数の個数は?でもちろんUIの内容は大きく変わります。

今回はシンプルなフィルターUIを題材に、”どこに配置すべきか?”、"デザインする時の状態の基本"などをデザインをトレースしながら学んでいきます。

ポイントのスライド

こちら。振り返りに使えるなら使ってくれ〜い

Figmaのデータ

メンバーになると閲覧できるよ!

ゼロからはじめるUIビジュアル

10
Todoサービス ホームUI
sss
Todoサービス ホームUI

Todoサービス ホームUI

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!
09:55
UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

UI見た目の基本原則 #1 : 作りながら”美しさ”と”使いやすさ”が両立するUIのコツを学んじゃお!

#2 : ヘッダーUIをデザインしよう
28:43
#2 : ヘッダーUIをデザインしよう

#2 : ヘッダーUIをデザインしよう

#3 : Todoブロックをデザインしよう
51:42
#3 : Todoブロックをデザインしよう

#3 : Todoブロックをデザインしよう

#4 : アクションエリアをデザイン
36:09
#4 : アクションエリアをデザイン

#4 : アクションエリアをデザイン

1度作ったUIは質上げしよう
sss
1度作ったUIは質上げしよう

1度作ったUIは質上げしよう

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする
43:34
#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#5 : 神は細部に宿る..作成したホームUIをブラッシュアップする

#6 : 全く別テイストにUIを変更する方法を教えます
37:25
#6 : 全く別テイストにUIを変更する方法を教えます

#6 : 全く別テイストにUIを変更する方法を教えます

作成アクションのUIデザイン
sss
作成アクションのUIデザイン

作成アクションのUIデザイン

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう
52:51
#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7前編 : タスク作成機能をデザインして、アクションの基本を学ぼう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう
45:48
#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

#7後編 : 選択メニューUIをデザインして、カテゴリ選択を作ろう

フィルタ・検索のUIデザイン
sss
フィルタ・検索のUIデザイン

フィルタ・検索のUIデザイン

#8 フィルターUIデザインの基本
47:45
#8 フィルターUIデザインの基本

#8 フィルターUIデザインの基本

#9 検索UIデザインの基本
56:30
#9 検索UIデザインの基本

#9 検索UIデザインの基本

お疲れ!👏継続してつくる力を鍛える
sss
お疲れ!👏継続してつくる力を鍛える

お疲れ!👏継続してつくる力を鍛える

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ
20:37
【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

【おわりに】ビジュアル力を上げるデザイン勉強法:1日1デザイン分析のススメ

閉じる

0 Comments

Active Here: 0
Be the first to leave a comment.
Loading
Load Previous
Someone is typing...
No Name
Set
4 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your comment will appear once approved by a moderator.
Load Previous
No Name
Set
2 years ago
Moderator
(Edited)
This is the actual comment. It's can be long or short. And must contain only text information.
Your reply will appear once approved by a moderator.
Load More
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Load More