Требования к баннеру для слайдера: различия между версиями

← Предыдущая правка

ВизуальныйВики-текст

Текущая версия от 09:12, 30 ноября 2022

На главной странице cchgeu.ru есть слайдер с баннерами, у него есть некоторые особенности.

Устройство баннера

Баннер состоит из фоновой картинки и текста, который накладывается сверху.

Текст выравнивается по левому краю.

Требования к баннеру

Чтобы ваш баннер смотрелся аккуратно и информация не терялась, просьба учитывать требования к макету.

Требования к фоновой картинке

Формат файла: JPG;
Размер: 1920х420 пикселей;
Не должно быть текста, иначе он будет обрезаться на мобильных устройствах;
Нежелательно размещать значимые элементы, особенно слева и справа по краям;
Рекомендуется использовать цвета и элементы фирменного стиля.

Требования к тексту

Текст должен быть короче 90 символов.

Примеры баннеров с нарушениями

Можно открыть https://cchgeu.ru и посмотреть, как выглядят баннеры на компьютере и телефоне.

Текст на картинке обрезается на маленьких экранах

На телефоне информация по краям теряется:

Баннер с картинкой обрезается на небольших экранах

Логотипы по бокам обрезаются

Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider

@@ Строка 1: / Строка 1: @@
 На главной странице cchgeu.ru есть слайдер с баннерами, у него есть некоторые особенности.
-==== Устройство баннера ====
+== Устройство баннера ==
 Баннер состоит из фоновой картинки и текста, который накладывается сверху.
-[[Файл:Slider-example.png|безрамки]]
+Текст выравнивается по левому краю.
+[[Файл:Slider-big.jpg|безрамки]]
+== Требования к баннеру ==
 Чтобы ваш баннер смотрелся аккуратно и информация не терялась, просьба учитывать требования к макету.
-==== Требования к баннеру (фоновой картинке) ====
+=== Требования к фоновой картинке ===
 # Формат файла: JPG;
@@ Строка 14: / Строка 18: @@
 # Не должно быть текста, иначе он будет обрезаться на мобильных устройствах;
 # Нежелательно размещать значимые элементы, особенно слева и справа по краям;
-# Рекомендуется использовать цвета брендбука.
+# Рекомендуется использовать цвета и элементы [https://cchgeu.ru/university/firmennyy-stil/ фирменного стиля].
-==== Требования к тексту ====
+=== Требования к тексту ===
-Текст не должен быть слишком длинным.
+Текст должен быть короче 90 символов.
-==== Примеры баннеров с нарушениями====
+== Примеры баннеров с нарушениями==
 Можно открыть https://cchgeu.ru и посмотреть, как выглядят баннеры на компьютере и телефоне.
-Баннера с текстом на картинке:
+=== Текст на картинке обрезается на маленьких экранах===
+На телефоне информация по краям теряется:
-[[Файл:Slider-bad-1.png|безрамки]]
+[[Файл:Slider-bad-1-mobile.png|безрамки]]
-Так баннера с текстом на картинке выглядит на телефоне:
+=== Баннер с картинкой обрезается на небольших экранах ===
+[[Файл:Banner-Savvateev.png|безрамки]]
-[[Файл:Slider-bad-1-mobile.png|безрамки]]
-Пример баннера с элементами по краям:
+=== Логотипы по бокам обрезаются ===
+[[Файл:Banner-Bad-Logos.png|безрамки]]
-[[Файл:Slider-bad-2.png|безрамки]]
+Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider