デザイン
注意されたことをまとめます。
ラフ作成の注意
★考える順番・作る順番・コーディングを考えて作る。
基本は大きい箇所から→中→小
1、大まかに&基本
→PCとスマホのサイズ・各ページ共通のwidth・フッター・ヘッダー・フォント・色・余白を決めておく
※ここで確認をとる
2、その後細かく
→実際のデザインの部分を作成していく
デザインの注意
→視線の誘導・導線を意識する
→要素のメインとサブをはっきりさせる(写真とテキスト)
→黄金比や構図を意識する
→リンクはわかりやすく(例えば背景色と色を被らせない)
→セクションごとに要素を固める(写真とボタンをワンセットなのに、マージンを取り過ぎたりしないこと)
→絵を美しく見せる・テーマに沿ってお洒落に見せる
→バランス良く(有機とリズム)
→ヘッダー部分にツイッターやインスタのアイコンをつけると離脱になるから意図的に以外は極力避ける
→footerのアイコンはsvg(画像が荒れない・容量軽い)で保存する
「svg→管理がめんどくさい。ただアイコンの8割はsvg」
→ピクセルの数字は10区切りか4区切り(4区切りが基本)
フォントの注意
→文字のジャンプ率・フォントのバランス
→写真の顔に文字を被らせない(背景画像・画像をしっかり分ける)
→フォントはカッコは全角・英語は半角スペースじゃなくてタブで開ける
→行間は1.5~2倍
→タブは他行の文字と合わせる時とかに使用するので、
ただ文字と文字の間にスペースを入れたいときは使用しない(スペースキーを使う)
→流行りフォントをサーチして使う
→イラレのテキストはサイズごとに分けて書く
→ドロップシャドウは最終手段
→テキスト量が多いときは左揃え(真ん中は見えづらい)
→数字は半角
→可読性を高める