さる

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

さる

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

DailyUI #082 フォーム

1.DailyUI#082のお題82日目のお題は「フォーム」。 マッサージ店の予約フォームを制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・メニュー選択→日時選択→確認→完了の流れで進ことがわかるよう、プログレスインジケーターを入れる ・近い日にちを選びたい場合と、少し先の予約をしたい場合があるのでカレンダーアイコンを入れる ・選択した日の予約可能な時間帯がわかりやすいよう、1時間ごとに列を分けてボールド表示に ・予約に必要

さる

    • DailyUI #081 ステータスの更新

      1.DailyUI#081のお題81日目のお題は「ステータスの更新」。 ビジネス用のコミュニケーションツールにおける自分のステータス更新画面を想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことステータスをテキストフィールドで入力するか、選択肢の中から選択することができる ステータスの表示時間の設定ができるようにした 5.反省点アカウント設定画面の”ステータスを更新する”はボタンなのですが、テキストフィールドに見えるの

      さる

      • DailyUI #080 日付ピッカー

        1.DailyUI#080のお題80日目のお題は「日付ピッカー」。 宿泊予約アプリの日付選択画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことチェックイン日とチェックアウト日の表記を入れて確認しやすいように リセットボタンを押して選択のやり直しができる 今日の日付を線で囲んでわかるように 5.反省点リセットボタンの位置が中途半端で、存在に気付きづらいかもと思いました。OKボタンのテキストと同じ高さにした方が分かりやす

        さる

        • DailyUI #079 旅程

          1.DailyUI#079のお題79日目のお題は「旅程」。 旅程管理アプリの画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと複数人で共有できることを想定 1日ごとにタブ切り替えでその日の旅程を確認できる 予定時刻通りにスケジュールをこなせない場合もあるので、完了した行程はユーザー自身がチェックマークを入れて記録できるように 行く場所のマップをリンクで貼り付けられる（押すとマップが開く） 各行程をタップするとハーフ

          さる

        DailyUI #082 フォーム

        さる

          DailyUI #078 招待

          1.DailyUI#078のお題78日目のお題は「招待」。 架空のビジネスチャットアプリの招待メール画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたことなんのサービスからの招待なのかが一目でわかるように上部にロゴを入れる はじめに招待されたことを明示するテキストを入れる 誰に招待されたのかを明確にして安心感を与えるために招待した人のアイコンを入れる すでにアカウントを持っている人とそうでない人のリンクを分ける 無料で

          さる

          DailyUI #078 招待

          さる

          DailyUI #077 Thank youページ

          1.DailyUI#077のお題77日目のお題は「Thank youページ」。 ECアプリの注文完了画面を制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・ユーザーが気になるであろうお届け予定日を目立つように表示する ・注文内容が間違っていないか確認できるように詳細確認ボタンを作る ・キャンセルや返品交換はそれぞれリンクを設置して目的別に内容を確認できるように ・お気に入りに入れている商品などをおすすめ表示して買い忘れを防ぐ＆

          さる

          DailyUI #077 Thank youページ

          さる

          DailyUI #076 読み込み中

          1.DailyUI#076のお題76日目のお題は「読み込み中」。 読み込み中の待ち時間が楽しくなるようなデザインを考えるとのことだったので、AIチャットアプリの返信待ちの時間に表示されるアニメーションを考えました。 本当はGIFを作りたかったのですが、私には難しかったのでイメージ画像のみです。 2.ざっくりワイヤー 3.制作したデザイン 顔文字のアイコンの口角が上がり、花火のようなキラキラが出てくるアニメーションがループされるイメージです。 4.デザインする上で考え

          さる

          DailyUI #076 読み込み中

          さる

          DailyUI #075 事前注文

          1.DailyUI#075のお題75日目のお題は「事前注文」。 モバイルオーダーができるコーヒー専門店のアプリ画面を制作しました。 今回はCRISP SALAD WORKSのアプリ画面を参考にしています。 2.ざっくりワイヤー 3.制作したデザイン お店を探す画面を制作しました。 4.デザインする上で考えたこと店舗ごとの待ち時間をボールドで表示して、待ち時間を把握した状態で店舗選択ができるようにして時短を重視している人にも使ってもらいやすくする。 マップ上で好きな

          さる

          DailyUI #075 事前注文

          さる

          DailyUI #074 アプリのダウンロード

          1.DailyUI#074のお題74日目のお題は「アプリのダウンロード」。 個人で制作したチャットアプリのダウンロードページを想定して制作しました。 2.ざっくりワイヤー今回はワイヤーなしです。 3.制作したデザイン 4.デザインする上で考えたこと・アプリの機能を伝える3行のキャッチコピーを添えて、どんなアプリなのかがわかるように ・QRコードを読み込めばスマホから簡単にインストールできるように ・アプリのコア画面のスクリーンショットで概要を想像しやすくした ・アプリ

          さる

          DailyUI #074 アプリのダウンロード

          さる

          DailyUI #073 仮想現実

          1.DailyUI#073のお題73日目のお題は「仮想現実」。 VRで体験する仮想空間の美術館を想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 美術館の画像は拾ったものを使用しています。 4.デザインする上で考えたこと作品近づくと作品の音声解説を聞くことができる。解説の気になったところを再度聞き直すことができる 次の作品がどこにあるのか、わかりやすい目印を入れた 5.反省点VRを体験したことがないので想像を交えて制作しました。なので、現実的で

          さる

          DailyUI #073 仮想現実

          さる

          DailyUI #072 スライダー

          1.DailyUI#072のお題72日目のお題は「スライダー」。 スライダーとは、あらかじめ定められた範囲の数値を選択させたい時に使用する選択フォームです。 ファッション通販アプリ内の商品を値段で絞り込める機能をデザインしました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと探したい価格帯をざっくり絞りたいときに使うことを想定して、下限と上限それぞれを感覚的に動かして範囲指定できるようにした。 5.反省点すごく重大なミスだったのですが、

          さる

          DailyUI #072 スライダー

          さる

          DailyUI #071 スケジュール

          1.DailyUI#071のお題71日目のお題は「スケジュール」。 googleカレンダーを参考に制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・右上の表示切り替えボタンで「1日」、「週」、「月」の表示を切り替えられるようにした。 ・現在時刻を色つきの線で表示して、大体今何時ごろで次のスケジュールまでにどれくらい時間があるのかを把握しやすいようにした。 ・時刻を過ぎたスケジュールは色が薄くなる想定 ・画面を横にスワイプするか

          さる

          DailyUI #071 スケジュール

          さる

          DailyUI #070 イベントリスト

          1.DailyUI#070のお題70日目のお題は「イベントリスト」。 遊園地のHP内イベントページを想定して制作しました。 2.ざっくりワイヤー 3.制作したデザイン 4.デザインする上で考えたこと・イベントの内容によっては小さいお子さんや車椅子での利用が難しいものもあると考え、対象の人があらかじめ条件を絞って検索できるよう絞り込み機能をつけた ・各イベントのカード左下に対応している条件のアイコンを入れた ・現在開催中のものとこれから開催予定のものを絞り込めるラベルを

          さる

          DailyUI #070 イベントリスト

          さる

          DailyUI #069 トレンド

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

          さる

          DailyUI #069 トレンド

          さる

          DailyUI #068

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

          さる

          DailyUI #068

          さる

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

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

          さる

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

          さる