VSTUPNÍ ČÁST

Název modulu

Použití písma v designu webové stránky

Kód modulu

82-m-4/AC74

Typ vzdělávání

Odborné vzdělávání

Typ modulu

(odborný) teoreticko–praktický

Kategorie dosaženého vzdělání

M (EQF úroveň 4)

Skupiny oborů

82 - Umění a užité umění

Komplexní úloha

Obory vzdělání - poznámky

• 82-41-M/05 Grafický design
• 82-41-M/03 Výstavní tvorba a bytový design

Délka modulu (počet hodin)

12

Poznámka k délce modulu

Platnost modulu od

30. 04. 2020

Platnost modulu do

Vstupní předpoklady

• absolvování modulu Základy HTML, HTML5, CSS – Kaskádové styly, W3C, SEO optimalizace

JÁDRO MODULU

Charakteristika modulu

Cílem modulu je osvojení znalostí v oblasti užití písma v designu webové stránky. Technologické aspekty, zdroje a licencování. Žák se seznámí s názvoslovím, klasifikací písem a určením vhodnosti použití daného fontu v designu webu. Žák směřuje ke dvěma hlavním cílům – čitelnosti a vizuální poutavosti.

Po absolvování modulu žák vyjmenuje dělení písma, používá názvosloví a technologické aspekty, popíše problematiku licencování, žák je schopen aplikovat získané znalosti do vlastní práce a pracovat na zadaném úkolu samostatně.

Očekávané výsledky učení

Žák:

• rozeznává a používá klasifikaci písem
• používá typografické názvosloví
• vymezí vhodnost užití kombinace více fontů na stránku
• provádí navržení i realizaci webu 
• používá sémantické a vizuální formátování znaků
• vymezí zdroje licencovaných i volně použitelných písem
• vyjmenuje prvky licenční smlouvy

Obsah vzdělávání (rozpis učiva)

Obsahové okruhy vzdělání:

1. Velikost písma

• pro mobil: 14–16 px
• pro desktop: 16–22 px

2. Šírka řádku

• ideální šířka řádku (45-80 znaky)

3. Výška řádku

• v CSS je to line-height
• čím delší je řádek, tím větší musí být výška řádku
• čím menší je písmo, tím větší musí být výška řádku

4. Kontrast a světlost

• hutnost nebo pocit těžkosti písma na stránce

5. Rytmus (vodorovný i svislý)

• umístění písma na mřížku

6. Typografická škála

• poměr velikosti nadpisů, podnadpisů, úvodu (perexu) a běžného textu

7. Vhodnost užití písma

• účel webu
• obsah webu
• rodina písem (řezy)
• česká znaková sada

8. Licence

• open source–Google Fonts, Open–Foundry
• licence placená–omezení na jeden a více desktop zařízení, nebo počet zobrazení na webu (myfonts.com)
• free licence pro osobní účely, ne vždy je free licence povolena pro webové užití

Učební činnosti žáků a strategie výuky

Strategie učení: ve výuce se doporučuje kombinovat níže uvedené metody výuky.

Metody slovní:

• odborný výklad s prezentací a ukázkami (seznámení s tvorbou webu a práse s typografií a sazbou, klasifikace písem, typografické zásady, licence)

Přímé vyučování:

• přednes s použitím odborné literatury – obrazové publikace typografie, prezentace názorných prací
• vlastní tvorba s konzultací - průběžná práce
• hodnocené domácí úkoly (konzultace a diskuse)
• prezentace vlastní tvorby před spolužáky ve třídě
• orientace žáků v učivu (diskuze, ústní prezentace)

Specifikace průběžné práce:

• provedení vlastního webdesignu

Specifikace samostatné práce:

• teoretická část (teoretický popis tématu - práce s typografií)
• praktická část (provádí webdesign s množstvím textu, dbá na čitelnost a vizuální poutavost...)
• závěr (výsledky práce)

Učební činnosti žáků:

• seznámí se a následně používá klasifikaci písem a typografické názvosloví, typografické zásady
• vymezí vhodnost užití při designu vlastního webu
• používá sémantické a vizuální formátování znaků
• vymezí zdroje licencovaných i volně použitelných písem
• vyjmenuje prvky licenční smlouvy
• aktivně se zapojuje do výuky a zodpovídá kontrolní otázky vyučujícího

Zařazení do učebního plánu, ročník

3. ročník

VÝSTUPNÍ ČÁST

Způsob ověřování dosažených výsledků

Písemná forma zkoušení:

• základní pojmy a terminologie

Průběžné práce:

• provedení vlastního webdesignu

Samostatná práce žáků:

• zpracování vlastní prezentace

Ověřované okruhy:

• klasifikaci písem a typografické názvosloví, typografické zásady
• užití fontů v designu vlastního webu
• sémantické a vizuální formátování znaků
• zdroje licencovaných i volně použitelných písem
• prvky licenční smlouvy

Kritéria hodnocení

prospěl – neprospěl

• 1 – 90 až 100 % grafický projev je přesný a estetický, výsledky činnosti jsou kvalitní, pouze s menšími nedostatky, žák je schopen pracovat sám
• 2 – 75 až 89 % kvalita výsledků činnosti je zpravidla bez podstatných nedostatků, grafický projev je estetický, bez větších nepřesností, žák je schopen pracovat samostatně nebo s menší pomocí
• 3 – 60 až 74 % v kvalitě výsledků činnosti se projevují častější nedostatky, grafický projev je méně estetický a má menší nedostatky, žák je schopen pracovat samostatně podle návodu učitele
• 4 – 40 až 59 % v kvalitě výsledků činnosti a grafickém projevu se projevují nedostatky, grafický projev je málo estetický, závažné nedostatky a chyby dovede žák s pomocí učitele opravit, při samostatném studiu má velké potíže - nedovede samostatně studovat
• hranice úspěšnosti zkoušky – 39 % kvalita výsledků činnosti a grafický projev mají vážné nedostatky, závažné nedostatky a chyby nedovede žák opravit ani s pomocí učitele, nedovede samostatně stdovat

Pro splnění modulu ho musí žák absolvovat s absencí do 25 %.

Doporučená literatura

BERAN, Vladimír, kolektiv autorů; Typografický manuál; 2000

ŘEZÁČ, Jan; Web ostrý jako břitva; 2016

MUZIKA, František: Krásné písmo ve vývoji latinky (I. + II. díl), 1963

SALTZ, Ina: Základy typografie, 2010

Poznámky

Materiál vznikl v rámci projektu Modernizace odborného vzdělávání (MOV), který byl spolufinancován z Evropských strukturálních a investičních fondů a jehož realizaci zajišťoval Národní pedagogický institut České republiky. Autorem materiálu a všech jeho částí, není-li uvedeno jinak, je Robin Michenka. Creative Commons CC BY SA 4.0 – Uveďte původ – Zachovejte licenci 4.0 Mezinárodní.