Вчимося правильно розташовувати зображення щодо тексту
Одним зображенням можна розповісти користувачеві більше ніж 1000 слів. Зображення, яке правильно розташоване в тексті, стає кращим для сприйняття. Зображення є дуже важливим фактором у сприйнятті змісту контенту. Один із суттєвих принципів при дизайні – це відстань між елементами. Це також враховується для зображень. Занадто маленька відстань між зображенням та текстом може заважати її сприйняттю. У цій статті я наведу кілька стандартів, розміщення зображень щодо тексту. Думаю, для блогерів теж буде цікаво почитати.
Текст повинен обтікати маленькі зображення Зображення, які менше половини текстової ширини, "мають обтікати". Ось на першому прикладі видно як текст обтікає зображення, плюс відстань між ними є. А ось другий приклад показує, як не потрібно робити, відстань між текстом і зображенням дорівнює нулю, тим самим текст заважає сприйняттю зображення, а при читанні тексту зображення заважає.
Відстань між текстом та зображенням Зображення повинні мати вертикальний та горизонтальний відступ, але горизонтальний відступ повинен бути не менше 40 Pixel, а вертикальний не менше 20 Pixel. Відступ залежить і від розміру шрифту контенту, і від ширини між рядками. Залежно від малої висоти тексту, відстань відступ теж зростає. Як сказав 🙂
Як розташовувати широкі зображення Якщо ширина зображення більше половини текстової частини, тоді зображення розміщуємо по центру. Якщо ви бачите, що текст погано обтікає зображення, тоді краще розмістити зображення по центру (дивіться на приклад у низу).
Кілька зображень (ілюстрований метод) Якщозображення розташовувати поруч (один біля одного), або навпроти друга, отримуємо невеликі текстові блоки, які стають нерозбірливими.
Коли зображення одне біля одного, тоді виходить великий блок із текстом навпроти зображень, так робить не потрібно. (Зображення заважають одне одному) Стаття часто має більше одного зображення. Тоді потрібно буде звертати увагу не лише на відстань між текстом та зображеннями, а й на відстань між самими зображеннями.
Підпис до ілюстрації Якщо ілюстрація отримує підпис, це добре для читачів і для пошукових машин. При підписах до ілюстрації потрібно звертати увагу завжди на те, щоб текст не був ширшим за ілюстрацію. Оскільки зображення можуть бути тонкими, тому підпис до ілюстрації робимо з малого розміру шрифту.
Робимо Висновки: Для кожного зображення потрібне так зване своє місце, щоб читачі краще його сприймали, і щоб зображення не зливалося з текстом (втрачається читання тексту). Виконуючи всі стандарти, ми будемо робити нашу статтю більш Юзабільною 🙂 Стаття була написана за участю німецького ресурсу webstandard.