7 правил створення гарних інтерфейсів (Частина 2)

Ми говорили про правила створення чистих та красивих інтерфейсів.

Ось ці правила:

  • 1. Світло падає зверху (Частина 1)
  • 2. Спочатку чорне й біле (Частина 1)
  • 3. Збільште білий простір (Частина 1)
  • 4. Навчіться накладати текст на зображення
  • 5. Навчіться виділяти і втоплювати текст
  • 6. Використовуйте тільки хороші шрифти
  • 7. Крадіть як художник

Правило № 4: Навчіться накладати текст на зображення

Є всього кілька надійних способів красиво накласти текст на зображення. Я розповім вам п’ять і ще один в якості бонуса.

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

Метод № 0: Накладення тексту безпосередньо на фотографію

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

Otter Surfborads. Виглядає по-хіпстерскі та інстаграмно. Але текст читається важкувато.

У цьому способі є безліч проблем і ризиків:

  • 1. Фотографія повинна бути темна і не занадто контрастна.
  • 2. Текст повинен бути білим. Спробуйте знайти хороший протилежний приклад. Я серйозно. Хоча б один.
  • 3. Протестуйте його на кожному екрані/розмірі, щоб переконатись, що текст читається добре.

Зрозуміло? Прекрасно! Тепер ніколи не змінюйте текст або фотографію, і все буде добре.

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

Сайт експедиції Aquatilis. Обов’язково подивіться, якщо ще не бачили.

Метод № 1: Затемніть всю картинку

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

Ось сучасна барвиста фотографія із затемненням.

Сайт Upstart використовує 35-% чорний фільтр.

Якщо відкрити консоль розробника і прибрати фільтр, то можна побачити, що саме фото занадто яскраве й контрастне, щоб текст був читабельним. Але з темним фільтром — ніяких проблем!

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

Мініатюри з сайту charity:water

Чорний фільтр найпростіший та найуніверсальніший, але ви також можете використовувати й кольорові фільтри.

Метод № 2: Текст-на-тлі

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

Концепт додатку для iPhone від Miguel Oliva Marquez

Тут також можна використовувати колір, але в межах розумного.

Концепт в рожевому кольорі від Mark Conlan

Метод № 3: Розмийте зображення

Як не дивно, хороший спосіб зробити текст читабельним — це розмити частину картинки.

В Snapguide розмита обширна частина картинки. Зауважте, що вона ще й затемнена.

Такий спосіб став особливо популярний після виходу iOS 7, хоча широко використовувався ще в Windows Vista.

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

Teehan + Lax

Я маю на увазі, просто спробуйте прочитати підзаголовок знизу.

Метод № 4: Затемніть низ

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

Випадковому спостерігачеві може здатись, що в колекціях Medium білий текст нанесено безпосередньо на зображення. Але це не так! Тут є ледь помітний градієнт чорного кольору з середини зображення до низу (з прозорістю від 0 до приблизно 20%).

Його не так просто помітити, але він безумовно там є, і це абсолютно точно покращує читабельність тексту.

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

Ви запитаєте, чому зображення потрібно затемнювати донизу? Відповідь на це питання читайте в Правилі № 1 — світло завжди падає зверху. Щоб виглядати найбільш природно для наших очей, зображення повинне бути трохи темнішим донизу, так само як і будь-який інший предмет, який ми бачимо.

Ще один просунутий спосіб: затемнення і розмиття…

Бонус — Метод маскування

Чому в блозі Elastica виходять читабельні заголовки на кожній картинці? Картинки при цьому:

  • не особливо темні,
  • відносно контрастні.

Відповідь — маскування (scrim).

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

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

Навколо заголовка є напівпрозоре тло з невеликим затемненням. Його легше помітити на суцільному синьому тлі, ніж на контрастних фотографіях.

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

Правила № 5: Навчіться виділяти і втоплювати текст

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

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

  • Розмір (текст можна зробити більшим або меншим).
  • Колір (можна збільшити або зменшити контраст; яскраві кольори привертають увагу).
  • Насиченість (шрифт може бути товщим або тоншим).
  • Прописні букви (текст можна набрати маленькими літерами або ПРОПИСНИМИ).
  • Курсив.
  • Розрядка (або трекінг).
  • Поля (технічно вони не відносяться до самого тексту, але можуть застосовуватися для привертання уваги, тому теж включені в цей список).

Тут є і колір, і великі літери, і поля.

Є й інші способи, але я б не став їх особливо рекомендувати:

  • Підкреслення. У наші дні підкреслення варто використовувати виключно для посилань.
  • Кольорове тло. Цей спосіб зустрічається не так часто, але 37signals якийсь час використовували його також для позначення посилань.
  • Закреслювання. Ласкаво просимо назад в 90-і, ти, геній CSS!

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

Виділення і втоплювання

Всі способи виділення тексту можна розділити на дві групи:

  • Способи, які збільшують видимість тексту. Це збільшення розміру, насиченості, використання великих літер і т. д.

* Способи, які зменшують видимість тексту. Це зменшення розміру, контрасту, полів і т. д.

Ми назвемо їх способами для «виділення» і «втоплювання» тексту. Ми не будемо називати їх «візуальна вага», тому що це занадто нудно.

Головна сторінка hugeinc.com.

Заголовок «Material Design» виділений безліччю способів. Він великий, дуже контрастний і виділений болдом.

Текст в футері, навпаки, втоплений. Він маленький, неконтрастний і більш тонкого накреслення.

А зараз найважливіше.

Назва сторінок — це єдиний елемент на сайті, який потрібно тільки виділяти. Інші елементи потрібно виділяти і втоплювати одночасно.

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

