Application Design Best Practices
While creating and customizing your Vimeo OTT website is extremely important, your branded applications are intended to be used by your customers every day. How can you make your streaming service appear unique and engaging? How can you attract users to download your application from an App Store? The answers can be varied depending on your service offering but always starts with how you have branded your application suite.
Your Vimeo OTT streaming service is meant to be a unique product offering which may be distinct from your organization or company. Some companies are streaming-service-first, where the company name is synonymous with their tent-pole product such as "Netflix" or "Hulu." Others may have a streaming service used as an extension of their larger company such as "Amazon Prime Video." It is extremely important to identify what your service intends to be and allow that to influence your branding.
Determining how to think about, create, and style your brand can certainly be a challenging task! In an effort to kick-start those design gears, here are a few best practices offered by our Branded Apps team:
Your Brand Logo
A logo should be striking, simplistic and eye-catching. You should always aim to have your brand logo unique! Don't attempt to copy established brands.
Within your Vimeo OTT application suite, a logo can be used in the following locations:
- Application icon on both the App Store listing and device home screen
- Splash screen
- Log-in gate
- Video "explore" interface
It is important to consider having variations of your logo - such as more square vs. wide formatting. Logo variations allow for more flexibility for usage within your branded application suite.
Provide a logo with a variety of footprints and colors so it is legible in any context.
Minimum Logo dimensions: 1024 x 1024 px.
Recommended Logo dimensions: 2000 x 2000 px or scalable vector format.
Your Application Icon
Your application icon will always be the first thing your customers see. It should be considered the star of your App Store listing and will always be visible on your users mobile and/or TV device once they have your application installed. Your application icon needs to attract attention but this can be tricky. Some ideas to consider are:
- Keep your icon logo simple
- Use little or no text. Icon text can be hard to read and will likely be compressed
- Please note that certain application platforms, such as Google's Android TV, requires your application icon logo to include your full application name. Depending on how you style your logo, you may need to provide asset variation to meet these requirements.
- Make your logo unique! Don't attempt to copy established brands
- Use recognizable iconography or brand-marks
Keep your Mobile App Icon simple, avoiding text and thin fonts if possible.
Include your App Name on TV App Icons, but keep the
design simple enough to read from the couch.
Minimum Icon dimensions: 1024 x 1024 px for mobile apps, 1280 x768 px for TV apps.
Recommended Icon dimensions: 2000 px wide or scalable vector format.
Your Brand Colors
Your brand colors represent your organization. Think about colors which will contrast well both within the overall application experience and against your logo.
Within your Vimeo OTT application suite, font colors are not able to be customized. They will always be either black or white depending on the best inverse of the background color of where the text is located.
For example, as the "Explore" interface background on TV applications is black the font color will be white. However, if your intended button color is a bright yellow the font color will be black.
Think about how your brand colors may influence text presentation. This will also be presented within the design mock-up our team will provide you with.
White or black can blend in with the background and hide important buttons.
Choose at least one contrasting brand color.
Your Splash Screen
Your application splash screen appears briefly when a customer launches your mobile or TV application. Generally, a user only has a second or so to view the splash screen prior to your application loading. For this reason, you do not want to focus too heavily on the overall design of the splash screen but ensure you are drawing focus towards your logo at the same time.
Depending on which applications you have within your Vimeo OTT agreement, you should consider how your branding will look within different dimensions. For example, a mobile splash screen is more vertical whereas a TV splash screen is more horizontal. Our designers will always review your provided assets and format them to be within dimension "safe-zones" for various device sizes.
Keep important logos and subjects towards the center or provide options for each dimension.
Mobile Splash dimensions: 2048 x 2732 px for tablet in portrait orientation, 2732 x 2048 for tablet in landscape orientation. Phones will be cropped down from the tablet splash.
TV Splash dimensions: 1920 x 1080 px (HD) or 3840 x 2160 (4K)