📜目次
-----------------------------------------------
00:36 シリーズの内容
00:57 上達に必要なこと-なぜ作った？
03:14 やるメリット3つ
06:11 シリーズの目次07:17 必要なもの
📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------
📜Figmaの使い方が学べるシリーズはこちら
-----------------------------------------------
UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
3回目はメッセージリストをデザインします。
📜目次
-----------------------------------------------
00:52 動画の内容
01:50 アイコンを配置
03:40 テキストエリア
05:44 補足エリア
📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------
UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
2回目はヘッダーをデザインします。
📜目次
-----------------------------------------------
00:04 この動画の内容と手順
03:39 ツールバーの配置
04:52 ヘッダー
09:49 検索
📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------
UIデザインをはじめたいデザイナーになりたい人、Webデザイナー、エンジニアなどの方向けに、ソフトウェアデザインの基本を”メッセンジャーアプリ”を作りながら学べるデザインチュートリアルシリーズ。
4回目は2~3で作成したUIを解説します。
📜目次
-----------------------------------------------
00:08 動画の内容
01:05 UIの基本構成
01:34 ナビゲーションとは
03:48 コンテンツエリア
05:28 【超重要】UIはオブジェクトが中心
07:58 各UIパーツを解説します
📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------
動画で使っている素材は概要欄に。LINEで馴染みのあるチャットUIをデザインしましょう。
かなり基本的でほぼ全てのサービスで同じUIが採用されています。
この機会にデザインして基本を身につけましょう〜！
📜目次
----------------------------------------------
00:06 動画の内容
00:40 この動画で学べること
01:17 作るUIと手順
02:14 ナビゲーション
07:09 ボトムナビ
11:37 メッセージやりとりUI
22:29 キーボード立ち上げUI
📜作成で使うFIgmaのファイルはこちらです
-----------------------------------------------
スマホのUIでよく出てくるボトムナビゲーションをデザインします。
📜目次
-----------------------------------------------
00:00 動画の内容
00:43 作るUIと手順
02:17 1.UIキットを設置/改修
05:33 2.アイコンを調整
■動画で使っているもの
----------------------------------------------
・動画したものが見れるFigmaのURL
https://figma.fun/xROi8C
スマホのUIでよく出てくるボトムナビゲーションをデザインします。ボトムナビゲーションは「ユーザーが想起する最上位の概念」が配置されます。
平たくいうと捜査の出発点になるページを割り当てます。
これはWebデザインでいう”グローバルナビゲーション”とほぼ同じ位置づけになります。
📜目次
-----------------------------------------------
00:00 動画で解説すること
00:30 ①ボトムナビについて
04:02 ②階層と平行の構造
■動画で使っているもの
----------------------------------------------
・動画したものが見れるFigmaのURL
https://figma.fun/6ax8g4
□ 目次
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
00:11 イントロ
01:40 Q.デザインしたものが”人が使う”状態になるまでの流れは？
04:17 Q.今回デザインしてる内容って実際のお仕事だとどういうタイミングなの？
06:59 Q.どういう風にお仕事って来るの？
10:11 Q.1日のお仕事のイメージってどんな感じなの？
今まで学んだことを生かしてお題にトライしてみましょう！
自分でデザインするのが1番成長します。
▼ BONOのコンテンツを紹介
1.ゼロからUIを作成,参考デザインと解説でビジュアルスキルを伸ばすシリーズ
DailyUI SNSアプリをデザインする
www.bo-no.design/series/dailyui-part01
2.なぜそのUIなのか？導き出すプロセスを解説するシリーズ
UIデザインの基本
www.bo-no.design/series/uidesignflow
3.ゼロからサービスを設計するシリーズ
www.bo-no.design/series/ux-biginner
□ 目次
-------------------------
02:40 この動画で学べること
03:25 アクション導線とナビゲーション
07:31 階層関係ではない編集ページ
10:20 作成したUIの解説
勉強のシェアは "BONO_UI"で
▼ BONOのコンテンツを紹介
1.ゼロからUIを作成,参考デザインと解説でビジュアルスキルを伸ばすシリーズ
DailyUI SNSアプリをデザインする
www.bo-no.design/series/dailyui-part01
2.なぜそのUIなのか？導き出すプロセスを解説するシリーズ
UIデザインの基本
www.bo-no.design/series/uidesignflow
3.ゼロからサービスを設計するシリーズ
www.bo-no.design/series/ux-biginner
