Web design retrospect: J-Novel Club

web-design-j-novel

Back in June, I got an email about a potential freelance project. It came from Sam Pinansky, who I knew from his anime translation work and the founding of Anime Sols. This time, Sam wanted to launch a light novel subscription service, and he needed a web designer to help.

You know how the story ends. I took the job, designed the site, and we launched J-Novel Club on Friday night. But I want to tell you about what happened between this weekend and June.

final-site

I accepted the job because I agreed with what Sam was trying to do—create a service for anime fans like me. Light novels are young adult novels from Japan that frequently get adapted into anime and video games. In fact, one of J-Novel Club’s launch titles, Occultic;Nine, is also airing as an anime this fall. So even though I don’t read a lot of light novels myself, there’s a ton of overlap here.

Likewise, Sam said he hired me because of my familiarity with the topic. This is yet another reason to include geek stuff on your resume—for many employers, it can be a plus. I know that a major reason I hired Ben Huber to do my Otaku Journalist logo was his familiarity with fandom.

Next, we went over the technical stuff. I didn’t actually do any of the implementation for this project, but it was important for me to know while I was designing. Since Sam used the React JavaScript library to create the majority of the site, and React sorts website behaviors by standalone components, I needed to be able to group my design by components, too.

I worked in Adobe Illustrator, but I couldn’t just freeform the process. I used 960.gs, a grid system for standardizing site design, to make sure that my layout fit into 12 columns that could be rebuilt with code. Here’s three of my mockups; you can see the grid system view activated in the middle. You can tell these are mid-project mockups because they’re using an older logo that we ultimately didn’t use in the top-left position. Also please note that all images and text used here are filler and have nothing to do with possible upcoming releases.

in-progress

Really, it was all about staying consistent. If I used the light blue color for a button in one place, I needed to use it everywhere else, too, unless I had a very good reason. One of the things I did early on was build a style guide so I’d stop confusing myself.

style-guide

Every week, usually on Wednesday (since I don’t go into the office that day), I would give my latest layouts to Sam in a shared Dropbox folder. If I had other questions, we’d email, talk on Skype, or in a project-specific Slack community. Sam’s in Tokyo so I thought it’d be tough to get ahold of him, but he pretty much worked around the clock on this project, coding it entirely by himself. I’m still impressed.

I’m really glad to have been part of this project because it’s the first time you can “stream” light novels digitally the same way you can get online anime and manga subscriptions. Previously I only read one light novel series: Vampire Hunter D, but now that I’ve signed up for J-Novel Club, using a sign-up form I designed myself (!!), I’ll definitely be keeping up with light novels more.

Now that J-Novel Club is launched and awesome, my schedule has opened up for new web design projects. I usually don’t only design—I can code and implement too, WordPress especially preferred. If you’re interested in hiring me, contact me and let’s talk!

Top photo by Lee Campbell