Amassment Message Board

I've had my City of Heroes (MMO) character info repository online largely unchanged since 2009, and I would LOVE to give it both better organization and a better design. However, despite creating several would-be layouts, I find myself hamstrung, and I've just plain hit a wall, folks. I want to revamp this site by the end of this year, but I just don't know how.

DESIGN PROBLEMS

I was trying to go for a spy-ish "dossier folder" theme concept with the current layout, but I had to make all the graphics myself because I couldn't find anything suitable online. I couldn't get divs to align the image slices correctly on the page no matter what I did, so I had to revert to tables. That plus my severe depression in 2009/utter lack of focus/lack of patience with anything artistic led to the current design (which I was actually proud of at the time, but have since progressed past).

Aside from the problems with creating the layout, it also suffers from:
- pages looking empty due to the Javascript expand/collapse div script (was trying to avoid content overload :/)
- site navigation being weird no matter what I do to it--it's like I forgot how to make a navigation and it's just ugh
- weird content organization flow for each hero page (as it stands now, I worry people just stop reading at the origin story)

DESIGN WANTS/NEEDS

- A "text content first" design. I'm usually really good at these but this one is stumping me...I think it's because of all the sections and the fact that one of the sections is basically short fiction. I'm not wedded to the "dossiers" theme at all, especially not now that I've made like 5 layouts with that style in mind and just can't make it work.

- Better content organization, especially when it comes to the display of vital stats, costume pictures, theme songs, and the "similar characters" section. I almost want like a sidebar on each character page with this information in it, but I worry such a sidebar might look overstuffed with that much content.

- I would prefer it if I could keep all of each character's info on one page, mainly to reduce my backend workload. (I could potentially separate off the origin story for each hero onto its own page, but that's still 15 copy-paste and reformat jobs. sldjfslkjdfd)

- I also would ADORE something that would somehow generate thumbnails for all the costume pictures, because I haaaaate making thumbnails D:

Any advice is welcome! I'm really looking forward to getting this repository updated :)

My first thought is that a lot of the problems you're facing with the site looking empty could be solved by more exciting typography. As it's now, it's all one font all over the site, and it looks kinda dull. If you had different fonts for the headings and the navigation, I think that would already be a starting point. Since you don't have that many pictures in the site, I'd play with big headings and separators that could functionally act as images in breaking the wall of text feel.

Content organization: actually, I don't see why having the content hidden under the headings. I mean, if I'm reading your site, I'm going to click them all anyway, and it's annoying that I can't have all the sections on the same page at the same time...and, I don't know - even when all expanded, it doesn't seem like there would be too much content for a single page.
I don't know where the sidebar idea would fit in all of this, but what about starting each page with a cooler looking version of the character specs as you have it now (add image, play with typography)?

For the navigation, once again, try different fonts! That on its own could solve it!

On thumbnail generation - there's actually both scripts and software for that! What would you think about something like Easy Thumbnails?

dubiousdisc wrote:My first thought is that a lot of the problems you're facing with the site looking empty could be solved by more exciting typography. As it's now, it's all one font all over the site, and it looks kinda dull. If you had different fonts for the headings and the navigation, I think that would already be a starting point. Since you don't have that many pictures in the site, I'd play with big headings and separators that could functionally act as images in breaking the wall of text feel.

I have been playing with new fonts on the failed design attempts, but nothing has seemed to work out so far. Maybe I simply haven't gone big enough with the fonts--and plus, my last very frustrated attempt at a new design was before I started using Google Fonts, so having a bigger font selection might help me out. :D

dubiousdisc wrote: Content organization: actually, I don't see why having the content hidden under the headings. I mean, if I'm reading your site, I'm going to click them all anyway, and it's annoying that I can't have all the sections on the same page at the same time...and, I don't know - even when all expanded, it doesn't seem like there would be too much content for a single page.

Yeah, my idea with the hidden content was to avoid "WALL OF TEXT OMG" when the page loaded. I was afraid having a GIANT THING OF TEXT immediately onscreen would turn people away (it would turn me away, tbh). But with the text hidden under the headings it makes each page look empty af...can't win for losing.

dubiousdisc wrote: I don't know where the sidebar idea would fit in all of this, but what about starting each page with a cooler looking version of the character specs as you have it now (add image, play with typography)?

