Page 1 of 1

@Austara's Official Character Files

Posted: Mon Jun 29, 2015 7:04 pm
by Robin
(Warning, super noob design ahead)

I constructed @Austara's Official Character Files back in 2010 as a way to archive all the backstories and costumes for the superheroines I created on the MMORPG City of Heroes. Unfortunately, though the content archive is great, the design looks dated, and not in a cool vintage way. >_<

I've got some vague ideas on what I can change and edit, but I've been kind of stuck on how to go forward. What would y'all suggest? (Also looking for a better title for the site)

Re: @Austara's Official Character Files

Posted: Mon Jun 29, 2015 9:04 pm
by Mikari
Maybe adding more color to the design will make it more "lively" What kind of layout do you have in mind? Are you planning to stay with the file style? Some shadows and textures could help bring it out.

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 9:30 am
by dubiousdisc
  • I second Mikari's suggestion on adding shadows and texture. If you want to still have it look like it's files, then maybe you can have a subtle paper texture over it all. Also, you could make the tabs look like actual tabs with the help of some drop shadows and a little bit of rearranging things around.
  • You could add more padding around the content box; it's kinda snug
  • The headings could be a different font. Still the same type of monospace stuff, but different for contrast. Probably something very vertical and heavy to contrast the very horizontal and light body font you have. You could also play with negative letter-spacing to make that work out.
  • In the character pages: you could have a bit more air between the title and the rest underneath, make sure that the title actually aligns to the left with the rest of the content, add cursor: pointer to the titles to expand so that they feel more clickable. Hell, even cursor: help if you feel like fun.
  • Make links be more clearly links. Right now they are the same as the rest. Underline, a different color, bold...the possibilities are endless!
  • The background of the page could be something fun! What about wood, so it looks like a table? Maybe with some fun things on the table that remind you of the characters and stuff? I recommend that if you keep the layout itself light, make the background be darker, or viceversa. Right now it all kinda blends.
  • Title-wise: I don't know, but you could probably pull off something more fun than this. Maybe these are not just the official character files. Maybe they are the super-duper-mega-secret-for-your-eyes-only character files. Maybe not exactly like this, but you see the direction I'm thinking of? :D
Hopefully this helps 8)

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 11:52 am
by nyxmidnight
Paper textures on SubtlePatterns to add to what DD just said.

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 11:55 am
by dubiousdisc
Haha, I was even about to link to that and then I didn't. Great minds 8)

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 12:14 pm
by nyxmidnight
High five! XD

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 6:59 pm
by Robin
@Mikari and @Dubs: Back in 2010 I was trying to go for the "super-secret-dossier" look for the layout, but I had to make all the images myself due to shitty dialup internet at home (read: won't download a thing, LOL). Back then I also had no idea that CSS shadows and downloadable textures existed, either! xD (Thank you for the paper texture link, Nyx!)

Layout Design:

I like the rich dark wood background idea with each character page "lying" on the "table" surface. GOD that would be amazing. It would be even cooler if I could make it where you "flip" through each of the pages by clicking a left or right arrow, and where when you scrolled down to the bottom of each page, the pictures of costumes would kinda splay out on top of the "paper" able to be clicked...but that is probably a ton of animation >_< I hate not being much of an artist, lol

Information Organization:

One thing that has bugged me about this layout is how information is displayed on each character page. I ended up using the Javascript hide script so that it didn't look like "OMG WALL OF TEXT," but I really hate hiding the information behind a click. The layout can definitely be wider--I was stuck in my "ZOMG 900 PIXELS WIDE IS MAXIMUM WIDTH" phase then--but I just didn't really know how to arrange the information so that it looked readable. V_V

Title:

I just completely blanked on the title back in 2010, and had to come up with something besides "Super Cool Shit I Wrote About My Original Characters" xD Maybe just the word "Dossiers" would be cool as a title? Or--hmm--"Paragon City Dossiers?" Something like that?

Also, Dubs, you mentioned something about headings not aligning to the left with everything else--I tested it in IE, Firefox, and Chrome and didn't see that happening in my browser. Would you mind screenshotting it?

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 7:31 pm
by dubiousdisc
It's an extremely subtle thing:
Image REALLY subtle but kinda throws off the eye since that W is on every page.

Re: @Austara's Official Character Files

Posted: Tue Jun 30, 2015 10:24 pm
by Robin
Hmmmmm. There's no additional padding on the "Codename" line or anything (just checked)--it must be something weird about the Courier New font. Perhaps simply changing the heading font like you suggested before will fix that too. Thank you for catching that!