NAT_NEDOK

NAT NAT navrhovanie aa typografia typografia navrhovanie ročník 2.2.ročník

KOMPOZÍCIA

ZÁSADY PÍSMA

ÚVOD

TYPOGRAFIA

- náuka o písme a sazbe, o ich zákonitostiach a správnom používaní. Pojem sa používa aj ako pomenovanie činností spojené s grafickou úpravou tlačovín.

- zaoberá sa problematikou grafickej úpravy tlačených a digitálnych dokumentov, s použitím vhodného písma a usporiadaním znakov do zrozumiteľnej podoby. Zaoberá sa tiež celkovým

dizajnom písma, jeho farbou, čitateľnosťou a správnym zalamovaním do odsekov.

Základnou jednotkou písma je ZNAK. ZNAK

obraz písmena, číslice, interpunkčného či diakritického znamienka, symbolu

alebo drobného grafického prvku

FORMA

- súvisí s už vytvorenými písmenami, druhmi písma, slovami a logotypmi - návrhári písma sa musia usilovne pripravovať aby vytvorili vysoko funkčný produkt - TYPOGRAFOVIA môžu stráviť roky štúdiom histórie typografie, posilovaním kresliarskych schopnos tí a pestovaním nevyhnutnej ctižiadosti pre vytváranie jedného písmena po druhom, jeden druh písma môže t ypograf tvoriť aj rok - grafici vytvárajú špecificku typografickú kompozíciu s už existujúcich druhov písma /hry, telefony, kamery, PC, .../ - je dôležité mať silnú vizuálnu gramotnosť

vizuálna gramotnosť

- schopnosť čitať a písať vizuálnym jazykom /obrazy, písmo, farby, tvary, .../ - vnímanie, proces porozumenia, pozorovacia schopnosť, interpretácia, ...

ZÁSADY PÍSMA ANATÓMIA PÍSMA Každá časť písmena, ktorá definuje jej tvar, má svoj názov. Čierna časť, ktorá určuje tvar písmena je poz + priestor a okolie je neg - priestor. Každý dizajnér by mal poznať a rozumieť bežným výrazom (pätka, účiarie, oko, výška písma, ....).

ÚPRAVA PÍSMA Zmeny vo výške a šírke prejdu z jedného druhu písma na druhý. Poznať strednú výšku písma rozdielnych fontov je jeden z hlavných znakov, ktorý pomáha dizajnérovi pri výbere písma. Znalosť termínov a toho ako sa písma menia v závislosti na strednaj výške, diakritike, serifoch alebo šírke, dá dizajnérovi základné porozumenie a pochopenie typografie.

ZÁSADY PÍSMA INTERPUNKCIA Znaky a ich použitie sa mení podľa daného jazyka, kultúry a času (bodkočiarku používajú grécko ako otáznik). Grafici ale aj spisovatelia využívajú interpunkciu na vyjadrenie pauzy, delenia, myšlienky, atď.

DIAKRITICKÉ ZNAMIENKA A ZNAKY Dizajnéri musia vytvoriť tieto znaky, tak aby boli použiteľé v mnohých jazykoch. Tieto znaky - glyfy vieme násť v samostatných oknách grafických a sadzobných programoch. ČÍSLICE Sú dva druhy číslic: zarovnané 5678 a skákajúce 5678. Zarovnané najlepšie fungujú s veľkými písmenami. Old style (skákajúce) zas lepšie vyniknú s malými písmenami, lebo zdieľajú vrcholy a údolie medzi hornými a dolnými doťahmi.

AKCIA: 20, 150 Kernova 46/20

ZÁSADY PÍSMA ZLOMKY Niektoré druhy písma môžu obsahovať rôzne rady zlomkov, je to ako lomítko, ale má na doťažnici sa umiestnuje inde. Pokiaľ sa vo fonte nenachádza potrebný druh zlomku, môžeme, pokiaľ sa dá, použiť aj desatinné číslo.

½ ¼ ¾ 4½

TRACKING - ROZPAL Vzťahuje sa k priestoru medzi písmenami. Upravovaním medzery sa stávajú viac alebo menej rozoznateľnými. Ak je medzera veľmi malá, písmená začnú do seba narážať, ak je príliš veľká, písmená pôsobia ako samostatné objekty a nie ako súčasť slov.

