Розпочинаючи шлях у дизайні, багато хто вірить, що десь існує секретний інгредієнт, який перетворює звичайні макети на шедеври. Щось екстраординарне, нетипове, про що не розповідають на курсах.
І вони праві. Цей секрет дійсно існує.
Серденько застукало в очікуванні, еге ж?
Насправді все простіше, аніж гадалося. Настільки просто, що більшість початківців цокають язиком та закочують очі, коли чують відповідь: типографіка, теорія кольору, ієрархія, простір, відступи.
Очевидні речі про які ви постійно чуєте на курсах, читаєте в книжках. І коли ви починаєте працювати над своїми макетами, ви, звісно ж, використовуєте ці важливі елементи композиції. Але в результаті макети виглядають не так, як ви того очікуєте.
Тут важливо розуміти: для того щоб робити не лише гарні, а й зручні для взаємодії макети потрібно не просто знати, що таке, наприклад, комплементарна чи аналогова кольорова палітра, а розуміти як і коли це потрібно використовувати.
Більшість новачків вважають, що їм бракує таланту, але справжня проблема простіша: вони використовують елементи без системи та причини. Додають більше кольорів, шрифтів, ефектів, чорнющих тіней сподіваючись, що більше = краще і це зачепить увагу. В результаті — це лише перевантажує візуал і плутає користувача.
В той час як початківець витрачатиме купу часу на різні стилі, аби показати, що він все може, досвідчений дизайнер запитає себе "Навіщо цей елемент повинен тут бути?"
Повернемося до кольору. Початківці часто обирають кольори за принципом "виглядає круто" або "мені подобається зелений". Колір — інструмент комунікації. Кожен відтінок несе певну асоціацію, емоційне навантаження, впливає на читабельність та направляє увагу користувача. Замість того щоб просто брати трендову палітру з Пінтерест, запитайте себе:
💭Який настрій повинен викликати цей продукт?
Наприклад, фінтех-застосунок потребує довіри (зазвичай це сині відтінки), дитячий додаток — енергії (яскраві, теплі кольори), медичний сервіс — спокою (м'які, нейтральні тони) і т.д.
💭Чи достатній контраст для читабельності?
Жовтий текст на білому фоні може й виглядає стильно, але читається жахливо — особливо для людей зі слабким зором або при яскравому сонці на екрані телефону. Завжди потрібно пам'ятати про контекст використання та інклюзивність.
💭Чи допомагає колір користувачу зрозуміти ієрархію інформації?
Найважливіша кнопка — яскрава, вторинна — приглушена, негативна або деструктивна дія — червона. Це не про креатив, а логіку. Це те, до чого користувачі вже звикли й очікують отримати знову (привіт, Законе Якоба!)
Система кольорів — не набір естетичних відтінків, а функціональна структура. Створивши систему один раз і дотримуючись її, ваш дизайн стає передбачуваним і зрозумілим. Коли ви навчитеся будувати ієрархію з відтінками одного кольору, можна ускладнювати собі задачу і пробувати працювати з драматичнішими кольоровими палітрами.
А як щодо типографіки?
Знову ж таки, типографіка — це не лише “Comic Sans не брати, а ось Inter можна”; це створення системи читабельності. Потрібно враховувати вагу шрифта, висоту рядка, довжину рядка тощо. Професійний дизайнер створює типографічну систему, документує її в дизайн-системі — і вона працює на весь проєкт. Початківці найчастіше вибирають розмір "на око" для кожного елемента окремо.
Важливо пам'ятати, що текст також має свою ієрархію. В англомовному середовищі можна зустріти термін Major Third. У музиці є інтервал "велика терція" (major third) — це коли одна нота звучить у 1.25 разів вище за іншу. Люди інтуїтивно сприймають музичні інтервали як щось приємне. Дизайнери взяли цей принцип, застосували до розмірів тексту — і вуаля, це спрацювало!
В контексті масштабування тексту, major third — це спосіб створення гармонійних розмірів тексту, помножуючи кожен наступний розмір на 1.25.
Ось приклад робочої системи:
▫️Body текст: 28px (базовий розмір)
▫️H3: 35px (28 × 1.25)
▫️H2: 44px (35 × 1.25 = 43.75, округлюємо)
▫️H1: 55px (44 × 1.25 = 54.69, округлюємо)
Можете використовувати шкалу 1.5 для більш драматичної ієрархії. Головне — дотримуватись одного коефіцієнта впродовж проєкту, що буде створювати гармонію, яку ми відчуваємо, навіть якщо ми свідомо не помічаємо цього.
Простір якого не вистачає
Whitespace або білий простір — це не порожнє місце, яке треба заповнити, а активний елемент дизайну. На мою думку, він є найбільш недооціненим інструментом в композиції. Більшість навіть не сприймають його як один із основних принципів збалансованого та гармонійного дизайну.
Часто помічаю, що початківці бояться порожнього простору і намагаються заповнити кожен піксель. Але без простору дизайн перетворюється на візуальний хаос, де користувач не знає, куди дивитись, який об'єкт належить до тієї чи іншої групи і так далі. Більш досвідчені дизайнери знають, що іноді видалити елемент ефективніше, ніж додати новий.
Що робить простір:
▫️Групує пов'язані елементи (тут згадуємо закон близькості: елементи, розташовані близько один до одного, сприймаються як пов'язані)
▫️Створює візуальну ієрархію. Більший простір навколо елемента = більша важливість
▫️Дає очам відпочити. Щільно упакований контент виснажує
Ось простий приклад:
Просто змінивши відступи, ви показуєте, що це окремі секції, а не одна суцільна площина контенту.
До речі, ви помітили, що другий варіант має певний передбачуваний ритм? Ось тут ми з вами переходимо до відступів.
Рандомні відступи показують вашу недосвідченість
Замість того, щоб вибирати відступи випадково (5px, 10px, 17px, 23px тощо), використовуйте The 8px Spacing Rule. Простими словами — це принцип, коли всі відступи в дизайні кратні 8 пікселям (8px, 16px, 24px, 32px тощо.)
Коли у вас є система, ви не витрачаєте купу часу, думаючи скільки б то пікселів поставити, ви точно знаєте це або 16, або 24.
Бонус: коли розробник отримає такий макет, він вам подякує.
І як це все практикувати?
1. Обмежте себе!
Наступний проєкт зробіть з 2 кольорами, 1 шрифтом, сіткою 8px. Знаю, звучить страшно, але ви спробуйте. Ви здивуєтесь, наскільки сильним може бути простий дизайн! Такі обмеження змушують вас шукати рішення в структурі та ієрархії, а не в декораціях.
2. Запитуйте "Чому?" перед кожним рішенням
Чому цей колір саме тут?
Чому цей відступ 32px, а не 24px?
Чому цей елемент взагалі тут?
Якщо ви не можете відповісти на ці питання — можливо, елемент є зайвим.
3. Створюйте системи, а не окремі рішення
Працюючи над макетами думайте не за принципом "зроблю цю кнопку рожевою", а "основна кнопка в системі — рожева, розмір L має padding 12/24, розмір M — 10/20". Така система з самого початку проєкту економить вам час і підвищує якість.
4. Вивчайте приклади, але правильно
Аналізуйте роботи топових дизайнерів, але не з точки зору стилю, а системності. Виміряйте їхні відступи, проаналізуйте типографічні шкали, подивіться як працює колір.
Можете спробувати зробити скріншоти вашого улюбленого додатку і виміряти розміри та відступи у Figma. Повірте, ця практика чудово допоможе ще краще помічати дрібні деталі, які насправді не є вже такими дрібними.
Підбиваючи підсумки
Секрет успішного дизайну не в знанні стомільйонних трендів чи володінні всіма плагінами Figma, а у майстерному володінні основами!
Більшість початківців чекають на момент осяяння, коли в мозку щось "клікне" і вони раптом стануть крутими дизайнерами. Насправді це довгий, іноді нудний процес, за який ви собі ще подякуєте в майбутньому.
Саме коли ви почнете запитувати "чому" перед кожним рішенням, коли за кожним кольором, відступом і шрифтом стоятиме усвідомлений вибір — ось тоді ви побачите прогрес.