Grafické minimum
Ing. Martin Klepek, Ph.D.
Ing. Tereza Pražáková
Design a správa webové stránky

PROCES TVORBY WEBU
Fáze objevování
OBJEVOVÁNÍ
EVALUACE
VÝZKUM
TVORBA

Dle Jana Řezáče (Web ostrý jako břitva)

SAMI JAKO UŽIVATELÉ POZNÁTE, ŽE NĚCO NEHRAJE.
•https://www.theworldsworstwebsiteever.com
•https://www.pennyjuice.com
•https://www.arngren.net
•https://www.lingscars.com

csvukrs

APLIKACE PRO BARVY
•Ověření kontrastu: https://contrast-ratio.com
•Barevné palety: https://colorhunt.co
•
•
Základní pojmy
Zdroj obrázku: https://blog.prototypr.io/basic-ui-color-guide-7612075cc71a

APLIKACE PRO BARVY
•Ověření kontrastu: https://contrast-ratio.com
•Barevné palety: https://colorhunt.co
•
•

csvukrs

KONTRAST JE ZÁKLAD.
Zdroj obrázku:
https://www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast
Web Accessibility Criteria - Color Contrast | California State University, Northridge

KONTRAST JE ZÁKLAD.
Zdroj obrázku:
https://www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast
Typography 101 for designers. The basics for designers looking to… | by Devin Ross | Bootcamp
Patkové
BEZPATKOVÉ
Ručně psané
Nadpisové
Bezpatkové

PATKOVÉ PÍSMO
•Vnímáno jako formální a důvěryhodné.
•V menších velikostech je patkové písmo lépe čitelné.
•Pomáhá vést oko po řádku.
•Používá se spíše na tiskovinách než na webech. (Není ale pravidlem).
•

csvukrs

BEZPATKOVÉ PÍSMO
•Moderní, méně formální písmo.
•Dobře se čte na displejích.
•Vhodné pro text na web.
•Často se používá na nadpisy a titulky webů, protože má výraznější vzhled a snadno přitahuje
pozornost. Není ale ideální pro delší texty. (Např. knihy).

csvukrs

BEZPATKOVÉ PÍSMO
•Pokud je písmo příliš malé, bude se špatně číst a lidé si odstavec přečtou pouze v případě, že na
webu něco účelně hledají.
•Pro obyčejný text používejte velikost cca 14 pixelů.
•Pro nadpisy vybírejte velikost písma dle uvážení, ale měly by být odlišeny jednotlivé úrovně
nadpisů (H1-H6).
•Velikost textu přizpůsobte tomu, co vyžaduje daný font.
•Velikost písma musí být napříč webem konzistentní.

csvukrs

GENEROVÁNÍ OBRÁZKŮ POMOCÍ AI
•Proces, při kterém umělá inteligence vytváří vizuální obsah na základě textových popisů nebo
jiných datových vstupů.
•Využívá pokročilé algoritmy strojového učení, obvykle neuronové sítě, k interpretaci a
transformaci zadaných instrukcí nebo dat do vizuálních obrazů.
•Může generovat různé druhy obrazů, od realistických fotografií po umělecká díla.
•Stále více se využívá v různých oborech, včetně umění, designu, reklamy a vzdělávání atd. a
umožňuje rychlé a kreativní vizualizace nápadů.

csvukrs

DALL-E
•https://openai.com/dall-e-2
•
•Součástí ChatGPT
•Do řádku píšete, co chcete aby AI vygenerovala.
•Buďte co nejkonkrétnější ve svých popisech. Místo "pes" zkuste "chlupatý zlatý retrívr hrající si
s míčkem v parku"​​.
•Zahrňte do popisu více prvků, popisů, stylů a detailů, aby AI měla více kontextu a inspirace​​.

csvukrs

MIDJOURNEY
•https://www.midjourney.com
•Placený nástroj.
•Funguje přes komunikační platformu Discord.
•Pro generování zadáváte příkaz /imagine a následně píšete, co chcete, aby AI vygenerovala.
•Platí zde stejné principy jako u Dall-e.
•Vygenerují se 4 varianty. Následně vybíráte, co se má dít dále.
•U1,U2,U3,U4 – zvětšit některý z obrázků
•V1,V2,V3,V4 – vytvořit varianty k některému z obrázků

csvukrs

Týmová práce
Ing. Martin Klepek, Ph.D.
Ing. Tereza Pražáková
Design a správa webové stránky
•Připravte obrázky pro nový web (AI/vlastní tvorba)
•Připravte grafický návrh webu v aplikaci Figma (volitelné).
•Vyberte paletu barev pro nový web