ZÁSADY PÍSMA KERNING Je to priestor - medzera medzi dvoma znakmi, špecifickými pármi písmen. Upravuje sa nezávisle od prestrkávania. Upravovaním kerningu ide o snahu docieliť vizuálnu harmóniu. Niektoré fonty maju automatické nastavenia kerningu.

TEXTOVÉ PÍSMO Písmo určené na nepretržité čítanie ako v knihách alebo časopisoch. Písmo musí byť dobre čitaťeľné, nie veľmi zdobné, kriklavé aby nepriťahovalo viac pozornosti ako obsah informácií. Font by mal byť rovnaký a rovnaký stupeň šedej (farba).

(Caslon, Bembo, Garamond, Times New Roman - 20.stor, Minion, Swift, Marcury - 21.stor) Aquid quiatur, tecum rem harumquam quia conseque nis et et od ex earum, a quidus. Cerferatia quibusa pratqui ne voluptas es a corita et rempori tioresc imilit, omnihilique em ut aritaquati veliciunt accusciIllabendius, tarternius vid ininum diu coMus autem dendebi ssequiatae debit,

Aquid quiatur, tecum rem harumquam quia conseque nis et et od ex earum, a quidus.Cerferatia quibusa pratqui ne voluptas es a corita et rempori tioresc imilit, omnihilique em ut aritaquati veliciunt accusciSum aut asin poribus, sunt atatius eaHeni blabor seculparume pero ipsae

Aquid quiatur, tecum rem harumquam quia conseque nis et et od ex earum, a quidus.Cerferatia qibusa pratqui ne voluptas es a corita et rempori tioresc imilit, omnihilique em ut aritaquati veliciunt accusciOdis illaut es earupienihit voluptaBus autemporum del mossinte

Aquid quiatur, tecum rem harumquam quia conseque nis et et od ex earum, a quidus. Cerferatia quibusa pratqui ne voluptas es a corita et rempori tioresc imilit, omnihilique em ut aritaquati veliciunt accusciEndaepud andessequi ventoreObitio conem. Ibusam

ZÁSADY PÍSMA TITULKOVÉ PÍSMO Zvyčajne je vo veľkosti 15+. Je odlišné od textového, malo by rýchlo upútať pozornosť, malo by mať voľnosť ale aj dôraz.

(Frutiger, Futura, Rockwell, Memphis, Officina serif, Clarendon)

GRAFICKÉ PRVKY Jednotlivé grafické prvky písma ako hrúbka ťahu, kontrast, šíra, váha písma, môžeme cvičiť kreslením jednoduchého písma. Začíname pomocou štvorcekovaného písma na princípe rastra, vychádzame z geometrie, vychádzame z vizuálneho procesu.

ZÁSADY PÍSMA CHARAKTERISTIKA PÍSMA Druhy písma môžu mať konotatívne alebo denotatívne vlastnosti. Denotácia sa vzťahuje k hlavnému, skutočnému významu. Konotácia má širší význam, môže súvisieť s konvenciami, hlbšími myšlienkami, postojmi alebo zásadami. Dizajnér na základe poznania odlišností kultúry, doby, symboliky a iných formalít vyberá vhodný font pre určitý účel.

URČOVANIE Rozlišovať písma od seba je čoraz náročnejšie. Je to preto, lebo písem sa vytvára stále viac a odlišujú sa niekedy aj v detailoch, ktoré si na prvý pohľad nemusíme všimnúť. Napr Helvetica vz Akzidenz - grotesk, Arial vz Helvetica, atď.

KOMPOZÍCIA TEXT - riadkovy preklad - typografické zarovnanie - delenie na odstavce

KOMPOZÍCIA

MRIEŽKA /GRID/

V roku 1950 skupinka švajčiarskych dizajnérov začala hľadať lepší spôsob systematizácie zobrazovania informácií na vytlačenej stránke. Ich práca začala byť známa ako dizajn mriežky (grid design). Hŕstka priekopníkov ako je Joseph Müller-Brockmann a Karl Gerstner produkovali prácu, ktorá bola rovnako krásna ako racionálna.

JNU / WWW A Z I .D D E

ZNAMN E AJVÝ JŠI E /N

