-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathwhy_this_extract.html
73 lines (72 loc) · 6.77 KB
/
why_this_extract.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>the long way to a small and angry planet | why this extract</title>
<meta name="author" content="Nicola Simmonds">
<meta name="description" content="Details about why I choose this extract from the book.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500&family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Shadows+Into+Light&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="index.html">the extract</a></li>
<li><a href="the_author.html">the author</a></li>
<li><a href="why_this_extract.html">why this extract</a></li>
<li><a href="my_journey_with_this_book.html">my journey with the book</a></li>
</ul>
</nav>
</header>
<main>
<h2>why this extract</h2>
<p>As explained in the section <a href="my_journey_with_this_book.html">“my journey with the book”</a> I think that the author builds a Utopian world, or maybe universe is a better description than world. Her work is in the absence of hetronormativism and many human societal concepts.</p>
<p>Becky explains;</p>
<cite>“Humans do not fit into a nice neat binary, even from a purely physiological point of view”(Females in Fantasy, 2019)</cite>
<p>I chose this piece of text as the warning sign in the extract I think is a good example of this.</p>
<p>In addition to this, the text itself also has a very natural breakdown of where I could use different typesetting to express the content. And in the printed version they even use a mixture of sans serif, serif fonts as well as all caps to express this.<p>
<p>At the planning stage I identified the following sections:</p>
<ul>
<li>dialogue</li>
<li>a warning sign in all caps</li>
<li>an unordered list</li>
<li>handwriting</li>
</ul>
<p>And I planned to use these as a natural way to break up the extract and express the meaning of the content.</p>
<p>If you would like to see the design journey take a look at<a href="https://whimsical.com/typesetting-project-KBx9Z6uFRwgUrqMkgRDaRT"> my whimsical page:</a></p>
<ul>
<li>I started with jotting ideas I was having in my head into a mind map.</li>
<li>Then I started building the content (this is meta because I am typing this before I have done any other part of the planning).</li>
<li>Then I started to build a rough idea of layout.</li>
<li>Next I picked out some colours using the front cover of the book as a starting point.</li>
<li>Followed by choosing some fonts to match the content.</li>
<li>Then I started doing a mock up, to help decide which colours would be used for which elements.</li>
</ul>
<h3>choosing the colours</h3>
<p>As a starting point I took an image of the front cover and imported it into Photoshop. I started with using the colour picking tools to pick a dark blue colour. I thought it would be easiest to pick a dark colour first and then choose some other colours from the cover to compliment it. I also really liked the palette of dark blues on the cover, as I thought they were a good representation of space, as we often forget that the night sky can appear blue when the moon is out and there is no light pollution.</p>
<p>Once I picked a dark blue I then split the cover up into four sections. With the idea to help me finalise a palette. These sections were; blues, purples, oranges and then highlights.</p>
<p>After bringing out some of the colours from these sections I lined them up in Photoshop and moved them around until I settled with a final palette.</p>
<h3>choosing the fonts</h3>
<p>I noticed in the text that there is a natural break up of the chosen extract for different variations of typeface;</p>
<ul>
<li>dialogue</li>
<li>a warning sign in all caps</li>
<li>an unordered list</li>
<li>handwriting.</li>
</ul>
<p>When researching which fonts I wanted to use I knew that I wanted a signage/sci-fi font for the warning sign, a handwriting font that would not be too human looking, a nice clear font for the main text, and then a display font for the headings.</p>
<p>When searching for a clear font for the main text I was using the front cover of the book for inspiration. The first thing I found was "Roboto", which I really liked the look of. However it was at this point that I realised that the front of the book is actually a serif not a sans serif font. So I realised that I was no longer using the book as inspiration. I also felt that this font could work well for the headings but with a heavier weight. I then looked at fonts which were similar to "Roboto" and as soon as I saw "Jost" I knew it was the perfect font choice. It was clear, and whilst it is not the same font as the book cover it actually looks like it is meant to be the font for the cover of the book.</p>
<p>The font for the sign I knew I wanted to be monospace, as I wanted it to look like a printed sign. I settled for "Chakra Petch" because I thought it also had a sci-fi edge to it. It looks like a font you would see on a sign in a film set on a spaceship.</p>
<p>The handwriting font I used in the last line of the extract I knew I wanted to be cursive, because in the story it is written by hand. However as it was written by hand by an alien in a place where there would be lots of different species reading it I thought the person writing it would make an effort to make sure that their handwriting was legible to everyone. Personally I think "Shadows into Light" matches this.</p>
<h3>using lower case for headings</h3>
<p>This was also inspired by the front cover, and by keeping this consistent in the content headings as well as the navigation links in the header I think it makes it very obvious that this is a design choice, not a mistake. It also works well aesthetically, as the overall website is very subtle, so it gives the whole website an overall subtle uniqueness.</p>
</main>
<footer>
<cite>Females in Fantasy (2019) Becky Chambers Interview: Aliens, Gender and Prejudice. 14 February. <a href="https://www.youtube.com/watch?v=c8_Uk8cECi0"> Available at.</a> (Accessed: 30 November 2021).</cite>
</footer>
</body>
</html>