Clever Geek Handbook

ファビコンとウィンドウのタイトル

画像 おそらく、サイトのアイコンとウィンドウのタイトルがWebタイポグラフィに関係しているという事実を疑うことになるでしょう。 彼らが持っています！ 本の背表紙のように。 私は水を注ぐことはせず、タブのナビゲートの利便性を高めるために設計されたアイコンとウィンドウタイトルのデザインのルールを策定します。



アイコン



  1. サイトには、少なくとも黒い四角、少なくとも円のアイコンが必要です。 これは、ユーザーが無数のタブ、履歴、またはお気に入りでサイトを区別できるようにするために必要です。
  2. サイトのロゴを繰り返すためにアイコンは必要ありませんが、16×16です。 アイコンが色付きのスポットにならないように、読みやすさを維持することが重要です。 彼女の仕事は、サイトを視覚的に識別することです。 アイコンはロゴに似ているか、企業の色を含んでいるかもしれません。
  3. コンテンツごとに異なるアイコンを使用すると、識別性が低下するため、異なるアイコンを使用するのは、どうしても必要な場合にのみ意味があります。
  4. アイコンは、識別性の保持を考慮して、着信メッセージまたは変更のインジケータとして使用できます。 例：



    メディアコンテンツを再生する場合、ユーザーが「どの耳でバズっているのか」を知るために、再生アイコン付きのアイコンを表示することをお勧めします。 ただし、お気に入りに追加すると、追加時に表示されていたアイコンが保存されるため、情報をすばやく消費する場所（twitter、VKontakte、youtubeなど）、長時間連続して読むように設計されたサイトなどで使用する必要があることに注意してください気が散るだけです。
  5. アイコンは静的であり、アニメーションを含むべきではありません。

    5〜10秒の遅延の小さなアニメーションが役立つと思われるかもしれませんが、ユーザーが複数のタブを開いている状況を想像してください。たとえば、そのような遅延でも、アイコンのアニメーションが2秒ごとに再生されます！ そして、これは目に余分な作業を作成します。




ウィンドウタイトル



  1. ウィンドウのタイトルには、内容が第1レベルのタイトルに似たテキストが含まれている必要があります（ページ上にある必要があります）。 つまり ページのコンテンツをユーザーに通知する必要があります。
  2. タイトルは短く、5単語以内にする必要があります。
  3. ヘッダーが階層を反映している場合、次のように順序を小さくする必要があります。

    「Favicon-Typography-Habrahabr」

    しかし、裏ではありません！ ここで、アイコンはリソースを識別し、タイトルはコンテンツを識別することに注意してください。
  4. 句読点は通常の見出しの規則に従います。ドットを省略し、質問と感嘆符を残します。


まとめ



ご覧のとおり、ルールは非常にシンプルであり、ロジックに従属しています。 また、一部は検索エンジンの最適化に使用されるため、二重に役立ちます。 :)



微妙



Firefox、Safari、およびOpera（IEではチェックしませんでした）は、アイコンのアドレスの前のスラッシュを異なる方法で理解および解釈するため、省略（スラッシュ）することをお勧めします。 Firefoxはアイコンを長時間キャッシュするため、アイコンを変更する場合は、ファイル名にバージョンを指定することをお勧めします。



助けるために



完全を期すために、アイコンジェネレーターへのリンクを追加します



More articles:


All Articles