
各デザイナーには、自分の作品を導くためのいくつかのルールがあります。 そして、しばしば、経験豊富なデザイナーからのそのようなルールで構成されたメモは、初心者にとって良い助けになります。 私にもそのようなルールがたくさんあります。 確かに、それらはレイアウトの製造で行われてはならないことに関連しています。 些細で明白に見える人もいれば、誰かを困惑させる人もいます。 しかし、彼らは私を大いに助けてくれますし、それらのいくつかがウェブデザインに携わっているか、ウェブサイト開発のこの分野に参加したい人にも役立つことを願っています。
1
タイプセッターが後で実装できなかったことをしないでください。 また、最新の方法ではHTMLレイアウトでほとんどすべての結果を得ることができますが、広告ポスターではなくWebサイトを作成していることを常に覚えておく必要があります。 あなたのアイデアは、困難や非互換性の問題なしに、どのシステムでも同じ結果で表示できるコードに転送されるべきです。
2
オペレーティングシステムの類似の要素のスクリーンショット画像で、標準フォーム要素の置換を使用し
ないでください。 私を信じて、Windows 98の精神で実装した強制ボタンは、MacOSユーザーにアピールする可能性は低いです。
3
テキストを粉砕し
ないでください 。 9 pt未満のスキトルズは推奨されません。 9ポイントと10ポイントのピンは、マイナーブロック、脚注、署名にのみ使用してください。 メインテキストを少なくとも11ポイントのサイズで発行します。
4
標準の先行値(+ 120%ポイントサイズ)に依存し
ないでください 。 多くの場合、デフォルト値に1〜4ポイントを追加する必要があります。これにより、テキストの認識が大幅に向上します。 ほとんどの場合、サイズの140〜160%の値が成功する可能性があります。 あなたの意見で最高のものを選択してください。 次のようにサイズ/リーディング値を使用します:11 / 14、12 / 16、13 / 18。
5
. , , . , - , , (,
code
cite
). .
6
. (px) — . , — (pt), .. . — , , Em. , .
7
, « ». , 21 17 . 5 ( 10), «» . , .
8
. , — 140–160 . « », , . 11–12 : 50–80 .
9
, , . , , — 10 , — 15–20 . , .
10
, , . , , .
11
« » (
align=«justify»
). ( ), . , « », « »,
align=«left»
« » .
12
«» , «» «», , ( ) (, ). — . , ,
«».
13
- - , , . , HTML- .
- . -, - .
14
. , . . , , .
15
«» , (« . . »). , .
16
(, ). , , , . . , . - . — «», .
17
, « ». . . — , . , . . №20.
18
. . . , . , « - », , « ».
19
, pixel art. , , . , , . . — , HTML- , . ! .
20
«» . , «» — - .
, .
- .
UPD 1.
equeny №21:
, . : , .
UPD 2. . !