ať už je to na našich telefonech, v knihách nebo na webových stránkách, neustále trávíme psaná slova. Od instrukčních brožur až po fronty obchodů, typ je všude kolem nás. Často přemýšlíme o síle psaného slova, ale zřídka zvažujeme roli designéra při napodobování tónu slova nebo věty.
v zákulisí si návrhář vzal čas na zvážení vztahu mezi vzhledem textu a tím, co text říká. Ve skutečnosti lze různé nálady, atmosféry a emoce vyjádřit jednoduše prostřednictvím volby typu. Ale co je vlastně typografie-a proč je tak důležitá?
v tomto článku zvedneme víko na vše, co potřebujete vědět o typografii. Začneme definicí typografie, včetně stručné historie jejího původu. Poté se budeme zabývat výhodami dobré typografie a dopadem, který může mít na vaše uživatele. Nakonec se podíváme na různé prvky, které obsahují typografii, a co všechny znamenají.
zde je to, co budeme pokrývat:
- co je typografie?
- proč je typografie důležitá?
- různé prvky typografie
- Jak vybrat správné písmo pro váš web
- závěr
připraven? Pojďme se ponořit!
co je typografie?
začněme se základy: co je vlastně typografie? Typografie je v podstatě umění uspořádání písmen a textu způsobem, který činí kopii čitelnou, jasnou a vizuálně přitažlivou pro čtenáře. Typografie zahrnuje styl písma, vzhled a strukturu, jejímž cílem je vyvolat určité emoce a zprostředkovat konkrétní zprávy. Stručně řečeno, typografie je to, co oživuje text.
ve videu níže, careerfoundry UI design mentor Olga zvedne víko o tom, proč typografie záleží—a jaký rozdíl to dělá pro vaše uživatele.
typografie může být datována do 11. století, během inovace pohyblivého typu. Před digitálním věkem, typografie byla specializované řemeslo spojené s knihami a časopisy, a nakonec veřejná díla. První příklad typografie lze vidět v Gutenbergově Bibli, která odstartovala typografickou revoluci na západě. Zábavný fakt: styl typu používaný v Bibli Gutenberg je nyní známý jako Textura a najdete jej v rozbalovací nabídce písma na hlavních desktopových aplikacích dnes!
rychlý posun vpřed do moderní doby, kde je typografie většinou spojena jak s digitálním světem, tak s tiskem. S narozením internetu přišla kreativní exploze umění typografie. Najednou, web designéři měli hojnost písma a typ volby na jejich likvidaci, což typografie více vizuálně rozmanitější, než kdy předtím.
proč je typografie důležitá?
typografie je mnohem víc než jen výběr krásných písem: je to zásadní součást designu uživatelského rozhraní. Dobrá typografie vytvoří silnou vizuální hierarchii, poskytne grafické vyvážení webu a nastaví celkový tón produktu. Typografie by měla vést a informovat uživatele, optimalizovat čitelnost a přístupnost a zajistit vynikající uživatelský dojem.
pojďme se ponořit trochu hlouběji do toho, proč je typografie tak důležitá.
typografie buduje rozpoznávání značky
nejen, že dobrá typografie zvýší osobnost webu, ale vaši uživatelé začnou podprahově spojovat písmo uvedené na vašem webu s vaší značkou. Unikátní, konzistentní typografie vám pomůže vytvořit silné uživatele následující, budovat důvěru se svými uživateli, a pomůže nést svou značku vpřed.
typografie ovlivňuje rozhodování
typografie má hluboký vliv na způsob, jakým uživatelé tráví a vnímají informace přenášené textem. Poutavý typ je mnohem přesvědčivější než slabá písma, která neposilují poselství textu.
typografie drží pozornost čtenářů
dobrá typografie může být rozdíl mezi někým, kdo zůstane na vašem webu jednu minutu nebo půl hodiny. Je důležité, aby vaše webové stránky byly vizuálně stimulující a nezapomenutelné a typografie hraje v tomto procesu obrovskou roli.
různé prvky typografie
začít v typografii, musíte nejprve vypořádat se s osmi základními typografické designové prvky.
Písma a Písma
Tam je nějaký zmatek kolem rozdíl mezi typy písma a písma, s mnoha léčení dva jako synonyma. Písmo je styl designu, který zahrnuje nesčetné množství znaků různých velikostí a hmotnosti, zatímco písmo je grafické znázornění textového znaku. Jednoduše řečeno, písmo je rodina souvisejících písem, zatímco písma odkazují na váhy, šířky a styly, které tvoří písmo.
existují tři základní druhy písma: patkové, Bezpatkové a dekorativní. Udržet přehledné rozhraní a efektivní, dobrý designér nikdy používat více než tři písma—a udržet dekorativní fonty na minimum. Většina návrháři UI bude pár serif fonty sans-serif, jako je například uvedení hlavní tělo textu v patkové písmo a dát svůj titul v sans-serif písmo, nebo vice-versa.
Kontrast
stejně jako hierarchie, kontrast pomáhá zprostředkovat, jaké nápady nebo zprávy, které chcete zdůraznit, pro vaše čtenáře. Strávit nějaký čas kontrastem dělá váš text zajímavým, smysluplným a poutavým. Většina návrhářů vytvořit kontrast tím, že hraje si s různými druhy písma, barvy, styly a velikosti vytvořit dopad a rozbít stránku.
Konzistence
Udržování vaše písma v souladu, je klíčem k zamezení matoucí a chaotický rozhraní. Při předávání informací je nezbytné držet se stejného stylu písma, aby vaši čtenáři okamžitě pochopili, co čtou, a začali si všimnout vzoru. I když je v pořádku hrát si s úrovněmi hierarchie do určité míry, je dobré vytvořit konzistentní hierarchii písem (jedno konzistentní písmo pro záhlaví, druhé pro podnadpisy) a držet se ho.
bílé místo
často označované jako „negativní prostor“, bílé místo je prostor kolem textu nebo grafiky. To je často přehlížena a má tendenci zůstat bez povšimnutí uživatelem, ale správné použití mezery zajišťuje rozhraní je přehledné a text je čitelný. Bílý prostor může dokonce upozornit na text a poskytuje celkový esteticky příjemný zážitek. Bílé místo má často podobu okrajů, polstrování nebo jen oblastí bez textu nebo grafiky.
Zarovnání
Zarovnání je proces sjednocování a skládání text, grafiku a obrázky, aby zajistily, že tam je stejný prostor, velikosti a vzdálenosti mezi jednotlivými prvky. Mnoho návrhářů uživatelského rozhraní vytváří okraje, aby zajistilo, že jejich logo, záhlaví a tělo textu budou vzájemně zarovnány. Při zarovnání uživatelského rozhraní je dobré věnovat pozornost průmyslovým standardům. Například zarovnání textu doprava se bude zdát neintuitivní pro čtenáře, kteří čtou zleva doprava.
Barva
barva je jedním z nejzajímavějších prvků typografie. To je místo, kde návrháři mohou opravdu kreativní a pozvednout rozhraní na novou úroveň. Barva textu, nicméně, není třeba brát na lehkou váhu: přibíjení barvy písma může text vyniknout a zprostředkovat tón zprávy-ale špatné to může mít za následek chaotické rozhraní a text, který se střetává s barvami webu.
barva má tři klíčové komponenty: hodnotu, odstín a sytost. Dobrý designér bude vědět, jak vyvážit tyto tři komponenty, aby byl text poutavý a jasně čitelný, a to i pro osoby se zrakovým postižením. Návrháři to často otestují zobrazením textu ve stupních šedi (bez barvy) a vylepšením, pokud je text příliš tmavý nebo příliš světlý na barvě pozadí.
hierarchie
stanovení hierarchie je jedním z nejdůležitějších principů typografie. Typografické hierarchie klade za cíl vytvořit jasný rozdíl mezi prominentní kusů vyhotovení, které by mělo být si všiml, a číst jako první, a standardní text kopírovat. Ve věku krátké pozornosti vyvolané sociálními médii, návrháři se vyzývají, aby byli struční a vytvářeli písma, která uživatelům umožňují spotřebovat potřebné informace v krátkém čase.
hierarchii lze vytvořit pomocí velikosti, barvy, kontrastu a zarovnání. Například, pokud máte na začátku řádek kopie s ikonou vykřičníku, která je červená a větší než předchozí kopie, je to vizuální vodítko pro čtenáře, že je to výzva k akci. Nejtypičtějším příkladem typografické hierarchie je velikost: nadpisy by měly být vždy větší než podpoložky a standardní text.
jak si vybrat správné písmo pro vaše webové stránky?
Nyní, když jsme se seznámili s různými typografickými prvky, promluvme si o procesu výběru písma pro vaše rozhraní. S tolika různými fonty a písmeny, ze kterých si můžete vybrat, je snadné se cítit ohromeni. Správná volba závisí na mnohem víc než jen na tom, co vypadá hezky. Zde je několik klíčových úvah:
Přemýšlejte o osobnosti
jak chcete, aby se vaši uživatelé cítili při prvním vstupu na váš web. Chcete napodobit přátelskou atmosféru? Chcete, aby se web cítil špičkový, příjemný, hravý, nebo vážně? Je nezbytné, aby typografie odrážela osobnost značky nebo produktu. Dobrým výchozím bodem, když čelíte této výzvě, je definovat základní rysy vaší značky a začít shromažďovat písma, která tyto vlastnosti odrážejí. Odtud můžete začít pozorovat trend.
Zamyslete se nad tónem
stejně důležité je zvážit, jak Písmo harmonizuje s tónem zprávy. Pokud například chcete sdělit vážné nebo důležité informace, vyberte méně stylizované nebo dekorativní písmo, které je jasně čitelné a omezí rozptýlení.
nemusíte šetřit na funkce
Funkce je stejně důležité jako tvořit: není nic horšího, než webové stránky, které vypadá pěkně, ale je zcela nečitelné, což vede vás k klikněte na špatné tlačítko nebo vzít špatně odbočit, protože pokyny byly jasné. Při rozhodování o tom, co písma zahrnout do svého rozhraní, nastavit styl, estetické, a hlas stranou a přemýšlet o tom, zda písmo je čitelné, čitelné a přístupné. Může být text čitelný bez napětí? Jsou postavy dostatečně odlišné?
zvažte výkon
jedna věc, kterou mnoho návrhářů často přehlíží, je výběr písma, která jsou vhodná pro webový prohlížeč. Běžně používané knihovny písem, jako jsou písma Google, nabízejí webové soubory písem, které lze v prohlížeči bez problémů vykreslit dokonale. Pro tip: Při stahování webových písem nikdy nestahujte více znakových sad, než potřebujete. Tímto způsobem se vyhnete nadměrné hmotnosti!
nechte se inspirovat
Pokud si nejste jisti, kde začít, věnujte nějaký čas tomu, co dělají ostatní lidé. Otevřete oči typografii, kterou vidíte kolem sebe. Můžete si všimnout podobných vzorů? Vidíte dobré a špatné příklady typografie? I následující typografie hashtagy na sociální média, nebo se dívá nahoru typografie na Pinterest vám nějaké dobré nápady, co je tam venku. Můžete se také podívat na těchto osm typografických trendů pro další inspiraci.
Udělejte si čas na testování
nejlepší způsob, jak rozluštit, které písmo použít pro vaše rozhraní? Test, test a test! Získáním užitečné zpětné vazby od skutečných uživatelů získáte jasnější přehled o tom, co funguje, co ne, co je čitelné a co se cítí neintuitivní nebo neohrabané.
závěr
typografie je často přehlížena, ale je to zásadní součást návrhu uživatelského rozhraní. Zvládnutí typografie vás uvidí dobře na vaší cestě k tomu, abyste se stali fantastickým UI designérem! Pokud si nejste jisti, kde začít, proč ne hlavu na své oblíbené webové stránky a začít dělat poznámky o tom, co písma, které jsem šel pro.
Chcete se dozvědět více o designu uživatelského rozhraní? Podívejte se na tyto související příspěvky v blogu:
- 10 příklady krásných blogů, které mají přibitý jejich design UI
- 32 prvky uživatelského rozhraní pro UI designéry: váš konečný glosář
- zde je návod, jak navrhnout ikonu od nuly: podrobný průvodce