website design

This has been in the works for awhile, but I wanted to actually start putting pages up before I invested a lot of time into making the site pretty but as I got closer to the launch date, I figured that I should get to work on the site. I’ve been constantly adding content to the site for months, but the design wasn’t really a priority until the past month or so.

I recently ran a series of posts from January 16-22 focused on WordPress and ComicPress and how they work, how to edit them, etc. I tried to keep it focused on the techie/code side of things and only vaguely talked about the actual design for the site. Now I want to swing that back the other way and spend some time going through the design decisions for my website and why I’ve done what I did so far.

First impressions
The first thing that you’ve got to decide is what you want the overall experience to be for the visitor. When they get to your site, what do you want them to see? The latest page you’ve posted? The blog? Some type of splash page? Here’s my thoughts:

1. I decided that I didn’t want to have visitors hit with the latest page right away. If you’re new or haven’t been back in awhile, you’re dropped into the middle of the story which may or may not be a good thing. Regular visitors will know that they need to get to the latest page by clicking the same link as always, so this shouldn’t be a problem for them. This allows new visitors to see what you’re all about and look around a little bit.

2. Is it best to hit people with the blog right away? Are people really coming to read what I have to say in a blog post or are they more interested in the comic? I’m not sure either way, but it’s an option. One of the limiting factors about the WordPress/ComicPress combination is that you’re limited to a page with some kind content or welcome message on it or a blog. You may be able to find a way to show just the latest post, but then why not show more? You could also create a custom main page and that takes us to…

3. Do you use some type of splash page? This was really poplar back when I was learning how to build websites like 10 years ago and they’ve slowly disappeared from the web. But for something like a web comic, it might act as a really good “cover” and introduction to the site. If this is the direction that you choose, I’d suggest that you check out these two sites (Nathan Sorry and Malak) for ideas of how to do this effectively and much more like a custom home page than the classic splash page that I’m referring to above. By including links to high level content, it makes for a nice and clean intro page.

So what did I choose? After a bit of debate, I’ve gone with option 2. At this point in time I don’t have a lot of marketing content that I want to push, so a custom home page isn’t really all that useful. I also want to limit the number of clicks that a user has to do before they get to content, so for now, the custom home page is out.

I don’t really think that people are going to come to the site to see what I’ve got to say (at least at this point), but I think I can design a page that can display all of the elements that I’m offering on my site in a nice and clean way. For me, this means that when you come to the site you’re going to see:

1. What I would say is a larger than normal header that can act as a “cover” and welcome to the site. Should this include art of some kind or just the masthead/logo? At this point it’s just the masthead, but this can be altered as I go.

2. Definitely the latest blog post. I want to limit the amount of posts on the page, so I decided on 5. It can be set to whatever you want.

3. I want clear navigation at the top to direct the visitor.

4. I want a sidebar with clear choices to direct them to content (the newest page for instance) or marketing that I want to push (social media, prints and T-shirts, etc.).

Art direction and information design
With this decided, I think we need to quickly cover the difference between art direction and information organization. Design consists of both and good design does both well. A lot of people get caught up in the art direction side of things and spend all their time trying to make something look “cool” but that’s the easy part. So quickly, let’s cover off the art direction for my site:

1. I want the site to look like the pages that I’m going to be posting. This means using graphics that have the same layering effects that will be in the work as well as any Photoshop effects that you’ll see.

2. It should be consistently “branded” with whatever else I’m doing. So consistent colouring, masthead/logo, typography, etc.

This lead me to a couple of simple and easy solutions:

1. Use a background image that looks similar to what will be in the comic. This should also have some kind of effects to tie into those visual elements.

2. The masthead or logo will be used at the top. This seems relatively straightforward, but it’s worth mentioning.

3. For consistency, the typeface that I’m using in the graphic novel is what is used on the website (unless your browser doesn’t support the @fontface protocol, then you’ll see Helvetica which also ties into the art direction of the book).

4. I needed to pick colours for everything. Again, to tie into the art direction for the book, I’ve used red as the main colour (the first printed cover will have a red masthead) with grey type. I also added in black boxes with a 70% transparency.

5. Headers – like in the characters section – are set in the same typeface as the masthead which is similar to chapter titles in the book.

So with the decisions above, I have content on the site and a way to make it look pretty. But now I need to sit down and figure out how to organize it all so that people can find it easily and logically.

For a lot of the websites that I’ve worked on over the years, user testing has been used to help with this. I don’t have those kind of resources available so I need to use myself as a test subject, do some research of what other sites are doing and try to figure out where I would normally think to look for things and decide what’s the most important item and what’s the least. This will help me rank the content and structure it so that people can find what they’re looking for quickly and easily. This isn’t to say that some content isn’t important, but just that certain things are probably more important than others.

I’ve mentioned this already, but I made the decision that I need navigation across the top for certain items and a sidebar down the right hand side to contain others. So how do you decide what goes where? For me, I’ve made the decision that the sidebar will contain items that I want to highlight and get people’s attention. This includes:

The latest page posted: people coming to the site will be looking for this since the comic doesn’t display on the home page. In other words, without this link, there’s no way for a visitor to easily find the comic.

A link to let you start at the beginning: new visitors will want a convenient way to get to the start, so let’s give them that.

Links to various social media and to sign up for a mailing list: I want to push these so that people can stay in touch with the comic in the way that they like.

A search function: I’m not sure what people will be looking for, but I want to give them a way to search the site and all my posts to find what they want.

A list of topics that I’ve posted about: maybe more for newer visitors, but this gives people an idea of everything that I’ve covered since I’ve started.

You may notice that this list is a combination of useful items for the visitor and things that I want to push to help market the site. This isn’t an accident. The sidebar will appear on every page, so hopefully by having that content on screen the most it will gain some traction.

This leaves the navigation at the top. Basically this needs to be a “road map” to the site and allow the visitor to get anywhere they want to go. By this I mean any pages should be listed out in the navigation. Now I’ve used a drop down menu to help organize things into similar groups where necessary and to limit the amount of items in the navigation bar, but this is up to you. My navigation bar looks like this:

about: this takes you to a page dealing with what the comic is about and also has a drop down menu that includes links to pages about the story, characters, creator and production notes.

archives: this should be up soon since I just started putting pages up and should provide a convenient way to find the exact page you’re looking for. If you’ve left off on a certain page and several pages have been posted since then, this should be handy for you as well.

gallery page: various images that have been posted.

behind the scenes: a link to a page dealing with past blog posts about “how” the comic is made and how the website has come together.

downloads: still to come, but will include wallpapers, etc.

contact: still to come, but if you’re interested in contacting me, information will be here.

And that’s it. Overall, this isn’t anything new or earth shattering. But if you’re new to building a website it helps to sit down and think about it logically. Design for the most part is trying to organize the mess and make things clear and simple for the person who’ll be using it.

About jason

Illustrator and graphic designer. When not working full time as a Senior Graphic Designer, I am usually working on the graphic novel On the Verge: the Arrow of Time. Artist on Andrew Jackson in Space and The Sisters.

One Response to website design

  1. Pingback: setting up an archive page | on the verge

Leave a Reply

Your email address will not be published. Required fields are marked *