Skip to main content
Give us your valuable feedback

It will help us understand how we can serve you better

Give feedback

Illustrations

Graphicon

Elevate Design and User Experience with Striking Visuals

banner-Graphicon

Introduction

Telkom Indonesia has a variety of digital products that use different design styles. But regardless of visual differences, every graphic icon must have a consistent visual concept and execution. The graphic icon guideline is a first step to ensuring the colors and key elements comply with standards.

Grid & Keyline

A grid is a box-shaped element or a line that helps each graphicon to have a consistent size on our worksheet.

Meanwhile, the keyline is a guide to ensure the icon has uniform proportions, regardless of variations in its basic shape, such as square, circle, horizontal and vertical. By using a keyline, the graphicon will have consistent proportions.

grid and keyline illustration
  1. The grid we use has an adjustable size with a 1:1 ratio and has 2px of Trim Area to provide free space around the graphicon.

  2. It is recommended not to place graphicon elements inside the crop zone unless absolutely necessary

Alt text

Do

Place the icons in the Trim Area so that they look symmetrical.

Alt text

Don't

Placing the icons outside the safety zone on the grid is not recommended.

Sizing

Determining the size or resolution of a graphic is an essential step in the design process. The size of a graphicon depends on its usage, platform, or medium.

Here are the guides for determining the suitable graphicon size:

Platform1x2x3x
Mobile60px x 60px120px x 120px-
Tablet-120px x 120px180px x 180px
Desktop-120px x 120px180px x 180px

grid and keyline illustration

If the icon has no 1:1 ratio (square), the larger side should follow the guide above to make the shape look proportional.

Alt text

Do

The graphicon shape must be proportional.

Alt text

Don't

Adjust the height and width to make it look proportional.

Shape

Using basic shapes such as squares, circles and rectangles to form objects on graphicons is recommended. You can produce softer corners if necessary to provide a more aesthetic appearance.

grid and keyline illustration
  1. Make the corners more obtuse by 2px or more to create a clear corner effect.

  2. You can give volume to a graphicon by adding another shape on the left or right side.

Alt text

Do

Make the corners more obtuse by 2px or more.

Alt text

Don't

Don't use sharp corners.

Alt text

Do

Shape elements must remain in their geometric shape.

Alt text

Don't

Shape lements must not be tilted, rotated, or bent.

Alt text

Do

Create a volume effect on the left or right side of the object.

Alt text

Don't

You cannot place a volume effect above or below an object.

Object

Make an icon that is easy to understand, simple, and straightforward because icons that use too much detail make the interface more confusing and difficult to understand. In general, icons that use universal metaphors and can be directly associated with directions for the users have been proven to work better.

grid and keyline illustration
Alt text

Do

Use shadow or outline as a separator between two objects.

Alt text

Don't

Don't create space between objects.

  1. Use a maximum of two objects for each icon.

  2. Don’t add more objects, as it will reduce clarity and add unnecessary visual noise

  3. Create space between objects so they are easier to see and understand

  4. You can use shadow or outline

Alignment

Visually align the elements to ensure that each graphicon looks balanced. Don’t just rely on the numbers. Use your eye and sensitivity to recheck.

grid and keyline illustration
Alt text

Do

Adjust the icon elements and make them look balanced.

Alt text

Don't

Sometimes, you need to recheck and revise the placement from alignment tools.