> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.mimeeq.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# UI/UX Requirements for Custom UI Implementation


## Content

1. [About Custom UI](#2-about-custom-ui)
2. [Accepted Design Format](#2-accepted-design-format)
3. [Responsive Design](#2-responsive-design)
4. [Style Library](#2-style-library)
5. [Interactive Components](#2-interactive-components)
6. [3D Canvas](#2-3d-canvas)
7. [Option Panel and Widget Designs](#2-option-panel-and-widget-designs)
8. [Modals](#2-modals)
9. [User Flow Specification](#2-user-flow-specification)
10. [Custom PDF](#2-custom-pdf)
11. [Other Important Considerations](#2-other-important-considerations)

## About Custom UI

Configurators present unique challenges in UI/UX design due to their inherent complexity and the vast array of options available. This guide aims to assist you in navigating these complexities. While it provides a comprehensive framework, we encourage you to consider your unique use cases to fully harness the potential of your configurator design. 

## Accepted Design Format

The design must be delivered as a **Figma file**. It should include a complete UI design, a fully built styles library, and a list of all components used in the design. This ensures consistency and allows for easy implementation.

## Responsive Design

The design must be provided for at least two breakpoints:

* Mobile (ex, 375px)
* Desktop (ex, 1024px and above)

|| Designs must be provided for all unique screens across these breakpoints. If additional breakpoints are needed, such as for larger screens like 4K or tablet, they should be listed.

We require this because two key parts of the UI - the canvas and the option panel - must function correctly across different screen sizes. By default, the canvas will shrink to fit smaller screens, but you can suggest alternative behavior or provide minimum and maximum size limits for different screen sizes.

![Example of responsive design](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-2_158t30o.png)

## Style Library

The style library must include:

* Font styles
* Color palette
* Icon library

These should be created using Figma’s style system, or they can be listed separately. If a custom or paid font is used, the font files must be included in a folder for easy download. Icons should be vector-based and easily exportable from Figma, or you can provide a separate folder with all the icons used in the design.

![Example of Style Library](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-1_j38loi.png)

## Interactive Components

All interactive components must be listed separately in the Figma file with all their available states, such as:

* Default
* Hover
* Selected
* Loading
* Error
* Disabled (if applicable)

For example, a button component should have states for default, hover, loading, and pressed. Icons should include the same states, with an additional tooltip state if needed.

![Example of button interactions](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-3_19ly8eu.png)

Common interactive components include:

* Option Groups
* Buttons
* Icons
* Dropdowns
* Checkboxes
* Radio selectors
* Text Input Fields
* Toggle Switches
* Tabs
* Any other UI elements required in the custom design

|| If you require any additional components not listed above, they must also be included in the Figma file with all relevant states for accurate implementation.

## 3D Canvas

On the canvas, there are several key UI components that typically appear. These include:

**Quick Action Icons:**

* Reset configuration
* Dimension
* View Full-screen
* Export (3D model, Image, PDF)
* Undo and Redo
* Add to favorites
* Zoom all, Zoom in, Zoom out
* Warning 3D message

![Example of 3D canvas elements](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-4_1d6dg7f.png)

**Other UI Elements:**

* Title and description
* AR button
* "Drag to Spin" component, which appears on the first load

It's important to decide which of these components should be included on your canvas design, or if any additional options are required. Each selected element must be reflected in the Figma file to ensure proper implementation.

![Example of custom 3D canvas elements](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-5_1jurbk0.png)

## Option Panel and Widget Designs

You need to determine how the Option Panel will be displayed and which widgets you want to include. Standard widget UI options include:

* Thumbnails Widget
* Multi-choice
* Radio-button
* Number Scale
* Number Button
* Engraving
* Print on Demand
* Colour Picker
* Upload Own Material
* and others.

![Example of standard widgets that can be customizable](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-7_1pa8y89.png)

|| If you need assistance in selecting the appropriate widget types, you can reach out to us for guidance. Each widget can be customized to meet specific needs, and you must provide a design for every widget you plan to use.

## Modals

We offer several standard modals that can be included in the design, such as:

* View in AR (for desktop)
* Export 3D Model
* Generate Image
* Generate PDF

![Example of customisable modals](https://storage.crisp.chat/users/helpdesk/website/8410e0b256e81000/custom-ui-6_1r6upyz.png)

If you plan to use these modals, you must provide designs for each. Additionally, if there are any other modals you wish to include, you should provide corresponding designs. 

## User Flow Specification

Along with the design, a detailed user flow must also be provided to ensure clarity on how the custom UI should function. To specify the user flow, the following methods are preferred:

1. **Loom Video Explanation:** A short video using Loom (or similar tools) explaining each step of the user flow. For example: click on a button to open a modal, select an option to trigger a specific interaction, how error messages are displayed or resolved, navigation between different sections of the UI, etc.
2. **User Flow Diagrams:** Use connected notes or detailed user flow diagrams directly inside the Figma file. Specify transitions, conditions, and key interactions (e.g., hover states, button actions).
3. **Figma Prototype (Optional):** Provide an interactive Figma prototype to demonstrate navigation between different screens. Include a recorded walkthrough of the prototype to highlight key interactions and features.

Providing a clear user flow ensures we understand all critical details, helping to implement the UI as intended and covering all necessary scenarios, including edge cases and error handling.

## Custom PDF

It's also possible to customise the PDF that is generated from the configurator. If you choose to generate a custom PDF from customizable products, you must provide a detailed design for the PDF. This design should outline how the product details, images, and other relevant information will be presented. 

|| When providing the PDF design, it is important to specify the sizing format, whether it is A4, Letter, or a custom size. This ensures the PDF will be generated correctly and formatted according to specific needs.

## Other Important Considerations

If you wish to include any custom UI elements that are not offered by Mimeeq, you must provide a design for those elements. Additionally, you need to contact us to confirm that these custom elements can be implemented, ensuring that all details are agreed upon before proceeding with development. This helps prevent any issues during the implementation phase.

**We are always happy to assist and collaborate to ensure your custom UI meets all requirements and achieves the desired outcome. Feel free to reach out if you have any questions or need guidance.** 🤝