InsaneJournal

Make sure you've read the great tutorial here on which colors do and don't work on certain backgrounds. Then, whether you're sure or not, make it a rule to run your color choice by someone you trust to give you an honest opinion. The community critiqued is great for this and everything else on this list.

Not sure if your font is dark/light enough to be read your background? A trick to see if you have enough contrast is to take a screen shot of your page (CTRL + Print Scrn at the top of your keyboard) and paste it into your editing software (photoshop or GIMP). In GIMP: Go to colors > desaturate. In Photoshop, go to file > new > set mode to grayscale > ok > and paste your screen cap. If you can read the text clearly in greyscale(unlike below), you have enough contrast.


As a rule avoid putting body (main) text on a black or other dark background as reading it strains the eye. That means the eye will get tired and stop reading early.


Too many colors make a page look busy. Try to stick to four tops. As you can see below in the before and after pictures below, a little color goes a long way. On top of adding a point of interest to the page, it makes the sections more distinctive. (Click to enlarge.)

Should be on both the user info and the layouts (and on the mod journal as well as the RPG and OOC communities). It's also a great idea to have navigation on every page like athinblackline. You can see an example here.

Potential applicants and players at your game should be able to follow a path through what they want to access in order to apply. The typical player's path is as follows: Premise > Rules > Character List > Available > Character List/Available Characters/Needed Characters/Wanted Characters (depending on what pages you have) > Application > FAQs/Game Information. Then, after they join: Friending Button > Contact List. On this note, don't be afraid to draw potential applicants' attention to taken/available/wanted characters. doublemods, for example, bolds both taken and wanted characters in their directory.

Links should have clear names so players know what it is right away 'Characters' is too vague. 'Available/Taken Characters' is better.

Avoid letting your navigation get too cluttered. If you have more than nine links it would be a good idea to split them up or put the extra links into different page. If these links aren't going to be used often, they should be put under another page (called something like extras or community resources). Maps of your fantasy RPG's setting for example, would be used more often than something like character birthdays. If you don't want to create of page of extra links, try working the information into other pages. Birthdays, for example, can go with a list of taken PBs in a character directory. Or you can divide your links into categories (no more than four). Game Information, Applying, and Player Information are great category names. You can see an example at Durmstrang Uber Alles and Pentamerone. This is done to make the number of links less overwhelming, like with phone numbers. 867-5309 is a lot easier to take in than 8675309. (The song's stuck in your head now, isn't it?)

Links should be easy to read. Size 1 (and up) verdana and all caps is recommended. Font color can (and should) be changed according to what works best with what's already on the page. Caps are generally preferred when at the bottom of an ad as it creates the illusion of a line, helping to create balance. At the top, they're often not used to avoid making the advertisement look to heavy.


If one or two of your links are spilling onto another line, do not leave them like that. Instead, split them up so they're balanced into two lines or more like so:

Not Okay:
Link | Link | Link | Link
| Link

Okay:
Link | Link
Link | Link | Link

Post each page into a table no wider than 750px (650px is recommended) or 80-90%. This is done because otherwise if people use IJ's layout with a sidebar or have a small monitor it might stretch out the page so they have to use the scroll bar at the bottom to go back and forth. As such, the same is true of all tables. This table should be aligned to the center with cellpadding of at least 15 if the table has a background or background color. Also, you should justify the text in the table. This makes the sides where the text cuts off even and your page look better. See the difference in the before and after below? (Click to enlarge.)




In regards to the above, try to create a mood/theme/color theme and continue it all over your RPG. This can be done by a certain color scheme, font, or what have you. It creates interest on your page and sometimes even makes users curious to see how your other pages look.

