LogoLogo
WebsiteBlogForumsSign up
  • Welcome
  • How Ready Player Me works
  • FAQ
  • 👩‍💻Integration Guides
    • Overview
    • Unity
      • Quickstart
      • Avatar Creator Integration
        • WebView Avatar Creator
          • Avatar Creator for Android & iOS
          • Avatar Creator for WebGL
        • Build your own Avatar Creator
          • Start with the sample
          • Elements
            • Asset Selection Element
            • Color Selection Element
            • Template Selection Element
            • Body Shapes Selection Element
            • Gender Selection Element
            • Avatar List Element
            • Photo Capture Element
            • Signup Element
            • Login Element
            • Logout Element
          • User Management
      • Load 2D Renders
      • Avatar Loader Window
      • Setup Multiplayer
      • Setup for XR (Beta)
        • Setup the Player Avatar
        • Setup Meta Movement SDK
        • Setup Final IK
        • Setup XR Hands
          • RpmHandDriver script
        • Facial Animations
        • VR Avatar Creator
      • Animations
        • Ready Player Me Animation Library
        • Mixamo Animations
      • Optimize
        • Avatar Configuration
        • Avatar Caching
        • Defer Agents
      • Code Samples
        • Loading 3D Avatars
        • Loading 2D Avatars
        • Avatar Creator (WebGL)
        • Avatar Creator (Desktop)
        • Avatar Creator (Mobile)
        • Distance-based LODs
      • Troubleshooting
        • Editor UI Window Issues
        • Avatar loading issues
        • iOS issues
        • WebGL issues
        • Firewall issues
        • Updating the SDK
          • Unity SDK 3.0.0 Migration guide
          • Unity SDK 4.0.0 Migration guide
          • Unity SDK 5.0.0
          • Unity SDK 7.0.0
          • WebView 2.0 Migration
        • Package installation issues
      • Help us improve the Unity SDK
      • FAQ for Unity
      • Early Access Features
    • Unreal Engine
      • Quickstart
        • Import SDK Manually
      • Avatar Creator Integration
        • Build your own Avatar Creator
          • Sample Structure
          • Customization Guide
        • WebView Avatar Creator
      • Load Avatars
      • Animations
        • Ready Player Me Animation Library
        • Loading Mixamo animations
        • Mannequin animation retargeting
        • Blender FBX export to UE
        • Oculus Lipsync integration
      • Optimize
        • Avatar configuration
        • Avatar caching
        • Avatar preloading
      • Code Samples
        • Unreal Engine 5 samples
        • Lyra project integration example
        • VR Avatars
        • Unreal Engine 4
      • Troubleshooting
        • Project compilation issues
        • Missing materials on built applications
        • Avatar loading issues
        • Animation issues
        • Unreal SDK breaking changes
        • Avatar lighting issues
        • Updating from earlier versions
          • Unreal SDK 3.0.0 Migration guide
        • Auto LOD issues
      • Help us improve the Unreal Engine SDK
      • FAQ for Unreal Engine
      • Early Access Features
    • React
      • Quickstart
    • React Native
    • iOS Native
    • Android Native
    • Web Integration
      • Quickstart
      • User Management
        • Guest Accounts
        • Account Linking
      • Avatar Creator integration
      • Optimize
    • API Integration
      • Quickstart
      • Custom Avatar Creator
      • User management
        • Ready Player Me Account
        • Anonymous Accounts
    • UX/UI Guidelines
      • Summary & quick tips
      • UX and UI guidelines and essentials
        • Foundation for good user experience
          • Layout
          • Colors
          • Typography
          • Icons
          • Dark mode and light mode
        • Mobile best practices
          • Layout
        • Making Ready Player Me feel native
          • Seamless Avatar Integration
          • Consistent Branding
          • Responsive Layout
          • Performance Optimization
        • Discoverability of the avatar editor
          • Onboarding tutorial
          • Clear navigation
          • Contextual Placement
  • 🖌️Customizing Guides
    • Studio (Developer Dashboard)
    • Avatar Creator Appearance
      • Avatar URLs
      • Avatar Shortcodes
    • Upload and Manage Custom Assets
      • Asset Manager in Studio
      • Configure in Studio
      • Manage custom assets using the API
      • Unlocking assets through API (Beta)
    • Create Custom Assets
      • Fullbody Outfits
        • Checking Skin Weights
      • Tops, Bottoms, Shoes
        • Editing templates
      • Hairstyle
      • Headwear
      • Facewear
      • Glasses
      • Hero Characters
      • Modeling Guidelines
  • 🔃API Reference
    • REST API
      • Authentication
      • Avatars
        • GET - 3D avatar
        • GET - 2D Render of an Avatar
        • GET - Metadata
        • PUT - Equip an asset
        • PUT - Unequip an asset
      • Assets
        • Asset Entity Properties
        • POST - Create Asset
        • GET - List Assets
        • PATCH - Update Asset
        • POST - Upload Asset Files
        • POST - Add Asset to Application
        • DELETE - Remove Asset from Application
        • PUT - Unlock asset for a user
        • PUT - Lock asset for a user
      • Users
        • POST - Create User
      • Auth
        • GET - Token
      • Changelog
    • Avatars
      • Full-body avatars
      • Full-body XR avatars
      • Half-body avatars
      • Morph targets
        • Apple ARKit
        • Oculus OVR LipSync
    • Avatar Creator
  • 🔉Support
    • Forums
    • Licensing & Privacy