ISHISTORY.CO N M IG S E

OSTI HIST Ó OBN RI OS

MRIEŽKY SÚ AKO NEVIDITEĽNÉ LEŠENIA, KTORÉ DÁVAJU DIZAJNU NA STRÁNKE SÚDRŽNOSŤ GRID SYSTÉM SLÚŽI NA UDRŽANIE VŠETKÝCH PRVKOV V ROVNOVÁHE JEDNOTLIVÉ GRAFICKÉ PRVKY /TEXT, RAMIKY, OBRAZ, TVARY/ MÔŽETE UMIESTNIŤ NA OKRAJ FRAMU ALEBO ICH CENTROVAŤ. VÄČŠINA DIZAJNOV JE ALE ZLOŽITEJŠIA A VTEDY JE POTREBNÉ VYTVORIŤ GRID SYSTÉM ALEBO TEDA MRIEŽKU. MRIEŽKA SA SKLADÁ Z NIEKOĽKÝCH ČASTÍ: FORMÁT, VÝŠKA RIADKA /MRIEŽKA ÚČIARIA/, MARGINS - OKRAJE, MODULY, ZÓNY, RIADKY, STĹPCE A MEDZERY. VYTVORENÍM MRIEŽKY ZÍSKA DIZAJNÉR ROZSIAHLEJŠÍ AKTÍVNY PRIESTOR A ZACHOVÁ PRITOM ZÁKLADNÚ STĹPCOVÚ ŠTRUKTÚRU. UMOŽNÍ SA TÝM DYNAMICKEJŠIE VYUŽITIE TEXTU A OBRÁZKOV A ZAJISŤUJÚ SA TÝM VHODNÉ MIESTA PRE POPISKY.

ÚČIARIE

OKRAJ

FORMÁT

MRIEŽKA /GRID/

KOMPOZÍCIA

KNIŽNÁ, BLOKOVÁ MRIEŽKA Používa sa pre knihy, vzhlad nemá veľa mozností, ale o to viac casu si vyzaduje vytvorenie geometrie.

Grafik vytvára dojem poriadku a harmónie na vymedzenie priestoru pre text.

Vytvoriť ju môžeme pomocou: a) veľkosti stránky - na vytvorenie SADZOBNÉHO OBRAZCA b) na základe „tretiniek„ vytvorením ZLATÉHO REZU

w

SYMETRICKÁ

ASYMETRICKÁ

KOMPOZÍCIA STĹPCOVÁ MRIEŽKA Vertikálne útvary sú súčasťou časopiseckých layoutov, teda na tvorbu dizajnu časopisov, ale vieme ju použiť aj vo webovom dizajne. Táto mriežka má vo svojej štruktúre stĺpce.

STĹPCOVÁ MRIEŽKA

KOMPOZÍCIA HIERARTICKÁ MRIEŽKA Hierachická mriežka sa upravuje podľa potreby, nemusí sa riadit hierarchiou, ide skôr o intuitívne rozmiestnenie, môže obsahovať vnorené moduly (rámik v rámiku).

Takáto mriežka sa vytvára pre layouty pre www. Tu je stranka rozdelena do viacerych zon: hlavička, navigácia, sekundarna navigacia, telo, paticka. Format je prisosobeny monituru a PC systemom. Mriežka je dynamická, vzhľadom na interaktivitu.

MRIEŽKA /GRID/

KOMPOZÍCIA

MODULÁRNA MRIEŽKA Obsahuje vacsi pocet horizontálnych os, ktoré sa krížia s vertikálnimi. Pozostáva z pretínajúcich sa priamych línií, ktoré tvoria moduly Táto mriežka je hlavným nástrojom pre organizáciu stránky.

Modulárna mriežka sa používa pri navrhovaní kníh, vizitiek, ochranných známok, loga atď.

s použitím mriežky

bez pouzitia mriežky

KOMPOZÍCIA .HIERARCHIA A + LAYOUT ÚSTREDNÝ BOD slúži na určenie dominantnej typografickej informácie. Čitateľ by mal vedieť zo stránky určiť úroveň informácie, teda čo je menej alebo viac dôležité.

TYPOGRAFICKÝ KONTRAST pomáha čitateľovi vidieť čo sa deje, skor ako je to nútený prečítať a vytvárať úsudok.

