-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (141 loc) · 9.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes maximum-scale=2.2 minimum-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css">
<link rel="icon" type="image/svg+xml" href="./assets/img/favicon.svg"/>
<meta name="description" content="Tutoriál o teorii grafického designu.">
<meta name="author" content="Jiří Satora">
<title>Teorie Grafického Designu</title>
</head>
<body>
<div class="page">
<header class="header">
<h2 class="header__title">Teorie Grafického Designu</h2>
<div class="header__navigation">
<nav class="header-navigation">
<ul>
<li><a href="./" class="header-navigation__item header-navigation__item--active">Úvod</a></li>
<li><a href="./barvy/" class="header-navigation__item">Tutoriál</a></li>
</ul>
</nav>
</div>
</header>
<section class="introduction-section">
<div class="introduction-section__content">
<div class="introduction-section__content-box anim-slide-in-right u-mb-4">
<h1 class="introduction-section__headline">Naučte se teorii<br>grafického designu</h1>
</div>
<div class="introduction-section__content-box anim-slide-in-left u-mb-8">
<p class="introduction-section__text">Na těchto webových stránkách se naučíte různé principy grafického designu, které vám pomohou vytvářet lepší design.</p>
</div>
<a href="#o-webu" class="button-primary button-primary--lowercase button-primary--light anim-slide-in-up">Dozvědět se více</a>
</div>
</section>
<section id="o-webu" class="section">
<div class="section__content">
<h2 class="heading-secondary-2 u-center-text u-mb-4">O webu</h2>
<div class="about-section">
<div class="about-section__text">
<p class="paragraph u-mb-2">Tyto webové stránky mě napadlo vytvořit, protože jsem na udemy.com absolvoval <a href="https://www.udemy.com/course/graphic-design-theory-for-beginners-course/" target="_blank" class="link">video kurz o teorii grafického designu</a>. V průběhu jeho sledování jsem si, jako vždy když sleduji nějaký kurz, dělal poznámky namísto toho abych se zabýval tím jestli jsem si něco zapamatoval nebo ne. Po dokončení kurzu jsem tedy skončil s velkým množstvím textu. Ten se ale moc nedal číst a informace v něm byly dost rozházené, protože nad tím co si do svých poznámek zapisuji moc nepřemýšlím. Vždy když při sledování video kurzu narazím na něco co bych si měl zapamatovat a vědět, tak si to jen rychle poznačím. Rozhodl jsem se tedy mé poznámky přepsat do relativně čtivé podoby a vytvořit z nich tutoriál, který se nachází na těchto webových stránkách.</p>
<p class="paragraph u-mb-2">Tutoriál je rozdělen na pět částí. První část je o barvách a dozvíte se tam jak barvy vidíme, jak je správně kombinovat, nebo třeba co v nás různé barvy vyvolávají za pocity. V druhé části se naučíte o věcech týkajících se typografie. Dozvíte se jaké jsou různé druhy písma, základy anatomie písma, jak na nás působí velké a malé mezery mezi znaky textu, a další podobné věci. Ve třetí části se naučíte teorii týkající se fotografií, ve čtvrté části se dozvíte o tom jak rozmisťovat jednotlivé prvky designu na stránce, a v poslední části si můžete přečíst pár informací o logo designu.</p>
<p class="paragraph u-mb-4">Některé části tutoriálu se mi podle mě celkem povedly, ale rozhodně nemůžu říct, že je celý tutoriál perfektní. Ne všechno jsem možná napsal dostatečně jasně a může se vám to špatně číst. Na druhou stranu jsem se ale snažil použít hodně obrázků, a například v části o barvách i interaktivní ukázky. Není to žádný skvost, ale myslím že se z mého tutoriálu můžete alespoň něco naučit.</p>
<a href="./barvy/" class="button-primary">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-circle-right"></use>
</svg>
<span>Otevřít první část tutoriálu</span>
</a>
</div>
<div class="about-section__image"></div>
</div>
</div>
</section>
<section class="section section--grey-bg">
<div class="section__content">
<h2 class="heading-secondary-2 u-center-text u-mb-4">Části Tutoriálu</h2>
<div class="section__intro-text">
<p class="paragraph paragraph--dark u-center-text u-mb-4">Tutoriál je rozdělen na pět částí. Najdete tu část o barvách, typografii, fotografii, layoutu a logo designu. Je v podstatě jedno o čem si chcete přečíst jako první.</p>
</div>
<div class="chapters-section">
<div class="chapter-card">
<a href="./barvy/" class="chapter-card__link">
<div class="chapter-card__icon">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-paint-format"></use>
</svg>
</div>
<div class="chapter-card__title">Barvy</div>
</a>
</div>
<div class="chapter-card">
<a href="./typografie/" class="chapter-card__link">
<div class="chapter-card__icon">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-font"></use>
</svg>
</div>
<div class="chapter-card__title">Typografie</div>
</a>
</div>
<div class="chapter-card">
<a href="./fotografie/" class="chapter-card__link">
<div class="chapter-card__icon">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-images"></use>
</svg>
</div>
<div class="chapter-card__title">Fotografie</div>
</a>
</div>
<div class="chapter-card">
<a href="./layout/" class="chapter-card__link">
<div class="chapter-card__icon">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-icon-layout"></use>
</svg>
</div>
<div class="chapter-card__title">Layout</div>
</a>
</div>
<div class="chapter-card">
<a href="./logo-design/" class="chapter-card__link">
<div class="chapter-card__icon">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-pencil2"></use>
</svg>
</div>
<div class="chapter-card__title">Logo Design</div>
</a>
</div>
</div>
</div>
</section>
<section class="section">
<div class="section__content">
<h2 class="heading-secondary-2 u-center-text u-mb-4">Kde jsem se učil já</h2>
<div class="video-section">
<div>
<p class="paragraph u-mb-2">Já jsem se teorii grafického designu učil ve video kurzu 'The Complete Graphic Design Theory for Beginners' na udemy.com. Určitě tento kurz můžu doporučit. Najdete tam vše co potřebujete o teorii grafického designu vědět. Pokud plánujete stát se grafickým designérem nebo zlepšit své designérské dovednosti, tak vám s tím tento kurz rozhodně pomůže.</p>
<p class="paragraph u-mb-4">Pokud byste se kurz rozhodli absolvovat, tak můžete tyto webové stránky třeba pojmout jako poznámky a nemusíte si tedy vytvářet svoje vlastní.</p>
<a href="https://www.udemy.com/course/graphic-design-theory-for-beginners-course/" target="_blank" class="button-primary">
<svg>
<use xlink:href="./assets/img/icon-sprite.svg#icon-circle-right"></use>
</svg>
<span>Otevřít kurz na Udemy</span>
</a>
</div>
<div>
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/lFuKSbdws5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">Copyright © by Jiří Satora</footer>
</div>
</body>
</html>