Powered by GitBook
On this page

Was this helpful?

  1. Integration Guides
  2. UX/UI Guidelines

Summary & quick tips

Here, you'll find concise insights and actionable suggestions to ensure a seamless integration that enhances user experiences across your app or game.

PreviousUX/UI GuidelinesNextUX and UI guidelines and essentials

Last updated 1 year ago

Was this helpful?

✅ Customize the visual elements of the avatar editor to match your app or game's branding using Ready Player Me Studio. This creates a cohesive experience for users. In Ready Player Me Studio, you can customize the Ready Player Me avatar creator based on your brand and needs for it to feel more native.

✅ Ensure the avatar editor has a responsive layout that adapts well to different screen sizes and orientations, avoiding cramped or out-of-place visuals. A flexible layout that adapts to different screen sizes, orientations, and devices, will guarantee a consistent and comfortable user experience. Users should be able to recognize and navigate your app or game seamlessly, regardless of the device they are using. .

✅ Use as much space as possible or full screen for opening the avatar editor for a great and native user experience. Please avoid using headers in your modals that contain Ready Player Me, as this can be redundant and waste valuable space. You can customize the colors and font of the avatar editor in Ready Player Me STUDIO. .

✅ Integrate the avatar creator within relevant sections of your app or game, such as character customization, to enhance user engagement and intuitiveness. Read more about contextual placement and also about .

✅ Have a clear icon or copy for opening the avatar creator inside the game or app. Please avoid burying the avatar editor deep within nested menus or submenus. Users should be able to find it easily without excessive navigation. .

✅ Design interface icons with simplicity and clarity, avoiding unnecessary complexity or confusion. Maintain a consistent visual language across your app or game. .

✅ Establish a consistent color palette that aligns with your app or game's branding, ensuring readability, visual harmony, and accessibility. .

✅ Optimize the performance of the avatar editor to ensure smooth and responsive operation within your app or game. .

✅ Provide a brief onboarding tutorial or walkthrough to help users understand the purpose and location of the avatar editor within your app or game. .

✅ Implement dark and light modes options to accommodate user preferences and enhance the visual experience. .

✅ Select fonts that reflect your brand's identity and maintain readability. Use visual contrast to highlight important information and create a hierarchy of content. .

✅ Design mobile layouts that are flexible and adaptive, ensuring a consistent user experience across different devices and orientations. .

👩‍💻
here
discoverability
Read more about clear navigation here
Read more about icons here
Read more about colors here
Read more about performance optimization here
Read more about onboarding here
Read more about modes here
Read more about typography here
Read more about mobile layouts here
Read more about responsive layouts here
Read more about making RPM feel native here
Read more about custom themes here.