Одна думка на слайд
Кожне фото показує одну думку. Покупець гортає швидко й довгого не читає: три думки на одному слайді означають, що не запам’ятається жодна. Перш ніж починати, сформулюй думку одним коротким реченням. Не виходить — у тебе два слайди.
Потім придумай, як її показати. Розміри — лініями-вимірами. Міцність — товаром під навантаженням. Зручність — товаром у руці. Добра картинка доводить думку навіть без тексту. Слово без доказу не переконує: написано «не протікає», а пляшка просто стоїть на столі — покупець не повірить.
Композиція
Товар — найбільший і найчіткіший об’єкт у кадрі. Фон, реквізит, іконки працюють на нього, а не змагаються з ним за увагу. Найчастіша помилка новачка — яскравий фон, великий напис, іконки, а сам товар маленький і десь збоку.
Розставляй усе по сітці з 2. Налаштування Photoshop. Центральні лінії дають симетрію — так зроблена більшість наших слайдів із заголовком угорі. Якщо хочеш динаміки, постав товар на третину кадру, а на другу третину — текст: головне на перетинах ліній третин ловить погляд. Товар на діагоналі теж додає руху.
Не заповнюй кожен сантиметр. Вільне місце навколо товару й тексту — не порожнеча, а повітря, яке допомагає оку знайти головне. Перевантажений слайд на телефоні стає кашею.
Заголовок
Заголовок називає думку слайду кількома словами, зрозумілими без решти картинки. Зазвичай у нього два рівні: великий рядок — сама думка, менший під ним — уточнення.
Ось так заголовок виглядає плоско:
Одна смуга з рівною заливкою на всю ширину, увесь текст одним рядком, одним розміром і одним кольором. Читається, але виглядає дешево, зливається з іншими лістингами, і око не знає, за що вхопитися.
А ось так ми робимо — той самий текст:
Будуємо в три кроки.
- Основна плашка. Щоб дизайн не виглядав плоским, заливаємо її насиченим градієнтом (додаємо текстуру), а не одним кольором. Зверху можна додати ледь помітну текстуру чи патерн. Тут це темна плашка з заокругленими краями і тонким золотим обведенням в тон товару, а ключове слово PUMP виділене тим самим золотим. Плашку малюємо векторною фігурою, по сітці.
- Плашка під підзаголовок. Окрема, меншого розміру, контрастна до основної — тут світла капсула під темною плашкою. Вона відділяє другий рівень заголовка («with locking design») і сама стає акцентом.
- Текст відривається від плашки. Тонке обведення або легка тінь під літерами — і текст читається навіть на строкатому фоні та в дрібному розмірі. Обведення має бути ледь помітним: товсте робить літери важкими й брудними.
У прикладах з 3. Фото з ТЗ видно варіації того самого: великий рядок градієнтом і менший на темній плашці, заголовок на плашці з текстурою під кутом. Принцип один — два рівні, контраст, об’єм.
Шрифти
Текст на фото має читатися на телефоні без збільшення, звідси мінімальні розміри (для документа 2000 × 2000 px на 300 ppi):
- заголовок — від 32–36 pt і більше (≈ 133–150 px);
- акценти: цифри, розміри, ключові слова — від 20–26 pt (≈ 83–108 px);
- текст у блоках — пояснення під іконками, у плашках, у виносках — не менше 18–20 pt (≈ 75–83 px).
Це нижня межа, а не мета. Є місце — роби більше, менше — не можна.
Бери прості шрифти без засічок, щільного накреслення — Bold, Black. Тонкі й декоративні на маленькій картинці розсипаються. Текст має чітко відділятися від фону: світлий на темному, темний на світлому, а на строкатому фото — на плашці.
Ринок — США, тож текст англійською в американському написанні (color, а не colour), а одиниці — американські: дюйми (IN), унції (OZ, для рідин — FL OZ), фунти (LB), градуси Фаренгейта (°F). Акценти — конкретні факти: розміри, об’єм, вага, кількість. Пояснення в блоках — одна-дві короткі фрази, не абзац.
Колір
Слайди одного товару мають виглядати як одна серія: однакові кольори плашок, однаковий стиль іконок, однакові шрифти. Тримай 2–3 основні кольори: один домінує, інші — акценти.
Колір задає настрій. Теплі кольори — червоний, помаранчевий, жовтий — дають енергію й відчуття «треба зараз»: кухня, діти, активний відпочинок. Холодні — синій, зелений — спокій і довіру: дім, здоров’я, ванна. Чорний, білий, сірий — стриманість і преміальність. Помаранчевий на темному фоні, як у багатьох наших слайдах, чудово ловить погляд.
Беремо кольори, які вже є в товарі або його сцені, і додаємо до них контрастний акцент. Помаранчевий текст поруч із зеленим товаром — і перевага помітна одразу.
Якщо важко зібрати свою палітру, заходь на pigment.shapefactory.co — там безліч вдалих комбінацій. Коли почнеш працювати з цільовими заявками, отримаєш доступ до референсів готових стилістик, які ми використовуємо повторно.