デザインスキルの向上を図るために100日間かけて制作しているDaily UI。せっかくなので、10作品ごとに作品を紹介していきます。
制作時間はだいたい30分を目処に。今回は#021〜#030を簡単に紹介していきます。
#021 Home Monitoring Dashboard
21日目はホームモニタリングダッシュボードということで、外にいながら家の電気を管理するアプリをイメージしました。
以前15日目で作ったボタンアニメーションを意識して、作成しました。
#022 Search
22日目は検索画面。
ただデザインを作るだけでは寂しくなりそうだったので、アニメーションで動きをつけました。
#023 Onboarding
23日目はオンボーディング画面、つまりチュートリアル画面的な意味だと思います。
5日目に作成したアプリアイコンのチュートリアルにトンマナを合わせて作りました。
#024 Boarding Pass
24日目は搭乗券。
実際に台湾へ行った際の搭乗券を思い出しながら、作成しました。
一目見てパッと情報が入ってきやすいように。
#025 TV App
25日目はTV App。
ピックアップ映画の選択に合わせて背景も切り替わるように。
#026 Subscribe
26日目はSubscribe、つまり購読。
YUTOLOGのメール購読画面をイメージしてトンマナが合うように作成しました。
#027 Dropdown
27日目はドロップダウン。
実際に動きがあったほうがイメージがしやすいので、In Vision Studioにて作成。ファーストビュー全体を作ってしまったので、メニュー部分の動きが小さくなってしまいました。
#028 Contact Us
28日目はお問い合わせフォーム。
27日目に作成したサイトのお問い合わせ画面をイメージして作成しました。
#029 Map
29日目はMap画面。
検索は、バーではなく、開閉式にして地図の表示される範囲を広くし、マップの見やすさを考えて作成しました。
#030 Pricing
30日目はPricing。
お題がざっくりしているので制作イメージが難しかったのですが、Spotifyのようなストリーミング配信サービスをイメージし、月額課金前の選択画面を作成しました。
まとめ
#021〜#030を終え、残りはあと70個。今回は動きをつけたアニメーションの制作が2つあり、少しずつIn Vision Studioの使い方も分かってきました。
Daily UIはデザインスキル向上の他にも、XDやSketch、In Vision Studioなどの使い方も同時に学んでいけるので面白い。
お題が似たようなものも出始めてきたので、デザインのバリエーションを増やしていきたい。
