Illustrations
Graphicon
Elevate Design and User Experience with Striking Visuals
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.
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.
It is recommended not to place graphicon elements inside the crop zone unless absolutely necessary
Do
Place the icons in the Trim Area so that they look symmetrical.
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:
| Platform | 1x | 2x | 3x |
| Mobile | 60px x 60px | 120px x 120px | - |
| Tablet | - | 120px x 120px | 180px x 180px |
| Desktop | - | 120px x 120px | 180px x 180px |
If the icon has no 1:1 ratio (square), the larger side should follow the guide above to make the shape look proportional.
Do
The graphicon shape must be proportional.
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.
Make the corners more obtuse by 2px or more to create a clear corner effect.
You can give volume to a graphicon by adding another shape on the left or right side.
Do
Make the corners more obtuse by 2px or more.
Don't
Don't use sharp corners.
Do
Shape elements must remain in their geometric shape.
Don't
Shape lements must not be tilted, rotated, or bent.
Do
Create a volume effect on the left or right side of the object.
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.
Do
Use shadow or outline as a separator between two objects.
Don't
Don't create space between objects.
Use a maximum of two objects for each icon.
Don’t add more objects, as it will reduce clarity and add unnecessary visual noise
Create space between objects so they are easier to see and understand
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.
Do
Adjust the icon elements and make them look balanced.
Don't
Sometimes, you need to recheck and revise the placement from alignment tools.