Grafické minimum
Ing. Martin Klepek, Ph.D.
Ing. Tereza Ikášová
Design a správa webové stránky
PROCES TVORBY WEBU
Fáze objevování
OBJEVOVÁNÍ EVALUACEVÝZKUM TVORBA
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
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
KONTRAST JE ZÁKLAD.
Zdroj obrázku: https://www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast
KONTRAST JE ZÁKLAD.
Zdroj obrázku: https://www.csun.edu/universal-design-center/web-accessibility-criteria-color-contrast
Patkové
B
T
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).
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).
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í.
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ů.
DALL-E
• https://openai.com/dall-e-2
• Zdarma pro určitý počet generování.
• 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.
• Přídavná jména dodávají hloubku a složitost popisu.
• Experimentujte s různými úhly, světelnými podmínkami a barvami pro
různorodé výsledky.
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ů
Týmová práce
Ing. Martin Klepek, Ph.D.
Ing. Tereza Ikášová
Design a správa webové stránky
• Připravte obrázky pro nový web
(AI/nafocení vlastních fotek)
• Vyberte paletu barev pro nový web
• Vyberte vhodné fonty pro nový web.
(https://fonts.google.com)
• Připravte grafický návrh webu v
aplikaci Figma (volitelné)