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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ Строка 4: / Строка 4: @@
 Баннер состоит из фоновой картинки и текста, который накладывается сверху.
-[[Файл:Slider-example.png|безрамки]]
+Текст выравнивается по левому краю.
+[[Файл:Slider-big.jpg|безрамки]]
 == Требования к баннеру ==
@@ Строка 16: / Строка 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-2.png|безрамки]]
+=== Логотипы по бокам обрезаются ===
+[[Файл:Banner-Bad-Logos.png|безрамки]]
 Короткая ссылка на эту страницу: https://s.cchgeu.ru/wikislider