Indulging into the world of poetry can be quite daunting especially for an audience with increasingly short web-attention. At This Place we came up with a fresh way to introduce poetry for a new audience - through Memes. In other words, a hand-picked poem verse pasted onto an image. With the idea of it being shared online
The home page is adorned with a content slider, featuring a random poetry verse matched with Memes that correspond with the verse displayed. It's a smart way to show what the website is about at a glance. Reading poetry or explore memes.
The poem page was designed to achieve two things
Reading poetry Creating Memes
The user may create a Meme by either selecting the text, or be guided into creating a meme by clicking the create Meme button, which will automatically select the first verse.
The user can create their own Memes through the website with the ability to customise the font, text colour, font size, and text position.
The website does some minor hand holding in terms of Meme image aesthetics to ensure the Memes look pleasant. For instance the user may only choose colours that suit the average colour of the image that the user has chosen.
A great challenge for us was to develop a Meme creator that works on any screen. The solution was eventually brought forward through extensive prototyping and testing every edge-case. Our device-agnostic approach also forced us to pick technologies that would work on any device slimming down our tech options significantly.
In the end we ended up using canvas and webGL stacks to help generating the Memes.
Another big part of the website is the famed narrators. Celebrities and artists read their favourite poems out loud recorded on video or audio.
Every corner of the website is searchable. The search results are divided into it's respective content types.
The iconography set for poetry was created to be as legible as possible from a size of 16x16 pixels and sometimes smaller. That meant that each icon had to be thoughtfully crafted on a 16x16 pixel grid to avoid rendering issues on lower-resolution screens