Looking for Critiquing/Constructive Criticism

JimTriche
JimTriche
edited April 2010 in Campaign Portal Building
http://www.obsidianportal.com/campaigns/intothebreach

Basically, I'm asking what I can do to make this better. Right now I've tried to tie everything together with a theme, I've gotten some massive html help from the illustrious ChainsawXIV, some massive Textile help from Gnunn, and various tidbits from others.

After looking at a few people's campaigns here and a lot of thought, I've simply decided to ask.

GMs: What would you do, to enhance this or whatnot?
Players: Is there enough general fluff and entertainment for your personal tastes? What do you like to see? Maybe my players will like some of the same things.

Shadowrun experience a plus.

If this isn't the right place for this, let me know where or tell me I'm a bad, bad person.

Cheers!
-Jim

Comments

  • sandman
    sandman
    Posts: 155 edited April 2010
    Couple of things to keep in mind Jim:

    * Try using headlines instead of bold text.

    * Try adding some artwork, specially in the home page and wiki page. Those are the first pages people usually look at, and it will probably lure your players and other people around here if you give them something interesting to look at (aside from something interesting to read).

    * The black background in the wiki page doesn't get along very well with blue links (the "light blue" links I can read, but the other ones just hurt). I guess you used that background so that it would be similar to the banner, but think about when reading it, it's not that comfortable (even the moving white dots are a little distracting). If you don't want to use a lighter background, try shifting the color you use from black to shades of grey. It will mantain a "darker" look (if that's what you are going for) but it will be easier to read.

    One more thing about the background: as I said before, if you add artwork, keep in mind that A LOT of images out there have a lighter background, so if you use them in front of a darker color, all the edges will be visible. This alone could be worth it if you decide to add a lot of images and a lighter background, as I did: "for example":http://www.obsidianportal.com/campaign/14925/wikis/reglas.

    * All the written text is a little "to the left". The problem is that the background starts, on the left side, at the same level that the text does. I think the text would look better if you apply the margin attribute (with HTML) to the entire text. kind of what I did at my wiki page: "Wiki":http://www.obsidianportal.com/campaign/14925/wikis/main-page (notice that the text doesn't start where the background image does).

    That's it for now, hope you find this useful.
    Post edited by sandman on
  • JimTriche
    JimTriche
    Posts: 483
    As soon as I can figure out how to get the headline tags formatted to display in white (or any other color for that matter) I will be using them more often. Thanks for the tip on the alignments, I will be doing that shortly.

    Yes, I was trying to match up the banner with the background. It's the only good background I could find that would display the links properly (Though I want to recolor the 'external' royal blue links to the light blue of the internal ones) and match the setting and theme of our game.

    Thanks for the links to your page! I will be cannibalizing parts of it as soon as I can!
  • JimTriche
    JimTriche
    Posts: 483
    Er well, I'm trying. I've managed to indent one line, but I want the whole thing to start like, 10-20 px off the edge of the background.
  • JimTriche
    JimTriche
    Posts: 483
    Whoo Hoo! div tags with padding work!
  • sandman
    sandman
    Posts: 155 edited April 2010
    Yeah, I meant the div tags for the hole thing when I mentioned you could do it with HTML. It's easier and faster.

    As for the headlines, you could use this:

    %{color:#DAA618; text-decoration: underline; font-size: 140%}Example of h4 headline%

    You can change the font-size attribute to look like any headline (for example: 140% is an h4 headline). If you want it in white, just change the color number using a different hexadecimal colour. You can pick that number from different pages, here's one I use:

    http://html-color-codes.info/codigos-de-colores-hexadecimales/
    Post edited by sandman on
  • gnunn
    gnunn
    Posts: 423 edited April 2010
    In addition to Sandman's method, you should also be able to put css attributes directly into the textile header tag like this:

    h2{color:white;other-attributes:and stuff;}. Example headline

    I agree with Sandman that the moving dots are a bit distracting in the background. What if you set your page up with nested divs so that the circuit-board pattern formed a sort of border, but with all text on solid black? I think this would help improve readability without losing the overall feel. Here's the code for what I'm thinking ( I added a dashed white border just to set off the window... sort of reminiscent of an old-school sci-fi computer interface):




    Here is some sample text.




    Also, I would suggest adding a white or other light colored border around your various tables & graphics to make them stand out more from the background, especially on the TV channels page. The channel listings sort of get lost.
    Post edited by gnunn on
  • JimTriche
    JimTriche
    Posts: 483
    I haven't figured out how to add colored borders to the tables yet. I actually just used the code you told me about with cell changes. I am not markup savvy, though I can follow directions fairly well. I can copy even better!

    I really wanted that background, but your solution there (which I am in the process of stealing haha) is the best of both worlds for readability and theme matching.

    The headlines will come later tonight as I ponder rearranging some of it.
  • sandman
    sandman
    Posts: 155 edited April 2010
    Muuuuch better Jim, and it look neat and tidy.

    _Edit:_ I meant with the change on the background.
    Post edited by sandman on
  • JimTriche
    JimTriche
    Posts: 483
    Still trying to get borders on my inserted images and the trid table: This is the code I'm using.

    *Trid Selection*

    table{width:610px;border 2px solid white;font-family:arial}.
    {background:#000;color:white}. |=. *News* |=. *Sports* |=. *Weather* |=. *Entertainment* |
    {background:#ddd}. |=. [[KSTS 11 News | KSTS 11 News]]|=. [[Seattle SportNet | Seattle SportNet]] |=. [[DopplerPlus | DopplerPlus]] |=. [[SeaTV | SeaTV]] |
    {background:#666}. |=. [[CorpNet | CorpNet]] |=. [[NSBC | NSBC]] |=. [[4Cast | 4Cast]] |=. [[MusiX | Musix]] |
  • JimTriche
    JimTriche
    Posts: 483
    *Trid Selection*

    table{width:610px;border 2px solid white;font-family:arial}.
    {background:#000;color:white}. |=. *News* |=. *Sports* |=. *Weather* |=. *Entertainment* |
    {background:#ddd}. |=. [[KSTS 11 News | KSTS 11 News]]|=. [[Seattle SportNet | Seattle SportNet]] |=. [[DopplerPlus | DopplerPlus]] |=. [[SeaTV | SeaTV]] |
    {background:#666}. |=. [[CorpNet | CorpNet]] |=. [[NSBC | NSBC]] |=. [[4Cast | 4Cast]] |=. [[MusiX | Musix]] |
  • arsheesh
    arsheesh
    Posts: 850
    Yeah I agree with Sandman. I had stopped by your site a weak or two ago, and felt that while the background effects you had included in your site were interesting, they greatly detracted from the readability and user interface of your site. However, after seeing your site "after" implementation of the techniques discussed by Sandman and Grunn, I think that your site is a ton more user friendly. In fact, I'd be curious to check it out more thoroughly sometime when I'm not in the middle of writing a lengthy term paper.

    Cheers,
    -Arsheesh
  • JimTriche
    JimTriche
    Posts: 483
    Not a whole lot of 'content' on there as of yet, but I want to get the hard stuff out of the way ASAP. The border allows me to keep the theme tied together, but allows for readability.

    sandman, added you to the thankyou's, hope you get some more hits. I - quite shamefully- do not speak or read Spanish, but it looks lovely, and I love the Gygax tribute.

    Not reading Spanish is actually doubly shameful since I grew up in Florida.
  • arsheesh
    arsheesh
    Posts: 850 edited April 2010
    One stylistic comment I have is that the aged parchment backgrounds displayed in your adventure logs section seems a bit incongruous with the overall dark cybernetic ambiance of the rest of your site. Other than that, its looking really good Jim.
    Post edited by arsheesh on
  • JimTriche
    JimTriche
    Posts: 483
    Yes, I'll be changing those presently. I want a new piece of graphic for it, but I am "teh suk" when it comes to Gimp so far.
  • arsheesh
    arsheesh
    Posts: 850
    Well if you have any questions, or need any help let me know. I'm still a novice with the software but I have learned how to use it well enough to create some decent graphics.
  • sandman
    sandman
    Posts: 155 edited April 2010
    Ok, so I changed the background a little bit so that it would have kind of the same theme as the rest of your page. Maybe you had something like this in mind Jim:

    * "Test Page":http://www.obsidianportal.com/campaign/14925/wikis/test-page

    If you like it, just change the url for the images:
    * Top: http://cdn.obsidianportal.com/assets/11393/top_background.png
    * Middle: http://cdn.obsidianportal.com/assets/11392/middle_background.jpg
    * Bottom: http://cdn.obsidianportal.com/assets/11391/bottom_background.png

    You'll also need to change the color of the text, so add this to the first div style tag:

    * color:white;


    BTW: if you decide to use this, you may want to save the images and re-upload them to your account, in case I delete them by mistake.
    Post edited by sandman on
  • arsheesh
    arsheesh
    Posts: 850
    Or just go with what Sandman has done. Cool stuff, that.
  • JimTriche
    JimTriche
    Posts: 483
    For now I changed it to the same theme the rest of it enjoys, but I just may be using that -- The scroll I was talking about that I want to do is actually more based on the actual scroll in the older Shadowrun logo.

    "The blue and gold scroll here":http://i950.photobucket.com/albums/ad347/intothebreach_album/shadowrunwork.png

    But more of a Slate Grey/and burnt gold look.

    If I can figure out what I'm doing in Gimp (gimme a week or two, it's hard to find free time for this ATM) I'll be making the images to use later - hardest part will be making sure they align. Which, I guess if I make a minimal sized solid piece and cut out the center and save as three pieces, it should work just fine.

    "Example":http://i950.photobucket.com/albums/ad347/intothebreach_album/example.gif
  • JimTriche
    JimTriche
    Posts: 483
    Thanks for all the help guys! My players think it's looking a hell of a lot nicer as well!

    Lots more to do, but I'm so giddy about the potential here!
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions