Daily UI Challenge #008-013 〜独学UIUXデザイン〜

こんばんは、リケジョサラリーマンのここです。

#社会人5年目 #外資系企業勤務 #エンジニア
#旅行好き #日中カップル #国際結婚 #UIUXデザイン勉強中

今年からずーっと勉強しようしようと思いながら、
本気で頑張れていなかったデザインの勉強を始めました。

目標は年内にUIUXデザイナーとして案件に応募できるレベルになることです。

その最初のステップとして、Daily UIというものに取り組んでいます。
毎日一つお題が届き、それを１００日継続するというものです。
全然Dailyには完成していませんが（笑）

今日は #008 - #013 をシェアしたいと思います。

前回の記事でも宣言しているのですが、#008以降はオリジナリティーというのを意識して作ってみました。

#008 404 page

404 pageというのはいわゆるエラー画面です。
Dribbbleで検索してみると、
アイデアに富んだ個性豊かなデザインが出てきて楽しかったです。

#008 404 page

🔹Learning

• 画像生成AIでイラストを作る
  右上に浮かんでいるサルはAIに作ってもらった画像です。
  「空に飛んでいるサル」と入力してもなかなかイメージ通りのものが出来ず苦労しました。

• オリジナルデザイン
  これは宣言通り、オリジナルデザインです。
  もちろん色々と参考にしましたが、トレースではなくオリジナルを作ることが出来ました。

#009 Music Player & #010 Social Share

#009 #010は同じデザインベースで作りました。
音楽再生アプリの再生画面とシェアする際の画面デザインです。

#009 Music player & #010 Social share

🔹Learning

• 背景のぼかしかた
  画面背景にすごーくぼかしたテイラーの写真があるのですが、
  これの方法を学びました。

• Glassmorphism
  別の案件で興味を持ってやり方を調べて透けガラスのデザインをSocial Shareの各アイコンに使ってみました。

#011 Flash Message (Error/Success)

フードデリバリーアプリの会員登録をイメージして作ってみました。

#011 Flash Message

🔹Learning

• Flash messageのデザイン
  お題そのものですが、フラッシュメッセージのデザインにはどのようなものがあるのか、ということを学びました。

#012 E-Commerce Shop (Single item)

アパレルショップの商品ページを作ってみました。
いくつかのブランドページを参考に、、、

#012 E-commerce shop

🔹Learning

• 各構成要素の配置
  写真の配置をどうするか、とても悩みました。
  いくつかパターンを作ってみて、バランスが良くなったのがこの配置です。

• 文字サイズ・フォント選定
  文字サイズ、フォント選定も何度かやり直しました。
  アパレルなのでおしゃれ感を出したい、けど、見やすさも欲しいというところが難しかったです。

#013 Direct Messaging

シンプルな画面ですが、ToDoやPinnedを作って使いやすさを考えてみました。

#13 Direct massaging

🔹Learning

• ちょっとした工夫
  to-do, pinnedの表示などちょっとした工夫を考えてみました。

• シンプル イズ ベスト
  色々と試しましたが、imassageのようなシンプルなデザインがベストだなというところに辿り着きました。

---

最後まで見ていただきありがとうございました！

このペースだと目標の10月までに100完成が厳しそうなので、
ペースを上げてやっていきたいと思います！

以上

過去のもの↓