Баланс візуальних стилів.

Сайт Blu Homes — приклад бездоганного дизайну. Там є великий заголовок, але слово, на якому робиться акцент, написано малими літерами — занадто багато виділень виглядало б надлишково.

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

Підписи під цифрами, незважаючи на те що вони сірі і маленькі, надруковані прописними буквами і більш жирним шрифтом.

Вся справа в балансі.

Contents Magazine хороший приклад виділення і втоплювання тексту.

  • Назва статей — це єдиний елемент на сторінці, який надруковано не курсивом. У цьому випадку, саме відсутність курсиву привертає увагу (особливо в комбінації з жирним накресленням).
  • Ім’я автора виділено болдом — на відміну від слова «by», набраного звичайним шрифтом.
  • Маленький, неконтрастний підпис «ALREADY OUT» нікому не заважає. Але завдяки прописним буквам, щедрій розрядці і великим полям тут же привертає увагу.

Активні та вибрані елементи

Виділення активних елементів — це більш складний раунд все тієї ж гри.

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

Що ж тоді робити?

Можна використати:

  • колір тексту,
  • колір тла,
  • тіні,
  • підкреслення,
  • невелику анімацію (підйом, опускання і т. д.).

Ось один перевірений спосіб: спробуйте зробити білі елементи кольоровими або кольорові елементи білими, але затемнивши при цьому тло.

Вибрана іконка стала білою, але зберегла контраст по відношенню до тла.

Висновок такий: навчитись виділяти текст дуже складно. Кожен раз, коли в мене щось не виходило, я розумів, що мені потрібно стати кращим. А щоб стати кращим, потрібно пробувати.

Правило № 6: Використовуйте тільки хороші шрифти

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

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

Я рекомендую тільки безкоштовні шрифти. Чому? Тому що ця стаття для тих, хто вчиться. А серед безкоштовних шрифтів є багато гідних варіантів. Чому б їх не використовувати?

Тому завантажте їх прямо зараз для вашого наступного проекту.

Всі завантажені вами шрифти можна знайти в додатку Шрифти у вкладці Користувач.

Ubuntu

Ubuntu має безліч накреслень. Для деяких додатків він занадто специфічний, для інших — підходить ідеально. Можна завантажити на Google Fonts.

Open Sans

Open Sans — популярний шрифт, легко читається. Добре підходить для основного тексту. Можна завантажити на Google Fonts.

Bebas Neue

Bebas Neue відмінно підходить для заголовків. Складається тільки з великих літер. Можна завантажити на сайті Fontfabric і там же подивитись приклади використання.

Montserrat

Montserrat доступний тільки в двох накресленнях, але цього достатньо. Цей шрифт — найкраща безкоштовна альтернатива Gotham і Proxima Nova, але він далеко не такий гарний, як вони. Можна завантажити з Google Fonts.

Raleway

Raleway підходить для заголовків, можливо, трохи занадто для основного тексту (ці «w»!). Дуже красиво виглядає накреслення Ultralight (немає на картинці). Можна завантажити з Google Fonts.

Cabin

Cabin можна завантажити з Google Fonts.

Lato

Lato можна завантажити на Google Fonts.

PT Sans

PT Sans можна завантажити з Google Fonts.

Entypo Social

Entypo Social — це шрифт з іконок і так, він всюди. Але самі іконки — чисте золото. Не хочете перемалювати всі ці логотипи соціальних мереж на кольорових кружальцях? Я теж. Можна завантажити з Entypo.com.

Ось ще кілька ресурсів:

* Прекрасні поєднання шрифтів з Google Fonts. Це шикарна галерея того, як красиво можуть виглядати шрифти Google. Я постійно відвідую цей сайт в пошуках натхнення.

  • FontSquirrel. Колекція кращих шрифтів для комерційного використання, абсолютно безкоштовно.
  • Typekit. Якщо у вас є підписка на Adobe Creative Cloud (Photoshop, Illustrator і т. д.), То у вас є й безкоштовний доступ до величезної кількості прекрасних шрифтів, включаючи Proxima Nova.

Правило № 7: Крадіть як художник

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

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

Але де ж знайти ці приклади? Ось кілька сайтів, які виявились для мене найкориснішими. У порядку зменшення.

1. Dribbble

Це сайт-портфоліо для дизайнерів, куди можна потрапити тільки за запрошенням. Тут ви знайдете роботи найвищої якості. І практично будь-які приклади.

Ось моє портфоліо на Dribbble. І ще пара людей, на яких варто підписатись.

  • Victor Erixon. У нього дуже особливий стиль — і це круто! Гарний, чистий дизайн в стилі flat. Він займається дизайном всього три роки і вже є одним з найкращих.
  • Cosmin Capitanu. Ще один класний дизайнер. Його роботи виглядають супер футуристично, але при цьому не без смаку. Він дуже добре працює з кольором. Але не занадто зосереджується на UX — хоча це проблема dribbble в цілому.

Роботи Focus Lab і Cosmin Capitanu.

2. Flat UI Pinboard

Я навіть не уявляю, хто такий «warmarc», але його дошка на Pinterest з прикладами мобільних інтерфейсів завжди нереально допомагала мені в пошуках гарного дизайну.

3. Pttrns

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

Я переконаний, що кожен художник повинен копіювати до тих пір, поки він не зможе імітувати найкращі роботи. І тільки потім можна шукати свій стиль і створювати нові тренди.

А поки що крадіть як художник.

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

Висновок

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

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

Автор: Erik D. Kennedy
Переклад: UIUXUA