さる

UIデザイナーを目指して勉強中のデザイン初心者です📖

さる

UIデザイナーを目指して勉強中のデザイン初心者です📖

DailyUI #069 トレンド

1.DailyUI#069のお題69日目のお題は「トレンド」。 ファッション系の通販アプリのトレンドページを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・気になるアイテムごとにトレンドを見られるようにカテゴリーの絞り込み機能を入れた ・トレンドらしいスタイリッシュな雰囲気が出るよう、写真の縦幅はアイテムごとにバラバラにして不規則な配列に見えるようにした 5.反省点・現在絞り込みをしているのかどうかがわかりづらいかもと思い

さる

    • DailyUI #068

      1.DailyUI#068のお題68日目のお題は「フライト検索」。 googleのフライト検索画面を参考に制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・途中離脱を防ぐため、手続きにかかるステップと現在地を可視化し、ユーザーのストレスを軽減させる ・検索条件を確認しやすいよう、情報をすっきりと簡潔に表示 ・画面上部の検索条件が表示されているハーフモーダル部分は、下にスライドするとさらに詳細な条件を指定できるフィルタ画面に

      さる

      • DailyUI #067 ホテルまたはバケーション レンタルの予約

        1.DailyUI#067のお題67日目のお題は「ホテルまたはバケーション レンタルの予約」。 ホテル探しアプリのホテル詳細画面を想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと宿泊先選びで初めに確認したいのは部屋の雰囲気だと思ったので、画面上部に大きめに部屋の写真を入れました。 他の宿泊客の口コミ情報を参考にする人は多いと思うので、口コミ情報の中でも特に言及されることの多い項目をピックアップして表示しました。 施

        さる

        • DailyUI #066 統計

          1.DailyUI#066のお題66日目のお題は「統計」。 電気代を確認できるアプリの画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと現時点での電気代と今月の電気代予測両方とも確認できるようにした。予測値はあくまで目安なので”予測値”ラベルを表示した。 使用量の変化がどのくらいあるのか確認できるよう、棒グラフを使って過去の月との電気代の変化が一目でわかるようにした 当月のデータは他と色を変えて目立たせた 年間、週間

          さる

        DailyUI #069 トレンド

        さる

          DailyUI #065 メモ ウィジェット

          1.DailyUI#065のお題65日目のお題は「メモ ウィジェット」。 ウィジェットとは、ホーム画面にアプリの情報を表示する機能のことです。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことメモパッド風のデザインを意識しました アプリ自体を開く、表示されている個別メモを開く、新規メモを開く、の3つができるよう意識しました。上部のメモと書かれた青い帯状の部分をタップするとメモアプリ自体が開きます。メモのテキスト部分をタップすると、この内容の

          さる

          DailyUI #065 メモ ウィジェット

          さる

          DailyUI #064 ユーザーの選択

          1.DailyUI#064のお題64日目のお題は「ユーザーの選択」。 動画配信アプリのユーザー切り替え画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと目の負担にならないよう背景色の黒は少し明度を上げる キッズアカウントは一目見てそれとわかるようにイラストを他のアカウントと異なる仕様にした 新しくアカウントを追加したり現在のアカウントを簡単に編集できるようにボタンを設置 現在選択されているアカウントを分かりやすくする

          さる

          DailyUI #064 ユーザーの選択

          さる

          DailyUI #063 ベストオブ

          1.DailyUI#063のお題63日目のお題は「ベストオブ」。 ニュースアプリのランキング画面を制作しました。 TBS NEWS DIGのランキングUIを参照しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと1、2、3位は背景色をつけて下位と差をつける いつ更新された記事なのかがわかるよう、12時間以内の記事は○時間前と表記、それ以前の記事は更新された日付を表記 何についての記事なのかわかるよう、ジャンルをラベル表示 ジャン

          さる

          DailyUI #063 ベストオブ

          さる

          DailyUI #062 サインアップフォーム

          1.DailyUI#062のお題62日目のお題は「サインアップフォーム」。 架空のチャットアプリのサインアップフォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと目の動きを最小限に留めるため、入力項目のラベルは入力フィールドの上に配置する プレースホルダーをラベルとして活用しない 入力が完了した項目からバリデーションチェックを行うことでユーザーにストレスを与えない 5.反省点最初の画面のロゴ、イラスト、テキストのバ

          さる

          DailyUI #062 サインアップフォーム

          さる

          DailyUI #061 クーポン

          1.DailyUI#061のお題61日目のお題は「クーポン」。 ファストフード店のアプリ画面を想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと店舗利用とモバイルオーダー利用をタブ切り替えできるようにして利用目的別に商品を選びやすくした 2列表示で商品写真を見やすく 元値→値引き後の値段という表記にすることでよりお得感を感じられるように 有効期限を値段の下に入れて目に入りやすく 利用条件の説明文をクーポン内に入れ

          さる

          DailyUI #061 クーポン

          さる

          DailyUI #060 カラーピッカー

          1.DailyUI#のお題60日目のお題は「カラーピッカー」。 figmaのカラーピッカーを参考に制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと色相を変えられるエリア（バー）と不透明度を変えられるエリアを設ける 彩度と明度を変えられる広めのエリアを上部に配置 RGB、HEX、HSL、HSBをドロップダウンで選択できる スポイト機能を大きめのボタンにして押しやすく カラーの保存ボタンを入れて、繰り返し同じ色を使えるよう

          さる

          DailyUI #060 カラーピッカー

          さる

          DailyUI #059 背景パターン

          1.DailyUI#059のお題59日目のお題は「背景パターン」。 イラストレーターで背景パターンを作りました。 2.ざっくりワイヤー今回はワイヤーフレームなしで制作しました。 3.制作したデザイン 4.デザインする上で考えたこと七宝繋ぎのパターンは作り方を紹介しているサイトを参考に制作しました。背景に使うものなので線の色を控えめにして、情報を邪魔しないように意識しました。 5.反省点カラフルな図形のパターンは図形の間隔を変えると見え方が大きく変わるので、程よい間隔

          さる

          DailyUI #059 背景パターン

          さる

          DailyUI #058 ショッピングカート

          1.DailyUI#058のお題58日目のお題は「ショッピングカート」。 ECアプリのショッピングカート画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 「制作したデザイン1」の画面を下にスクロールした画面です。 4.デザインする上で考えたこと下記の点を意識して制作しました。 商品名、サイズ、数量、価格をわかりやすく表記 合計金額と購入手続きはこちら、の表示を画面下に固定表示してすぐに購入手続きに進めるようにする 注文件数、商品合計金額、送料、

          さる

          DailyUI #058 ショッピングカート

          さる

          DailyUI #057 ビデオプレーヤー

          1.DailyUI#057のお題57日目のお題は「ビデオプレーヤー」。 動画配信アプリの再生画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと実際に動画配信アプリを使ってみて、アイコンのみだと意味が伝わりづらいと感じたので、アイコンの横にテキストを入れて、押した時の動作が伝わるようにしました。 10秒スキップができる機能が便利だと感じるので取り入れました。 5.反省点右上のキャストアイコンにもテキスト表示を入れた方が良

          さる

          DailyUI #057 ビデオプレーヤー

          さる

          DailyUI #056 パンくずリスト

          1.DailyUI#056のお題56日目のお題は「パンくずリスト」。 パンくずリストとは、Webサイトのページ階層をリスト化して表示したもので、Webページを訪れたユーザーが、現在サイト内のどこ（どのページ）を閲覧しているかを示すナビゲーションの役割を担う機能があります。 架空の通販サイトのパンくずリストを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことユーザ自身の現在位置と辿ってきたルートがわかりやすいよう、現在地の文字色の

          さる

          DailyUI #056 パンくずリスト

          さる

          DailyUI #055 アイコンセット

          1.DailyUI#055のお題55日目のお題は「アイコンセット」。 フィットネスアプリのアイコンセットを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと制作する上で下記の点を意識しました。 ・統一感を持たせる →全体的に線に丸みを持たせて同じトーンになるよう意識しました。 また、縦横の大きさを統一しました。 ・小さくても認識できるよう、シンプルに →内容が伝わる程度に必要最低限の線で表現しました。 5.反省点トレーニング

          さる

          DailyUI #055 アイコンセット

          さる

          DailyUI #054 確認

          1.DailyUI#054のお題54日目のお題は「確認」。 アプリのアカウント削除ダイアログ画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと警告メッセージであることが伝わるように最上部に注意喚起のアイコンを入れた アカウント削除に伴って消去されるデータの項目を箇条書きで明示する 削除ボタンは警告色で強調＆キャンセルボタンは線形にしてメリハリをつける 5.反省点キャンセルボタンの線はもっと色を薄くして線をやや太くして

          さる

          DailyUI #054 確認

          さる