Часті помилки у веб-дизайні

30

Всі ми робимо помилки. Це – людська натура. Проте в індустрії веб-дизайну безліч елементів можна виконати неправильно за допомогою всього лише кількох внесених поправок, необхідних для того, щоб вони стали видатними. Це стосується всього – від друкарської розмітки тексту до відступів, де єдиний символ може радикально зіпсувати весь проект. На щастя, якщо ви в стані визначити найбільш часті помилки, кілька клацань мишею і торкань клавіатури можуть врятувати потопаючий корабель. Сьогодні ми розглянемо деякі з них, яких повинен остерігатися будь-який дизайнер.

веб-дизайн

Друкарська розмітка тексту

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

Sans Serif vs Serif

Я припускаю, що читач знає, що за шрифт serif font.

Шрифти serif, будучи застосованими на веб-сторінці, володіють певною елегантністю, а також більшою сучасністю, коли дизайнер використовує широкий спектр шрифтів sans-serif. Однак два цих ефекту при спільному застосуванні не поєднуються для створення в підсумку гарної розмітки тексту. Фактично у звичайних обставинах їх змішування може породити такий гібрид, який, якщо чесно, добре не виглядає.

Не мається на увазі, що змішування шрифтів serif і sans-serif ніколи не спрацьовує. Насправді, в деяких випадках це виглядає досить добре, особливо коли ці типи шрифтів використовуються на різних рівнях ієрархії. Наприклад, A List Apart застосовує шрифт serif для заголовка, використовуючи при цьому sans-serif для основного вмісту.

разметка текста

Кількість шрифтів

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

Точно так само, занадто багато варіацій розмірів шрифтів і інтервалів між рядками/літерами може створити у читача враження роз’єднаності і, в результаті, загальне погане враження. Дотримуйтеся сталості і сімейності.

Недолік контрастності

Головне питання, яке може з’явитися – це недолік контрасту між друкарською розміткою тексту та фоном. Таким чином, виникне справжня проблема читабельності, так як деяким користувачам буде важко розрізнити два набори кольорів. Візьміть наведений нижче приклад. Що легше читати, те, що написано ліворуч чи праворуч? Правильно, ліворуч!

контрастность

За контрастністю не стоять складні теорії. Ви не станете писати чорним по чорному тлу, тому що не розрізните, де написане, а де фон. Єдина пропозиція полягає в тому, щоб зробити колір тексту максимально протилежним фону, не шкодячи іншим естетичним якостям, щоб уникнути розчарування з боку користувача. Тема Ellipsis в області верхнього заголовка демонструє хороший контраст. Підійшли б сюди замість цього рожевий або фіолетовий кольори?

контрастность

Відступ, поля та інтервали

Ми більше не боремося з маленьким моніторами (тут маються на увазі в основному настільні монітори, не смартфони). Замість цього ми живемо з 21-дюймовими екранами і плаваємо по Мережі при роздільній здатності більш високих, ніж HD, що дає дизайнерам більше простору для роботи. Отже, вам зовсім не потрібно відчувати себе обмежено і присвячувати більше простору відступу і полів з метою поліпшення естетичного вигляду свого проекту. Візьміть, приміром, дизайн Apple; в ньому використовується багато білого простору, зосереджуючи весь колір і дію на бачиться контенті. Не те, щоб я мав на увазі, що вам потрібно багато білого простору, але ваш проект міг би виграти в контрастності від такого поділу, коли можна було б легко відрізнити одне від одного.

Важливо застосовувати як можна більш постійні і рівні інтервали протягом всього проекту, як у внутрішніх відступи, так і в зовнішніх полях. Для прикладу подивіться наведену внизу діаграми. Нижня половина виглядає набагато краще, тому що всі поля однакового розміру в 18px. Всі вирівняне по одній сітці розмітки. Вона чітка, кожна область відокремлена від інших, і не обов’язково витрачати даремно якийсь простір.

Отступ, поля и интервалы

Гратчасті системи

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

Збереження застарілих цінностей

Індустрія веб-дизайну швидко крокує вперед, постійно з’являються нові розробки. Однією з найгірших речей, яка може зашкодити вашому дизайну, є продовження розробок та дизайну способами, популярними кілька років тому. В 2003р. у Microsoft Frontpage був інструмент для «таблиць розмітки» («layout tables»), але жоден хороший розробник ніколи не наважився б відкрити тег таблиці в ім’я розмітки. Точно так само забавні анімовані gif’и і фонова музика минулого десятиліття – це серйозне табу. Так, і навіть не думайте про використання рамок як частини свого веб-проекту. При всіх сучасних проблемах юзабіліті (простоти використання) та інші питання – так і взагалі зараз вже так не робиться.

Сохранение устаревших ценностей

Пропорції та розмір

У ваших проектах завжди повинна підтримуватися свого роду ієрархія, яка вносить свій внесок у розміри і пропорції. Простіше кажучи, найважливіші елементи повинні бути дуже великими, а в міру подальшого просування вони повинні зменшуватися в розмірі. Це не означає, що самі несуттєві елементи повинні бути заввишки в 4 пікселя, але це повинно стати вашою інструкцією до дії по градації елементів на сторінці. В цілях вихідної точності, для будь-якого пристрою ви ні займалися проектуванням, елементи повинні бути пропорційними і легко видимими. Якщо вони взагалі є, то повинні перебувати там не просто так.

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

Пропорции и размер

Можливо, ви також чули про божественної пропорції, або «золотий переріз». Поки не кожен проект зобов’язаний підходити під цей принцип, здебільшого стандартних дизайнів, можливо, варто спробувати його будь-якою ціною. Співвідношення 1 до 1,62 (в закругленою фігурі) загальновідомо як золоте співвідношення, і не просто використовується у веб-дизайні, незважаючи на те, що ми заслуговуємо деякого поваги за його використання.

Золотий переріз являє рівновага у веб-дизайні з тих пір, як люди до нього звикли; відношення довжини передпліччя до довжини кисті – 1 до 1,62, як і в людській посмішці. Вважати кого-небудь привабливим теж можна, грунтуючись на золотому співвідношенні, чого ми ставимося до нього як до «природного». Дотримуючись його, можна зробити веб-проект гарним і успішним, так як він більш зрозумілий користувачеві.

Забуваючи, навіщо ви це робите

Завжди погано забувати про головну мету свого дизайну. Якщо ви робите щось для електронної комерції і у вас з’явилася чудова ідея божевільного слайдера, який затьмарить всіх, але не підходить до даного проекту, не вставляйте його просто заради того, щоб він був. Точно так само, якщо у вас є звичка застосовувати приголомшливі випадають меню, над якими ви працювали незліченну кількість годин, але вони знижують простоту використання цього окремого сайту, не вживайте їх. Не відволікайте нічим, крім того, заради чого буде застосовуватися ваш проект. Через рівні проміжки часу відстороняйтеся від роботи і думайте про те, чи відповідає мета поточного проекту, і, якщо ні, переробляйте його.