20 Умови веб-дизайну для невідомого клієнта

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

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

“Анімація”

Техніка веб-дизайну, яка додає рух на екранні елементи для того, щоб візуалізувати зміни або до привернути увагу користувачів.

Анімації є більш потужні, ніж переходи, оскільки вони можуть проходити через багато різних станів між їхніми початковими і кінцевими точками, тому їх можна використовувати більш складні ефекти.

“Breadcrumb”

A тип навігації що інформує користувачів про свої поточне місцезнаходження на сайті.

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

“Безлад”

Помилка веб-дизайну, індикатор a погано розроблена сторінка.

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

“Кольорова схема”

A колекція гармонізуючих кольорів використовується для створення a впізнаваний бренд.

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

“Контраст”

Методика проектування підкреслити відмінності між елементами, які мають різну роль або значення.

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

“Пуста держава”

Конкретний стан веб-сайту або програми, коли є ще не зміст на певній сторінці, однак елементи дизайну вже на їх місці.

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

“Фіксований макет”

A тип макета в якому сайт і його елементи використовувати однакову ширину у всіх рішеннях, визначені в статичних значеннях (зазвичай пікселів).

Традиційний спосіб створення веб-сайтів. Рідко вибираються для нових веб-сайтів, оскільки сайти з фіксованою розкладкою практично не використовуються (читаються) на екранах мобільних пристроїв. Щоб залишатися доступними для мобільних користувачів, багато фіксованих макетів використовують a вторинний мобільний сайт.

“Плоский дизайн”

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

Плоский дизайн був підданий критиці за проблеми з юзабіліті, що випливають з відсутність тривимірності. Більш зрілі Мови дизайну Flat 2.0, наприклад, дизайн матеріалу Google, з'явився як відповідь, і додав невелику глибину назад до плоского дизайну.

“Макет рідини”

A тип макета що використовує відносні одиниці для визначення ширини сайту та його елементів.

Найчастіше використовуються відносні одиниці для макетів рідини відсотків, але ems і rems можна також використовувати. Макет рідини змінює розміри (розтягується і стискається) як ширина вікна зміни. На відміну від реагуючих макетів, макет рідини не використовує мультимедійні запити. Також згадується як розкладка рідини.

“Складіть”

Нижня сторона видимої частини екрана.

Термін “над згином” відноситься до частини веб-сторінки, яку відвідувачі можуть побачити без будь-яких дій, час “нижче складки” позначає решту сторінки, яку можуть виконати користувачі досягати тільки шляхом взаємодії з сайтом - зазвичай за допомогою прокручування або переміщення (на мобільному).

Рекомендується розміщувати елементи брендингу (наприклад, логотип), навігація по сайту, і привабливий зміст над складанням, щоб змусити користувачів швидко зрозуміти мету сайту і бути зацікавленими в іншому вмісті.

“Витончена деградація”

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

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

“Герой зображення”

Негабаритний банер зображення розміщені над згином.

Зображення героя є високоякісними, як правило, повнорозмірними зображеннями, що відповідають змісту сайту. Крім них, як правило, існує a короткий (один або два рядки) текст що передає повідомлення користувачам, і a заклик до дії що закликає їх до певних дій, таких як покупки або підписання на сайт.

“Цільова сторінка”

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

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

“Lazy Завантаження”

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

Якщо веб-сайт використовує ліниве завантаження, спочатку завантажуються лише зображення над папкою, решта завантажується лише тоді, коли (якщо) користувач прокручує сторінку. Часто використовуються в гнучкому і мобільному дизайні економить ресурси. Наприклад, Google AMP прискорює роботу мобільних сайтів ледачі завантаження статичних ресурсів за замовчуванням.

“Запит медіа”

Функція CSS, що робить чуйний веб-дизайн можливо, створюючи можливості для розробників різні конструкції для різних розмірів пристрою (ширина та / або висота), орієнтації (пейзаж або портрет) і типи носіїв (друк, екран і т.д.).

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

“Поступове підвищення”

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

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

“Чуйний дизайн”

Підхід до веб-дизайну для створення веб-сайтів пристосуватися до розмірів різних типів пристроїв (найчастіше мобільних, планшетних і настільних) шляхом розробки різні макети та інші стилі для них (наприклад, типографіка, розмір зображення).

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

“Скеоморфізм”

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

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

“Перехід”

Техніка веб-дизайну для візуалізація простих змін коли екранний елемент плавно змінюється між початковим і кінцевим станом.

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

“Білий простір”

The пробіл між суміжними елементами дизайну. Також згадується як негативний простір.

Білий простір допомагає користувачам зняти вміст, і візуально вказує на ієрархію вмісту. Пробіл не обов'язково білий, але використовує колір фону сайту. Відсутність достатнього простору призводить до a переповнені сторінки.