Designing a Zine for the Web
I built the new Bullet Points Monthly website to make its appearance better support its critical zine-style articles.
The old Bullet Points site was based on WordPress, which is a great blogging platform, but one that Reid McCarter (who has run BPM for several years now) found difficult to bend to his needs. The Bullet Points Monthly format is four articles a month on one game, and WordPress is arguably better suited to a more constant/consistent blogging schedule.
Our concerns with the old site:
- Only 3 articles were typically visible “above the fold.”
- The four-articles-per-page WP setting meant Reid had developed a “dummy article” solution that was frustrating to work with.
- The archives weren’t presented well on the right side of the page.
- There was more whitespace and header-space than necessary to highlight the articles.
So, having done some WP troubleshooting for Reid in the past, and with a couple websites under my belt, I sent him a mockup I did of what I thought Bullet Points could look like.
One of my favorite things about the original design work Reid did was the two-tone screenshots. They have a really uncanny quality to them, and look a lot like pages out of a xeroxed zine. That lo-fi look was a big part of what I wanted to preserve and highlight in my design. Reid liked the mockup and eventually decided to commission the project. I did several more mockups.
Ultimately, Reid wanted to go with a version of the site that always has the full quantity of articles and maintains the “Coming Soon” banners in place of articles that haven’t gone up yet. And we decided to maintain the menu on the left hand side when the site displayed an article.
My other favorite touch here is the highlight behavior. I intended to implement a pretty typical hover behavior where the image zooms in slightly, but I mixed my zoom up and got this. I showed it to Reid, who loved the way it looked like a film strip, reflecting the visual nature of games and their connection to cinema—which is often a topic of articles on BPM.
It was also important for us to have an attractive mobile version of the site, assuming that many visitors are probably coming from the mobile Twitter app where most of the site’s promotion and audience is. Knowing that the full four vertical articles view would not work on mobile, I wanted to build something simpler that still foregrounded the zine elements I intended to highlight.
On mobile, the logo takes up too much space to be the very top of the page, and the buttons on the left hand side work better as small links to the Podcast, Patreon, and Superculture website. I added borders to the images so they scan a little better on smaller screens, and adjusted the article titles to maximize the number of headlines that show up before a reader scrolls at all. Even though I started programming the view for mobile, the mobile design is a lot more spartan than the desktop version, I think owing to the fact that I started with the desktop design, and probably spent more time on that version.
Our solutions:
- All four articles are visible on desktop immediately.
- The articles that aren’t yet posted are more obvious to the reader.
- The back issues have their own page, with their dramatic colors reflected.
- The images shine in large-format, and the logo—which sort of slipped by unnoticed on the old site—catches the eye and brings the menu together.
I also worked on the back end of the site, implementing Strapi to build a JSON API that the front-end can consume and re-present to a reader, and tweaked the editor so that Reid can select his own color schemes, upload his own photos, and add articles in a way that fits neatly with his existing workflow. I’m continuing to support the site and expect to make improvements here and there as new concerns emerge or Reid’s use of the site changes. Overall, the project was a great experience, and I think the result looks terrific.
