This guide applies to both the Main Banner and Space Banner designs. It can be tricky designing for responsive web design, so the dimensions included should work as a handy guide to help you when using text or any key graphics you want visible at all times in your banner design.
You can use the dimensions included to set up your design, or to make it even easier, we’ve included three examples that should be of use in this article.
Main Banner (Desktop View)
Banner Design: We recommend minimizing the amount of text included and to avoid photos of people where possible.
Banner File type: PNG, JPG, JPEG, JFIF or GIF < 3MB
Dimensions: 2000px x 474px
Safe Space for key text / imagery: 1290px x 135px centered
Check out this article for instructions on changing the main banner!
Space Banner Design – Do’s & Don'ts
As the Space Banner image is visible on both Mobile and Desktop, it’s important to ensure the design works well when viewed on both.
On desktop, there is more of the banner image visible - however, there is a safe space as illustrated below, that is guaranteed to be visible when viewed on the mobile app.
The following examples highlight how to use this safe space effectively, always ensuring that the focal point of the banner image design is in a central position.
Example 1 - Vector Illustration and Elements
Keep the focal point of the design in the center of the banner, not to the left or right, to ensure that the safe space is occupied with the most important part of the design.
Example 2 - Photography
It’s important to select appropriate photographs for use in a Space Banner image. Always opt for photographs that have the main subject matter centered and not too zoomed in, otherwise, on mobile it could look indistinguishable.
Example 3 - Pattern
A pattern is a safe bet for a Space Banner design, as long as the elements that the pattern is comprised of are small and densely populated in the design.
If the elements are too large, the pattern won’t display.
As illustrated below the first image is our recommended image.
Space Banner (Desktop View)
Space Banner (Mobile View)
Login Screen Design Guide
Please note, the login page is only visible to users who access Workvivo via password authentication. Any user accessing via SSO will see their organization’s SSO login page instead of the Workvivo login screen.
Top Tips When Considering a New Login Image:
- Visible Area on Desktop: This area may change slightly depending on the screen size
- Visible Area on Mobile: The middle section of the image provided will be visible on mobile
- File types Supported: PNG, JPG
Login Page Response Design
It can be tricky designing for responsive web design, so the dimensions here should work as a guide to help you when using text or any key graphics you want visible at all times in your banner design.
We also recommend avoiding putting text or vital graphical elements on the very sides of the artwork.
Top Tip:
- Some of the image will be covered by the Login Box so keep this in mind
- For optimum results, avoid using text in your design
- Visible Area on 24" screen: 1500px x 750px
- Hidden Area: 1500px x 125px
Login Page Response Design (Mobile View)
As a responsive web design, be careful when using text or any key graphics you want visible at all times in your banner design. The mobile screen uses the same artwork as the desktop screen and will show the middle portion of the creative.
Again, we recommend keeping backgrounds generic and devoid of text.
Top Tip:
- Some of the image will be covered by the Login Box so keep this in mind
- For optimum results, avoid using text in your design
- Visible Area: 545px x 971px in center