📱 Design Basics

Overview

Unique design

It is important to transmit comfort to users who browse our products on the Internet. That is why we have designed a series of guidelines to follow in order to maintain the best possible experience for them.

• Avoid using generic component libraries: Give a unique touch to the web/app of your project, try to make users remember and recognize it with just a range of colors.
• Font and text sizes: It is important to correctly choose a set of fonts that are comfortable to read, and support the most commonly used characters on the web.
• Use of icons: Try to design your own icons, and instead of making them too big remember to use backgrounds that surround them for a more professional look.
• Add animations: Create different animations in the web/app of the project, but not too many.

• Mobile-first design: Since 80% of user traffic comes from mobile devices, ensure a seamless experience across all platforms by applying mobile-first principles.

Because less is more

Not always adding more content to our project makes it a better design, below we will show you different tips.

• Use fewer borders: Avoid using unnecessary borders by replacing them with spaces/margins.

Credits: Refactoring UI

• Use shadows based on actual physics: Don't load a container with too many shadows at all angles.

Performance and SEO

It is important that our product reaches the audience's ears and that users with limited resources can access them, so here are some guidelines to follow.

• Optimization: Use optimization tools for multimedia resources, minimize script usage, and load only what is necessary. Implement lazy loading for images and videos to improve performance.

• Semantic HTML: Use HTML tags correctly to provide a semantic structure, which aids in accessibility and SEO. Proper use of headings, lists, and other elements enhances both user experience and search engine indexing.
• Cross-browser compatibility: Test your design on various browsers and devices to ensure consistent functionality and appearance across platforms.
• Responsive Design: Design with responsiveness in mind to ensure that layouts adapt to various screen sizes and orientations.

Accessibility

Ensure your design is accessible to all users, including those with disabilities:

• Keyboard Navigation: Ensure that all interactive elements can be navigated using a keyboard. This is essential for users who cannot use a mouse.
• Screen Reader Compatibility: Use ARIA (Accessible Rich Internet Applications) roles and properties to make content accessible to screen readers. Provide alt text for images and labels for form elements.
• Color Contrast: Ensure that there is sufficient contrast between text and background colors to make content readable for users with visual impairments. Tools like contrast checkers can help verify this.
• Text Resizing: Design layouts that accommodate text resizing without breaking the design. This helps users with low vision who may need to enlarge text.
• Browser Theme Support: Add support for different browser themes, such as dark mode, to enhance user comfort based on their preferences.

Dymo Logo Guidelines

To maintain the project's branding, it is important to use the logos that identify the project.

You can view the guidelines here.