Статьи

5 базовых типов изображений в веб-интерфейсах

5 базовых типов изображений в веб-интерфейсах О визуальных элементах веб-контента: рассматриваем разные типы изображений, которые используются, чтобы сделать сайты красивыми и удобными.
5 базовых типов изображений в веб-интерфейсах

«Контент — не король, он целое королевство,» — сказал когда-то известный маркетолог Lee Odden. Невозможно с этим не согласиться: без контента дизайн представляет собой лишь красивую упаковку, не более. Споры о том, что важнее и первичнее, дизайн или контент, не имеют смысла, ведь один не работает без другого. В этой статье мы рассмотрим базовые типы визуального контента, с которым посетители сайтов сталкиваются практически ежедневно, и поразмыслим над преимуществами каждого типа изображений. Примеры веб-дизайна с разными типами изображений — от дизайнеров агентства tubik.

Что такое веб-контент?

Веб-контент — это все, что наполняет веб-страницу и является частью пользовательского опыта. Это то, что люди читают, слышат, видят, смотрят, с чем взаимодействуют на сайте.

Базовые виды контента — это:

  • текст
  • изображения
  • видео
  • анимация
  • аудио (звук)

Сегодня рассмотрим поближе изображения как часть веб-контента.

images in web design

Картинки — это не только о факторе красоты. В дизайне пользовательского опыта, изображения играют огромную роль в усилении юзабилити. Большинство пользователей сети — визуально управляемы, то есть воспринимают картинки быстрее текста. Соответственно, очень часто именно картинки являются теми элементами верстки, которые посетитель видит, сканирует и декодирует первыми. Более того, они информативны и эмоционально насыщены, способны не только передавать сообщение, но также и транслировать определенную эстетику. Также, правильно использованные и оптимизированные изображения способны положительно влиять на SEO показатели веб-сайта, то есть способность пользователя эффективно найти сайт или конкретную его страницу в поисковиках.

Зависимо от целей, для которых создается сайт, креативные и маркетинговые команды делают выбор среди разных типов картинок. Те, о которых мы расскажем ниже, наиболее типичны для веб-страниц.

Логотип

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

В аспекте веб-дизайна, при использовании логотипа подумайте над такими советами:

  • разместите логотип в хедере (шапке) сайта, поскольку это наиболее сканируемая зона веб-страницы
  • не упускайте возможность использовать привычки пользователей: когда посетитель кликает на лого в хедере, он оказывается в стартовой точке своего путешествия по сайту. Чаще всего это домашняя страница или возврат в верх страницы, если сайт одностраничный
  • подумайте над анимацией логотипа по ховеру (наведению курсора на лого): движение добавляет динамики и может стать подсказкой для пользователя, что элемент интерактивен.

landing_page_animation_cryptocurrency_service_tubik

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

Фотографии

Фотографии можно смело назвать классикой визуала для веб-страниц. Они используются для разнообразных целей, в частности как:

  • тематические фото
  • демонстрационные фото
  • фото продуктов и товаров (например, на ecommerce сайтах)
  • фото-обложки для статей в блоге
  • фото для hero-баннеров и секций, и т.д.

Наибольшее преимущество фотографий — их способность быстро связать то, что пользователь видит на веб-странице, с реальным миром живых людей и физических объектов. Фотография является частью человеческого восприятия мира уже много десятилетий и стала таковой задолго до появления интернета, а значит это тип изображений для нас привычен, близок и понятен. Более того, с появлением разнообразных девайсов, который позволяют любому из нас сфотографировать что-угодно в считанные секунды, фотография уже не эксклюзив, а элемент ежедневной реальности для множества пользователей. Появляясь на веб-сайте, фотографии способны установить сильные связи и ассоциации.

dance_academy_website_interactions_tubik

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

tubik studio museum website

Museu лендинг страница привлекает внимание и устанавливает необходимую атмосферу благодаря красивым тематическим фото

 

Этот дизайн веб-страницы для сайта клининг-компании использует фото-контент как часть вовлекающего опыта скроллинга страницы

Фотография — это также и вид искусства. С их помощью вы можеет установить необходимый баланс реалистичности и эстетики веб-интерфейса. Они помогают добиться соответствующего стиля, привлекательного для целевой аудитории, и одновременно создать нужный эмоциональный фон. Это одна из причин, почему именно фото чаще всего визуально поддерживают текстовый контент статей на блогах и в онлайн-медиа.

