10 правил веб-друкарні, які повинен знати кожен дизайнер
Ви можете включити багато елементів у свій веб-дизайн, які створять взаємодію та утримають увагу відвідувачів. Це зображення, відео та навіть звук. Однак найважливішою частиною майже кожного веб-сайту є вміст, який читають відвідувачі, щоб отримати інформацію, яку вони читають.
Якщо ви хочете зробити цю інформацію легшою для читання, візуально цікавою та щоб цей текст додав до загального дизайну веб-сайту, ви повинні розуміти типографіку. Це мистецтво та вміння робити написане слово водночас функціональним та естетично привабливим.
Якщо ви хочете навчитися використовувати типографіку в своїх інтересах, перегляньте ці 10 правил, які повинен пам’ятати кожен дизайнер.
1 Припиніть використання LoremIpsum після початкового процесу проектування
Якщо контент є головним, чому йому не приділяють серйозної уваги в процесі веб-дизайну? Використовуючи підроблений вміст як заповнювач, веб-дизайнери відводять вмісту на другий план. Це вагомий показник того, що пріоритети дизайну не в порядку. Це не так проблематично на ранніх етапах, наприклад, коли ви макетуєте різноманітні макети сторінок. Однак, як тільки ви звузите коло речей, важливо працювати з фактичним веб-вмістом під час створення остаточного дизайну. Це гарантує, що тому, про що йдеться на конкретній веб-сторінці, надається таке ж значення, як і макету та візуальним елементам.
На додаток до цього наявність фактичного тексту має значення з точки зору дизайну та макета. Ви не хочете опинитися в положенні, коли ви повністю розробили веб-сторінку, щоб дізнатися, що вона не працює з фактичним вмістом. Ось чому надзвичайно важливо якнайшвидше отримати фактичний текст від вашого клієнта автора контенту.
2 Зробіть текст без зарубок
Текст із засічками надзвичайно гарний. Це чудові шрифти, які можна використовувати для друку, а також для більшого друку, наприклад заголовків, заголовків і підзаголовків. На жаль, на екрані засічки погано масштабуються, коли йдеться про менші відображення вмісту, наприклад блоки тексту. Засічки, які добре виглядають при більшому розмірі, ускладнюють читання тексту, коли шрифт стає меншим. Через це доцільно зберігати засічки для великого тексту та покладатися на sans, коли читабельність може бути проблемою. А ще краще, прийміть чистий, гладкий, сучасний вигляд безшрифтів і збережіть засічки для друкарні. Таким чином вам ніколи не доведеться мати справу з погіршенням читабельності на користь використання шрифту, який виглядає гарно.
3 Подумайте про розумні цитати та інші символи на початку процесу розробки
Швидше за все, ви відвідували веб-сайт, де певні символи не відображалися належним чином. Іноді їх замінюють запитанням або рядком дивних символів. Іншим разом їх просто немає. Це часто трапляється з розумними або «кучерявими» лапками. Це часто є результатом створення тексту в MS Word або іншому пакеті, а потім перенесення на веб-сторінку. Речі просто не перекладаються так, як хочеться. Це також типово для євро символ, двобайтові символи та інші символи, взяті з іноземного вмісту.
Щоб уникнути цієї проблеми у вашому остаточному проекті, у вас є кілька варіантів. По-перше, ви можете змінити свій вміст, щоб позбутися цих символів. Це працює, якщо ви бажаєте змінити символи на природну мову. Ви також можете використовувати HTML, щоб переконатися, що символи відображаються належним чином, а не просто покладатися на копіювання та вставлення. Що б ви не вирішили, перевірте веб-сторінку в кожному доступному браузері. Те, що може вирішити проблему із символами в одному браузері, може бути зовсім неефективним в іншому.
Якщо ви розвинули хороші навички CSS, ваші відвідувачі повинні мати можливість абсолютно безперебійно переміщатися сторінками вашого веб-сайту. Якщо ви створите таблиці стилів належним чином, ви навіть зможете мати кілька версій однієї сторінки, зберігаючи безперервність, коли йдеться про типографіку. Звичайно, вам не потрібно використовувати багато хитрощів. Хороший CSS може допомогти вам уникнути невеликих, але поширених проблем, таких як зміна накреслень і розміру шрифту від однієї сторінки до іншої.
Чому послідовна типографіка така необхідність? Використання CSS для підтримки узгодженої типографіки надає вашому веб-сайту професійного та чіткого вигляду. Це також означає, що вам не потрібно думати про типографіку під час розробки кожної сторінки. Замість цього ви просто використовуєте відповідну таблицю стилів. Якщо ви вирішите на певній сторінці порушити норму та зробити щось інше з типографікою, щоб створити ефект або привернути до чогось увагу, це буде більше виділятися завдяки вашому використанню CSS.
5 Мікро- та макродрук є важливими
Мікротипографіка стосується деталей типографіки, пов’язаних із зручністю читання. Наприклад, інтервали є проблемою, пов’язаною з мікротипографікою, як і масштабування та контраст. Коригування, які ви вносите, щоб переконатися, що блок тексту читається на будь-якому пристрої чи в браузері, пов’язані з мікротипографікою.
Макротипографіка пов’язує ваш вибір щодо типографіки з вашим загальним дизайном. Це стосується естетики.
Хороша типографіка враховує як мікро-, так і макродрукарію. Ви коли-небудь відвідували веб-сайт, на якому використовувався дуже гарний нестандартний шрифт, який також було майже неможливо прочитати? Ось що відбувається, коли увага приділяється макротипографіці, а не мікротипографіці.
6 Знайте як зміст, так і дизайн
Як відомо, хороший веб-сайт має потік. Частиною цього є читабельність вмісту сторінки. Ми вже обговорювали, як на це впливають такі речі, як засічки, і ми обговорювали, що фіктивний текст не може замінити справжнього, коли мова йде про пізніші етапи дизайну. Ми ще не закінчили. Вміст справді є королем. Після того, як остаточний дизайн, включно зі змістом, готовий, ви повинні прочитати веб-сторінку.
Коли ви читаєте вміст після завершення дизайну, ви можете визначити, чи є проблеми з інтервалом або розривом рядка. Це може заплутати вміст або навіть ненавмисно змінити значення вмісту. Виправлення цих проблем за допомогою кількох прийомів типографіки може гарантувати, що ваш кінцевий продукт передає саме те, що ви чи ваш клієнт маєте намір.
7 Зрозумійте важливість ієрархії
Ієрархія – це дорожня карта, яку ви надаєте людям, які відвідують ваш веб-сайт. Ви можете використовувати зображення, відео, колір і (звичайно) типографіку для створення такої ієрархії.
Це просто спрямування відвідувача від першого, що ви хочете, щоб він побачив, до наступного тощо. За допомогою типографіки ви можете використовувати розмір, зміни шрифту та інтервали, щоб допомогти визначити ієрархію, якої мають дотримуватися користувачі. Насправді, якщо у вас є сторінка, яка не конвертується, ви можете пограти з типографікою, щоб перевірити, чи внесені вами зміни допоможуть скерувати відвідувачів до кнопки заклику до дії.
8 Будьте творчі, але обережні з кольором
Найпростіший спосіб гарантувати, що у вас ніколи не буде проблем із читабельністю через проблеми з кольором шрифту та кольором фону, — це використовувати найконтрастніші кольори, які існують, — чорний і білий. На жаль, це може призвести до досить нудного дизайну.
Не бійтеся використовувати кольори. Насправді, не бійтеся використовувати поєднання кольорів, які, здається, не підійдуть. Іноді все, що вам потрібно зробити, — зробити на один або два відтінки світліше або темніше. Тоді ваша типографіка стане нерозбірливою та стане чудово помітною.
9 Виключіть текст по центру
Проблем із центрованим текстом багато. Перш за все це може зробити ваші веб-сторінки схожими на погано оформлені листівки. На додаток до цього, ви майже завжди отримуєте дивні поля та текст, який виглядає так, ніби це вірш або нотатки на вкладці зі старого рок-альбому. Хоча можна використовувати центрований текст для заголовків, зазвичай краще уникати цього взагалі. Дотримуйтеся виправленого тексту зліва, і читачам буде легше читати ваш вміст.
10 Подумайте, як виглядає ваш текст у збільшеному вигляді
Незалежно від того, чи використовують вони великий і вказівний пальці чи натискають кнопку масштабування, люди збираються збільшити ваш текст. Іноді вони роблять це, щоб компенсувати менший екран. Інший раз вони просто роблять це, тому що їм важко прочитати ваш текст у нормальному розмірі.
Було б чудово, якби кожен міг переглядати ваш текст, як задумано, але з бумерами часто потрібна додаткова допомога, щоб побачити текст, це просто неможливо. Будьте обережні, щоб не використовувати шрифт, який погіршується, якщо його збільшити.
Корисні інструменти та ресурси
Ось кілька корисних інструментів і ресурсів, які допоможуть вам більше працювати з типографікою:
- FontFace Ninja: ця утиліта допоможе вам визначити шрифти, які ви знайдете в Інтернеті. Це чудовий інструмент, коли ви натрапляєте на шрифт, який справді впадає в очі. Цей плагін Chrome допоможе вам визначити, знайти та придбати будь-який комерційно доступний шрифт, який ви бачите на будь-якому веб-сайті.
- TypePlate: це повна структура типографіки, яка ідеально підходить для веб-дизайнерів. TypePlate може впоратися з буквицею, цитатами, масштабуванням, кольорами та багатьма іншими проблемами, пов’язаними з типографікою.
- Модульна шкала: це шкала, яка дозволяє визначити ідеальний шрифт і розмір шрифту. Це також допоможе вам створити баланс між розміром шрифту заголовків і заголовків і шрифтом, який ви вибираєте для тексту.
- TIFF: цей інструмент дозволяє відображати два різних шрифти. Потім він відображає відмінності між кожним із двох шрифтів для вас. Він навіть дозволяє порівнювати різні літери та цифри від одного шрифту до іншого.
- TypeWolf: скористайтеся цим веб-сайтом, щоб виправити деякі з найкрутіших шрифтів і найбільш надихаючого використання типографіки в Інтернеті. Це чудове джерело натхнення, а також інформації.
- Чому шрифти важливі, Сара Гайндман: це чудова книга, яка досліджує важливість шрифтів і те, як типографіка може впливати на душевний стан. Це чудова книга для людей, які захоплюються типографікою, а також для людей, яких, можливо, потрібно переконати у важливості вибору правильного типу роботи.
Висновок
Сподіваюся, ця стаття вплине на те, щоб веб-дизайнери трохи більше подумали над типографікою, а також знайшли способи ефективнішого та креативнішого використання тексту у своїх дизайнах.