Skip to main content

Brand your account

    Design guidelines for visually appealing Experiences

    • Updated

    Note: This article is no longer maintained. For updated information, please refer to the corresponding Admin App article. We recommend updating your links if you’ve linked to this article.

    Stand out and be creative with your Experiences. You can customize the Experience design with appropriate backgrounds, Cover Images, logos, and default folder icons that match your company branding and industry.

    • With Showpad's Essential pricing plan and higher, you can create Classic Experiences.
    • With Showpad Plus and Ultimate, you can design Advanced Experiences. 

    Note: We built helpful Illustrator and Photoshop templates to help you create Experiences and Cover Images. Export the slices to upload in Showpad as separate image files.
    You can download the templates at the bottom of this article.

    See how it looks

     

     

    Key features

    • Stick out from the competition and present content in a visually appealing style
    • Add a custom Cover Image for an Experience, to let users quickly find what they need
    • Download our Photoshop PSD templates to get started

    You need this to succeed

    • Showpad Essential and higher for Classic Experiences
    • Showpad Plus and Ultimate can have Advanced Experiences activated
    • Design and Photoshop knowledge

    The quick way to awesomeness

    Classic Experience

    Advanced Experience

    Back to Top

    Classic Experiences

    Setting a background

    An Experience background is like the wallpaper on your desktop. It gives your Experience a customized look and complements the Experience's content. 

    We recommend using an image size of 2048px by 2048px for the best result. This size is required because mobile devices can be used in both portrait and landscape mode. MobileDesign.png

    1. Click the Library tab. Choose a division, if relevant. 
    2. Open the Experience Builder.
      Open_Experience_Builder.png
    3. Select the Experience you want to customize.
    4. Click Design.
    5. Click Experience Background.
      Design_-_Experience_Background.png
    6. Click the Select a File button to choose a background stored on your computer or drag and drop it into the Upload section. If you don’t want to upload your background, click one of the default backgrounds below the Upload section.
    7. Open the Anchor Position drop-down list and select the desired anchor position for your background.
    8. Click the Save button.
    Back to Top

    Setting a logo

    An Experience logo is displayed on the Experience at the location of your choice. The recommended positioning of the logo is at the bottom-right, bottom, or bottom-left.
    Add transparent sides to your logo if you don't want it to appear too close near the Experience border.Transparent.png 

    Note: There is no exact limit for the size of your logo. However, we recommended a height of 100px. 

    1. Click the Library tab and select the Division if applicable.
    2. In the Experience builder, select an Experience.
    3. Click Design.
    4. Click Add a Logo.
    5. Click the Browse button and select the logo you want to add. Choose where you want the logo to be displayed by selecting your Anchor position.
      add_a_logo_from_the_list_v2_op.png
    6. Click the Save button.
    Back to Top

    Uploading a Cover Image

    Cover images help you to create a highly immersive, branded, visually appealing home screen for your users. It makes it easier for them to see a preview of the Classic and the Advanced Experiences. Cover images help your sales reps to quickly navigate to the particular content they need.

    Note: Cover images are currently visible in Showpad's Web app and the mobile Showpad iOS app.

    1. Open the Experience to add a Cover Image.
    2. Click Design.
    3. Select Cover Image.
      Cover_Image_for_Experience.png
    4. You will notice that by default, the Experience background is used as a Cover Image. You can preview how it looks like on a desktop or mobile device on the next screen.Cover.png
    5. Upload your custom Cover Image by dragging and dropping the picture or by selecting it from your drive.
      SelectCover.png

      Note: We recommend a 2400 pixels wide JPG or PNG file for an excellent result. 

    6. A focal point allows focussing on an important area of the Cover Image.
      Focal.png
    7. Click Save and your Cover Image will now be visible on the home screen of the user. When opening the Experience, users will still see the background you created and uploaded before.
    Back to Top

    Setting a default folder icon

    You can modify the default folder icon to ensure consistency in your Experience's design. Note that changing the default folder icon only affects the folders in the Experience you’re modifying. It's possible to choose a custom folder icon when creating a new folder. 

    The recommended dimensions of this folder icon are 420px by 460px. You can create the folder icons with or without labels. Export the icons as a PNG file to retain transparency.

    Icons.png

    • Design icon with a label: When including a text label in your icon, you can use the entire space for positioning your icon.
      label.png
    • Design icon without a label: When using the default folder labels of Showpad, they will be placed under the icon space (420px by 460px). We recommend positioning your design close to the bottom of the artboard, so the icon is displayed closer to the label, as you notice in the example above.
      Lower.png

     To upload your custom folder icons,

    1. Go to the Experience you want to customize.
    2. Click Design.
    3. Click Default Folder Icon.
      Default_Folder_Icon.png
    4. Click the folder icon you want to use as the default icon.
    5. Click the Save button.
    6. You can also add your custom folder icons while creating a new folder, so you don't necessarily need to use the default ones.
      Upload.png
    7. To edit your folder logo, click on it and hover over the folder icon until you see the trash can. Note that the icon will fully disappear if you click the trash can icon. You can replace it by uploading a new one and selecting Save.
      Trash_Icon.png  

    Back to Top

    Advanced Experiences

    Clicking the Design tab in the Experience Builder opens a window where you can change the global design settings for the selected Experience. You will always see a live preview on the right side of the screen. You can find the Photoshop design templates for every available Experience at the bottom of this article.
    In General, the design of all the Showpad Experiences consists of Logos, Page Styles, Breadcrumbs, and Buttons.
    Design_advanced_experience.png

    1. In the Logos section, you can upload a Header logo. 
      Showpad_Online_Platform__1_.png
    2. Page Style. The color background stays the same no matter which node was visited. You can choose one or two colors to mix in the background. When mixing two colors, both colors are applied following a radiant. One color is used for the middle and the other is used for the surroundings.
      There is also a principle of inheritance of the background. The background of a parent node is applied to all child nodes.
      The maximum size allowed for the Background image is 3840px by 2160px.
      Showpad_Online_Platform__2_.png
    3. The breadcrumbs are reminders of the sections and subsections the user is currently visiting. The user can navigate back to the current and previous sections by clicking or tapping a breadcrumb. Here you can change the background and font colors.
      Showpad_Online_Platform__3_.png
      This is how your user will see it:
      Smart_Guide.png
    Back to Top

    Download the Illustrator and Photoshop templates

     

    Related articles

    Get the latest apps and email integrations

    iOS App Store Google Play Store Microsoft Store