This tutorial is something similar to what I did over half a year ago on signatures. I actually wanted to do this for a while, to explain some things and clear up some confusions. In general, the purpose of this thread is to make some factions who have good RP get a good-looking writeup as well, as the form is equally important as the content. It will touch on subjects of design in general, so these tips may come in useful in other areas as well. I will not go super into detail about forum bbcode syntax as I will assume you have the knowledge of that. It's not difficult to learn, really.

Please do keep in mind all of this comes from my own experience. I haven't read any guides or other things, I just happen to have a few years of experience in graphic design on my back and some people seem to appreciate my faction writeups. ^[1][2][3] So I just decided to talk about and explain the ways I do things. Your mileage may vary.

If you have any suggestions on improvements to this tutorial, feel free to write below.

The definition of style is pretty broad, however for the purpose of this tutorial we will define it as the visual properties of the text we are using. In other words, things like the typeface, colour, size, alignment and so on. In this section we'll mostly talk about typefaces and colours, because these are arguably the most important things in the style part of your design.

The choice of typeface or font is incredibly important. There are many types of fonts, but on the forums we only have access to a selected few, and in the future hopefully some more. There are many categories of typefaces and ways we can distinguish them. I will go over a few of those.


As with everything, there are good and bad fonts. Similarly, some fonts are supposed to work well in some circumstances, other work in others. There is no universal guide on how to pick a typeface, and because of that it's often one of the more challenging parts of designing your writeup.

The second part of style is colour. Picking a colour is not a difficult task, but choosing ones that go well together is a different story. Commonly, when choosing the colour scheme for your design, you want to pick a few of them so that it doesn't look too homogenous. There are tools that help you with that, such as Paletton, which will do a lot of the work for you.

From my experience I know that picking two colours - primary and secondary - is a pretty simple yet very effective in making everything look nice. Of course there are some colours that go well with everything, such as grey and white, but it's not always good to put them everywhere (<<<< hypocrisy). It should be noted that very often the primary colour is more bright and vivid, while the secondary is toned down and pastel.

You can also play around with complementary colours - ones that lay on the opposite ends of the spectrum. They are good for occasional accents, but not for general use. It's good to play around in Paletton and try to figure out optimal colour schemes for your design.

Alignment is simply the place your text "snaps" to. There are four types of it - left, center, right and justified. The first three are fairly straightforward, so I won't explain those. Justified text means it will be condensed into sort of a box, with both sides of the paragraph are neatly even. It's the preferable way of aligning everything, as it is very adaptable and looks a lot better than simple alignment to left.

To set up your style in an organised fashion you can use a method I personally call "global tags". What you do is you put them at each end of the document you're designing so that they will be the properties you will default to instead of the forum ones (grey text and Arial typeface).

---

I will write some text.
Then I'll change color, font and size.
When I close the tags, the style remains the same.

Code:

