beep

Webcomic Website Redesign

Team

Lisa Imas

Timeframe

Two weeks

My roles

Designer, coder

Design Ideation

I wanted to create a new layout for the website of the popular webcomic, Hanna Is not a Boy's Name. Its old layout didn't maximize screen space--especially not the very top of the home page, which is the most important part of the screen, since that's the very first thing people will see of the site.

The audience was largely frequent Internet users, since the comic is digital only and became popular by word of mouth. The audience would always be using and carrying laptops, tablets, and phones, so my layout would have to cater to all the platforms people were using to view the comic.

I also kept in mind that the main purpose of the site was for reading the comic above all else, and that the layout should therefore be catered to that first and foremost. That meant, keeping fancy visuals to a minimum to keep the focus on the real content.

I toyed with plenty of ideas for a menu, but I eventually decided on placing it at the top because I didn't want the menu competing for horizontal space with the comic itself. I also pared down the menu options, because on the original site there were so many links that were either redundant or somehow outdated.

I also wanted new readers to very easily grasp the premise of the story at a glance, so that they didn't have to click on an "about" page or immediately click and go to the first several comics just to figure out what the story is. The header seemed like the best way to do that--easy to see if you're new to the site, and easy to ignore if you're not!

Responsive Design

This layout is also responsive to take into account differing user needs on different devices. For example, menu buttons are larger due to fingers not being as precise as a mouse cursor, or the multiple columns that appear in the desktop version being reduced to one column in the mobile version.

Lastly, as a final touch, I wrote a bit of Javascript to go with my HTML/CSS to allow users to navigate between pages using the left and right arrow keys when on a desktop. As a webcomic reader myself, one of the most frustrating things is having to move my cursor to click on 'next page' constantly--being able to just hit the arrow keys to move is so much more convenient!

Final Product

You can see the site and interact with it here. Not all links are fully functional, but a good portion of them are. Feel free to click around, resize, and see what happens!