Image Resolution Suggestions - Action Buttons & Homepages

Define A Style & Branding Guide

Define a Style Guide within the Company that matches to Branding Requirements:

• Use Branding Regulation Hex codes to match your Company Colours / Softools Site Colour.
• Define a Font and stick to a consistent Font Size and Font Weight.
• Use a consistent Shape (Square / Circle / Rounded Rectangle) and then stick to set pixel dimensions.
• Use images from a Standard Icon Set/Image Library

File Formatting

• SVG: Best for scalability and consistency across all screen sizes
• PNG: Use if a transparent background is needed, but if not preference is to use SVG

Action Buttons

Action Buttons have many purposes. Commonly they will be used on a Homepage as navigators to an application or within a Record to drive workflows. The following is an example for styling these images.

• An effective design is to have an image depicting the action beside a text label or instruction.
• Use a standard rectangular shape and then stick to set pixel dimensions such as 200px by 80px
• Add a rounded border of same or darker hue to the body to give a lifted feel to the image.

Choose the right File Format

The best image format is generally PNG here as it allows for transparent backgrounds and they will be able to fit on all screen sizes as they are relatively small UI elements.

Homepage Images:

A Homepage is the first landing page that a User sees when they join the Softools Platform and subsequently acts as the Site Dashboard.

• Key Components: Site Name, Company Mission Statements, Industry Sector Graphics, Navigation Buttons

• Try to use little text as when this rescales onto Mobile it will still need to be readable

Image Dimensions

Homepage Image dimensions are a little subjective based on the design of the homepage. In the example above there is one image that spans the screen, the a row of image action buttons, then another image that spans the screen.

The more important part in choosing the size of the image is to match the shape of where it is going to fit. As a rough guide, the image sizes here are 1042px by 230px and 1042px by 320px respectively.

For one image that covers the whole screen, this will be roughly 1042px by 650px.

If you then consider that that the height for a row of 100px then this should give you a rough feeling of the image sizes that will suit your homepage. The images will scale so there is a friendly tolerance.

Choose the right File Format

The best image format here is likely SVG. Homepage Images often take up a large potion of the screen and so scalability is the more important requirement. However, if you need the image to be transparent to match to a Homepage Background Colour then use PNG.

Image Management and Replication

Store all Site Images in one place. I would suggest using a PowerPoint Document to create the Action Buttons and Homepages.

• For each Image Action Button needed, copy an original and alter aesthetics.
• Save all individual images in case there is a need to revisit for alterations.
• Save each Action Button Image as a separate file to upload to the Field.
• For real control that the images are the same size use an image editing software to ensure the image saved from PowerPoint is then rescaled to the desired pixel length and width from the style guide.
• This is a good place if you want to trial and error with different sized homepage graphics as well.