
Daily UI Challenge #008-013 〜独学UIUXデザイン〜
こんばんは、リケジョサラリーマンのここです。
#社会人5年目 #外資系企業勤務 #エンジニア
#旅行好き #日中カップル #国際結婚 #UIUXデザイン勉強中
今年からずーっと勉強しようしようと思いながら、
本気で頑張れていなかったデザインの勉強を始めました。
目標は年内にUIUXデザイナーとして案件に応募できるレベルになることです。
その最初のステップとして、Daily UIというものに取り組んでいます。
毎日一つお題が届き、それを100日継続するというものです。
全然Dailyには完成していませんが(笑)
今日は #008 - #013 をシェアしたいと思います。
前回の記事でも宣言しているのですが、#008以降はオリジナリティーというのを意識して作ってみました。
#008 404 page
404 pageというのはいわゆるエラー画面です。
Dribbbleで検索してみると、
アイデアに富んだ個性豊かなデザインが出てきて楽しかったです。

🔹Learning
画像生成AIでイラストを作る
右上に浮かんでいるサルはAIに作ってもらった画像です。
「空に飛んでいるサル」と入力してもなかなかイメージ通りのものが出来ず苦労しました。オリジナルデザイン
これは宣言通り、オリジナルデザインです。
もちろん色々と参考にしましたが、トレースではなくオリジナルを作ることが出来ました。
#009 Music Player & #010 Social Share
#009 #010は同じデザインベースで作りました。
音楽再生アプリの再生画面とシェアする際の画面デザインです。

🔹Learning
背景のぼかしかた
画面背景にすごーくぼかしたテイラーの写真があるのですが、
これの方法を学びました。Glassmorphism
別の案件で興味を持ってやり方を調べて透けガラスのデザインをSocial Shareの各アイコンに使ってみました。
#011 Flash Message (Error/Success)
フードデリバリーアプリの会員登録をイメージして作ってみました。

🔹Learning
Flash messageのデザイン
お題そのものですが、フラッシュメッセージのデザインにはどのようなものがあるのか、ということを学びました。
#012 E-Commerce Shop (Single item)
アパレルショップの商品ページを作ってみました。
いくつかのブランドページを参考に、、、

🔹Learning
各構成要素の配置
写真の配置をどうするか、とても悩みました。
いくつかパターンを作ってみて、バランスが良くなったのがこの配置です。文字サイズ・フォント選定
文字サイズ、フォント選定も何度かやり直しました。
アパレルなのでおしゃれ感を出したい、けど、見やすさも欲しいというところが難しかったです。
#013 Direct Messaging
シンプルな画面ですが、ToDoやPinnedを作って使いやすさを考えてみました。

🔹Learning
ちょっとした工夫
to-do, pinnedの表示などちょっとした工夫を考えてみました。シンプル イズ ベスト
色々と試しましたが、imassageのようなシンプルなデザインがベストだなというところに辿り着きました。
最後まで見ていただきありがとうございました!
このペースだと目標の10月までに100完成が厳しそうなので、
ペースを上げてやっていきたいと思います!
以上
過去のもの↓
いいなと思ったら応援しよう!
