
3月に作成したUIまとめ
デザイナーのasatoです。
今回は3月に個人的に作成したUIデザインをまとめてみようと思います。
今回デザインを作成するにあたって、Cocoda Training内にあるDaily Cocoda!のDaily UIというサービスを使用しました。
Cocoda Trainingとは、デザインのお題が掲載されているサービスです。
1つ目 決済アプリのリワードモーダル
*以下引用
ターゲット キャッシュレス生活を始めた25歳男性

感想(振り返り)
お支払い完了画面に大事なのは、きちんと完了したのかが一目でわかることだと思ったので「✔️」を大きく表示してみました。
支払いが楽しみになるような装飾をつけつつ、うるさくならないようにするバランスが大変だなと感じました。
2つ目 クイズゲームのランキング画面
*以下引用
ターゲット エンタメ好きな高校生

感想(振り返り)
ランキングは上位になった場合、特別感のある演出をつけてリッチ感を出しました。
今見ると4位以降は全て同じデザインなのでもう少し違う装飾を入れるなどしても良いのかも?と感じました。
3つ目 クレジット情報の入力画面
*以下引用
ターゲット 初めて決済アプリを使う20代男性

感想(振り返り)
入力に集中できることが大事だと思うので、画面内の情報量は必要最低限にしました。
入力欄を誤タップしないように枠同士の余白は広めにとってあります。シンプルな画面こそ余白が目立ってくるので配置が難しいなと感じます。
さいごに
今回もUIを作成してみました。Daily UIももう折り返しとなりました。
次回も投稿するのでよろしくお願いします🌸