Daily UI #011 〜 #020まとめ


デザインスキルの向上を図るために100日間Daily UI作っていくことにしました。せっかくなので、10作品ごとに記事で紹介していきます。

制作時間はだいたい30分を目処に。今回は#011〜#020を簡単に紹介していきます。(ちなみに、制作に使われている写真は全て自分で撮影したものを使用しています。)

前回までのDaily UI #001 〜 #010まとめ

#011 Flash Message

011

11日目はフラッシュメッセージ。iPhoneの指紋認証(Face ID)を想定。視覚的にSuccessが分かりやすいように、色は緑を使用しました。

#012 E-Commerce Shop

012

12日目はイーコマースショップの制作。

よく、ゴチャゴチャしていて商品の情報が分かりにくいECサイトを見かけるので、シンプルにして購入しやすいように。

#013 Direct Messaging

013

13日目はダイレクトメッセージ画面。

相手と自分のメッセージを視覚的に判断しやすいように、色分けをしました。既読機能は個人的には必要ないので削除。

#014 Countdown Timer

014

14日目はカウントダウンタイマー。

こちらも視覚的に残り時間が分かりやすいように、数字の他にサークルで残り時間を表現しました。

#015 On/Off Switch

015

15日目は、オン/オフスイッチ。

InVision STUDIOにて制作し、アニメーションで切り替わりの動きを表現しました。

#016 Pop-Up / Overlay

016

16日目はポップアップ画面。

11日目のイーコマースショップの新作アイテムを想定したポップアップ画面を作成。トンマナを合わせつつ、アイテムを大きめに表示して、目を引くように。

#017 Email Receipt

017

17日目はメールレシート。16日目の商品購入を想定した制作。

レシートもゴチャついて情報が見にくいと感じるレシートをたまに見かけるので、シンプルに理解しやすいデザインに。

#018 Analytics Chart

018

18日目はアナリティクスチャート。視覚的に分かりやすいように、PV数をグラフで表現。左右のスワイプで週間、デイリーとすぐに切り替えられるように。

#019 Leaderboard

019

19日目はリーダーボード。ゲームのランキングをイメージして作成しました。

#020 Location Tracker

020

20日目はロケーショントラッカー。Amazon Prime Nowやピザのデリバリーをよく利用するので、それらを想定したデザイン制作。

あと何分で到着するのかリアルタイムで分かると便利。

まとめ

daily ui

#011〜#020を終え、残りはあと80個。#011〜#020は、想定していた制作時間30分よりも時間がかかってしまった作品がいくつかありました。

時間を意識しつつ、クオリティの高いデザインを作っていけるようになりたい。

前回までのDaily UI #001 〜 #010まとめ