Стандарти веб-дизайну: все, що потрібно знати новачкам і профі

37

Від автора: всім привіт! Друзі, ми продовжуємо вивчати тонкощі і нюанси професійного веб-дизайну, і сьогодні поговоримо про стандартизацію. В цілому стандарти веб-дизайну не мають суворих рамок, кожен вирішує сам для себе — важливий той чи інший параметр чи ні. Я пропоную поглянути на це питання з точки зору юзабіліті, тобто, зручності дизайн-макету для верстальників, SEO-шників, а в кінцевому підсумку — користувачів.

Як стандарти дизайну збільшують популярність сайту?

Є така думка, що стандарти web-дизайну залучають користувачів на сайти, а головне — утримують їх надовго. Чому? Зараз розберемося, але спочатку відповімо на запитання, що таке стандарти. У загальному розумінні, це все, що ми з разу в раз спостерігаємо при відкритті абсолютно різних сторінок. Наприклад:

Горизонтальні елементи навігації;

Логотип у шапці;

Панель пошуку в правому сайдбарі;

Зміна кольору відвіданих посилань;

Кошик з замовленнями в правому верхньому кутку і т. д.

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

Типи стандартизації

Стандартів у веб-дизайні насправді дуже багато, багато дизайнерів обчислюють їх сотнями. У великих дизайнерських корпораціях існують декларовані тома норм і правил, за якими зобов’язані працювати всі співробітники. Знати їх усі напам’ять неможливо, а може і не дуже-то і потрібно. Повторюся, кожен стандарт — це індивідуальний вибір окремо взятого інтернет-спільноти в рамках галузі, країни, корпорації…

Для початку розділимо стандарти по самому загальному ознакою:

Загальнотехнічні;

Користувальницькі.

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

Загальнотехнічні стандарти

Почнемо з основного, з макета. Які вимоги можуть висуватися до макету? Формат PSD. Створення макетів в ілюстраторів та інших плоских програмах — перший ознака дилетантства. Навіть якщо готовий макет експортувати в Photoshop, не вдасться уникнути помилок і проблем на порожньому місці. Назавжди забудьте про малюнки в PNG, JPG.

Шари. В Photoshop вже давно все придумано, не винаходьте велосипед. Користуйтеся угрупованням шарів, як мінімум треба виділити шапку, контент і підвал. Обережно ставитеся до імен шарів, відразу звикайте до міжнародних (англійською) назвам. Видаляйте все зайве, верстальник може групою активувати відключені шари, і вам його реакція точно не сподобається.

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

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

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

Типографіка. Не відкладайте вивчення типографіки в довгий ящик, це основа основ. Шрифти, розміри, відступи, читабельність тексту, тематичні блоки… Все це треба опрацьовувати на стадії макета. Не важливо, що такого контенту ще не існує, і сайт наповнити нічим, підкладайте порожній текст.

Люди приходять на сайт за контентом, можете забути про градієнт і вимальовані іконки, а про читабельність забувати — це злочин. :) Текст повинен «дихати», у нього повинно бути достатньо простору. Відразливі психологічні фактори — занадто широкий або вузький текст, щільно стислі по вертикалі рядки т. д.

На одному з популярних ресурсів я колись знаходив цілий чек-лист за технічним стандартам веб-дизайну. Ну, наприклад. Завершив макет, відповідай на список питань:

Дотримана кросбраузерність?

Чітко на сторінці візуалізована ієрархія елементів?

Легко відрізнити один рівень заголовків від іншого?

Дотримана одна схема навігації для всіх сторінок сайту?

Яку кількість шрифтів використано в макеті? (або конкретне обмеження — не перевищено ліміт за кількістю шрифтів в 1 макеті?)

Є в сайту карта? Легко її знайти?

Всі сторінки сайту мають циклічні посилання на домашню сторінку?

Змінюють колір відвідані посилання?

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

Підбиваючи підсумок

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

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

Впевнений, що мої статті допоможуть вам у цьому. Підписуйтесь на оновлення, і ви не пропустіть найцікавіше і найкорисніше. До нових зустрічей!