the board news media_website_tubik

Сайт новостного медиа

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

home craft web design tubik

Сайт крафтовых товаров

home decor website design

Сайт по продаже мебели и интерьерного декора

bartending encyclopedia tubik studio

Веб-сайт энциклопедии для барменов, с оригинальным фото-контентом для поддержания темы и демонстрации напитков

Где дизайнеры берут фото?

Существует несколько способов:

  • оригинальные фото, снятые и обработанные специально для конкретного проекта: обычно наиболее дорогая опция, но зато у фотографий будет самый высокий уровень эксклюзивности
  • платные стоковые фото: вы покупаете фото, которое вам подходит, с фотостока, который предлагает разнообразные снимки. Это может быть дешевле, чем специально организованная съемка, но можно потратить массу времени на поиск фото, соответствующего вашим задачам
  • бесплатные стоковые фото: вы берете фото на специальных ресурсах, которые отдают их бесплатно. Это самая дешевая опция, но вы должны быть готовы, что другие люди могут сделать то же самое, поэтому придется славно постараться, чтобы добиться оригинальности в таких условиях.

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

В любом случае, даже если вы ведете блог или благотворительный сайт вообще без бюджета на визуал или если создаете дизайн-концепты для портфолио, бесплатные фотостоки часто предлагают и много качественного контента. Например, можно его поискать на таких известных фотостоках:

  • Unsplash: это комьюнити фотографов со всего мира, которые делятся своими снимками бесплатно. Благодаря тщательной модерации, здесь нет свалки и можно найти массу стильных фотографий для разных дизайн-целей
  • Pexels: большая база бесплатных стоковых фото на разнообразные темы
  • Moose Photos: база фотографий от профессиональной фото-команды; их преимущество в том, что фото снятый в близкой стилистике и с одинаковыми параметрами, благодаря чему их легко комбинировать и использовать для обширной контент-стратегии; здесь вы найдете очень разнообразный набор снимков людей
  • Pixabay: огромный стоковый ресурс бесплатных изображений, не только фотографий, но также иллюстраций и векторной графики.

gourmet_website_interactions_tubik

Сайт The Gourmet, магазина, продающего травы, масла и специи, применяет крупные красивые фото для демонстрации товаров

Используя фотографии в веб-дизайне, учитывайте следующее:

  • применяйте фото высокого разрешения и качества
  • оптимизируйте их для веб, так как слишком тяжелые картинки будут перегружать страницу, а скорость загрузки страницы — это важный фактор и юзабилити, и эффективного SEO
  • дайте картинкам достаточно «воздуха» — используйте достаточно негативного пространства
  • помните об адаптивности и тестируйте, как изображения выглядят на разных девайсах
  • не используйте фото просто для декора — пусть они коммуницируют с пользователем и поддерживают красоту и визуальную иерархию всей страницы.

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

Big_city_guide_Stockholm_tubik

Big City Guide Landing Page

Иллюстрации

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

Illustrations

Это лендинг страница для конференции, где иллюстраторы и цифровые художники делятся опытом. Оригинальная заглавная иллюстрация и ее анимация делают веб-дизайн броским и привлекательным для целевой аудитории.

Вы часто можете встретить иллюстрации использованные на веб-страницах как:

  • заглавные изображения (hero image)
  • тематические изображения
  • персонажи, которые общаются с пользователем
  • картинки в статьях блога
  • графика для наград и других элементов геймификации
  • графика для системных сообщений и уведомлений
  • стикеры (особенно популярны в месенджерах)
  • элементы визуального повествования
  • инфографика
  • рекламные баннеры
  • визуальные маркеры категорий контента

Рассмотрим пару примеров.

home page webdesign

Это концепт вебсайта-портфолио для дизайнера, который специализируется на проектах для знаменитостей и заказчиков из сфер развлечения, музыки и кинематографа. Темный фон в комбинации с оригинальной заглавной иллюстрацией выглядит ярко и стильно и создает ассоциацию с атмосферой на концертной сцене.

ecotourism website design tubik

