СПОДЕЛИ

Кога станува збор за веб сајтови и апликации, добрата типографија е повеќе од добро типографско писмо. Буквите треба лесно да се читаат, и скенираат, а притоа да обезбедуваат цврста визуелна врска со содржината.

Задачата е потешка, но повеќето дизајнери може да ја завршат правилно со малку повеќе искуство.

Денес ќе погледнеме 10 “правила” кои може да ги следите за да креирате одлично типографско корисничко искуство. (И секое од правилата доаѓа со пример од веб сајт со успешна тиографија.)

Правило за читливост

1Идејата дека мора да употребувате sans serif за веб типографија е застарена, но она што стои зад неа е многу важно: текстот мора да може лесно да се чита.

Треба да избегнувате писма кои тешко се читаат, обично оние од фамилиите Script, Novelty или Blackletter. (Исклучок е кога треба да употребите понакитен стил заради “уметност”.)

Најлесно читливите фонтови лесно се скенираат, и не привлекуваат внимание кон себе. Речиси “невидливите” фонтови се дотолку читливи што посетителите и воопшто не размислуваат за буквите… едноставно бидејќи тие функционираат совршено.

Оставете доволно простор помеѓу редовите текст

2Еден од клучевите за креирање на искуство кое корисниците ќе го обожуваат е проредот. Ова особено е важно кога читате на мобилен, каде големиот, речиси  и претеран, проред придонесува за полесно читање.

Количината на простор помеѓу редовите со текст доаѓа со многу варијабили:

  • Големина на текст
  • Количина на текст
  • Стил на букви
  • Ширина на екран

Не постои совршена формула, за жал, но има работи кои можете да ги направите:

  • За повеќето веб сајтови, прилагодете го проредот на 125 проценти од големината на текстот.
  • За мобилни уреди, прилагодете го проредот на 150 проценти од големината на текстот.
  • Употребете слободен проред, еднаков на “enter” за пасусите полесно да се скенираат.
  • Од око проценете како изгледа текстот и збијте го, или олабавете го, според она што ќе го видите.

Обидете се со изразени и заоблени букви

3Големите заоблени букви полесно се читаат. Затоа се претпочитаат буквите со поизразени облини (простор во формата на буквите како на пр. на буквата “o.”)

Збиените писма се потешки за читање. Пошироките стилови, како писмото во овој пост, лесно се читаат затоа што буквите лесно се разликуваат една од друга. Позаоблените форми на букви многу наликуваат на оние букви на кои обично се изложени децата додека учат да пишуваат и читаат. Таа естетика останува со корисниците доживотно.

Дадете му големина на текстот

4Кога се сомневате, употребете поголем текст. Големината на текстот зависи од количеството текст со која ќе морате да работите. Особено внимание посветете на долгите блокови со текст.

Секој дизајнер има различна претстава за тоа колку текст треба да употреби, но повеќето се согласуваат дека оптималниот број е помеѓу 45 и 60 карактери во еден ред. Ова значително се намалува кај типографија за мобилни уреди, каде обично се прифаќа половина од оваа густина на карактери.

Барајте поголема X-висина

5Висината на буквите, особено малите букви, многу влијае на тоа колку лесно корисниците ќе може да се движат низ вашата содржина.

Х-висината е висината на малата буква “x”, па оттаму доаѓа и името. Фонтовите со поголема x-висина полесно се читаат, што значи дека висината на малите букви е поблиска до висината на големите букви. Барајте комплети со карактери каде x-висината е од две-третини до три-четвртини од големите букви.

Научете ги правилата на кернингот

6Добар кернинг е еднаков на добра типографија.

Ќе немате време, ниту потреба, да го намалувате растојанието помеѓу буквите во текстовите, но кога станува збор за текстот во насловите или рекламите, раздалечете ги буквите. Секој пар на букви треба да изгледа како да припаѓа еден на друг. Овој детаљ ќе помогне вашиот текст да се одвои од оние веб сајтови кои го забораваат овој многу важен чекор.

Размислувајте во пропорциите

7Кога креирате стилови на букви за еден проект, добро е за сé да размислувате во однос на пропорции. Иако ова се чини како многу математичка операција, сепак многу ќе ја олесни вашата работа.

Вратете се на проредот. Тоа е пропорција. Размислете на големините кои сте ги одредиле за текстот во телото, поднасловите, насловите и големите текстови од рекламите. Поврзете ги пропорционално за полесно да може да ја одредите големината на буквите и да креирате чувство на визуелна хармонија.

Едноличните контури се совршени

8Кога зборуваме за формите на буквите, ширината на контурите е важна. Буквите со многу тенки линии во контурата тешко се читаат бидејќи ним им недостасува контраст. Дебелите букви исто така се проблематични бидејќи се тешки за очите. Буквите со голем контраст на дебели и тенки линии се уште потешки за читање.

Решение: Работете со букви кои имаат униформни ширини на линии во контурите. Овие стилови лесно се читаат, не ве ограничуваат при изборот на позадина и се сигурни во однос на разбирливост и јасност.

Ограничете ја употребата на типографски писма

9Две писма. Повторете со мене уште еднаш: две писма.

Тоа треба да е целта на секој проект. Премногу писма ќе ги збунат читателите. Тоа е оптеретување за очите, го отежнува читањето и е напорно.

Изберете две фамилии на фонт (може да имате уште едно писмо за уметничките елементи, ако е неопходно), и задржете се на нив. Обележете како секе писмо треба да се употребува во проектот. Ова вклучува одредување на боја, големина и позиција на писмата во дизајнот. Тие мора да се конзистентни од страница во страница и за секој тип на уред.

Поставете контраст

10Постојат неколку модерни дизајни со минимален контраст помеѓу позадината и буквите. Иако ова може да изгледа интересно, не е во интерес на читателите и им го отежнува читањето.

Вашата содржина е она што го прави вашиот веб сајт посебен и важен. Направете контраст помеѓу позадината и текстот, за корисникот да може со леснотија да го прочита секој збор на екранот. (Токму заради ова белите, или светли, позадини со црни, или сиви, букви се многу популарни.)

Колку повеќе текст има вклучено на вашиот сајт, толку поважен станува контрастот. Ако подзамижувате кога го гледате текстот, тогаш или вашиот контраст е мал или употребувате премали букви. Color Safe е одлична алатка за комбинации на бои која вклучува скоро совршен сооднос на контраст. (И сајтот им изгледа одлично!)

извор: designmodo

Заклучок

Типографијата е еден од клучните елементи за одличен UX односно корисничко искуство. Ако сте самоук дизајнер но никогаш не сте имале формална обука за типографија, погледнете го нашиот курс. Ако планирате да се занимавате професионално со UX дизајн, ова е една од задолжителните работи кои ќе морате да ги совладате. Кога сте веќе тука, погледнете што сè содржи студиската програма за UX дизајн на веб академијата Еверест.

Ти се допадна овој напис?
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.