Character Info Repository

Planning to create or to revamp a shrine and need some help or a second eye with your content? Post away!
Forum rules
The usual guidelines in Constructive Criticism apply, and you have the option to flag your topic as "Sweet".
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Character Info Repository

Post by Robin »

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 :)
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

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?
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

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!!
~ a dream is a wish your heart makes ~
withinmyworld.org
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

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!)
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

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*
~ a dream is a wish your heart makes ~
withinmyworld.org
Robin
Events Staffer
Posts: 3072
Joined: Thu Aug 07, 2014 3:15 pm
Location: North Carolina, USA
Contact:

Re: Character Info Repository

Post by Robin »

Image

(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
~ a dream is a wish your heart makes ~
withinmyworld.org
Destinie
Posts: 3357
Joined: Mon Aug 15, 2011 5:27 pm
Location: Columbia, MD
Contact:

Re: Character Info Repository

Post by Destinie »

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.
nyxmidnight
Communications Staffer
Posts: 1078
Joined: Sat Oct 13, 2012 7:55 pm
Location: Canada
Contact:

Re: Character Info Repository

Post by nyxmidnight »

Everything Destinie said is true.
Join in the Tale, in the Blight, of Conquest and Lies
Come the Sun, to Tarnish in the Sky
Vow that we shall Tear the Light - Dark seizes the Throne
Lost in thoughts, all alone
Lethe
Posts: 1342
Joined: Thu Jul 19, 2012 1:20 pm
Contact:

Re: Character Info Repository

Post by Lethe »

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!
Both despair and ecstasy are part of the elements that compose a person.
dubiousdisc
Administrator
Posts: 2535
Joined: Thu Jun 21, 2012 5:49 pm
Contact:

Re: Character Info Repository

Post by dubiousdisc »

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.
Post Reply