logo
Агентство интернет-маркетинга
phone phone +7 (391) 200-25-11
Оставить заявку
Услуги
  • SEO – продвижение
    • Продвижение с оплатой за результат
    • Продвижение сайта в топ
    • Продвижение сайта по трафику
  • Контекстная реклама
    • Контекстная реклама Яндекс Директ
  • Таргетированная реклама
    • Реклама в VK
    • Реклама в Одноклассниках
  • Комплексное маркетинговое сопровождение
    • Интернет-маркетинг под ключ
    • Отдел маркетинга на аутсорсе
  • Аналитика
    • SEO аудит сайта
    • Аналитика воронки продаж
    • Внедрение сквозной аналитики
    • Технический аудит сайта
    • Юзабилити аудит сайта
  • Дизайн
    • Разработка фирменного стиля
    • Разработка логотипа и фирменного стиля
    • Разработка брендбука
    • Разработка логотипа
    • UX и UI оптимизация
Кейсы
Сотрудники
Компания
  • О компании
  • Клиенты
  • Вакансии
  • Реквизиты
Полезные материалы
  • Маркетинг от А до Я
  • Wiki
Контакты
Красноярск
Красноярск
Москва
Воронеж
Екатеринбург
Казань
Краснодар
Пенза
Ростов-на-Дону
Самара
Санкт-Петербург
0
logo
Агентство интернет-маркетинга
Красноярск
Красноярск
Москва
Воронеж
Екатеринбург
Казань
Краснодар
Пенза
Ростов-на-Дону
Самара
Санкт-Петербург
phone phone +7 (391) 200-25-11
Оставить заявку
Услуги
  • SEO – продвижение
    SEO – продвижение
  • Контекстная реклама
    Контекстная реклама
  • Таргетированная реклама
    Таргетированная реклама
  • Комплексное маркетинговое сопровождение
    Комплексное маркетинговое сопровождение
  • Аналитика
    Аналитика
  • Дизайн
    Дизайн
Кейсы
Сотрудники
Компания
  • О компании
  • Клиенты
  • Вакансии
  • Реквизиты
Публикации
  • Маркетинг от А до Я
  • Wiki
