Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

Дизайн сайтов: масштабирование маленьких изображений для больших экранов

Дизайн сайтов: масштабирование маленьких изображений для больших экрановС растущей популярностью принципа mobile first в веб-дизайне увеличивается количество сайтов, которые изначально проектируются под использование на мобильных устройствах, а уже потом масштабируются для настольных ПК. При этом нередко возникает проблема правильного масштабирования маленьких изображений, используемых при просмотре на мобильных устройствах, для отображения на больших экранах десктопов.

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

Низкая информационная плотность

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

Плохое качество изображения

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

Неправильное кадрирование изображения

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

Изменение положения изображения и взаимосвязанных элементов

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

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

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

Теги:
дизайн сайтов, изображения для дизайна сайтов, веб-дизайн, mobile first