felipebiox.github.io/en_editorial.html at master · felipebiox/felipebiox.github.io · GitHub

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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>BIOX - Editorial</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
	<link rel="stylesheet" type="text/css" href="css/felipebiox.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

	<script>
		var menuState = 1;
	</script>

</head>

<body style="background-color:transparent;">

<div class="row">
	<div class="navbar_wrap">
		<div class="col-xs-1"></div>
		<div class="col-xs-10 navbar">

				<a id="button1" href="#" onclick="menuToggle()">MENU</a>

				  <script>

					function menuToggle() {
						var menuTB = $(".top-menu");
						var outclicker = $(".out-clicker");
						if (menuState==1) {
							menuTB.animate({
								height: "+=650px"
							}, 1000 );
							outclicker.animate({
								width: "100%",
								height: "100%"
							}, 1000 );
							menuState = 2;
						}
						else {
							menuTB.animate({
								height: "-=650px"
							}, 1000 );
							menuState = 1;
						}
					}

				  </script>

				<div class="top-menu">
					<ul class="nav">
					<li><a href="en_about.html">About</a></li><!--
-------------------><li><a href="en_animated_2d.html">Animated 2D</a></li><!--
-------------------><li><a href="en_digital_painting.html">Digital Painting</a></li><!--
-------------------><li><a href="en_mixed_techniques.html">Mixed Techniques</a></li><!--
-------------------><li><a href="en_collabs.html">Collabs</a></li><!--
-------------------><li><a href="en_editorial.html">Editorial</a></li><!--
-------------------><li><a href="en_dg_diversos.html">Graphic Design</a></li><!--
-------------------><li><a href="en_glyphs.html">Glyphs</a></li><!--
-------------------><li><a href="en_contact.html">Contact</a></li>
					</ul>
				</div>
		</div>
		<div class="col-xs-1"></div>
	</div>

	<div class="out-clicker">
		<a id="outClicker" href="#" onclick="menuOff()"></a>

			  <script>

				function menuOff() {
					var menuTB = $(".top-menu");
					var outclicker = $(".out-clicker");
					if (menuState==2) {
						menuState = 1;
						menuTB.animate({
							height: "-=650px"
						}, 1000 );
						outclicker.animate({
							width: "0",
							height: "0"
						}, 0 );
					}
				}

			  </script>
	</div>

	<div id="header" class="row">
		<div class="header_stars">
			<div class="stars_cover"></div>
		</div>

		<div class="bush"></div>

		<div id="header-wrap" class="row">
			<div class="col-xs-1"></div>
			<div class="col-xs-10 header-wrap">
				<h1>Felipe Biox</h1>

				<h3>A Work In Progress Portfolio</h3>

				<div class="site-branding"></div>

				<div id="motor"></div>
			</div>
			<div class="col-xs-1"></div>
		</div>

	</div>
</div>

<div class="row">
	<div class="col-xs-1"></div>
	<div id="container" class="col-xs-10">

	  <div class="top-elements">

		  <h1 class="page-title">Editorial</h1>
	  </div>

	  <div class="content">
		<div class="page-content-wrapper">
			<div class="page-content">
				<div class="page-content-inner">
				<h3 style="text-align:justify; margin:0;">Maquiavel - O Príncipe</h3>
				<p>I developed this visual project as a concept work for the book "The Prince", by Niccolò_Machiavelli.</p>
				<p>The idea was to present a celebrative version of its 500 years, bringing the question: "was "The Prince" a political work made for kings to rule, or was it aimed at educating the people against tyranny.</p>
				<p>Starting at this idea, I further developed most of its visual elements in order to suggest that question through duality. Since the colors of Florence's symbol, to the forms and grids. Some examples follow below.</p>
				<hr></hr>
				<h4>The Hardcover</h4>
				<img src="imgs/editorial/capa_final3.png" style="margin:1em 1.5em 1em 1.5em;">
				<p>Through research, the symbol of Florence stood out as a strong icon for the work. While vectorizing the symbol, I worked a little specially on its curves to make them more subtle.</p>
				<p>I opted for the colors red and white, because while they make reference to the original symbol, in our culture, they are also good representations for the duality between violence and blood against order and peace.</p>
				<p>When working with the cover layout, I opted to wrap the text around the symbol to make it stand out and also because of the visual appeal. The word "político" was worked with the idea that this celebrative version of the book could be gift along with a bottom symbolizing its central idea, with the letter "o" representing the question and the duality, further promoting its visual identity.
				<hr></hr>
				<h4>The Font</h4>
				<img src="imgs/editorial/font.png" style="margin:1em 1.5em 1em 1.5em;">
				<p>I was looking for a font wich I had familiarity with, but it also needed to provide good reading in long texts. Among the ones I researched, I chose "Book Antiqua", since its a well structured font for reading that has serif, matching my criteria.</p>
				<hr></hr>
				<h4>Inner Layout</h4>
				<p>One thing that annoys me when reading books is when their text bends into the pages because the margin isnt big enough to accomodate it. Even when that doesnt happen, sometimes the margins are just too thin and you cant hold the book page with your fingers without covering part of the text. Thinking further on the matter, I designed the margins with a special care, while trying to allow my thumb to confortably sit inside the book center without covering parts of the text (this is my favorite reading stance).</p>
				<img src="imgs/editorial/posicao1.jpg" style="margin:1em 1.5em 1em 1.5em;">
				<img src="imgs/editorial/posicao2.jpg" style="margin:1em 1.5em 1em 1.5em;">
				<p>I worked on the margins seeking that possibility and the results were: 15mm superior, 12mm sides, 12mm inside. After creating the main margins, I drew a 6x6 grid inside the book. The next step was to create the safety margin inside it, uniting the inner 12mm margin with one of the columns in the grid, as illustrated below.</p>
				<img src="imgs/editorial/grid1.png" style="margin:1em 1.5em 1em 1.5em;">
				<p>I also considered a different layout for the beginning of each chapter, but this decision was purely based on personal taste. As illustrated below, each chapter begins with an extra superior margin, that margin takes 2 rows of the inner grid. The title of the chapter always starts at the left page.</p>
				<img src="imgs/editorial/grid2.png" style="margin:1em 1.5em 1em 1.5em;">
				<hr></hr>
				<h4>The Result</h4>
				<img src="imgs/editorial/res1.png" style="margin:1em 1.5em 1em 1.5em;">
				<img src="imgs/editorial/res2.png" style="margin:1em 1.5em 1em 1.5em;">
				<img src="imgs/editorial/res3.jpg" style="margin:1em 1.5em 1em 1.5em;">
				<img src="imgs/editorial/res4.jpg" style="margin:1em 1.5em 1em 1.5em;">
				<img src="imgs/editorial/res5.jpg" style="margin:1em 1.5em 1em 1.5em;">
				<hr></hr>
				<h3 style="text-align:center; margin:0;">Luis Felipe Thofehrn Castro</h3>
				</div>
			</div>
		</div>
	  </div>
	</div>
	<div class="col-xs-1"></div>
</div>

<div class="row">
	<div class="col-xs-1"></div>
	<div class="col-xs-10" style="padding:0;">
		<footer>
			<h6>Felipe Biox. All rights reserved.</h6>
			<a id="fl_us" href="en_about.html"></a>
			<a id="fl_br" href="pt_sobre.html"></a>
		</footer>
	</div>
	<div class="col-xs-1"></div>
</div>

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-73889714-1', 'auto');
  ga('send', 'pageview');

</script>
</body>
</html>