Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії WebStudio2U Мапа сайту Авторизація

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

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

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

Низька інформаційна щільність

З такою проблемою можна зіткнутися, якщо прагнути при збільшенні зображення від мобільного до десктопного заповнити порожній простір, не звертаючи увагу на те, що саме потрапляє в центр уваги користувача. У результаті на великому екрані зображення, як не парадоксально, може виявитися менш інформативним, ніж на маленькому.

Погана якість зображення

Якщо при збільшенні зображення для великого екрану використовується примусове програмне масштабування, вихідне зображення просто «розтягується», а його якість знижується. У результаті всі недоліки зображення стають помітнішими, що значно псує враження відвідувачів від сайту.

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

Якщо для задуманого формату зображення на великому екрані його доводиться автоматично обрізати, то в кадр може потрапити зовсім не те, що задумано. У результаті зображення може повністю втратити сенс або ж змінити його. Тоді втратиться все інформаційне послання, яке вкладається в зображення, і воно перестане виконувати первинну функцію.

Зміна положення зображення і взаємозалежних елементів

По мірі збільшення екрану пристроїв, на яких відображається сайт, взаємозв'язок зображення з елементами сторінки, що його оточують, може змінюватися, наприклад, на зображення можуть почати накладатися блоки контенту, перекриваючи його частину і змінюючи його зміст. У результаті зображення, знову ж таки, перестає виконувати покладені завдання, дизайн сайту «розсипається».

Як можна уникнути подібних помилок, працюючи з зображеннями, які масштабуватимуться від маленьких до великих при перегляді на різних екранах? Для цього потрібно оцінити вибрані зображення за кількома важливими критеріями. Наприклад, слід подумати, чи буде зображення добре виглядати при різному співвідношенні його ширини і висоти, чи можна обрізати зображення, не впливаючи на його смислове навантаження, чи є на зображенні якийсь центральний об'єкт, який повинен залишитися видимим на будь-якому екрані.

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

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