スーギー｜UIデザイナー

フリーランスのUIデザイナー https://design-libero.studio…

スーギー｜UIデザイナー

フリーランスのUIデザイナー https://design-libero.studio.site/

Daily UI（音声SNSアプリ）DAY2-3

こんにちは！スーギーです！ 最近ありがたいことにデザインのお仕事が忙しく、言い訳になりますが、 少しnoteの更新が空いてしまいました💦 気を取り直して学びや気づきを綴っていきます🔥 今回は先日作った音声SNSアプリのフィード画面をBONO(https://www.bo-no.design/)にてカイクンさん(@takumii_kai)にフィードバックをいただいたので、その内容をまとめていきます。 フィードバックの内容 前回デザインしたフィード画面 フィードバック頂い

スーギー｜UIデザイナー

    • Daily UI（音声SNSアプリ）DAY2-2

      今回で4回目の記事になります！ 日記嫌いだった私ですが3日坊主の壁を越えました！！ では早速UIデザイン作成の内容を記事にまとめていきたいと思います。 ●FIgmaデータはこちら https://www.figma.com/file/gHOGz29ZZhwZDfuEqmhLXm/DailyUI-SNS%E3%82%A2%E3%83%97%E3%83%AA?node-id=148%3A2867 ●プロトタイプはこちら https://www.figma.com/proto

      スーギー｜UIデザイナー

      • Daily UI （音声SNSアプリ）DAY2-1

        こんにちは、スーギーです！ さっそくデザイン中の思考を文字にしていきたいと思います。 今回デザインを作成する画面は投稿フィード画面です！SNSアプリでは核となる画面ですので気合をいれてデザインしていきます🔥🔥🔥 UIリサーチリサーチを行なったアプリは… ・Twitter ・stand.fm ・Spotify ・Voicy 以上の4つになります。 今回の画面ではオブジェクトが投稿(音声)というのは決まっているのでオブジェクト指向UIのフレームワークに当てはめて考察しました！

        スーギー｜UIデザイナー

        • Daily UI （音声SNSアプリ）DAY1-2

          こんにちは、スーギーです！ 引き続き音声SNSアプリのUIデザインについてまとめていきたいと思います。 前回UIリサーチの末まとめたラフスケッチがこちら… 実際のデザインデータは下記にまとめておりますので、良かったら覗いてみてください👀✨ ●Figmaデータ ●プロトタイプ ターゲット今回はペルソナまで深く落とし込んでおりませんが、ユーザーに下記のようなターゲット層を仮定してデザインをしていきます。 ・20〜30代の男女 ・新しいアプリなど流行に敏感 ・通勤やトレー

          スーギー｜UIデザイナー

        Daily UI（音声SNSアプリ）DAY2-3

        スーギー｜UIデザイナー

        マガジン

        • UIUX関連
          1本

        記事

          Daily UI （音声SNSアプリ）DAY1-1

          こんにちはスギモトです！（SNS等ではスーギーと名乗らせてもらってます）2022年の抱負はUI/UXのスキルを尖らせることです✨ そのため、普段の気づきや学びを少しづつnoteにまとめていきたいと思います！ 学生の頃、一番嫌いな宿題は日記や感想文でした…（今もだけど） 読みづらい所も多々あると思いますがご容赦ください🙏 それではさっそく、カイクンさんの運営されているコミュニティBONOでの学び、アウトプットを綴っていきたいと思います！ 音声SNSアプリの新規登録画面UIのフ

          スーギー｜UIデザイナー

          Daily UI （音声SNSアプリ）DAY1-1

          スーギー｜UIデザイナー

          STUDIO 〜ルパン風タイトルアニメの作り方〜

          それでは早速、ダレトクな「STUDIO -ルパン風タイトルアニメーション-」の解説をしていきたいと思います。 構造は至ってシンプル！ レイヤーは下記のような感じです！ ↓ 見切れているので続き… ↓ それでは「ル」のBoxから解説します。 ・「ル」のBoxの中にTextがあり、『ル』と記入してあります。（紛らわしくてすみませんw） ・配置は固定配置 ※下記の画像では分かりやすいように『ル』の文字を見せるため重ね順が2になってます。実際は1で大丈夫です！ ↓ 「ル」のB

          スーギー｜UIデザイナー

          STUDIO 〜ルパン風タイトルアニメの作り方〜

          スーギー｜UIデザイナー

          STUDIOアニメーション〜バウンドアニメーションの作り方〜

          ポートフォリオに使ってある「バウンドアニメーション」の作り方の説明です。 ◆構造まずはザックリと構造を説明します！ レイヤーはこんな感じです。 図で表すと下記のようになります。 Box（水色）の中でアニメーションが動くようになっています。 ↓ まずBox（水色）の中でバウンド1が動きます。 ↓ 続いてバウンド1の中でバウンド2が動きます。 ↓ 最後にバウンド2の中でバウンド3が動きます。 ↓ そのためまずは下記のように要素を組みます。 ※ロゴが傾いているのは後ほ

          スーギー｜UIデザイナー

          STUDIOアニメーション〜バウンドアニメーションの作り方〜

          スーギー｜UIデザイナー