Every page should have at least one point of interest (a banner/graphic at the top announcing the page's name, colored section tiles, a decorative/ background color table, etc.). For information on how to dress up fonts, check the typography tutorial coming soon.

Take prescott_valley, for example. On this page you can see how they continue the theme established by their ad with the heading.

Everything in the mod journal should be behind a centered lj-cut as can be seen here, which makes your journal journal look less cluttered and is easier to navigate.

Body text should be size two and up so it's easy to read as otherwise it makes the eye strain (or have to work harder) to read the text. The same goes for dark backgrounds.

If possible, large blocks of text need to be split up. If split up, never under-estimate the power of white space to frame (or seeming to create a table around) the text and divide up sections (a.k.a don't press everything up against each other). You can create the illusion of indents with blockquotes. Distinctive titles (with a different font, color, or what have you) are also very handy for saying "this is a new section". You can see an example here. Also, never underestimate the power of hiearchy/contrast and flow (before mistakenly called font stacks - wtf) for sections. They make titles stand out and are where you can summarize what certain parts are. This can be done using different fonts, accents (like italics and bolding), caps, different sizes, and lighter/darker colors. I find they're also great for lyrics and quotes in profiles (there's two great examples here). If you were using it on a page, however, it might look something like this:

Title
And information about the section.

And look here's some body text! And more! And even more! How exciting! Oh, my gosh! It's everywhere, isn't it? Oh, my. This is really quite crazy. Such madness!


Title
And information about the section.

And look here's some body text! And more! And even more! How exciting! Oh, my gosh! It's everywhere, isn't it? Oh, my. This is really quite crazy. Such madness!

Need another example? Here's one I suggested for iseelondon (so the text is snagged from their Jobs section):

Boulangerie
Once owned by an old man who recently passed, the Boulangerie bakery is now owned by Briony Dunstan who inherited the shop after being the only person that worked there. The Boulangerie has turned into a bit of a local hot spot and has been doing some great business in both the muggle and the wizarding world.
• OWNER & DECORATOR: Briony Dunstan [mercuriaal]
• BAKERS: [two positions]
• CASHIER: [one position]

Balance, balance, balance. Make sure there's a balance between the elements (or stuff) on the page. Tables ought to be as wide as the text (see below) and graphics ought to fit in perfectly with the text (like here). See the difference below in the before and after? (Click to enlarge.) See the figure it creates here?

If you have a table with a background, for the love of all things holy use cellpadding (15px is suggested). This helps to keep the text off the edges of the table.

No matter what kind of table it is the width should never be wider than 750px (650px is recommended). This is done because otherwise if people use IJ's layout with a sidebar or have a small monitor it might stretch out the page so they have to use the scroll bar at the bottom to go back and forth.

Avoid using table borders. They look hideous and unprofessional. There's a much better, simple alternative to this: setting the cellspacing in the table tag. Give your table a background color. Then, set your cellspacing according to how big you want your border. Tada. The code is cellspacing="" and is added like follows:

<table bgcolor="black" cellspacing="2">

On pages where your table is free of images (or has small ones that don't require set widths and heights and things), use a percent instead of px. This is great for things like the Rules and FAQs. 90% is recommended. The code is is added like follows:

<table width="90%">

When you have boxes in a table and the text decides it wants to be in the middle instead up up near the top like this:



it's simple to fix it. Under your TDs use:

<td valign="top">

Top aligns it to the top while center centers it.

Keep things uniform. That means caps, formatting, spacing between lines, and what have you.

Uniform: Milk | Eggs | Cheese | Bread

Not Uniform: Milk | eggs | Cheese | Bread
Milk \ Eggs + Cheese \ Bread
Milk|Eggs | Cheese | Bread

When making keys or color-coding, try to think associations and make each color/key item distinctive. Otherwise, players will have to keep checking back to reference the key instead of being able to memorize it. Non-distinctive colors or objects (similar shades of blue, for example) create confusion. Think about what Rowling did in Harry Potter. One of Slytherin's colors is green, like what most people would associate with a snake. One of Gryffindor's is gold, like a lion's fur or the gold on a sword, like Gryffindor's. And so on.

To keep everyone's list of friends on their user infos clean, consider using ban_set instead of friend remove on the friending button. Then, use unban to prevent future issues for your members should they decide to reuse an account. Tada, those people are no longer on your friends of list.

Try to set a mood. Perhaps the best examples I've seen are Quarantined's layout, which can be found here, and that of Eggs and Toast found here. They're simple but have an immediate and significant impact.

Label! Especially your rules. Title your rules instead of numbering them. That way, people can skip right to what they want in the future if they need to check back to something or if they want to check a particular policy before applying.

That's it for now. Have suggestions, questions, or comments?
They're welcomed! Leave them in the comments.
Major thanks to firstimpression and advertisemyrp for helping out with this.