Ak strana obsahuje jeden dominantný prvok, mal by byť v tzv. OPTICKOM STREDE – kúsok nad geometrickým stredom stránky.

Najdôležitejšie nadpisy a obrázky by mali byť na tzv. ZLATOM REZE.

FARBA .čiernobiely dizajn je rázny a čistý, ale konvenčný .najlepšie sa nám číta to, na čo sme zvyknutí, dokumenty s čiernym textom na bielom, alebo svetlo-žltom podklade čítame každodenne .použitím vhodne zvolenej a strategicky umiestnenej farby môžeme získať upútanie pozornosti, no musíme dbať na dostatočný kontrast a dodržanie čitateľnosti

TYPOGRAFICKÝ KONTRAST

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

ODDELENÉ PÍSMO .pri kombinovaní písma a obrazu môže dôjsť ku prekrývaniu .na obrazoch s hrubou texturou alebo pestrou farebnosťou použijeme rámik, ktorý vytvorí pre písmo vlastný priestor .rámiky nemusia len zvýrazňovať TPG na pozadí, ale tiež môžu narúšať formát

TYPOGRAFICKÝ KONTRAST

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

PÍSMO CEZ OBRAZ .písmo môže byť čitateľné a harmonické aj bez

použiatia rámika, ak je vo vzťahu dostatok

kontreastu vo farbe aj textúre .harmóniu písma, obrazu a textúry môžeme dosiahnuť aj s rozmanitosťou, napríklad rozmanité písmo, unikátna farba, odlišná sýtosť podporujú čitateľnosť

TYPOGRAFICKÝ KONTRAST

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

SÚLAD S PRIESTOROM .priestorový súlad môžeme dosiahnuť aj bez toho aby sme ohraničovali TPG a to zkreslením písma .pre vytvorenie dizajnu so zkreslenym písmom potrebujeme víziu, technické know-how a trpezlivosť, tak môžeme vytvoriť provokatívnu kompozíciu s novými vlastnosťami .vzniká nový rozmer, dramatickosť, zapadnutie do prostredia - toto vieme využiť v plagáte, reklame, na putačoch v exteriéri, atď.

TYPOGRAFICKÝ KONTRAST

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

Jeho charakteristické znaky sú vyváženosť, statickosť a je na neho sústredená najvyššia pozornosť.

OPTICKÝ STRED GEOMETRICKÝ STRED

OPTICKÝ STRED

Optický stred je taký bod na ploche, ktorý nie je priťahovaný k žiadnemu z okrajov plochy.

OPTICKÝ STRED

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

KOMPOZÍCIA .HIERARCHIA A + LAYOUT

ZLATÝ REZ



KOMPOZÍCIA .HIERARCHIA A + LAYOUT

- zlatý rez je možné zostrojiť pre každú stranu obdĺžnika, v priesečníkoch získame zlatý bod – ideálne miesto pre presné umiestnenie dominanty

ZLATÝ REZ

- znamená to, že ľubovoľnú úsečku rozdelíme v pomere 0,62:0,38 a dominantný prvok kompozície umiestnime do vzniknutého pomeru

KOMPOZÍCIA .HIERARCHIA A + LAYOUT NAVIGÁCIA Navigácia nie je len synonymom pre menu vo webdizajne, ale tiež pomáha čitateľom nájst určitý článok, poznať autora alebo porozumieť termínom Navigácia má zodpovedať 3 základné otázky: Kde som? Kde som bol? Kam môžem ísť?

Pri otázkach nám pomáhajú rôzne grafické prvky ako obraz, farba, text, mapy, piktogramy, texty, čísla, ...

PROCES KTORÉHO PROSTREDNÍCTVOM SA ČITATEĽ ORIENTUJE V PUBLIKÁCIÍ

KOMPOZÍCIA .HIERARCHIA A + LAYOUT Formy NAVIGÁCIE: mapy tlačidlá ikony odkazy (textové, grafické) bannery obsahy registre císlovanie strán piktogramy v texte

KOMPOZÍCIA .HIERARCHIA A + LAYOUT INFORMAČNÝ dizajn A KOMUNIKAČNÉ SYSTÉMY

