# Визуальное оформление

## Настроить визуальное оформление приложения

Визуальное оформление состоит из блоков:

* Отступы закругления элементов и тени.
* Цвета
* Верхнее меню
* Нижнее меню
* Кнопки
* Тексты
* Картинки

### Отступы

<figure><img src="https://1480690874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1B1BMwmRkGzV5C4BnU%2Fuploads%2F2d3eN8gl3PmgoKOdgJzw%2Fimage.png?alt=media&#x26;token=8bd2b4dd-6623-4f46-8dcc-0b5fe8198da7" alt=""><figcaption></figcaption></figure>

### Цвета

* Акцентированный цвет приложения (цвет кнопок)
* Цвет фона приложения
* Цвет уведолмния об ошибках (ошибка адреса, отсутствие товара на складе и пр)
* Цвет информационных уведомлений
* Цвет текстовых инпутов (полей ввода текста - фио, телефон, адрес и пр.)
* Цвет информационных виджетов (статусы заказа, бронирование столов и пр.)

<figure><img src="https://1480690874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1B1BMwmRkGzV5C4BnU%2Fuploads%2FjGhFFh0Y5Fz0hR87ygTC%2Fimage.png?alt=media&#x26;token=abc3a05c-6d4f-4070-9c37-5eddd7550527" alt=""><figcaption></figcaption></figure>

### Верхнее меню приложения

* Цвет верхнего меню
* Цвет текста верхнего меню
* Размер шрифта в верхнем меню

### Нижнее меню

* Цвет нижнего меню
* Цвет активной иконки и текста в меню
* Цвет неактивной иконки и текста в меню
* Размер шрифта в нижем меню

### Кнопки в приложении

* Цвет основных кнопок
* Цвет вспомогательных кнопок
* Цвет текста основных кнопок
* Цвет текста вспомогательных кнопок

### Тексты в приложении

* Размер шрифта заголовков
* Размер шрифта заголовков карточек
* Размер шрифта подзаголовков карточек
* Размер шрифта описания карточек

<figure><img src="https://1480690874-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M1B1BMwmRkGzV5C4BnU%2Fuploads%2FjA2FBRT9XNyDvRKYlWt4%2Fimage.png?alt=media&#x26;token=a611ce9c-8a3e-4392-97db-b9c552ee5b86" alt=""><figcaption></figcaption></figure>

### Картинки в приложении

* Настройки размеров картинок коллекций
  * Выбрать соотношение сторон (1:1, 1:2, 1:3, 3:2, 4:3)
* Настройки расположения картинок коллекций
  * Растягивать изображение по наименьшей стороне
  * Растягивать изображение по наибольшей стороне стороне
  * Вписать картинку в область
  * Использовать пропорции оригинальной картинки
* Настройки размеров картинок каталога
  * Выбрать соотношение сторон (1:1, 1:2, 1:3, 3:2, 4:3)
* Настройки расположения картинок каталога
  * Растягивать изображение по наименьшей стороне
  * Растягивать изображение по наибольшей стороне стороне
  * Вписать картинку в область
  * Использовать пропорции оригинальной картинки

## Видео инструкция

{% embed url="<https://youtu.be/l4NKgYRoMB4>" %}