Daily UI #051 〜 #060まとめ


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

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

前回までのDaily UI #041 〜 #050まとめ

#051 Press Page

051

51日目はPressページ。

最近、グラデーションの美しい表現方法を勉強中。

#052 Logo Design

052

52日目はロゴデザイン。

Daily UIのロゴをイメージして作成しました。

#053 Header Navigation

53日目はヘッダーナビゲーション。

25日目の作品を元に、XDのアップデートで搭載された自動アニメーション機能で、ハンバーガーメニューを押した際の動きを表現。

#054 Confirmation

054

54日目は、Confirmation(確認画面)。

飲食店の予約確認をイメージして作成しました。

#055 Icon Set

Daily 055

55日目はアイコンセット。

FigmaもXDのようにプラグインでアイコンを簡単に挿入できるようになって欲しい。

#056 Breadcrumbs

056

56日目はBreadcrumbs(パンくずリスト)。

僕、自分のブログでもそうなのですが、パンくずリストは記事コンテンツ下に配置しています。記事上部にあっても個人的にはあんまりメリットを感じたことがないので。

#057 Video Player

Daily 057

57日目はVideo Player。

画面サイズが大きいiPhoneXに対応したビデオがどんどん普及して欲しい。

#058 Shopping Cart

058

58日目はShopping Cart。

ごちゃついて確認しづらいECサイトをたまに見かけるので、個人的にはシンプルで見やすいUIが好み。

#059 Background Pattern

059

59日目はバックグラウンドパターン。

お題がかなり雑だったので、今回はPhotoshopを使いグラフィックデザインを作成しました。

#060 Color Picker

060

60日目はカラーピッカー。

FigmaのUIが好きなので、Figmaを参考に。

まとめ

とうとうDaily UIも60日が経過しました。1月末までに100個終わらせたいので、毎日1個じゃ間に合わないですね。。

引き続きDaily UIを頑張っていきます。

前回までのDaily UI #041 〜 #050まとめ