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

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

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

Без помех

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

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

Сосредоточьтесь на одном элементе

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

Используйте заливку или плотную текстуру

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

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

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

Это относится не только к фону, но и любым элементам. Человек в рубашке, рисунок на объекте, и все остальное. Более простые текстуры (или более чистые цвета) будут выглядеть незаметно на мобильном устройстве.

Контрастность

В то время как микро не должно отвлекать, макро должно быть отчетливо заметно, насколько это возможно. И это обычно ведет к высокому контрасту изображения. Убедитесь, что основной элемент легко заметить, и он выделяется из картинки.

Темно-серый объект сложно выделить на светло-сером фоне. Если мы будем смотреть на большом экране, то заметим этот объект, но на экране мобильника он будет отображаться неотчетливо.

Постарайтесь подбирать снимки с естественным контрастом. Два контрастных цвета. Красочный элемент на сером фоне (или любой элемент на белом фоне). Белый мяч на зеленом газоне. Основной элемент — координационный центр.  Благодаря контрастности основной элемент  выделяется и становится более заметным, что важно при просмотре маленьких изображений на мобильных устройствах.

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

Даёшь квадратность!

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

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

Резюмируем

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

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

Оригинал статьи: webdesignerdepot

Перевод — Щетко Наталья, студия Nineseven