見出し画像

DailyUI #061 クーポン



1.DailyUI#061のお題

61日目のお題は「クーポン」。
ファストフード店のアプリ画面を想定して制作しました。

2.ざっくりワイヤー


ざっくりワイヤー

3.制作したデザイン


制作したデザイン

4.デザインする上で考えたこと

  • 店舗利用とモバイルオーダー利用をタブ切り替えできるようにして利用目的別に商品を選びやすくした

  • 2列表示で商品写真を見やすく

  • 元値→値引き後の値段という表記にすることでよりお得感を感じられるように

  • 有効期限を値段の下に入れて目に入りやすく

  • 利用条件の説明文をクーポン内に入れると情報が多くなってしまうのでリンクにした

5.反省点

改めて見ると、タブ切り替えの表示がわかりづらかったです。選択中の方の背景色も赤色にするなどしても良かったかなと思いました。

利用条件へのリンクですが、下線が引かれているだけでリンクだと想起できるので横の矢印は不要だったかなと思いました。

6.おわりに

既存のアプリを参考にデザインしましたが、いざ完成してみると野暮ったさが出てしまいました。テキストの大きさにばらつきがあったり余白の取り方がうまくいっていなかったりするのかなと思うので、UIをトレースして研究してみようと思いました。


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