miiiki

UIの勉強記録ブログです。 Instagramで海外のUIデザイナーさんが作ったサイト…

miiiki

UIの勉強記録ブログです。 Instagramで海外のUIデザイナーさんが作ったサイトに感動して、自分で作ってみたいと思い勉強を始めました。

【作成ログ】音声SNSを通して”UIビジュアル”を学ぶ

BONOというデザインコミュニティで学んだ、UIビジュアル「音声SNS」の制作過程をまとめていこうと思います。1つ1つが初めて学ぶことばかりでしたのでとても長〜い文章になっています。最後までお付き合いいただけると嬉しいです。 課題概要：SNSUIの主要6画面をデザインし、UIの基礎パターンを学ぶ 1. 新規登録画面：新規登録、プロフィール設定、ログインなど 2. 投稿フィード画面：ホームに該当する投稿一覧 3. 投稿入力画面：音声×文字で投稿するときの画面やアクション 4.

miiiki

    • UIビジュアル｜デザイナーがやってる見た目の基本【UI構造編】

      今回はUIの醍醐味ロジカルなデザインの方法を学びました。 いかにシンプルにさりげなくユーザーが使いやすいようにデザインを配置していくのか、何も知らないでアプリを触っていた頃とはだいぶ見方が変わってきました。 今回のお題は、これを↓階層やシャドーを意識してリデザインしていきます。 さらに作成ボタンを押した後の画面も作成していきます。 2024年5月よりBONOというデザインコミュニティにて、未経験からデザイナーを目指して勉強中です。 UIを構成するブロックと階層表現につ

      miiiki

      • UIビジュアル｜デザイナーがやってる見た目の基本【レスポンシブ編】

        ウェブデザインで避けては通れないレスポンシブ。 それを改めて学べたのでまとめていきます。 2024年5月よりBONOというデザインコミュニティで、未経験からデザイナーになるべく勉強中です。 今回のお題は、これをスマホとタブレットサイズにリデザインしていきます。 レスポンシブの知識｜ディスプレイ世界におけるサイズ構成私たちが扱うデバイスは大きく分けて、PC・タブレット・スマホの３種類です。 そもそも私たちが画面を通して見ているものは小さな光の集合体です。 画面サイズが

        miiiki

        • UIビジュアル｜デザイナーがやってる見た目の基本【配色編】

          前回はUIにおけるレイアウトの考え方を学びました。 今日はどの色を選べばいいのか配色について学んでいきます。 2024年5月からBONOというデザインコミュニティで、未経験からデザイナーになるべく勉強中です。 今回のお題は、↓メインカラーがふんだんに使われごちゃごちゃしたこれをリデザインしていきます。 カラーを使うテクニック３つかいくんさんからカラーを使うときの考え方をいろいろ教わりましたのでまとめていきます。 カラーテクニック①テーマカラーは決めておく（色数は増やさ

          miiiki

        【作成ログ】音声SNSを通して”UIビジュアル”を学ぶ

        miiiki

        • UIビジュアル｜デザイナーがやってる見た目の基本【UI構造編】

          miiiki

        • UIビジュアル｜デザイナーがやってる見た目の基本【レスポンシブ編】

          miiiki

        • UIビジュアル｜デザイナーがやってる見た目の基本【配色編】

          miiiki

          UIビジュアル｜デザイナーがやってる見た目の基本【レイアウト編】

          前回はビジュアル面で、フォントのサイズや色のまとめ方を学日ました。今回は、余白の持たせ方などレイアウトを学んでいきます。 今回のお題 ↑このレイアウトを整えていきます。 2024年5月からBONOというデザインコミュニティにて、未経験からデザイナーになるべく勉強中です。 レイアウトで統一感を持たせようUIはおしゃれに見せたりカッコよく見せたりする以前に、伝わるかどうかがすごく大事。 それを最大限引き出してくれるのが、「レイアウト」です。 レイアウトで考えるべき項目は

          miiiki

          UIビジュアル｜デザイナーがやってる見た目の基本【レイアウト編】

          miiiki

          UIビジュアル｜デザイナーがやってる見た目の基本【ビジュアルシステム編】　＃BONO

          今回は、UIを作っていく中で避けては通れないフォントのサイズ・ボタンのサイズ・配色を統一する方法を学習しました。 タイトル通り、これらをシステム化することで作業スピードも大幅に上がるなと感じました。 今回はそのシステムをブログにまとめていきます。 2024年5月からBONOというデザインコミュニティで未経験からデザイナーになるべく勉強中です。 今回のお題　　 今回はこのサイトを手直しするという内容です。 フォントや色がバラバラなので直していきます。 見た目①フォン

          miiiki

          UIビジュアル｜デザイナーがやってる見た目の基本【ビジュアルシステム編】　＃BONO

          miiiki

          デザイナー目線でLPを作成する手順｜デザイン勉強診断LP 作成ログ #BONO

          Canvaが世にリリースされてかつデザインに正解がないからこそ、万人がデザイナーやクリエイターを名乗れる時代になりましたヨネ。よね？ でも今デザイナーのかいくんさんから学んでることは、グラフィックデザインの基礎中の基礎で、これが本当にためになる！元職場でなんちゃってデザインしてた時が恥ずかしい。 学んだことはアウトプットして残そうという趣旨なので、今日は0からLPを作成した軌跡を残していこうと思います。 2024年5月からBONOというUIデザインを学べるコミュニティで

          miiiki

          デザイナー目線でLPを作成する手順｜デザイン勉強診断LP 作成ログ #BONO

          miiiki