Пример дизайна веб-сайта для компании, предоставляющей услуги в сфере экотуризма, с впечатляющими атмосферными иллюстрациями, мгновенно устанавливающими тематику и сильный эмоциональный посыл.

landing page UI design

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

graphic design case study

Набор иллюстраций, созданных для Florence, онлайн-маркетплейса, где медсестры и сиделки могут найти заказы на высокооплачиваемые смены по всей Великобритании. Оригинальные персонажи сразу привлекают внимание посетителя, создают нужную атмосферу и презентуют преимущества в визуальной подаче, соответствующей тону и стилю коммуникации сервиса.

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

Маскоты

Маскот — это персонаж, персонифицированная картинка, которая становится символическим представителем бренда, компании, сервиса или даже человека.

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

Забавный и супер позитивный анимированный маскот, интегрированный в веб-дизайн для ShipDaddy

books for children website tubik

Милый и дружелюбный маскот использованный как заглавная картинка на ecommerce сайте для продажи детских книг

babysitting landing page

Оригинальные персонажи использованы как маскоты сервиса по найму нянь

3D графика

Еще один тип визуала для вебсайтов, который снова наращивает популярность, — это 3D графика. Многие из таких изображений обладают фотореалистичностью, что является важным преимуществом для целей веб-дизайна. 3D графика может отлично работать в тех случаях, когда необходимый вам фото-контент крайне дорогой или его вообще невозможно получить.

Веб-страница с привлекательной анимированной 3D графикой

Стоит учесть, что этот вид графики требует очень специфичных навыков, равно как и художественного вкуса. Вдобавок, он тоже довольно дорогостоящий и требует много времени на создание. Однако, хорошо выполненная 3D графика обычно очень привлекательна и убедительна, а значит, может положительно повлиять как на общий вид веб-дизайна, так и на решения покупателей о доверии ресурсу или совершении покупки.

homes of the future website

Концепт веб-сайта для компании, которая разрабатывает и строит экодома с использованием солнечной энергии. 3D модель дома позволяет посетителям получить фотореалистичное представление о предоставляемом продукте и даже повзаимодействовать с ним, меняя вид с дневного на ночной.

 

Веб-концепт для блога о здоровье со стильной и трендовой 3D анимацией

creativo arquitectos website design tubik

Веб-сайт для дизайн-студии, которая специализируется на создании архитектурной и интерьерной визуализации. Высококачественная 3D графика занимает всю фоновую площадь экрана и таким образом мгновенно передает тематику предоставляемых услуг.

book and travel website_tubik

Этот веб-сайт сервиса для бронирования жилья использует 3D иллюстрацию как заглавную тематическую картинку, которая занимает всю левую половину страницы и моментально привлекает внимание пользователя. Она не только задает тему, но и добавляет красоты и оригинальности всему интерфейсу.

Зачем использовать картинки в веб-дизайне

Несколько убедительных аргументов:

  • исследования из веб-архива Wayback Machine показывают, что люди воспринимают картинки в 60,000 раз быстрее, чем текст
  • психологи утверждают, что человеку нужно около 1/10 секунды, чтобы получить общее впечатление от визуальной сцены или элемента (эта скорость невозможна для текстовых элементов)
  • важные фрагменты информации часто фиксируются мозгом как картинки, даже если были получены через текст
  • картинки менее уязвимы в комбинации с фоном и окружающими элементами, в то время как эффективность текста очень зависит от фактора читабельности
  • картинки имеют склонность легче попадать в долгосрочную память, а значит, взаимодействуя с интерфейсом, пользователю не придется обрабатывать каждый раз много данных, и дело пойдет быстрее
  • визуальные элементы интерфейса могут сделать его более универсальным, если сайт или приложение используется пользователями из разных стран и носителями разных языков
  • картинки сдвигают ограничения восприятия для пользователей, у которых есть естественные проблемы с распознанием текста, например, если это дислексики или еще не читающие дети

images in user interfaces-tubik-blog-article

Оригинальная версия статьи на английском языке была опубликована в Tubik Blog

UI дизайн, UX дизайн, веб дизайн, веб-интерфейс, дизайн, дизайн веб-сайта, дизайн взаимодействий, дизайн интерфейсов, пользовательский интерфейс, пользовательский опыт, читабельность вебсайта,
  • English
  • Russian
  • Ukrainian