12 рекомендацій, які допоможуть зробити твій дизайн зручнішим і ефективнішим. Використовуй його під час старту проєкту і під час завершення, для перевірки. І все буде красиво.
Ухвалення дизайнерських рішень може виявитися складним завданням. Але є дуже прості рішення, які не потребують застосування спеціальних знань - потрібно тільки дотримуватися правил і відразу все стане трохи простіше.
Система логічних правил допомагає приймати дизайнерські рішення не інтуїтивно, а обґрунтовано. Це не тільки допомагає зробити дизайн вдалим, а й спрощує роботу. Тут не потрібне натхнення, просто роби. Не переставляй елементи з місця на місце без мети, просто роби.
Це чек-лист, який тобі в цьому допоможе.
1. Роби групування блоків
Спочатку при побудові структури важливо розбити інформацію на логічні частини та об'єднати її в блоки. Насамперед - правильна послідовність. Думка повинна розкриватися зрозуміло і поступово.
Ти розбиваєш інформацію на дрібні групи, які об'єднуєш у блоки із загальним дизайном. Це допоможе красиво й ефективно структурувати та організувати інтерфейс. Відтак, відвідувач краще сприймає дані і проходить воронкою плавно і так, як задумано. Ось способи групувати пов'язані елементи:
- Зробити загальний контейнер
- Розташувати близько, з відступом від інших блоків
- Об'єднати елементи загальним дизайном
- Зробити вирівнювання елементів по безперервній лінії
Контейнер - найпростіше і найпопулярніше рішення, але варто відштовхуватися від типу контенту і застосовувати різні варіанти групування, якщо це допоможе спростити дизайн.
Використовуй іконки. Якщо можна зробити перерахування не текстом, а іконками - це чудово. Якщо можна однотипні елементи об'єднати в блок з іконками, то зроби це. У нас була велика стаття про це, а ще там є посилання на 10 безкоштовних ресурсів із класними наборами іконок.
2. Вибудовуй чітку візуальну ієрархію
Крім групування інформації важливо визначити, що важливіше, а що менш. І потрібно виділяти ключові елементи так, щоб їх не можна було пропустити. Це допоможе відвідувачеві під час побіжного перегляду сторінки/презентації/банера виділити конкретику. І тільки за потреби дізнатися подробиці він може заглиблюватися у вивчення елементів, які в ієрархії стоять нижче.
Це також забезпечує естетичність дизайну - виокремлюючи основні та другорядні деталі, набагато легше будувати композицію і застосовувати палітри. Для побудови ієрархії застосовуються різні інструменти, але насамперед це розмір, колір, контраст, відступи і розташування.
Як зрозуміти, що все зроблено правильно? Прищурь очі або розмий зображення. У такому вигляді важливі елементи виділяються, а другорядні розмиті або їх майже не видно. Якщо за "першість" у такому випадку ведуть боротьбу кілька деталей - спрощуй, переробляй.
3. Дотримуйся групування стилів
Схожі й однотипні елементи повинні виглядати і працювати однаково. При цьому важливо дотримуватися цього правила не тільки в рамках свого проєкту, а й щодо загальноприйнятих стандартів UX/UI. Тобто забезпеч передбачуваність. Особливо в питаннях проєктування навігації та функціональних елементів. Людина не повинна постійно вивчати роботу елемента - якщо це кнопка, то вже ясно, що з нею робити. Якщо це нестандартна фішка, то вперше відвідувач з нею розбирається, а вдруге - вже розуміє принцип, а не заново намагається вникнути в суть.
Важлива послідовність стилізації. Наприклад, порожні іконки некликабельні, а залиті - ведуть на іншу сторінку або показують підказку при наведенні. І тільки так у рамках проекту, без творчих відступів.
І навпаки, стеж, щоб елементи з різною функціональністю мали різний вигляд.
4. Колір - це інструмент, а не прикраса
Використовуй колір цілеспрямовано. Визнач основну палітру з декількох основних/додаткових/контрастних кольорів залежно від напрямку проєкту і позиціонування бренду. Якщо є брендбук, то це полегшує завдання.
Але наявність палітри не означає, що колір потрібен скрізь. Почни з монохромного дизайну і додавай колір спочатку в основних елементах в ієрархії, потім лише там, де він необхідний. Фірмовий основний колір найчастіше застосовується на ключових деталях - кнопках, інтерактивних елементах. І тільки в самому кінці додавай кольори для прикраси або акценту.
Колір має нести смислове навантаження, не пхай його там, де можна обійтися без зайвої розмальовки.
5. Перевір дизайн у ч/б
Не можна покладатися тільки на колір як на індикатор. Важливо виділяти важливі та функціональні елементи так, щоб навіть без кольору була дотримана вищезгадана ієрархія. У людини, яка дивиться твій проєкт, можуть бути різні складнощі - від поломки дисплея до різних ступенів дальтонізму. І твої старання повинні допомогти кожному здійснити конверсійну дію, хоч відсоток таких випадків і не дуже високий.
Наприклад, якщо ти робиш посилання синім, то там не дарма в стандартному варіанті придумали ще підкреслення. Воно виділяє посилання навіть без кольору. Добре, якщо у всіх клікабельних елементах передбачено якийсь мінімальний ховер-ефект, це не тільки стильно, а й практично. Про варіанти виконання і застосування ховер-ефектів читай в окремому матеріалі.
6. Перевір контрастність
Контрастність може мати показник від 1:1 до 21:1. Чорний шрифт на чорному тлі - 1 до 1. А білий шрифт на чорному - 21 до 1. Наразі прийнятим стандартом вважається використання контрасту на сайтах із показником 3 до 1. Це дає змогу легко сприймати текст, навіть якщо є порушення зору або сприйняття. Детально про забезпечення доступності веб-контенту (WCAG) почитай у статті про інклюзивний дизайн.
Контрастність основної кнопки варто робити не менше ніж 3 до 1, а може, й вищою. Це допоможе слабозорим користувачам легко її розпізнати. Також це один зі способів встановити візуальну ієрархію.
Контрастність стандартного дрібного тексту за тими самими нормами WCAG 2.1 має становити не менше 4,5 до 1. А великі та жирні заголовки можна залишати, як і кнопки, з показником від 3 до 1.
Перевірку колірного контрасту і сприйняття кольору можна зробити будь-яким безкоштовним онлайн-інструментом, їх маса, просто загугли і вибери зручний для себе. Як коригувати контрастність? Не обов'язково змінювати відтінок елемента, достатньо додати/зняти тіні або градієнтні накладення.
7. Уникай чисто чорного тексту
Занадто висока контрастність викликає втому очей і виглядає грубо, хоча це не завжди очевидно. У дизайні інтерфейсів, як правило, краще уникати чисто чорного кольору, оскільки він дуже контрастний щодо білого. Такий високий контраст може викликати напругу і втому очей під час читання тексту.
Темно-сірий читається набагато легше, використовуй його відтінки для різних варіантів контенту.
8. Позбав людей від капсу
Якщо тобі потрібно щось виділити - використовуй великий напівжирний шрифт, роби відступи, застосовуй основний колір та інші доступні способи проявити ієрархію. Дизайн поганий, якщо не можна щось показати без капса. І намагайся не використовувати його без нагальної потреби, тому що він ПОТВОРНИЙ І ВАЖКО ЧИТАЄТЬСЯ. Виглядає, ніби на читача кричать. І якщо саме цього ефекту ти добиваєшся, тоді гаразд.
9. Перевір вирівнювання тексту
Якщо твоя цільова аудиторія Європа/Америка - вирівнюй текст по лівому краю. Якщо Азія/Арабський світ - вирівнюй по правому. Враховуй патерни читання. Це стосується текстових блоків.
Заголовки, підписи та короткий текст можна вирівнювати по центру. Але уникай цього, якщо є більше, ніж кілька рядків. Вийде, що початкова точка кожного рядка постійно змінюється, це незручно і навантажує очі.
10. Перевір відступи та інтервали
Потрібно говорити, що у всіх однотипних елементах вони мають бути однаковими? До того ж, для стандартного тексту рекомендується використовувати полуторний інтервал, щоб він був зручним для читання.
11. Що там щодо шрифтів?
Якщо ти ще не гуру типографіки, то використовуй у проєкті шрифти без зарубок, повір, це матиме нормальний вигляд у будь-якій ситуації. Шрифти без зарубок зазвичай найбільш розбірливі, нейтральні і прості.
Вибирай шрифти з більш високими малими літерами і великою відстанню між символами. Вони краще читаються за малих розмірів.
Найчастіше в рамках одного шрифту є безліч варіантів накреслення. І якщо ти вибираєш для проєкту один або кілька шрифтів, то це не означає, що можна використовувати всі варіації шрифту. Різна вага символів привносить візуальний шум. А ще тобі буде складніше відстежувати однотипність стилів рівноправних елементів. Зберігай простоту і лаконічність дизайну. Для цього використовуй тільки звичайні та жирні шрифти.
Бери напівжирний шрифт для заголовків, щоб підкреслити їх. А для решти тексту використовуй звичайне накреслення.
12. Прибери зайве
Непотрібні додаткові стилі, мішура і надлишок анімації тільки заважають. Вони збільшують когнітивне навантаження і відволікають від важливого. Та й виглядає це зазвичай погано і без смаку. Тобі важливо зробити простий і сфокусований інтерфейс без візуальної складності.
І ще: перевіряй цілісність
Звіряйся з цим списком на початку проєкту і під час його завершення. Але завжди пам'ятай про особливості проєкту, його цілі та вимоги.
Значною мірою дизайн інтерфейсів складається з логічних правил, але якщо ти зробив усе чітко, але результат не дуже - внось правки сміливо. Усе ж частка творчості теж має бути присутня, інакше нас давно вже замінив би штучний інтелект і однотипні конструктори.
Якщо хочеш відчувати дизайн, а не просто розуміти його правила - потрібно тренуватися. Саме тому в нашому навчанні робиться акцент на практику. І наші випускники показують круті результати ще в процесі проходження курсу. Хочеш бути професіоналом? Тоді чекаємо на тебе на онлайн-курсі "UX/UI легенда".