Creating studio pages - best practices

Sample pages and templates

• Leverage the sample pages for a quick start to creating your pages. For more information, see Sample-pages.
• Make a copy of a page, look at the settings, tweak them, or play around with the options to achieve your desired page appearance.
• Design a set of pages with settings aligned with your company's branding or specific lines of business in terms of color and appearance. Use these pages as templates by duplicating them to create additional pages. This shortcut saves you the time typically spent on creating pages from scratch, ensuring a consistent look and feel across all pages 
• Use color themes to differentiate pages for different lines of business. When using colors, remember that colors mean different things to different people and may even have a cultural significance. For more information, see Using-colors-to-create-visually-appealing-pages.  

Page components

• Arrange the page components to establish a clear visual hierarchy, in line with the page's purpose. Consider the sequence in which you want your users to engage with the elements, then place them accordingly on the page. Arrange components in rows and columns to create structured and engaging page layouts. For more information, see Designing-page-layouts-with-rows-and-columns.
• Use a mobile first strategy to structure your content hierarchy effectively. Due to the limited space available on small screens, you will prioritize creating practical layouts and remove unnecessary elements that might impede page rendering or navigation.  
• Use wireframes, which are diagrams or sketches showing where each component should be placed. Wireframes help you plan the layout of a page before you begin work on the page. Create a wireframe of your page and add placeholders for the text and images.  
• Place the search bar in an expected, conventional location, typically at the top of the page, to make sure the search functionality is available and easily accessible. Include a search icon in the search bar for added visual clarity.
  (Version 23.3.01 and later) You can place the search bar (standalone) with other page components in a row (horizontally) to create an integrated and visually structured page layout. For information about limitations while placing multiple page components in a row, see Restrictions for using page components in rows.
• Draw your users' attention to specific content by adding a catalog banner and positioning it at the top of your page.
• Design more granular components like content blocks, then copy them to use as templates.
• Add empty containers as spacing placeholders in the layout if a row has multiple blocks. Replace these later with real component blocks. Start by filling the first container with a content block to achieve the desired appearance. For multiple blocks of equal width, use the first content block as a template. Copy and paste it into the other containers.

Form factor and device size

Design your components in a way that they can be displayed correctly on different screen sizes and devices. Your end users may access your application from desktops, mobiles, or other devices. The difference in screen size and display area make it difficult for a component that looks great on a desktop to display well on a mobile device.

• Adjust the alignment of text and images to suit different screen sizes and orientation. Avoid designs that need specific alignments between text and background because they tend to be less responsive.
• While catalog sections and out-of-the-box components typically resize and work consistently across devices, some components such as content blocks need adjustments for optimal appearance on mobile devices. To handle this challenge, duplicate the component and configure it separately for small, medium, and wide screens.   
• After you configure a component, preview it to test its appearance on different device sizes.  

Images

• Leverage in-house marketing and design resources.
• Do not use restricted file types for images.
• Balance image quality with file size because large file sizes take longer to load.
• Do not make images larger than they need to be, especially for mobile devices.

BMC Helix Support webinar

Watch the following webinar to learn the process for creating your self-service portal using the BMC Helix Digital Workplace Studio:

Webinar: A Recipe For Success When Using Digital Workplace Studio