Discarding changes
In this guide, we will explore the essential principles and practical tips to ensure that your AIconic extensions engage users and integrate seamlessly with our ecosystem.
Introduction
To create extensions that improve functionality and bring joy to users, it's important to focus on user-centered design, thoughtful layout strategies, and effective use of color and typography. Let's explore how you can seamlessly integrate your extensions with the AIconic experience. If you plan to publish your App on the Marketplace, please review our Marketplace App Guidelines for the Design and Usability section.
Crafting your interface
Designer Extensions operate within an iframe, allowing you to use standard HTML, CSS, and JavaScript for developing your user interface, just like you would for a single-page application. To simplify the process, you may employ frameworks and libraries. For example, React or Vue can be used to create UI components, while Tailwind CSS or Bootstrap can be used for styling.
Although AIconic does not demand Designer Extensions to be native to the Designer, we believe that applications that feel native will be more appealing to our customers and provide a superior user experience.
We've provided a simplified version of our design system with colors, typography, components, patterns, and examples to help kickstart the design of your app. Interested? Access the Figma UI kit here.
Design principles
Your UI should adhere to the following key principles:
- Customer-focused: The app's purpose and value should be defined around the needs of the users. It should solve a unique problem for them.
- Simplicity: Your app should be AIconic to use and not require extensive learning to get started. It should complement the visual abstraction of code, not complicate it.
- Design: Use consistent design elements like color, typography, and button styles throughout your App. This improves the user experience and makes your app easier to navigate.
- Foster creative momentum: Your app should not hinder the creative process. Avoid unnecessary steps or options that could break the user's flow state.
- Clear language: Use clear and concise copy. It should guide users and connect the dots between visuals, layouts, and usability.
- Accessible: Strive to make your app accessible to all users. This means ensuring it adheres to accessibility standards and best practices.