デザインスキルの向上を図るために100日間Daily UI作っていくことにしました。せっかくなので、10作品ごとに記事で紹介していきます。
制作時間はだいたい30分を目処に。今回は#011〜#020を簡単に紹介していきます。(ちなみに、制作に使われている写真は全て自分で撮影したものを使用しています。)
#011 Flash Message
11日目はフラッシュメッセージ。iPhoneの指紋認証(Face ID)を想定。視覚的にSuccessが分かりやすいように、色は緑を使用しました。
#012 E-Commerce Shop
12日目はイーコマースショップの制作。
よく、ゴチャゴチャしていて商品の情報が分かりにくいECサイトを見かけるので、シンプルにして購入しやすいように。
#013 Direct Messaging
13日目はダイレクトメッセージ画面。
相手と自分のメッセージを視覚的に判断しやすいように、色分けをしました。既読機能は個人的には必要ないので削除。
#014 Countdown Timer
14日目はカウントダウンタイマー。
こちらも視覚的に残り時間が分かりやすいように、数字の他にサークルで残り時間を表現しました。
#015 On/Off Switch
15日目は、オン/オフスイッチ。
InVision STUDIOにて制作し、アニメーションで切り替わりの動きを表現しました。
#016 Pop-Up / Overlay
16日目はポップアップ画面。
11日目のイーコマースショップの新作アイテムを想定したポップアップ画面を作成。トンマナを合わせつつ、アイテムを大きめに表示して、目を引くように。
#017 Email Receipt
17日目はメールレシート。16日目の商品購入を想定した制作。
レシートもゴチャついて情報が見にくいと感じるレシートをたまに見かけるので、シンプルに理解しやすいデザインに。
#018 Analytics Chart
18日目はアナリティクスチャート。視覚的に分かりやすいように、PV数をグラフで表現。左右のスワイプで週間、デイリーとすぐに切り替えられるように。
#019 Leaderboard
19日目はリーダーボード。ゲームのランキングをイメージして作成しました。
#020 Location Tracker
20日目はロケーショントラッカー。Amazon Prime Nowやピザのデリバリーをよく利用するので、それらを想定したデザイン制作。
あと何分で到着するのかリアルタイムで分かると便利。
まとめ
#011〜#020を終え、残りはあと80個。#011〜#020は、想定していた制作時間30分よりも時間がかかってしまった作品がいくつかありました。
時間を意識しつつ、クオリティの高いデザインを作っていけるようになりたい。
