駆け出しデザイナーのDaily UI #002「Credit Card Checkout」

どうもとぴです。
2日目のDailyUIの記録です!



前回のDailyUIはこちら↓

Daily UI #002

2日目のお題は、「Credit Card Checkout」です。

要するにクレジットカード決済の画面をデザインしろってことですね。

まず、参考にしたサイトはNetflixです。

出典:Netflix

思いっきり僕の情報出てたので隠しました(笑)

とりあえず作るべき要素は

  • カード番号
  • 有効期限
  • セキュリティコード
  • 確定ボタン

だということが分かります。

で、実際に作ったものがこちら↓

いつものシンプル精神でまたまたシンプルな感じに仕上げました。

「続ける」ボタンからもわかる通り何かのWebサービスの登録or決済途中のUIをイメージしています。

前回#001の反省を生かし、ちょっとだけ影をつけてみました。

少しはマテリアルデザインぽくなったかな?

ちなみにマテリアルデザインについてはサルワカさんのこの記事がとても分かりやすいです。

話を戻して、今回の反省点は少しポップにしすぎたことです。決済という特性があるのでもう少しカチッとしたデザインでもよかったように思います。

他の人の#002を見てみよう!

今回も例のごとく、作成途中には他の方の作った#002のデザインは見ないようにしました。作成が終わったので、復習としてみていきたいと思います。

※偉そうに書いてますが、完全に素人の感想です。。

かっこいい…

黒とゴールドを基調とすることで、高級感が出ています。グラデーションも効果的に見えます。

画像とロゴを用いることで、視覚的に分かりやすいデザインですね!

ECサイトの決済画面でしょうか。そのまま使えそうな実用性も感じます。