Skip to main content

Visual Design​

Visual design plays a crucial role in enhancing user experience by providing aesthetically pleasing interfaces that are also functional. It involves the thoughtful application of colors, typography, imagery, and overall layout to create a cohesive and engaging environment for users.


visual-design-main-image


Color Scheme​

Purpose​

Purpose: Choose colors that align with the emotional tone of the service and are appropriate for the brand. Colors should also differentiate elements based on their importance and interactivity.

Accessibility​

Accessibility: Ensure high contrast between text and background colors to aid readability for all users, including those with visual impairments.

  • Primary Colors: Define the core palette that represents the brand most dominantly across the service.

  • Secondary Colors: Support the primary palette for background, text, and secondary elements.

  • Accent Colors: Highlight important elements like buttons and links to draw user attention.


color-scheme


color-scheme


Typography​

Readability​

Readability: Use legible font sizes and families that are easy to read across devices and platforms.

Hierarchy​

Hierarchy: Establish a clear hierarchy using different font sizes, weights, and styles to guide users through the content effectively.

  • Font Families: Choose fonts that reflect the brand’s character while being legible at all sizes. The KOBIL SuperApp Platform uses the Inter font family, recognized for its clarity and modernity, ideal for digital environments. Inter supports a wide range of weights and styles. Its clear, highly legible design makes it suitable for both body text and headings across all device types.

  • Font Sizes: Use a scalable set of sizes for clarity and hierarchical structure.

  • Line Height and Spacing: Adjust spacing for readability and comfort in various user interfaces.


typography


Iconography​

Simplicity and Clarity​

Simplicity and Clarity: Design icons to be simple and clear, avoiding overly complex shapes. The simplicity ensures that icons remain recognizable at various sizes, which is essential since icons can display as small as 16x16 pixels on some devices.

Consistency​

Consistency: Maintain a consistent style across all icons to help users quickly understand and interact with them. This includes consistent use of line thickness, color palette, and visual elements that align with the overall design of your service.

Purposeful Design​

Purposeful Design: Each icon should communicate a specific action or feature clearly. Avoid using generic symbols that might confuse users about their functionality.

Adaptability​

Adaptability: Icons should be designed to look good across different devices and operating systems, keeping in mind their appearance in both light and dark modes to ensure versatility.


iconography