Контакты
    0
    logo fix
    Услуги
    • SEO – продвижение
      SEO – продвижение
    • Контекстная реклама
      Контекстная реклама
    • Таргетированная реклама
      Таргетированная реклама
    • Комплексное маркетинговое сопровождение
      Комплексное маркетинговое сопровождение
    • Аналитика
      Аналитика
    • Дизайн
      Дизайн
    Кейсы
    Сотрудники
    Компания
    • О компании
    • Клиенты
    • Вакансии
    • Реквизиты
    Публикации
    • Маркетинг от А до Я
    • Wiki
    Контакты
      Красноярск
      Красноярск
      Москва
      Воронеж
      Екатеринбург
      Казань
      Краснодар
      Пенза
      Ростов-на-Дону
      Самара
      Санкт-Петербург
      phone phone
      +7 (391) 200-25-11
      Заказать звонок
      E-mail
      sale@bitagency.ru
      Адрес
      г. Красноярск, ул. Диктатуры Пролетариата, д.32, 6 этаж
      Режим работы
      Пн – Пт: с 9:00 до 18:00
      0
      Оставить заявку
      logo
      Телефоны
      +7 (391) 200-25-11
      Заказать звонок
      0
      logo2
      • Услуги
        • Услуги
        • SEO – продвижение
          • SEO – продвижение
          • Продвижение с оплатой за результат
          • Продвижение сайта в топ
          • Продвижение сайта по трафику
        • Контекстная реклама
          • Контекстная реклама
          • Контекстная реклама Яндекс Директ
        • Таргетированная реклама
          • Таргетированная реклама
          • Реклама в VK
          • Реклама в Одноклассниках
        • Комплексное маркетинговое сопровождение
          • Комплексное маркетинговое сопровождение
          • Интернет-маркетинг под ключ
          • Отдел маркетинга на аутсорсе
        • Аналитика
          • Аналитика
          • SEO аудит сайта
          • Аналитика воронки продаж
          • Внедрение сквозной аналитики
          • Технический аудит сайта
          • Юзабилити аудит сайта
        • Дизайн
          • Дизайн
          • Разработка фирменного стиля
          • Разработка логотипа и фирменного стиля
          • Разработка брендбука
          • Разработка логотипа
          • UX и UI оптимизация
          • Юзабилити аудит сайта
      • Кейсы
      • Сотрудники
      • Компания
        • Компания
        • О компании
        • Клиенты
        • Вакансии
        • Реквизиты
      • Публикации
        • Публикации
        • Маркетинг от А до Я
        • Wiki
      • Контакты
      Оставить заявку
      • region Красноярск
        • Города
        • Красноярск
        • Москва
        • Воронеж
        • Екатеринбург
        • Казань
        • Краснодар
        • Пенза
        • Ростов-на-Дону
        • Самара
        • Санкт-Петербург
      • 0 Корзина
      • +7 (391) 200-25-11
        • Телефоны
        • +7 (391) 200-25-11
        • Заказать звонок
      • г. Красноярск, ул. Диктатуры Пролетариата, д.32, 6 этаж
      • email
        sale@bitagency.ru
      • Пн – Пт: с 9:00 до 18:00
      Главная
      —
      Полезные материалы
      —
      Блог
      —Текст и изображение при дизайне веб-страницы

      Текст и изображение при дизайне веб-страницы

      В дизайне веб-страниц есть множество спорных моментов. Мы поговорим об одном из них - как правильно совмещать текст и изображение

      Наверное, любимыми гарнитурами десять лет назад были системные шрифты и шрифты по умолчанию. Они использовались везде: сайты компаний, визитки, свадебные приглашения. Никаких специальных эффектов, теней, прозрачности. Черный текст, красные заголовки и синие подчеркнутые ссылки. Единственное различие между текстами — полужирный шрифт или курсив. Типографика не рассматривалась как важная часть создания дизайна сайта, как это делается сейчас. 

      В рамках этой статьи мы рассмотрим лишь расположение текста и изображения на странице.

      Текст рядом с изображением

      1. Сперва картинка, затем текст

      Изображения в первую очередь приковывают наше внимание при посещении сайта. Чтобы текст воспринимался без проблем располагайте его в правильном и понятном порядке: изображение – заголовок – текст.

      2. Помните про последовательность

      Заголовок нескольких уровней служит сигналом для читателя где заканчивается одна мысль и начинается другая.

      Используйте заголовки и интервалы для выделения смысловых блоков. Текст одинаковой величины читать труднее.

      Изображения, в свою очередь, так же несут указующую функцию. Крупные изображения выглядят солиднее, а потому их помещают на обложку. Изображения поменьше служат указателями нового блока.

      3. С разных сторон

      Также, можно располагать текст на одной высоте с изображением.

      Не важно, с какой стороны будет текст – справа или слева. Главное, чередуйте подобные блоки в определенном ритме. Читателю будет удобнее воспринимать информацию.

      4. Если изображений несколько

       Изображения могут рассказать о вас больше, чем текст? Разместите их в формате галереи. Она занимает меньше пространства и несет больше информации. Текст с описанием расположите сверху. Не забывайте про пункт 2 – используйте заголовок.

      5. Сноски на изображение

      Отсылки на изображение внутри текста превращают чтение в прокручивание страницы в поиске изображения. Располагайте изображение рядом с относящимся к нему по смыслу текстом.

      6. Колонки с текстом

      Будьте аккуратны с размещением текста в колонки. Чем короче будет текст, тем лучше. Три строки – максимальная длина. Текст длиннее уже не воспринимается читателем и выглядит неаккуратно.

      Старайтесь сохранять длину колонок на одинаковом уровне. Это также вносит диссонанс в визуальное оформление.

      8. Не перегружайте текст изображениями

      Используйте фотографии реального товара, вашей услуги и места ее оказания. Эти фотографии не обязательно должны быть сделаны профессиональным фотографом. Зато они дают представление о том, что ждет читателя или, о чем идет речь в тексте.

      Используйте иллюстрации там, где это необходимо. Если можно обойтись без картинки – не публикуйте ее.

      Изображения выполняют две функции:

      1. Художественная – нужна для декоративных целей. Не все можно передать через фотографии материальных вещей. Такие изображения объясняют абстрактные понятия.

      2. Документальная – демонстрирует объект текста. Фотографии продукта, мероприятия, спикера и так далее. Подобные фотографии порой заменяют собой текст.

      Текст на изображении

      Подобный прием используется в оформлении обложки или первого экрана. На таких информационных блоках находятся призывы к действию и формы обратной связи – кнопки.

      Изображение должно отражать тематику страницы или сайта. Текст несет главную смысловую нагрузку. Поэтому, следите за тем, чтобы текст был читаемым. Буквы не терялись на фоне изображения. Поэтому, чаще используют «однородные» изображения без мелких деталей. Монотонные.

      1. Контраст с помощью цвета

      Очевидно, светлый текст хорошо выделяется на темном фоне. И наоборот.
      Чем однороднее изображение, тем проще будет читать текст

      Кроме «белый-черный» хорошо сочетаются цвета «красный-белый», «желтый и фиолетовый», «синий-оранжевый»

      2. Фильтры и контрастность

       Если исходная картинка или фотография слишком светлая, искусственно затемните ее в редакторе или наложите сверху полупрозрачный фильтр.

      Не перестарайтесь. Изображение должно быть понятно, а текст читаемым. Найдите золотую середину.

      Фон можно выделять не только затемнением. Используйте другие цвета. Монотонные или несколько оттенков. Старайтесь не переборщить.

      3. Четкость

      Еще одним инструментом, позволяющим выделить текст на картинке является размытие. Вы можете использовать размытие как на всем изображении, так и на той части, где будет располагаться текст (только будьте осторожны. На разных разрешениях текст может находиться на разных частях изображения и съехать туда, где нет размытия)

      Этот прием хорошо сочетается с затемнением.

      Это лишь обзорный курс по верхушке дизайнерского мастерства. Пренебрежение подобными очевидными вещами ведет к снижению конверсии сайта и уменьшению трафика.

      ХОТИТЕ УВЕЛИЧИТЬ ПРОДАЖИ?
      Мы точно знаем, как привести на Ваш сайт клиентов! Оставьте заявку и получите индивидуальное предложение с привлекательной ценой.

      Оставить заявку

      Назад к списку
      Услуги
      Кейсы
      Сотрудники
      Компания
      Вакансии
      Публикации
      Контакты
      Мы в соцсетях
      phone phone +7 (391) 200-25-11
      Заказать звонок
      email
      sale@bitagency.ru
      © 2023 Performance
      Политика конфиденциальности
      0 Корзина

      Ваша корзина пуста

      Исправить это просто: выберите в каталоге интересующий товар и нажмите кнопку «В корзину»
      Перейти в каталог
      Главная Главная Кейсы Кейсы Услуги Услуги Контакты Контакты