BACK
The task was to design a webpage concept for a magazine that would contain Philip Pullman's article, The Sound and The Story Exploring the World of Paradise Lost. A webpage and branding design concept inspired by the themes and aesthetics of Pullman's article was designed for a fictitious independent arts magazine called Goth(ic) Magazine.
The contemporary design is achieved with a sans serif navigation, unique typographic positioning throughout the webpage, and references to the history behind the topic of the article using a blackletter typeface.
Timeline
December 2020 (3 weeks)
Role
Designer
Tools
InDesign
The Challenge
What would an editorial magazine look like as a webpage? How can long form type be adapted for digital viewing?
The Solution
A stylized, type-based webpage optimized for screen-based viewing.
My intention was to create an interesting contrast between a more traditional typeface (blackletter Amador) and a more contemporary serif typeface (Aktiv Grotesk). There is significance in having the new contrasting with the old because this world has transitioned to having text read digitally, whereas in the past, text was solely printed.
In order for the design to be web-friendly I took readability and user experience into consideration. I implemented the common use of spacing between paragraphs that is typically seen on the web - this is helpful to those reading the piece on their laptops or phones. The leading and font size is larger than it would be printed since web readers are multi-tasking when reading and/or are further away from their screen.
With this piece I made a deliberate decision to not use any external imagery, instead choosing to use type as image, leading the reader's eyes down as they scroll. After much exploration and experimentation with fonts I decided to use the blackletter font Amador for the header, Aktiv Grotesk as the accent font, and Garamond for the body text.
I experimented with different approaches to the design leaning into the appropriate theme for the essay/article with different colour palettes and font pairings. I wanted the design to feel contemporary and edgy with a gothic influence. I Imagined that this digital magazine would be rebellious and risk taking. The magazine would be gothic-based (going off of the name), following a dark and suspicious theme but with a modern take.
I utilized the symbol of the cross in my design as a menu icon within the webpage's navigation bar - referencing to Paradise Lost's content surrounding theology. The navigation bar is treated like traditional print folios.
The original essay by Pullman was cut down. I decided not to include the dek and footnotes because the fictitious magazine I imagined would be unconventional. Since the header is so interesting and themed, a deck is redundant as the reader would already be interested in reading more.
I ideated multiple interactions that would support the theme of the essay and keep screen-based readers engaged. There are few main interactions that would occur, including: A parallax effect as the user scrolls, and a button to control the animation of light/dark mode of the piece.
![]()
Pullman's essay within this fictitious web magazine is designed for multiple viewports: a smaller viewport for mobile devices and a larger viewport for laptops/desktops. The smaller viewport design features larger text as the content will be harder to read on a smaller screen.
.gif)
