Welcome to the Theme Designer! Here, you can customize the design elements of your Stories to create a visually engaging and cohesive experience for your audience. Customize the Story background, Hero Content, and Interactive Objects to match your brand and captivate your audience. Let’s dive into each section and explore how you can modify and optimize your Stories.

Story Background

Customize the background of your Story to set the stage for your content. Choose from solid colors, gradients, or upload your own background image.

How to Customize the Background

Click Background Color in the Tools
Select Background Type: Choose between a solid color, linear gradient, radial gradient.
Customize:
- Solid Color: Pick a color from the color palette.
- Gradient: Choose the gradient type and colors.
Background Image: Click Upload Image to upload a high-resolution or vector image as your background. Images with transparency will overlay on top of your Background Color.
- Optionally activate Blur on Zoom to blur your background when StoryPoints open – keeping the focus on your Story content

Best Practices

Contrast: Choose a color or image that makes your Story content pop. Try dark backgrounds for a light product, and light backgrounds for a dark product.
Simplicity: Keep your background simple and subtle to keep the focus on what matters most: your story.
Blur: Enable Blur on Zoom to soften background images when zooming into StoryPoints to maintain focus.
Engagement: Combat demo fatigue by switching up the background color in key moments of your Story

Hero Content

Customizing the design for your Hero Content depends on the scene types like Product Scenes, Media Scenes, Text Scenes, and Form Scenes. Each can be tailored to enhance the visual appeal and user engagement.

Product Scenes

Dial in the design of your screen container to make your product shine.

How to Customize your Screen Design

Create a Product Scene and upload your screens
Choose your device type (monitor, phone, etc.) under theDevice Options tool
Customize the device
1. Monitor & Phone
  - Device: Color and material
  - Shadow: Set visibility
  - Reflection: Set visibility
  - Screen Size: Adjust the scale of the screen area
  - Transition Color: Set a transition color when fading between scenes with the same device type
2. Simple
  - Border: Color and size
  - Shadow: Set visibility and color
  - Reflection: Set visibility
  - Screen Size: Adjust the size of the screen area
  - Transition Color: Set a transition color between scenes with the same device type

Best Practices

Contrast: Use the device color, border, and/or shadow to help your product pop off the background.
Screen Size: Keep a nice balance for your screen size. If you make it too big, it may get cut off on mobile and your StoryPoints will get lost. Switch to Preview Mode to get a better idea of true scale.
Transition Color: Use the same background color of your product's UI to make the transition feel natural

Media Scenes

Enhance your media like images, charts, or videos with borders and shadows.

How to Customize Media Scenes

Create a Media Scene and upload your content
Open the Media Designer: Select Media Appearance in the Tools
Customize Appearance:
- Border: Change border color and size
- Shadow: Adjust visibility, size, and color
- Reflection: Set visibility
- Scale: Adjust the size of the media content

Best Practices

Focus: Use borders and shadows to frame your media and make it pop
Consistency: Maintain uniform border sizes and shadow effects across similar media elements.
Scale: Ensure media is appropriately sized for different devices to maintain quality.
Engagement: Use reflections and subtle animations to make media more dynamic and engaging.

Title Scenes

Grab your audience's attention and convey important messages using text that pops!

How to Customize Title Scenes

Create a Title Scene and enter your text
Format Text by selecting content in the text field and using the available tools
Add a Shadow: Select Device Options in the Tools and adjust shadow visibility, distance, softness, and opacity.

Best Practices

Legibility: Ensure text is legible with sufficient color contrast and clear shadows.
Go Bold: Use formatting and colors to highlight key words or phrases

Form Scenes

Keep your audience immersed by designing your forms to blend seamlessly with your Story.

How to Customize Forms

Create a Form Scene and select your form under the Form Options tool
Customize Form Design:
- Container: Set container visibility
- Background Color: Set a background color for the form
- Border: Customize border color and size
- Shadow: Adjust shadow visibility, size, and color

Interactive Objects

Enhance interactivity with customizable StoryPoints, Hotspots, Buttons, and Media Objects.

StoryPoints

Make your StoryPoints pop off the screen.

How to Customize StoryPoint Design

