sporticon-design-guidelines.md

Sporticon design guidelines

Table of Contents

English

• General
• Human form icon
• Ball icon
• Tools icon
• Environment icon

日本語 (Japanese)

• 基本事項
• 人型のアイコン
• ボールのアイコン
• ツールのアイコン
• 環境が伴うアイコン

---

General

Anatomy

1. Stroke
2. Corner
3. Interior Corner
4. Bounding Area
5. Offset

Artboard

• Design on 480x480px Artboard with the appropriate grids.

  

• Design all icons with motions towards the right.

  

• 2 Ball sizes available when applied with tools or environment:

  • 300px
  • 200px
  

Corners

• Corner radiuses are 8px by default.

  

• Except for icons that contain:

  • Overlapping paths (lines that crossover one another) eg. net-like shapes, X shape, etc.
  • Environment shapes that mask other shapes. eg. water, sand over the boat
  • Balls with strokes.
  

Icon & Text combinations

• All sports icons have their own specific margins so they look consistent with the other icons. Please align to the center of the icon when using the icon with text.

  

Position of stroke

• As a general rule, align the stroke to the center when creating an icon with paths (pen tool).

• However, if the center alignment of the path causes the icon to go beyond the boundary, or if there is an unbalance between the path and fill, please use Inside Stroke.（ex: Ball).

  

Human form icon

• Keep the body and legs separated.

  • Exception for wheelchairs

• Align paths to the grids

• Set Stroke options at:

  • 20px
  • Align Center stroke
  • Rounded cap, corner

• In case of rotations, rotate at an angle of

  • 325°

• With Ball:

  • 60px x 60px
  • 20px offset

• With Tools:

  • 20px offset
  

Ball icon

• Ball outline stroke:

  • 30px

• Inside Ball paths:

  • Simple designs 30px
  • Complex designs 30px
  

Tools icon

• Set Stroke options at:

  • 20px

• In case of rotations, rotate at an angle of

  • 325°

• Ball:

  • 60px x 60px
  • The ball can be placed in 3 places using the guide, choose the best one to balance the icon.

• Offset

  • 20px
  

Rackets

• Set height of the racket to the top and bottom guide baseline

• Set Racket on angle of

  • 325°

• Ball placed on the left of the tool

  

Stick

• Set height of the tool to 30px from the top and bottom of the guide baseline

• Set stick on an angle of

  • 325°

• Ball can be placed on either side

Environment icon

Beach Sports

• Use the Sand asset

• Place the Sand asset 10px from the baseline of the guide

• Sand asset offset is 20px

  • In case of using a person, apply the offset to the right leg
  

Water Sports

• Use the Water asset

• Place the Water asset 30px from the baseline of the guide

• Water asset offset is 20px

  

Floor

• Floor can be used anywhere the floor is a special feature of the sport eg. hard surfaces

  

Wall / Glass

• Wall/Glass asset is placed on the top left corner of the guidelines

• If tools are placed above the wall/glass, apply offset to tools and delete the remaining parts of the wall inside the tool eg.

  

Multi Category Sports

• Contain icon within 30px stroke circle

• Apply 30px offset to inside of circle

• Use a general, easy to understand symbol to encapsulate the meaning of the sport

  

Adding Symbols

Only apply symbols in cases where the sport icon alone is difficult to interpret the sport.

• 1. Category (people, ages, environment)
  • Place at the top right corner
  • Symbol size: 140px with an offset of 20px
  • Examples: 9 man volley, Snow Volley
• 2. Rules (Country)
  • Place at the bottom right corner
  • Symbol size: 140px with an offset of 20px
  • Examples: Canadian football, Australian football
  

---

基本事項

アイコンの作成ポイント

1. 線
2. 角丸
3. 内側の角
4. マージン
5. オフセット

レイアウト

• 作成するアイコンに沿った適切なテンプレートを使用してください

  • アートボードのサイズ
    • 480x480px
  

• すべての動作が右に向かうように作成する

  

• ボールとツールを一緒に使用する場合は、ボールのサイズを大・小の2種類の内から使用する

  • 300px
  • 200px
  

角丸

• 原則的に全てのパスに8pxの角丸をつけること

  

• ※以下の場合は除く

  • ボールの線

  • Environmentのマスク

    • ex) Wave, Sand

  • 重なり合ったパス

    • ex) X
  

アイコンとテキストの組み合わせ

• テキストを併用する場合は、アイコンの位置をすべて真ん中に来るようにする

  

線の位置

• 基本的に「真ん中」に設定した状態で作成する

• ただし、線が真ん中になることによってガイドからパスが出てしまう場合や、パスの線と塗りのバランスが崩れるときには、内側を使用する（例: ボール)

  

人型のアイコン

• 体と足は離して作成すること

  • ただし車椅子は、体と合体した状態で作成する

• グリッドに沿ってアイコンを作成すること

• 線

  • 20px
  • 角丸の線
  • 線の位置は真ん中

• 角度

  • 325°

• ボール

  • 60px x 60px
  • ボールから20pxのオフセット

• ツール

  • ボールから20pxのオフセット
  

ボールのアイコン

• ボールの外線

  • 30px

• ボールの中のパス

  • シンプルなパスを描くとき = 30px
  • 複雑なパスを描くとき = 20px
  

ツールのアイコン

• 線

  • 20px

• 角度

  • 325°

• ボール

  • 60px x 60px
  • グリッド内にある3箇所のボールガイドのうち、そのアイコンに合った場所にボールは置くこと

• オフセット

  • 20px
  

ラケット系

• 上下のベースラインをガイドに合わせて作成すること

• 角度

  • 325°

• ボールはいつも左側に置くようにして作成する

  

スティック系

• 上下30pxをガイドから開けてください。

• 角度

  • 325°

• ボールは左右どちらでも置くことができる

環境が伴うアイコン

ビーチスポーツ

• 砂のパスを付け加える

• ガイドの一番下から10pxスペースをとる

• 下から40pxスペースをとる

• 砂の周りは20pxのオフセットをする

  • 人型のアイコンの場合、片足オフセットを無視することができる

    

ウォータースポーツ

• 水のパスを付け加える

• ガイドの一番下から30pxスペースを入れる

• 水の周りは20pxのオフセットをする

  

床

• Floorは特別な素材や特徴を持ったスポーツアイコンに使用できます
  • 例) ハードコートバイクポロ
  

壁 / ガラス

• 壁を使用するスポーツの場合は、すべて左側にくるようにする

  • 例) スカッシュ

• ツールが壁のパスの上にきた場合、壁はそのツールに合わせて切り取らなければいけない

  

マルチカテゴリースポーツ

• 複数競技を1つのアイコンにする場合には、丸を付ける

  • 30px

• 丸の周りは20pxのオフセットをする

• それらのスポーツを象徴とするアイコンを使用する

  • 例) スキー&スノーボード→山

    

シンボル

スポーツアイコンだけではその競技の特徴を表せないときに、シンボルを使用する

• 1. カテゴリ (人, 年齢, 環境)
  • 右上に設置する
    • 例: 9人制バレー, スノーバレーボール
  • シンボルのサイズ
    • 140x140px
  • シンボルのオフセット
    • 20px
• 2. ルール（国）
  • 右下に設置する

    • 例: カナディアンフットボール