I found myself pretty unprepared for this. I am used to seeing every text written on lines in a rectangular block. I wanted to break from that.
And so I set out to find other shapes, because I have found that text without shape makes it difficult to figure out what is communicated. It seemed that I would have to keep writing left to right, and let the lines of text be underneath each other.
Consequently I was looking for wavy, round or polygonal shapes. Or at least something that would be slanted. I wouldn't even rule out a bit of randomness at this point.
The tricky part then was to figure out what to do, because descriptions of artists don't just have the same length. If I was to go for wavy or round, I would need an algorithm to tell me where to split lines of text.
Normally the browser splits the text. But that only works with the rectangular areas.
Another problem was the adjustment for small viewports. If the viewport is too small, it probably makes little sense to try to avoid the rectangular shape. I quickly decided to allow small viewports to just show the common rectangular blocks of text.
I came up with this solution: http://johnwintheriversen.eu/johnradio/artists/mylenefarmer.html
Further examples can be found here: http://johnwintheriversen.eu/johnradio/artists.html
Currently there are 7 examples.
This is sort of a 'proof of concept'. At some later point, this could be based on contents of a database.
This layout wastes a lot of space on the screen. On the other hand it is often visually appealing to use space.
This layout works best on a white background, as it relies heavily on colours. The use of light grey as white is something I can see as visually appealing. Using shades of red on red seems less appealing to me, as does any other combination I have checked out. It also clashes with expectations, as we are used to seeing letters on a white background.
Although I aimed to give the central text a circular shape, I had to accept some deviation. It might be possible to adjust my way out of it, but already now it is complicated to adjust for the varying ways in which a text can be written. My current method has serious limitations to the way the text can be written:
- I have only seen it work for texts between 400 and 550 letters (including blank spaces).
- Long words threaten to make it difficult to find out when to move to the next line. A refinement of my method could be the addition of hyphens, but this soon becomes complicated.
- A long word first or last may not be possible to fit in at the top or bottom of the circle.
- I have chosen the font Georgia due to aesthetic considerations. A monospace font might make it easier to adjust the length to the space inside the circle.
- Everything pretty much has to be written with latin script. I have experimented with a mixture of scripts (greek, cyrillic, japanese, korean, traditional chinese). Example: http://johnwintheriversen.eu/DJen_anbefaler/. It doesn't mix well aesthetically (IMHO). And it makes it even more complicated to adjust the length of the text so that it remains inside the circle.
Nonetheless I like this solution. Soon I will have feedback from people testing it, and this of course will allow me to improve (or reject) this layout.