Guicci - блог про останні тенденції в світі юзабіліті - blog archive - графічна сітка
Сітка і візуальна ієрархія
"Сітка - це розмітка колонок, полів, областей тексту та ілюстрацій. Сітка - це інструмент, який вносить в дизайнерської рішення порядок і жорстку структуру. "Девід Дебнер Школа графічного дизайну.
Веб-сторінка, яка має чітку візуальну ієрархію (приклад ієрархії: заголовок сторінки -> блок з головною новиною -> блок з іншими новинами і т.д.), прискорює роботу користувача, робить її більш комфортною, приємною і спокійною (порядок - синонім спокою - "все в порядку" :).
Сітка - це кістки візуальної ієрархії, а кольори, розмір, контраст (див. Статтю Pro контраст), форма елементів тощо. - це її плоть.
Далі я розповідаю про різні функції сітки і ділюся з вами дуже пізнавальною презентацією, яку я розкопав в Мережі пару днів назад.
Сітка для гармонії
Я вже розповідав про презентацію Влада Головача Із грязі в князі: Три правила дизайну елегантних інтерфейсів, в якій він показує як виконання всього-лише трьох простих правил може зробити з г ... інтерфейсу елегантну і акуратну цукерку. Ось ці три правила:
- Всі розміри і всі пропорції повинні бути взаємопов'язані (завдяки сітці - см. Презентацію нижче).
- Тема екрану / сторінки повинен бути: а) візуально значущим і розбірливим; б) коротким і інформативним.
- Фон повинен бути або білим або чорним.
У презентації Влад Головач застосовує ці три правила до десктопних програм і буквально на наших очах інтерфейс програми змінюється в кращу сторону, стаючи більш гармонійним і цілісним.
Також ви можете послухати аудіо-подкаст доповіді.
Влад Головач розглянув вторинну функцію сітки, а саме спосіб прив'язати елементи інтерфейсу один до одного, добавішісь тим самим цілісності (загальна взаємозв'язок), простоти (мінімум різних розмірів елементів і пауз) і, як наслідок, гармонійності в сприйнятті картинки. Для того, щоб добитися такого результату потрібно: вирівняти елементи один щодо одного, розставити пропорційні паузи між елементами. використовувати гармонійні пропорції в паузах і розмірах елементів.
Khoi Vinh # 038; Mark Boulton розглянули в своїй доповіді основну функцію сітки:
The grid is the most vivid manifestation of the will to order in graphic design.
Сітка - найбільш наочний прояв порядку в графічному дизайні.
Сітка потрібна в першу чергу для того, щоб створити порядок на сторінці і сформувати основу для побудови візуальної ієрархії, яка дозволить користувачеві "зчитувати" дизайн так само ясно й швидко, як ми майже інстинктивно зчитуємо букви в словах - зліва-направо.
висновки
Навіть якщо ви - не графічний дизайнер, а проектувальник інтерфейсів і в ваші обов'язки входить розробка прототипів, сітка допоможе вам у створенні не тільки більш гармонійних, але і більш упорядкованих прототипів.
Порядок на сторінці - це основа для створення чіткої візуальної ієрархії, яка дозволяє привернути увагу користувача і "вести" його по сторінці і сайту. Таке ненав'язливе сприяння не тільки прискорює роботу користувача, але і робить її більш комофортной і приємною.
Сподобалася замітка? Підписуйся на оновлення блогу!