{"id":124,"date":"2020-11-27T15:54:57","date_gmt":"2020-11-27T15:54:57","guid":{"rendered":"http:\/\/nellycamacho.co.uk\/journal\/?p=124"},"modified":"2023-09-21T22:21:37","modified_gmt":"2023-09-21T22:21:37","slug":"typesetting-literature-project","status":"publish","type":"post","link":"http:\/\/nellycamacho.co.uk\/journal\/typesetting-literature-project\/","title":{"rendered":"Typesetting Literature Project"},"content":{"rendered":"\n

For this project I had to choose a piece of literature to create a website of a minimum of three pages, the main focus of this project would be the typography and colour schemes, as no images or any kind of visual aid would be allowed.<\/p>\n\n\n\n

The piece of literature I chose was the chapter XXI of The Little Prince<\/em> by Antoine De Saint-Exupery, as it is one of my favourite books.<\/p>\n\n\n\n

\"\"
Planning pages <\/figcaption><\/figure>\n\n\n\n

It was easier to develop this project in my sketchbook, as I felt that the ideas flowed better on paper than digitally. My first step was to know how many pages I wanted for the website and what information I was going to display. Also, my main page would be where the piece of literature was going to be displayed and the other pages would have a more simple approach, as I didn’t want the other pages to draw as much or more attention that the main one.<\/p>\n\n\n\n

In total I had four pages for the literature website:
– Chapter XXI, where the piece of literature was going to be shown.
– About the book, a short book summary to give some kind of context to the chapter.
– About the author, the biography of Antoine De Saint-Exupery.
– Book review, my personal book review, letting the user know why I like that book.<\/p>\n\n\n\n

\"\"
Playing with shapes and typo.<\/figcaption><\/figure>\n\n\n\n

I wanted the title to be the main point of attention for the literature page, so I started to experiment with the words and shapes, my intical idea was to use a rose as a reference for the shape of the title, but I found it difficult to balance the desired shape with the readability for the user. After experimenting with the words in many ways, I decided to use a circle as the shape for the title, a circle would be perfect to represent the little planet where the prince comes from and it would align perfectly with the words, as “Little” would be in the middle so it would be bigger than the other two words, highlighting the main adjective of the prince.<\/p>\n\n\n\n

Also, I did some experimenting with writing-mode:vertical-rl for the “chapter XXI” but after some consideration I preferred not to keep it as I felt it was loosing the essence of the book. <\/p>\n\n\n\n

\"\"
Interaction and layout<\/figcaption><\/figure>\n\n\n\n

I was a bit confused on how the user will navigate through the pages so I just did a visual representation of how it would be, in order to do the navigation right.<\/p>\n\n\n\n

I experimented with the layout, trying to figure out the nicest way to display the information and from all the options I had I chose the third one which is the one that has the title displayed on the left with a short paragraph on the bottom and a column on the right. It was my favourite but I think it didn’t look nice for wider screens, therefore I decided to start using @media, also I felt like this was the perfect project to start using @media queries as I didn’t have to worry about any image, making it easier to try it. Thanks to the @media queries I had the opportunity to use the mentioned layout plus another two more, one for small screens and another one for wider screens.<\/p>\n\n\n\n

  • \"\"<\/figure><\/li>
  • \"\"<\/figure><\/li>
  • \"\"<\/figure><\/li><\/ul>
    Different layouts for different widths<\/figcaption><\/figure>\n\n\n\n

    My website started with the smallest screen size in mind and then it went up to the wider one,<\/p>\n\n\n\n

    Personally, choosing the colours for this website was easy because when I think of the little prince, I think of the sky and his planet, that’s why I chose that dark blue to represent the sky during the night and the yellow for the title to make it look like a star, as that is how planets look like from the Earth.<\/p>\n\n\n\n

    In conclusion, this project was very nice, I really liked experimenting with typography, layouts and @media queries. I know there are many areas of improvement for the website but I feel happy with how it looks and the colours chosen for it.<\/p>\n","protected":false},"excerpt":{"rendered":"

    For this project I had to choose a piece of literature to create a website of a minimum of three pages, the main focus of […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[28],"tags":[32],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/posts\/124"}],"collection":[{"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/comments?post=124"}],"version-history":[{"count":1,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/posts\/124\/revisions"}],"predecessor-version":[{"id":131,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/posts\/124\/revisions\/131"}],"wp:attachment":[{"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/media?parent=124"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/categories?post=124"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/nellycamacho.co.uk\/journal\/wp-json\/wp\/v2\/tags?post=124"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}