[align=justify][color=#8F88FF][font=Verdana][size=small]I will write some text.
[color=#483BFF][font=Open Sans][size=large]Then I'll change color, font and size.[/size][/font][/color]
When I close the tags, the style remains the same.[/size][/font][/color][/align]

Example of the global tags.

---

Layout in the very general is, as the name might suggest, the way elements are laid out in your post. One of the determinant factors of a good layout is the amount of empty space in it. If the post has little unused, empty space, as well as the layout is efficient and conveys all the necessary information, then it's a good one. If there's a lot of empty space, then the layout is not well designed.

Of course, there are more things to keep in mind. Layout generally consists of a few parts that repeat - headers, logos, text blocks, quotes, tables, lists and other elements. It is up to you to make each of those stand out in its own way, but not conflict. I will be talking more about every one of these except for logos, which are outside the scope of this tutorial.

Headers are parts of the layout that help break up the so called "wall of text" - they make sections more interesting to read and less homogenous. We often differentiate so called "header levels". HTML has six of those, but you will rarely use more than two. The common convention in designing headers is to use a more complicated typeface for it, often sans-serif. Things like Times New Roman are very rarely used for headers, while fonts like Agency FB, Orbitron or Oswald appear rather often. Another common practice is to use a hr tag after the header to make it stand out a bit from the text block below.

---

Level One Header

---

Level Two Header

---

Code:

[color=#FF9D38][font=Oswald][size=x-large]Level One Header[/size][/font][/color][hr]
[indent][color=#CC7D2D][font=Oswald][size=large]Level Two Header[/size][/font][/color][hr][/indent]

Example of level one and two headers.

---

As you can see, the second level header is indented and coloured a bit differently from the first level one. You can also do some tricks with small caps, this can be accomplished with playing around with the size tag.

Text blocks are the main content of your thread. They will contain stories, descriptions and other things providing the readers with information. Because of that, they need to be easy and fast to read, not hurt the eyes and contrast with the forum background. For the text blocks you want to pick a font that is proportional as well as easy and quick to read, such as Arial, Trebuchet MS, Verdana or my personal favourite, Tahoma, as well as a bright, often pastel, colour. Commonly the text blocks are indented in relation to the headers, but that's not always necessary. The text blocks should also always be justified, to avoid the inconsistency of the right side of the block.

---

This is a Header

---

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis dictum ultricies. Suspendisse potenti. Phasellus gravida dapibus lacus ac sollicitudin. Curabitur quis suscipit odio. Pellentesque id consequat urna. In vitae lorem dictum, placerat sapien at, ullamcorper neque. Duis venenatis vehicula justo, a luctus dolor semper at. Vivamus volutpat porta libero. In a bibendum neque. Aliquam erat volutpat. Pellentesque consectetur, ipsum sit amet aliquet efficitur, mi mauris accumsan nisl, sit amet molestie velit mauris sit amet urna. Quisque elit ante, bibendum quis ornare id, aliquam pharetra ante. Etiam in sem eros. Cras cursus auctor ligula sit amet accumsan.

Code:

[color=#BCCC19][font=Orbitron][size=x-large]This Is A Header[/size][/font][/color][hr]
[indent][color=#F1FF6C][font=Open Sans]The text was culled to save space.[/font][/color][/indent]

Example of a text block with a level one header.

---

Quotes can be understood in two ways - either as an actual quote block from the forums or a character quote. As per the first, there isn't much to talk about except for a few tricks that you can use with them. First of all, you can title the quotes. It's not a common practice but is sometimes used for roleplay purposes, even though the forum engine doesn't support that type of usage too well.

---

This is a title Wrote:Quote body.

Code:

[quote="This is a title"]Quote body.[/quote]

Example of a quote title.

---

Keep in mind that if you use the global tags or in general the quote is inside some other style tags, the text inside of the quote will retain the inherited font, but not the colour.

A second trick you can use is a floating block that can work well when making, for example, a character sheet.

---

Lorem ipsum dolor sit amet.

Quote:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget pulvinar nunc, eget facilisis arcu. Sed quam elit, efficitur sit amet felis sit amet, mattis eleifend augue. Curabitur ante est, sodales eget accumsan non, sagittis ut purus. Sed a ipsum sit amet massa viverra tempor. Aliquam porttitor nunc a mi rutrum consequat. Curabitur accumsan tincidunt ipsum non tincidunt. In ullamcorper, nisl vel molestie pellentesque, purus risus vulputate quam, a sagittis neque nulla at libero. Suspendisse blandit tortor vitae vehicula efficitur. Nullam a massa non ligula finibus commodo. Ut ultrices rutrum nisi eu consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eget pulvinar nunc, eget facilisis arcu. Sed quam elit, efficitur sit amet felis sit amet, mattis eleifend augue. Curabitur ante est, sodales eget accumsan non, sagittis ut purus. Sed a ipsum sit amet massa viverra tempor. Aliquam porttitor nunc a mi rutrum consequat. Curabitur accumsan tincidunt ipsum non tincidunt. In ullamcorper, nisl vel molestie pellentesque, purus risus vulputate quam, a sagittis neque nulla at libero. Suspendisse blandit tortor vitae vehicula efficitur. Nullam a massa non ligula finibus commodo. Ut ultrices rutrum nisi eu consequat.

Code:

[float=right][img]http://i.imgur.com/RvQbIkB.png[/img]
Lorem ipsum dolor sit amet.[/float]
[quote]Quote content, to save space, was culled.[/quote]

Example of a floating block.

---

The other understanding of a quote is a line spoken by a character that we want to make somehow stand out in our document. There are multiple ways of doing this, I will show you one of them, figuring different ones is up to you.

---

"Disregard females, acquire currency."

—Anonymous

Code:

[color=white][font=Times New Roman][size=large]"Disregard females, acquire currency."[/size][/font][/color]
[indent][color=#A9A9A9]—Anonymous[/color][/indent]

Example of a character quote.

---

There are a few things to keep in mind here. First is the font choice - they don't have to be different, but when quoting something, the quote is usually in a serif typeface, though it's just common, not exactly necessary. Also when specifying the author, an em dash (—), two regular dashes (--) or a tilde (~) is used. The quotes are often heavily indented. One thing to keep in mind is that when the author is attributed in a different line than the quote itself, that should not be centered. The quotes are often indented heavily, but rarely centered.

I don't think the idea of a table is alien to anyone. The tables can be done in two ways, either as an old-school monospace character table, which we will not discuss, or a BB-Code one. Tables on the forums are done in the identical way they are in html, however they lack some of the features of the <table> tag from html.

There are three tags that form a table. First is the obvious, table tag. There's little to say about it other than everything else goes inside it. The second is tr which declares a row. Then we use td to declare a cell.

As opposed to the quote tags, tables inherit neither the font nor colour.

---

First cell, first row.
First cell, second row.	Second cell, second row.

Code:

[table][tr][td]First cell, first row.[/td][/tr]
[tr][td]First cell, second row.[/td][td]Second cell, second row.[/td][/tr][/table]

Example of a table.

---

Finally, we have lists. There are two types of them: ordered and unordered (bullet-point). As for the ordered lists, we can make them using a forum bbcode list=1. We then add individual items with the * tag.

---

1. First item.
   
2. Second item.
   
3. Third item.
   
   1. I can also put lists inside lists.
      
   2. LISTCEPTION
4. Fourth item.

Code:

[list=1][*]First item.
[*]Second item.
[*]Third item.
[list=1][*]I can also put lists inside lists.
[*]LISTCEPTION[/list]
[*]Fourth item.[/list]

Example of an ordered list.

---

There is a forum bbcode for unordered lists, but I would strongly discourage from using them. You can get a lot nicer results making the list yourself. These are often used in recruitment templates, so let me show you one and talk about its elements.

---

• Name: John
• Surname: Doe
• Physical details:

◦ Height: 169cm
◦ Weight: 72kg

• Biography:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sagittis dictum ultricies. Suspendisse potenti. Phasellus gravida dapibus lacus ac sollicitudin. Curabitur quis suscipit odio. Pellentesque id consequat urna. In vitae lorem dictum, placerat sapien at, ullamcorper neque. Duis venenatis vehicula justo, a luctus dolor semper at. Vivamus volutpat porta libero. In a bibendum neque. Aliquam erat volutpat. Pellentesque consectetur, ipsum sit amet aliquet efficitur, mi mauris accumsan nisl, sit amet molestie velit mauris sit amet urna. Quisque elit ante, bibendum quis ornare id, aliquam pharetra ante. Etiam in sem eros. Cras cursus auctor ligula sit amet accumsan.

Code:

[color=#AAAAAA]• [color=white][b]Name:[/b][/color] John
• [color=white][b]Surname:[/b][/color] Doe
• [color=white][b]Physical details:[/b][/color]
[indent] ◦ [color=white][b]Height:[/b][/color] 169cm
◦ [color=white][b]Weight:[/b][/color] 72kg[/indent]

• [color=white][b]Biography:[/b][/color]

[indent]This part was deleted to save space. [/indent][/color]

Example of a bullet-point list.

---

First you can notice the regular list items. I put the fields in bold and coloured them white, to make them stand out a bit more. Then I included another list within the physical details section, differing in the bullet point. This is a common practice, though not always necessary. Finally, I added a biography field - something that requires a longer answer and for that it's left in an indented field a bit below. That last part is the main reason why you shouldn't use forum unordered lists - such things are pretty tricky to create with those. Also the bullet points aren't loaded properly in some fonts.

After writing about two most important things - style and layout, it's good to give some practical tips for people.

The one that I can't stress out more, is keep your code organised. It will be incredibly difficult to modify it after a few months, when all you've left is total spaghetti. Keep consistent with how you write your things and stick to it. There is no bbcode syntax highlighting, so you need to live without it. Bbcode is very important to be kept consistent in terms of the order. For example, I suggest you stick to the color-size-font order of the tags (CSF, easy to remember, same as the Junker freighter), and to close them in reverse. Otherwise, it will create problems that will destroy your document.

Another thing are indents. I never actually specified how to do them, but ever since the addition of the percentage indents, there have been two ways of doing that. The percentage indents I suggest using when you want to indent the entire post. For the individual, small things use the regular, absolute indent. You can find the comparison between the two in this post. I'd show you an example, but it will be difficult, so I suggest you try it on your own.

All the typefaces listed below are installed on the forums or come with Windows or Freelancer. I may or may not have arbitrarily omitted some of them.

Well, I guess that would conclude this tutorial. It's not incredibly detailed, it merely scratched the surface, but should give you a better idea of how to do these kinds of things properly. Kudos, if you've actually read the whole thing.

If you have any questions or suggestions, post below.