Graphic Design (Part 1)

Estimated reading time: 10 minutes

The Graphic Design section covers everything from brand identity to product visual presentation and user experience. The main objective is to create a visually appealing, intuitive, and trustworthy environment that drives user engagement and facilitates the purchasing process.

• App Graphic Elements
  • Main Banner
  • E-commerce

App Graphic Elements

These elements are all the visual components and design elements that make up the interface of an e-commerce application and are essential to create a visually appealing and user-friendly experience for users interacting with the platform.

Main Banner

This prominent image is located at the top of the homepage of the website to attract visitors' attention and convey key messages about the brand, promotions, featured products, or other relevant information.

Note: The default image on the banner corresponds to CLAU.IO, and both the image and the banners can be edited. Additionally, it is possible to create a new banner. When a new one is created, it will initially be generated in an inactive state and will display the image of the last created banner, whether it is active or not. It will need to be activated manually.

Steps to modify the Main Banner in the Graphic Elements panel of the application:

1. In the Graphic Elements panel of the application, select the first checkbox corresponding to the Main Banner.
2. Click on the image you want to change, which will display the gallery of available options.
3. To upload a new image, scroll to the end of the gallery and choose the Upload Image option.
   • Note: The image must be in JPG or PNG format and must not exceed 2 MB. The banner dimensions are 1125 x 375 JPG/PNG, and the safe area is 270 x 90 pixels.
4. Then, select the newly uploaded image, which will appear at the beginning of the Gallery.
5. Activate the banner once you have selected the desired image.

By following these steps, you will successfully modify the Main Banner in the Graphic Elements panel of the application.

E-commerce

In this section, you can customize the color palette of the platform. It offers specific options that allow you to define the colors of the site for specific elements such as buttons, backgrounds, and texts, providing you with complete control over the visual aesthetics of your website or application.

To select the desired color, tap on the field to modify. The selection panel will appear below the preview, just above the save and cancel buttons.

Images

• Image 1: Change the logo of transactional emails (Note: These are the emails that customers receive when making a purchase with their order information). Also, modify the image in the My Account section of the mobile version and the Profile in the web version.
• Image 2: Change the logo of the main page in the web version and the menu logo.
• Image 3: Change the About Us logo.

Colors

• Light Primary:
  • Change menu and cart buttons.
  • On the web version, adapt the Profile or Sign In and Register buttons.
  • Set the color of the screen when completing the purchase.
• Dark Primary:
  • Change the search bar.
  • Modify selection text.
  • Establish the background of transactional emails. (Note: To correctly view the color in emails, the message must be fully open; otherwise, only the white section where the text appears will be visible).
  • Set the color of the WhatsApp logo that is modified into a button when sliding the screen.
  • Affects the add to cart button.
  • Change the borders of the quantity when selecting the item and in the shopping cart.
  • In the profile, it reflects on the icons: Verify your Email, My Orders, Point Stores, My Gifts, Contact Us, and About Us;
  • Identify the text of Edit Profile, Update, and Cancel.
  • In the payment section, it reflects in the email confirmation and in the next icon of the Account section.
  • In Shipping Methods, set the color of the next icon and in the buttons to apply coupon and points, and the add gift button.

• Light Secondary:
  • Remains white.

• Dark Secondary:
  • Modify the minus and plus icons, the total value, the share button, and the next button in the shopping cart.
  • Modify the color of the initials, points, and logout icon.
  • Set the color of all text in the Edit Profile section and the background of floating messages.
  • It is also present in all selections to be made in the payment section, the value of the items, the Share Cart field, and the Finish icon.
  • Change the Contact Us and Policies icons within the About Us section.
  • Decide the color for the Close field when thanking for the purchase.

• Background:
  • This field is not modified.

Note: Yes, it has the corresponding color code, you can enter it in the desired field. It will not be visible in the color box, but once saved, the color will be registered in the established sections.

Bars

• Footer or Bar:
  • This color changes the color in the menu bar for the view from the application.
• Header Color:
  • Modifies the top bar of the web page.

Text

• These, preferably, should remain in the pre-established colors, as there is a possibility of not displaying the text when modifying the colors presented above.