The design of the site and mobile applications can be configured individually depending on the preferences of the project. Additional appearance settings are performed in the Control Panel in the “Settings” section.

Table of contents

Templates
Layouts
Website appearance customization
Website home page builder
Mobile applications

1. Templates

Interactive templates are available at the links below and allow you to get acquainted with the appearance of the website on different devices.

Desktop version

Mobile version

2. Layouts

All website layouts are available in Figma at this link.

To view and use them in detail, you need to log in to Figma. You can copy them into a separate project in order to design your website yourself.

3. Website appearance customization

Regardless of the design of your website, you can quickly change the appearance of certain elements directly from the Control Panel. These elements are configured in Settings > Interfaces > Color scheme and Web: Graphics.

Base background color. Specifies the color that will be used as the base background (site background).

Key elements color. The ""Show restaurants"" button (for multi-brands) or the ""Show menu"" (for mono-brands) button on the main page of the website will be colored with this color.



Text color of key elements. This color will highlight the text on the ""Show restaurants"" button (for multi-brands) or ""Show menu"" (for mono-brands) on the main page of the website.



Logo icon (small) . Service logo that will be displayed in the Control Panel.



Favicon. The service logo that will be displayed in the browser tab before the title of each of the website pages.



Big logo icon . The logo of the service that will be displayed in the snippet when sending a link to the website in instant messengers or social networks.

4. Website home page builder

The main page of the website consists of blocks, each of which can be customized accordingly. See here for more details.

Header block. This block is displayed at the top of all pages of the website.



Start screen block. This block contains an image or a short video that will be displayed to customers when they open the home page of the website. This block also contains the ""Show menu""/""Show restaurants"" button and a short text.



Mini Slider block. This block may contain images with links to menus of companies, categories of goods (dishes), or special offers for customers.



Applications block. This block is responsible for displaying information about the mobile application of the service on the main page of the website.



Maxi Slider block. This block contains images with links to information for customers (service features, promotions or special offers).



Delivery and payment block. This block is responsible for displaying information about delivery and payment on the main page of the website.



Footer block. This block is displayed at the bottom of the main page of the website. The block contains a description of the service, a link to the city's promotions, as well as links to social networks and the rules for using the service.

5. Mobile applications

If necessary, you can configure the following elements of the mobile application:
Application color.
Application icon. Vector image without gradients.
Application push notification icon. Vector image in one color.
Splash screen of the application. Image when loading the application.
Company logo.

If you have any questions regarding the design of the website and mobile applications, you can contact the Dots Platform support team.

*

Link to this article: here

Updated on: 03/06/2024