![見出し画像](https://assets.st-note.com/production/uploads/images/85234999/rectangle_large_type_2_fab38d4c6583299a7fc8b2de6184bed3.png?width=1200)
【BONO】はじめてのUIデザイン
こんにちは!
フリーランスWEBデザイナーしているしのりんです。
UIデザインの勉強を始めたため、
その学びと記録をこちらに残していきたいと思います!
BONOとは?
YouTubeでデザインのを発信しているカイクンさんが運営しているUIとUXの学習のコミュニティです。
BONOのコミュニティリンクはこちらです。
教材動画は以下です⏬
📜はじめてのUIシリーズ
❶【プロが徹底解説】はじめてのUIデザイン#1 - 成長率10倍でUIデザインを始めるデザインチュートリアル
❷【UIをブロックで組んでますか】ヘッダーUIをデザインしよう - はじめてのUIデザイン#2
❸メッセージリストUIをデザイン【余白のサイズはルールで決める】 - はじめてのUIデザイン#3
❹UIデザインの超基本の構成を解説【デザイナーにはこう見えてます】 - はじめてのUIデザイン#4
❺【人の目線は右と左どちらから始まる?】チャットUIをデザインしよう - はじめてのUIデザイン#5
学んだこと(インプット)
・情報設計は見た目だけ良ければいいわけではない。
・UIデザインはアートではない。決まった型がある。
・基本的に8の倍数 or 4の倍数で作る
・基本的にステータスバーの縦幅は48px
・ヘッダ文字の基本サイズは16px
・ヘッダは右端、左端or真ん中
・UIはブロックで組む(ブロックを意識する)
・UIは主にナビゲーションとコンテンツで構成されている
・目線は左→右、上→下にうつる
学んだこと(アウトプット)
連絡先のUIデザインを作成しました。
参考にしたアプリ
・連絡帳(iOS標準)
ほぼトレースに近いかもです
完成したものがこちらです。
![](https://assets.st-note.com/img/1646198830810-VNbHZtDzHI.png?width=1200)
■プロトタイプ(figma)
プロトタイプまで新しく作成しました。
まとめ
今回は、UIビジュアル、情報設計の基礎ついての学習記録でした。
毎日利用している連絡帳(iOS標準)ですが、UIの目線から画面を見ることが新鮮でした。
3月も良きクリエイターライフを🕊