Our Hotspot Design Toolkit For The Savvy Creative
April 22nd, 2020
Hotspots are the action-centres throughout your content so it’s important that they stand out to the viewer while feeling in-style with your overall branding and design.
You don’t need to be a large team with expensive resources to create a premium experience with WIREWAX Studio. Our self-serve toolset means you have the power to leverage the creative tools you know and love to craft custom hotspot designs and upload them directly to your project.
For our creative team, custom hotspots are typically created in Illustrator, Photoshop, or Sketch. While you can upload a variety of file types, we leverage SVGs for even scale across screen sizes.
Smart Tip 👨🏫: You can design for a normal state and a design for a hover/rollover state. This is a good way of letting the audience know the video is interactive.
For nimble creatives with limited access to resources, here are a few favourites we can suggest:
- The Noun Project: This extensive library of icons can be customized and downloaded as SVGs
- Flat Icon: Similarly to The Noun Project, this icon library can be customized and downloaded as SVGs
- Loading.io: This is a library of animated SVG’s that can be customized and downloaded
- Figma: Use this free collaborative design tool to create custom graphics, taking your designs to the next level.
When creating animated hotspots:
- SVGator: a powerful animation tool for SVG graphics.
- After Effect: Animated hotspots can be created in After Effects and exported out as gifs
Looking to use text in hotspots?
- Our team are building new features to streamline this in our Studio but for now, these need to be part of your original design.
- Make sure you outline any copy when using SVGs.
If you’re in a crunch or feeling a little short on inspiration, our creative team has developed a few versatile downloadable templates for you to take advantage of when building your next creative experience. You can access those here