
4月に作成したUIまとめ
デザイナーのasatoです。
今回は4月に個人的に作成したUIデザインをまとめてみようと思います。
今回デザインを作成するにあたって、Cocoda Training内にあるDaily Cocoda!のDaily UIというサービスを使用しました。
Cocoda Trainingとは、デザインのお題が掲載されているサービスです。
1つ目 美容院予約サイトの404ページ
*以下引用
ターゲット 美容にこだわりがつよい女性

感想(振り返り)
not foundにはあまり情報を入れる必要はないかなと思い、シンプルめな構成にしています。操作に迷わないよう、「TOPへ戻る」ボタンは大きめに配置しています。
また、not foundはネガティブなイメージを与えやすい画面なので、ポップなイラストを選んであまり暗くならないようにしました!
2つ目 お店を探すスワイプ画面
*以下引用
ターゲット よく外食する働き盛りの20代

感想(振り返り)
この画面に載せる情報は必要最低限にして認知の負荷を下げました。
気になったら詳細を押して詳しく中身が見られるようになる、という想定です。
色は食に関することなので、安心感を与える緑にしてみました。
今思うと、カテゴリー選択などこの画面からできるようにしてみても良いのかもしれません。
3つ目 ECサイトのカート内の画面
*以下引用
ターゲット 新しい物好きな35歳主婦

感想(振り返り)
ショッピングカートの画面ということで、自分が今何をカートに入れているのか一目でわかるようにしています。
また、個数変更ボタンや、削除ボタンをつけていますが誤タップしないように間隔を空けています。
さいごに
今回もUIを作成してみました。このままコツコツと制作を続けていきます!
次回も投稿するのでよろしくお願いします🌸