Work Documentation
Project
Story as Network


By Jillian Rees





Project Description

Read through the short story selections and choose one short story to set the text using HTML and CSS (JS optional) so that the reader will not only be able to read the story but also experience your interpretation of the story. Use the visual language of the web—hypertext, responsive design, forms, color, divs—to express the meaning of your selected story.You must use multiple views to convey this experience— it will be viewed on both large and small (mobile) screens, you may use no more than two typefaces, and representational images are not allowed.

"The Library of Babel" is a short story by Argentine author and librarian Jorge Luis Borges, conceiving of a universe in the form of a vast library containing all possible 410-page books of a certain format and character set.





Home Page Layout






Design Element

Here Jillian created a delicate web-page layout for the concept of The Library of Babel. Having all 26 letters on the home screen, Jillian responds to the settinng of the story, which the unniverse is composed of books written only in 26 characters. Pic on the right is a closeup display of letter A.
letterA




Secondary Page


letterA




The Movign Dots

Main contents are displayed on the secondary page. Which one may reach by simply clicking on dots in the home page. The moving dots indicates the randomness of the inner composition of books in the Library of Babel. They also embodies Jillian's thought progress when first engaging with the story contents.
Dots




Overall Consistency


Page1




Color Theme & Typography

The typeface chosen is 'Alegreya'. The mixture of slab-angles and humble boldness provides an aesthetic of moderness layered upon an academic base. The overall theme is well connected by the cobalt blue color. Here Jillian visualizes the Library of Babel in a complete new way.
&




Screen Variations

This web-design is also professional in it's different screen variations. The pic on the right is the mobile variation of the home page. All infos had been re-placed in the mobile variation, while keeping the hierarchy still same as the initial 1920*1080 page.
Mobile