Daily UI #021 〜 #030まとめ


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

制作時間はだいたい30分を目処に。今回は#021〜#030を簡単に紹介していきます。

前回までのDaily UI #011 〜 #020まとめ

#021 Home Monitoring Dashboard

021

21日目はホームモニタリングダッシュボードということで、外にいながら家の電気を管理するアプリをイメージしました。

以前15日目で作ったボタンアニメーションを意識して、作成しました。

#022 Search

search

22日目は検索画面。

ただデザインを作るだけでは寂しくなりそうだったので、アニメーションで動きをつけました。

#023 Onboarding

023

23日目はオンボーディング画面、つまりチュートリアル画面的な意味だと思います。

5日目に作成したアプリアイコンのチュートリアルにトンマナを合わせて作りました。

#024 Boarding Pass

024

24日目は搭乗券。

実際に台湾へ行った際の搭乗券を思い出しながら、作成しました。

一目見てパッと情報が入ってきやすいように。

#025 TV App

025

25日目はTV App。

ピックアップ映画の選択に合わせて背景も切り替わるように。

#026 Subscribe

026

26日目はSubscribe、つまり購読。

YUTOLOGのメール購読画面をイメージしてトンマナが合うように作成しました。

#027 Dropdown

drop down

27日目はドロップダウン。

実際に動きがあったほうがイメージがしやすいので、In Vision Studioにて作成。ファーストビュー全体を作ってしまったので、メニュー部分の動きが小さくなってしまいました。

#028 Contact Us

028

28日目はお問い合わせフォーム。

27日目に作成したサイトのお問い合わせ画面をイメージして作成しました。

#029 Map

029

29日目はMap画面。

検索は、バーではなく、開閉式にして地図の表示される範囲を広くし、マップの見やすさを考えて作成しました。

#030 Pricing

030

30日目はPricing。

お題がざっくりしているので制作イメージが難しかったのですが、Spotifyのようなストリーミング配信サービスをイメージし、月額課金前の選択画面を作成しました。

まとめ

Daily ui 021 030

#021〜#030を終え、残りはあと70個。今回は動きをつけたアニメーションの制作が2つあり、少しずつIn Vision Studioの使い方も分かってきました。

Daily UIはデザインスキル向上の他にも、XDやSketch、In Vision Studioなどの使い方も同時に学んでいけるので面白い。

お題が似たようなものも出始めてきたので、デザインのバリエーションを増やしていきたい。

前回までのDaily UI #011 〜 #020まとめ