Design

The Design Tab in Workmaster allows you to customize the visual appearance of your app by setting the theme, logo, font, and colors. To access the Design Tab, make sure you've signed in to your Workmaster account and created an app from scratch. Once you’ve named your app and completed these steps, the Design Tab will be available and contains the following sections:

1. Upload Logo

The Upload Logo section allows you to upload your app's logo easily.

• How to Upload:

  • Click the Upload Logo button.

  • Select your desired logo image from your device.

  • Your logo will be displayed in the preview area.

This section is a simple image uploader that ensures your logo is integrated into your app’s design seamlessly.

2. Set Your Default Font

The Set Your Default Font section enables you to choose a font for your entire app. This will ensure consistency across the app's text elements.

• How to Set the Font:

  • Use the dropdown menu to see the list of available fonts.

  • Select the font you want to apply as the default for your app.

This dropdown includes a variety of fonts for you to choose from, allowing you to match the typography to your app's theme.

3. Set Your Default Colors

In the Set Your Default Colors section, you can choose the color scheme for your app, ensuring that the app's appearance aligns with your brand or design vision.

There are two ways to choose your default colors:

3.1. Manually Select Colors

• How to Select:

  • Click the Marker Icon next to the color field.

  • Choose Open Color Picker from the options.

  • Use the color picker to manually select the color that fits your desired design.

3.2. Select From Image

• How to Extract Colors from an Image:

  • Click the Upload Image button in the Select From Image option.

  • Upload an image from your device that you would like to extract colors from.

  • Once uploaded, you can click the Marker Icon next to the color field.

  • Choose Select From Image from the options.

  • Click on the image, and the system will extract the color from the point you select on the image.

This allows you to harmonize your app's color palette with a specific image you want to use.

Live Demo

At the bottom of the Design Tab, there is a Live Demo section. This feature provides a real-time preview of how your app will look with the selected theme, font, and colors. You can interact with the demo to visualize the changes instantly and see how your design adjustments will appear on the app.