So last year I redesigned my website. I’d like to take you through the process of what I was thinking.
If you don’t remember what the old site looked like here are some old screen caps.
and
NOTES BEFORE GOING IN
The first step to the redesign was making a list of what I thought were problems with the old design. Here’s what I wrote down:
- The navigation image was confusing people/not instantly intuitive. It made it hard for people to get to parts of the site they didn’t always check like the store or to older comics. I tried giving it a small tweak about a year ago but over all the image nav wasn’t obvious enough. And clarity it key with these things.
- The visual hierarchy wasn’t clear enough. With websites you want whatever is most important to be the biggest thing. So the image nav was too big and detracted from people paying attention to comics and new posts and really everything.
- It wasn’t instantly clear which comics were updating or when. I had regular posts about when stuff did update but nothing that was instant. But there was no where to clearly show what was going on right now.
- I am doing a lot of new stuff and it was hard to make space for it all. I had new comics, work for hire gigs, writer notes, podcasting, added a patreon, and planned to do more. With every new thing there was no clear place to put it, so it got slapped into that sidebar with a tower ad. I wanted clear space for it.
- The comic shelf was overly complicated and I had too much stuff. I like the visual of the comic shelf and displaying all my work. People rightfully complained that it had too many clicks to get to new comics. It was also hard to show which stories were connected. And if you clicked one of the finished comics at the bottom, you would have to scroll back up to the square to see what it was about.
- Box ads (aka the 250 by 300 ads) are full of malware and autoplaying noise ads. More so that leaderboard and tower ad.
- The please turn off adblocker message breaks which shows up when you come to my site with ad blocker was breaking the site.
- Save my place marker which was under each comic page as you read it only worked on one comic at a time.
Then I wrote down my goals going into the new site design that you are currently looking at. They were:
- I wanted a look that didn’t read as default webcomic site. One thing I’m not crazy about is there are a lot of webcomic sites that look the same. Comicpress and tumblr made it easier to get comics online, but it also made a lot of sites look very similar. That was something I always tried to fight against.
- I needed a site that can handle multiple comics and make it easy for someone to read and find them all. I’ve always had more than one comic. Sure the first few were Sorcery 101 spin offs, but I always have wanted to do more. I quickly realized that getting a new domian name for a comic that will only end up 100 pages or so is too much work for something only running for a year.
- Improve the comic shelf. I like the visual idea of the comic shelf so I didn’t want to scrap it completely.
- Have the updating comic clearly marked.
- Have the store be easy to find and mix my own ads into the general ads.
- Get more people to pay attention to my Patreon since that will lead to getting rid of ads, which are always ugly.
- Give the blog section easier navigation so someone can track down old posts.
- Con appearances need to be immediately clear.
- As I get more press from the print side of comics I needed a place to put those, a bio, and a headshot. I didn’t 100% need them on the site, but I thought having a press page would make it easier for someone to grab that info on their own.
- I wanted the place where people read comics to be spars as possible so nothing would retract from reading the comic. I know folks like to comment on the page directly, BUT all I think comments really only add to discussion of a current page. If someone is marathon the comic I want them to focus on the comic.
- No comic on the front page. I know this is unpopular in the land of reading webcomics, but I found that going this route leads to people not paying attention to the rest of the site. So comics that are finished end up ignored.
- Make it clear which comics are connected. When Dracula Mystery Club started a few people thought it was the Sorcery 101 world, not a huge issue cause it didn’t get far. But this is more of a problem for with Fame and Misfortune and would be for future The City Between stories because they are close in tone and genre to Sorcery 101.
- Branding is focused on me as an artist rather Sorcery 101. I’ve been slowly making this move I’ve been slowly making since Misfits of Avalon started and I knew Sorcery 101 would be wrapping up. With Sorcery 101 done, I visually wanted to make it completely clear. That only thing left in this is move is changing from sorcery101.net to kelmcdonald.com. But that is getting saved for when I don’t need ads companies to have approved my domain. Some of those are hard to get on to.
- Portfolio section just needs to look prettier.
Building the Site
So Kevin Wilson did the nuts and bolts of designing and building the site. After I went over the problems and goals with the site we also talked about websites I liked.
So first I told Kevin the colors I like and use for my branding. The blue, white, and black. He lightened the blue a little to make black text pop on it better after doing a few color blind tests (aka usability for people who are color blind). He then sent me a few fonts that he think for work. After those very basic things were decided, he moved forward.
He sent me two mock ups of the pages were the comic appears since that is the simplest page. For the wallpaper and Patreon button, he originally used Sorcery 101 art, but since that is no longer updating I told him to use art from Misfits of Avalon and Fame and Misfortune. I wrote my name a new times to give the site a nice header.
For the big this is currently updating picture, we briefly talked about using a slider, but apparently research shows that most people never make it past the 2nd slide. So a static image worked for now. The patreon ad being immediately to the right of that giant image makes it hard to ignore and all the social media is right there afterward. The sign up for my newsletter bar is also a new addition. So everything to keep someone up to date is right there when it first loads. And the big image would be easy to switch out as new books came out, kickstarters happen, or new comics end up updating.
Kevin, pointed out that my blog posts vary from giant writer notes posts to tiny here is a new page posts. This could result in a HUGE empty space in the sidebar. So small previews on the front page help it be more static and nicer looking.
Because I told Kevin I want my own ads in the mix and the big rectangle ads are a pain to place we decided next to them would be a good place for the personal store add. It would auto-fill with my newest product.
Navagation is pretty standard and resembles what people are used to on other sites. Easy and clear.
The blog itself was easier to design. I was mostly just a matter of adjusting the sidebar to have what I want on it and making it easier to navagate. We tried a tag cloud at first but that looked really ugly. So a list of links just seemed the nicest.
The press page, the portfolio, and various table of contents pages was just a matter of taking the blog page and only messing with the content part. For the press page that was just a matter of posting some links and trying to get wordpress to make some columns so my headshot wasn’t just standing on it’s own. The portfolio was a matter of switching plugins. The one I was using was clunky, not very pretty, and also didn’t load very fast. The chapter list pages are a little bit of work. I was using a table before but those don’t resign nicely on phones or smaller browsers. Kevin did some custom coding to get the same result but resize nicer.
Then came the hard part, the comic shelf. Like I said I like the visual of the comic shelf but it was a problem to how complicated it was to figure out and how many clicks got you to the comic. After talking it over, the solution because making it look like a book store display, with an info card next to each book. This also solves the how to note which books go together. Each shelf can fit 6 books and two cards. I put Misfits of Avalon and The City Between up top because they were the ones updating at the time of launch. While Sorcery 101 is the longest, since it is done it needs to move aside to give newer comics the spotlight. I also made sure all my print only work is listed at the bottom because they don’t need to be accessed as much as the readable webcomics. They are also listed in the store, so they can be more prominent there rather than here. To solve the too many clicks button I got an easy read for start button as well as a story list for each group.
Now for reading comics themselves, like I said that is the sparest. I left it to what needs to be there and ads. Which lead to some empty space here and there. So I gave each archive an in site ad to that comic’s book. So Misfits tells you to buy the newest Misfits books, Sorcery 101 tells you to buy Sorcery 101 vol 2, etc etc. Sadly we couldn’t get the save my spot comic marker to work. So it got scraped. Basically what would happen is if you were reading Sorcery 101 and saved a spot and then saved a spot on Misfits, the Sorcery 101 spot saver would be lost.
And all through out the site, I switched the 300 by 250 ads for Project wonderful ads. Those size ads were always the one that sneaks in sound even though I tell it not to and is usually the reason for malware problems. So giving that space to smaller webcomics advertising on Project Wonderful was a better bet.
Then the store is the final bit. I removed all the comixology listing cause there are 50 Sorcery 101 chapters on comixology and they were clutering up the store with something you can’t actually get from my website. So there is now a general Comixology ad to the side. I also put a gumroad ad to the sidebar too because the one thing my store can’t do is pay what you want. That means my dreaden files sketch book and any future art pdf’s I make can’t be in the store proper.
Over all I’m happy with this and it seems to suit the transition I’m making from Sorcery 101 to different work in the future. Even a year later I’m digging it, especially the comic shelf.