zoe

UIデザイン勉強中✏️

zoe

UIデザイン勉強中✏️

最近の記事

【BONO】UIビジュアル基礎  TRY6まとめ

こんにちは!zoeです。 今回は「UIビジュアル基礎」のTRY6を進めました! TRY6を進めた中での気づき・学びをまとめていきます。 お題:「TRY6:UI構造を意識してリデザインしよう!」 まずはUIのBefore After: Before:After:大きく3つの観点から振り返ります。 1.ナビゲーション 2.余白 3.装飾 1.ナビゲーションナビゲーションの使われ方 ・ナビゲーションは左と上の組み合わせで成り立っていることが多い。 ・YouTube、Sp

    • 【BONO】UIビジュアル基礎  TRY5まとめ

      こんにちは!zoeです。 引き続きデザインコミュニティーBONOにあるコンテンツ 「UIビジュアル基礎」を進めています。 今回はお題の「TRY5:レスポンシブなホームUIをデザイン」 を進めたので学んだことをまとめていきます! 取り組んだお題 PC用のホームUIをSP用とタブレット用のデザインに展開する リデザイン前(PC用のホームUI) リデザイン後(SP用とタブレット用のホームUI) 学んだ点を以下にまとめていきます。 サイドバーについての学びSPのサイドバ

      • 【BONO】UIビジュアル基礎  TRY4まとめ

        こんばんは!zoeです。 数週間前に行ったTRY4UIデザインの学びを、復習も兼ねて振り返っていきたいと思います。 取り組んだお題 「TRY4:スマホの動画詳細UIをリデザイン!」 今回は配色の考え方(個人的にとても気になっていたところ)を学び、リデザインを行いました。 動画詳細UIリデザインのBefore After リデザイン後のUIに至るまで、 以下2ステップを踏みました。 1. 構造と優先順位の整理動画詳細UIを大きく4つに分けて考えました。 1.動画(メイ

        • 【BONO】UIビジュアル基礎  TRY3まとめ

          こんにちは、zoeです。 TRY3お題:動画詳細UIをリデザイン 「サイズの定義」に着目してUIのリデザインを行いました。 余白・フォント・オブジェクトのサイズごとの役割を定義し、UIに反映しました。 結果 進め方 ①構造の整理 ②サイズルールの定義 ③装飾要素の調整 ①構造の整理 「伝えたいこと」を整理するため、 始めに情報のグループ分けを行います。(近接の原理!) サイドバーを除いて、ざっくり以下の5グループに分けました。 動画 動画の補足情報や動画に付

        【BONO】UIビジュアル基礎  TRY6まとめ

        • 【BONO】UIビジュアル基礎  TRY5まとめ

        • 【BONO】UIビジュアル基礎  TRY4まとめ

        • 【BONO】UIビジュアル基礎  TRY3まとめ

          【BONO】UIビジュアル基礎 TRY2まとめ

          こんばんは!zoeです。 BONOの「UIビジュアル基礎」のTRY2を進めたので、 行ったこと、学んだこと、気づいたことを記録に残します。 今回のお題: 「ホームUIをリデザイン」 リデザイン前のUI リデザイン後のUI 今回は、次の3点を意識しながら デザイン動画共有サービスのホームUIを作っていきました。 意識したこと①余白の定義 規則性を持って余白を使いたかったため、 余白ごとに用途を定義してみました。 大きいセクション間の余白:36px(例ヘッダー部と

          【BONO】UIビジュアル基礎 TRY2まとめ

          【BONO】UIビジュアル基礎  TRY1まとめ

          こんにちは!zoeです。 デザインコミュニティーBONOにあるコンテンツ 「UIビジュアル基礎 TRY1:コンセプトを考えてリデザインしよう!」 を進めたので、やったことを備忘録的に残します。 取り組んだお題 デザイン動画共有サービスのプロフィールUIをリデザイン リデザイン前のプロフィールUI リデザイン後のプロフィールUI リデザイン後のUIに至るまで、 以下ステップを踏みました。 1. サービスを使うシーンを洗い出すやったこと: ・5W1Hを用いてサービスを

          【BONO】UIビジュアル基礎  TRY1まとめ