Each character page already has an image at the top right now, so that could easily become part of the sidebar of each page. OOOOOO snap just thought of something: I could create a spot for a sidebar in my layout, and then create a separate sidebar file for each character and include it with PHP...I think that could work. The sidebar would ideally include character specs...and maybe the costume thumbnails, as well as the similar characters list. Everything else needs a little more explanation.

dubiousdisc wrote: For the navigation, once again, try different fonts! That on its own could solve it!

I think my nav problem is more of a site organization problem than a font thing, if that makes sense. Like, right now there's just a list of made-up names to click, without much introduction to the subject matter or why folks should care about them. It's more like I need a subpage with all their character files on it, and then a couple other pages...? Does it seem that way to you or am I just wigging over nothing (as usual, lol)?

dubiousdisc wrote: On thumbnail generation - there's actually both scripts and software for that! What would you think about something like Easy Thumbnails?

OOOOOO HECK YES THIS IS WIN <3 thank you for the handy link!!

Oh yes absolutely. Go through Google Fonts and try again!

Part of the wall of text problem...is not necessarily the amount of text in itself, but rather the way it is formatted. More line-height, more spacing between paragraphs, more headings, more pictures - then you can have the same exact amount of text without it looking like it's too much.

Whenever you have something with the sidebar idea, let me see!

Robin wrote: I think my nav problem is more of a site organization problem than a font thing, if that makes sense. Like, right now there's just a list of made-up names to click, without much introduction to the subject matter or why folks should care about them. It's more like I need a subpage with all their character files on it, and then a couple other pages...? Does it seem that way to you or am I just wigging over nothing (as usual, lol)?

What about then having the navigation items be the name of the character AND something that relates to them like a quote or a quick description - some sort of cool catchy teaser? (And then you can even play with that visually!)

Unfortunately, I cannot add more pictures than I have currently because the MMO is no longer available to play (thus no source for new screenshots). I also lost a lot of screenshots in the Great Hard Drive Failure of 2011 :/ bleh. I can definitely format the text better, though. Gonna work on a mockup here soon :D

Also, I'm liking the character name + catchy title for the navigation! Currently, I have attempted a one-sentence catchy thing at the top of each character page, but there might be a way I can condense it into a title... oooooooo shinyyyyy *O*

(Hoping this doesn't break the forum orz)

This is the design I've got knocked together thus far! The black sidebar is where character info will go on the individual character pages, but on the other areas of the site, it will be a general info summary sidebar :)

The addition of Google Fonts, plus the significant color edit on the background texture (it used to be way more red and now actually looks like wood, whoa) has really helped this layout go farther! Also, I made the layout intentionally narrower than the nav at the top, because the white content area was WAY too big otherwise and my eyes had to work too hard to read free flowing text. #actuallyjustlazy xD

What do y'all think so far?? :D

Much better than the Dossier-theme you were going for, Robin! IMO I used to see that manilla folder design in so many things forever ago that it just seems so cliched and I don't think it really catered to your content. Definitely, something like this looks much easier to read.

Everything Destinie said is true.

All of dubiousdisc's input is gold. :Db I've already told you I like your new layout! I think I would like it more if the padding between text and border of the white part were a bit bigger, so that it's the same as the padding in the black part. I like how you've linked newest/featured characters as well, including their epithets. For the navigation on the characters page itself, I definitely second listing titles and a short description - perhaps even make a small headshot icon for each of them with the screenshots you have. If the game has different kinds of classes (tanks, mages, healers, etc.), I think it would also be nice to group them on the overview. :D

I agree that if the presentation looks good, a giant wall of text shouldn't turn people away....... Or so I hope....... /sweats. Either way, like dubiousdisc, I prefer the sections I'm going to read to be visible right away; at the very least, the main part of the text should be visible right away. The length of Origin + Creation Story combined looks good to me. If you decide to leave Costumes in the main content space rather than in the sidebar, I think Theme Songs and Costumes (the "extras"/optional parts, so to speak) could be presented like horizontal tabs at the bottom of the page, combined with collapsible divs? Wikis, for example, sometimes have galleries in an additional tab.

I'm looking forward to seeing your character sidebar!

Nice, Robin! Keep at it!

Just one thing - remember to have the same amount of padding in the content box as you have in the sidebar.