見出し画像

1月に作成したUIまとめ

デザイナーのasatoです。

今回は1月に個人的に作成したUIデザインをまとめてみようと思います。

今回デザインを作成するにあたって、Cocoda Training内にあるDaily Cocoda!のDaily UIというサービスを使用しました。
Cocoda Trainingとは、デザインのお題が掲載されているサービスです。

1つ目 ニュースアプリのカテゴリ選択

*以下引用
ターゲット これからITの知識をつけたい新卒社員

画像1

感想(振り返り)
IT系のニュースアプリを想定して作成しました。IT感が出るように知性的な水色を使用しています。ニュースは線で区切ってカード感を出しています。
見出しで気になる要素があったらクリックして詳細を見る、というフローで作成したため一覧の画面には本文は載せていません。

2つ目 家計簿アプリの支出記入画面

*以下引用
ターゲット 子供が生まれお金の管理をはじめた夫婦

画像2

感想(振り返り)
支出を記入できる画面ということで、この欄では何を入力できるかというのをアイコンでわかりやすく表現しています。また、カテゴリー選択を入れることで何の支出なのかを把握できるようにしています。
下に余白が空いてしまったのですが、今見てみるとボタンをもっと下に配置してもよかったのかな?と思いました。


3つ目 ECサイトの商品詳細画面

*以下引用
ターゲット ファッション好きな20代男性

画像3

感想(振り返り)
ECサイトの商品詳細画面ということで、アイテムやサイズ、色などの要素を配置しています。
サイズ選択はプルダウンメニューとも迷いましたが、どんなサイズがあるか一目で見れた方が良いかなと思い並べて配置しています。


4つ目 旅行予約アプリの検索画面

*以下引用
ターゲット 旅行好きな20代女性

画像4

感想(振り返り)
旅行予約アプリということで旅客機を予約する画面を作成しました。
予約画面はやることが多くて複雑そう、と思われないように余白を開けたり適宜アイコンを入れたりして余裕を持たせています。

5つ目 ライブ配信アプリのライブ画面

*以下引用
ターゲット 新しいもの好きな高校生

画像5

感想(振り返り)
ライブ配信画面では、配信者がきちんと見えることが大事だと思うのでコメントの項目や配信者情報などの背景はグラデーションを置いてなるべく邪魔にならないようにしています。色数も絞り、UI自体はシンプルにして配信者を目立たせるようにしています。


さいごに
今回もUIを作成してみました。
次回も投稿するのでよろしくお願いします🌸


この記事が気に入ったらサポートをしてみませんか?