Drží sa konvencii, koli informačnej hodnote Typografický obsah nestači len zmeštiť do formátu (vizitka), ale urobiť ho funkčným a jasne čitatelným Aj na hlavičkovom papieri alebo obálke záleží kam umiesti grafik logo, text a kontakty Napríklad logo by sa malo nachádzat v lavej hornej časti...

vizitka je jedným z najmenších a najbohatších kúskov tlačených informácií (meno, poícia, adresa, čísla, email, web, logo)

stanovenie druhu písma a veľkosti

kontaktne informácie sú umiestnené pri mene (pravidlo blízkosti)

rozdelenie obsahu do blokov podľa druhu informácie

vloženie loga a zmenšenie veľkosti písma pre vytvorenie viac priestoru

pridať číselné kódy krajiny a farbou odlíšiť jednotlivé prvky

logo umiestnené hore (číta sa ako prvé), horizontálne zarovnanie s menom, táto verzia umožňuje viac obsahu

KOMPOZÍCIA .HIERARCHIA A + LAYOUT SMER ČÍTANIA Ked čítame slová alebo vety, pohlad pokracuje v smere čítania. Ak si grafik zváži vizuálnu silu a použije ju v kompozícií, môže vytvoriť energický dizajn, zvýrazniť tým význam alebo vytvoriť ustredný bod - miesto kde sa má uberať zrak

KOMPOZÍCIA .HIERARCHIA A + LAYOUT TYPOGRAFICKÝ PRIESTOR Na formáte pracuje grafik s pozitívnym a negatívnym priestorom, tie navzájom súperia a treba preto vytvoriť synchronizáciu.

Najtmavšie časti pôsobia ako pozitívna sila a tá, pri negatívnej sile (svetlá casť), vypláva na povrch.

KOMPOZÍCIA .HIERARCHIA A + LAYOUT LAYOUT + TEMPO Text, grafická časť a layout Tempo sa vzťahuje k celej vizualnej plynulosti, tu ovplnyvnuje veľkosť, tvar, hrúbka, farba aj rozmiestenie

- POSTUPNOSŤ

- KVANTITA

- POZÍCIA

- FARBA

PRINCÍPY

Čitateľnosť dôraz Forma spájanie druhov písma šetrenie prostriedkov ekonomika písma rétorika slang mimika porovnávanie zkreslenie konštrukcia písmo ako imidž písmo ako textúra kominácia štýlov vizuálne možnosti Farba farba ako signifikant

farba, veľkosť a textúra farba pre náladu, súvislosť a divákov Tri rozmery typografia pre orientáciu a nadpisy posúvanie a ťahanie

PRINCÍPY

PRINCÍPY

Zdroje: http://wiki.knihovna.cz/index.php/Font https://detepe.sk/dizajnove-terminy-jednoducho-laikov-i/ https://docs.google.com/viewer?url=http%3A%2F%2Fwww.ff.umb.sk%2F~sedik%2FVizu%25C3%25A1lna%2520komunik%25C3%25A1cia%2FVK1-1.pr.pps https://sk.ilovevaquero.com/kompyutery/58175-chto-takoe-modulnaya-setka-kak-sdelat-modulnuyu-setku.html https://sushiandbox.ru/sk/skajjp/modulnaya-setka-20h20-v-dizaine-modulnye-setki-v-veb-dizaine-kakie.html https://g14pool.wordpress.com/2013/05/08/tvorba-grafickeho-layoutu-mrizka/ https://sketcher.startitup.sk/grid-systemy-pre-screen-dizajn/ https://visme.co/blog/layout-design/ https://www.oreilly.com/search/?query=hello%20goodlooking&extended_publisher_data=true&highlight=true&include_assessments=false&include_case_studies=true&include_courses=true&include_playlists=true&include_collections=true&include_notebooks=true&include_sandboxes=true&include_scenarios=true&is_academic_institution_account=false&source=user&sort=relevance&facet_json=true&json_facets=true&page=0&include_facets=false https://www.ecommercebridge.sk/typografia-ako-sucast-uspesneho-online-riesenia/ https://typografia.xyz/ LAYOUT__Ambrose__Haris Typografie_Jason Tselentis Kompletní příručka pro designéry_Jason Simmons 365 prikázaní grafickeho designu_S. Adams a spol.