Add StoryPoints: Add StoryPoints into your scene using the Create Items Tool
Open the StoryPoint Designer: Select Appearance in the Tools
Customize Appearance:
- Title: Set title color
- Background Color: Set the main background color
- Border: Customize border color and size
- Shadow: Adjust shadow opacity and size
- Button: Set the button and text color
- Floating: Enable subtle floating movement to draw attention to your StoryPoints

Best Practices

Engage: Use contrasting colors to draw attention to your StoryPoints and make their titles pop.
Interactivity: Use the floating effect to subtly highlight interactive StoryPoints without overwhelming the audience.

Hotspots

Grab your audience's attention and make navigation simple and fun with eye-catching Hotspots.

How to Customize Hotspot Design

Add Hotspots: Add Hotspots into your scene using the Create Items Tool
Open the Hotspot Designer: Select Appearance in the Tools
Customize Appearance:
- Border: Set color and size
- Corners: Set rounded corners to match your UI
- Pulsing: Enable pulsing effect to draw attention
- Label: Set label text and background colors

Best Practices

Highlight: Make hotspots visually distinct to draw attention to key areas
Interactivity: Use the pulsing effect to signal interactivity and engage users
Clarity: Ensure labels are clear and concise, with colors that stand out against your UI
Consistency: Use the same color theme to indicate which Hotspots navigate and which simply display more information

Buttons

Guide your audience with clear, actionable buttons.

How to Customize Button Design

Add Buttons: Add Buttons into your scene using the Create Items Tool
Open the Button Designer: Select Appearance in the Tools
Customize Appearance:
- Text: Set color, size, and weight
- Border: Set size and color
- Corners: Set rounded corners
- Background: Set color or transparency
- Shadow: Adjust opacity and size

Best Practices

Call to Action: Ensure buttons are prominently placed and use colors that contrast with the background to encourage interaction
Readability: Use legible text size and weight
Consistency: Maintain consistent button styles throughout your Story for a cohesive look and to train your audience on what to click

Text

Draw your audience’s attention and deliver crucial information with text that stands out!

How to Customize Text Design

Add Text: Insert a Text object into your scene using the Create Items Tool
Open the Text Designer: Select Appearance in the Tools
Customize Appearance:
- Default Text Color: Select your color
- Text Box:
  - Border: Set size and color
  - Corners: Set rounded corners
  - Padding: Adjust spacing around your text
  - Background: Set color or transparency
  - Shadow: Adjust opacity and size

Best Practices

Readability: Ensure text is legible with appropriate padding and shadowing.
Consistency: Maintain a consistent style across your Story to enhance readability and engagement.
Hierarchy: Use different text sizes and weights to create a clear hierarchy and guide the viewer’s attention.

Media Objects

Media Objects can be labeled and styled to enhance their appearance.

How to Customize Media Objects

Add Media Objects: Add Media into your scene using the Create Items Tool
Open the Media Designer: Select Appearance in the Tools
Customize Appearance:
- Label: Set text color and background color
- Border: Set size and color
- Corners: Set rounded corners
- Background: Set color or transparency
- Shadow: Adjust opacity and size

Best Practices

Clarity: Ensure labels and borders do not obscure other content.
Consistency: Maintain a clean and professional look with consistent borders and shadows.
Engagement: Use media labels to provide context and enhance the storytelling experience.

Apply Your Theme

Once you've dialed in the theme design for one scene, it's easy to apply it to other scenes.

How to Apply your Theme

Set the Theme Design: Open the Visual Designer and dial in the theme using the steps above.
Copy Your Theme Design: Click on the menu for your Scene inside the Storyboard on the left and select Copy Design.
Paste Your Theme Design: Click on the menu for the destination Scene and select Paste Design.

Overriding Your Theme

You can override your Theme design at the object level to highlight specific objects or features.

How to Override your Theme

Select Your Object: Click on any object in the Canvas
Click on Style: Click the Style tab to reveal the design settings
Expand Design Override: Expand the Design Override options and modify accordingly

By customizing these elements, you can create a Story that is not only visually appealing but also highly engaging and interactive. Dive into each section, experiment with the settings, and discover the best combinations to bring your Stories to life!