学科 レイアウトデザイン基礎④

-本日のアジェンダ-

1限目
学科 レイアウトデザイン基礎④
課題制作 

2限目
学科 レイアウトデザイン基礎④
スマホのカンプについて

3限目
学科 レイアウトデザイン基礎④
課題制作 

4限目
学科 レイアウトデザイン基礎④
課題制作 

5限目
学科 レイアウトデザイン基礎④
課題制作 

本日のテーマ

PCとSPのデザインラフを完成させましょう。

①-5.スマホラフ

各デバイスの画面サイズ

端末ポイントRetinaピクセル
iPhone X
iPhone XS
iPhone 11 Pro
375×81231125×2436
iPhone XR
iPhone 11
414×8962828×1792
iPhone 12
iPhone 12 Pro
390×84431170×2532
iPhone XS Max
iPhone 11 Pro Max
414×89631242×2688
iPhone 12 Pro Max428×92631284×2778

今回は、スマホラフを幅414pxで作成しましょう。

【覚えておきましょう!】
画像を書き出す際は2〜3倍にします。写真やアイコンは非破壊データ(パスやスマートオブジェクト化)にして起きましょう。

【作品】オリジナルサイト_20210323_デザインカンプ
※PCとSPのjpgを提出してください。


課題の評価点

①隣接

要素をグループ化しましょう。画像とそのテキストの関係性の様に、関連する項目は近くに置く。別の項目とは距離を取る様に。

②グリッド

左寄せ、中央寄せ、右寄せ。揃えるとこを決めましょう。
頭を揃えましょう。

③ルール

同じレベルの物はデザインにルールを持たせましょう。

④コントラスト

文字の大きさや配色に強弱を付けましょう。
タイトルと本文のジャンプ率を意識する。色の組み合わせは読みやすいコントラストにしましょう。(例:黄色に白は避ける。)

⑤F型

ユーザーの目線の動きを意識しましょう。左から右へ、上から下へ目線が動きます。ファーストビューでサイトの要点が伝わる様に。