Po—ems

web design

Timeline: 10 weeks (Winter 2020)

Po—ems is an online poetry database that lets you discover new poems through shared words. Words connect us all, and Po—ems uses that very principle to allow users to explore and sicker at random the world of poetry.

The Idea

Plenty of poetry databases exist online, but if you’re new to the world of poetry, it may be daunting to go to one of these sites and be met with the sheer volume of poems displayed upon making a category search. Sometimes it’s hard to know where to start, or where to go next, in the case of more seasoned poetry enthusiasts. Inspired by the phenomenon of going down a Wikipedia rabbit hole through in-text links, I sought to simplify the experience of discovering new poetry. This was done through limitation and randomization, making the experience a much more serendipitous one. Upon selecting their first word from the landing page’s randomly-generated selection, users are then brought to a poem containing that word. All words in each poem are clickable, and will bring the user to another random poem also containing that word.

Research

I had a look at how Wikipedia laid out its various functions. Given that the latter covers a much wider range of topics than what my site would, I deemed most of these functions unnecessary for my project. My main interest was how it treated the words linking to other Wiki pages, as well as its randomized page feature. I also looked at a variety of online poetry databases to observe their general layout and how they chose to display the poems on screen.

Colours & Layout

The colour scheme and layout were kept very simple. This was done so that the poetry remained the main focus on the page, and so users could immerse themselves in reading the poems without any other visual distractions. Adding other visual elements on the page simply felt unnecessary. The chosen colours are very neutral, simulating the experience of reading off a sheet of paper, though I chose a light gray for the background rather than white so it’d be easier on the eyes, given that screens emit light while paper does not. I added blue to the colour scheme as an accent colour to help guide some of the interaction. 

Interaction

As previously mentioned, the colour blue shows the user what can be clicked on the page, usually revealed by hovering on the item. On the poem pages, an extra step was taken in adding a thin line beneath the word currently being hovered over. On the home page, the pill buttons make it clear that the words are meant to be clicked, but those do not carry over to the poem pages. Wikipedia uses an underline to show clickable links in the articles, so I used this for Po—ems so that users could feel a sense of familiarity towards the page-hopping mechanics. The only interactive element that doesn’t use blue as a visual cue is the day/night mode switch. The latter gives users the opportunity to select their colour scheme of preference, but my main goal in adding this feature was to accommodate visually impaired users who may see light on dark text better than dark on light. Making the switch blue was too distracting for the overall layout, so I modelled the switch after the ones found on iPhones, creating a sense of familiarity in that way instead.