-
Notifications
You must be signed in to change notification settings - Fork 1
/
Graphic_Design_Rules.html
executable file
·100 lines (99 loc) · 3.37 KB
/
Graphic_Design_Rules.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
---
layout: page
---
<br />A semantic network describing concepts, relations and processes in the
field of graphic design.
<p> </p>
<p>
To be able to expand a machine's understanding of design related concepts
like composition, typography, color we are experimenting with semantic
networks. A semantic network is a form of knowledge representation in which
concepts are hierarchically connected to each other with semantic relations.
In analogy to WordNet, we use relations like <i>is-a</i>, <i>is-part-of</i>,
<i>is-opposite-of</i>, <i>is-related-to</i> and <i>is-same-as</i> to describe
how the design process works.
</p>
<p>
The machine can browse through the network and use it's knowledge to make
founded decisions.
</p>
<hr />
<h1>Perceptonyms</h1>
<p>
All of the relations we use are common in semantic networks except for the
<i>perceptonymy</i>. We coined the term perceptonym (Gravital research
project, 2007) as a way to link language to visual output.
</p>
<p>
At one end in the graphic design workflow are conceptual constraints like
<i>bright</i> and <i>trendy</i> colors, at the other end are technological
possibilities like a <i>HSB color model</i>. We can easily define
<i>bright</i> in terms of saturation and brightness, and <i>trendy</i> in
terms of specific hues (like pink). Hence, <i>bright</i> and <i>trendy</i> are
perceptonyms that link language to software possibilities. They can be used to
teach a machine something about aesthetics.
</p>
<p>
<span class="pink_text"
>A perceptonym is a word that can be seen, felt, heard, smelled, or
experienced emotionally. Perceptonyms occur in pairs of opposites like
bright-dark and large-small. We can use them to translate language to visual
output.</span
>
</p>
<hr />
<h1>WordNet</h1>
<p>
One of the systems we use is WordNet. With WordNet we can find out about
linguistical synonyms of concepts in a text, and once we have a synonym that
matches a perceptonym we can continue unravelling the concept in the
design-specific network.
</p>
<p> </p>
<p>
<span class="media"
><img src="/static/media/gdr1.jpg" height="550" width="550"
/></span>
</p>
<p> </p>
<hr />
<h1>Contextual links</h1>
<p>
Another, wilder type of network creates contextual links between textual
descriptions. If one description has some chunks of words that also appear in
another description, the noun in that chunk becomes a link between the
described concepts.
</p>
<p>
This type of network is highly effective with opinions, feelings, personal
tastes and other non-scientific data. The example below shows the relations in
a dream dictionary.
</p>
<p> </p>
<p>
<span class="media"
><img src="/static/media/gdr2.jpg" height="550" width="550"
/></span>
</p>
<p> </p>
<hr />
<h1>Perception</h1>
<p>
The heart of the commonsense network is a handcrafted set of sensory data
describing relations between graphic design concepts such as typography and
photography. These we connect to programming code (e.g. a font selector, a
grid algorithm, an image finder, ...) to create visual output.
</p>
<p> </p>
<p>
<span class="media"
><img src="/static/media/gdr3.jpg" height="550" width="550"
/></span>
</p>
<p> </p>
<p>
The input module is online at:
<a href="http://nodebox.net/perception" target="_blank"
>http://nodebox.net/perception</a
>.
</p>