Welian’s Principles of Design

welian

#BlackLivesMatter
Roleplay Availability
Roleplay Type(s)
Welian’s Principles of Design

Welcome! For those of you not familiar with me, I am welian. I used to be more active in the coding scene before college gobbled all of my time. I studied for two years at a fine arts university, and am about to graduate with an associate’s in IT. I currently work as a professional graphic designer, my specialty at work is advertisements and HTML/CSS

Here’s a not-so-secret secret: You don’t need to know HTML and CSS BBcode to make a well-designed thread.

It’s true!

Design is so much more than knowing how to make double borders, scroll bars, or set pictures for backgrounds. Design is more than being aesthetically pleasing. Design is about making an object pleasant to interact with.

In this case, by object, I mean threads. And by pleasant to interact with, I mean easy to read. But what makes something easy to read?
  • Well organized
  • Easy on the eyes
  • All information is readily visible and available
  • Loads quickly
  • Displays correctly
All of the above points are things that I think about when I work on designing a thread, and they’re things that you should keep in mind too.

Well Organized

Material in the thread should be well organized. By that, I mean that the writing itself is organized and easy to follow – ideas are laid out in a subsequent fashion, there are clear breaks between paragraphs, and the user does not waste time trying to figure out where one sentence ends and the next begins. This why, as a general rule, all body copy – that is, normal text – should remain left-aligned (or justified).

Center-aligned text, while symmetrical, makes it difficult to find the beginning of the next line because the eye is forced to scan almost the entire width of the document to find it. Right-aligned can be good for footers and little things like copyrights, but it also should not be used for body copy since English is read left to right.

You might decide to use headers to separate sections such as lore and mechanics in a roleplay thread, or personality and backstory in a character’s profile. The important thing is that your information is easy to understand before you apply any design to it whatsoever.

Good design on bad organization is like a band-aid. Once you start looking at things more closely, you see the nasty wound underneath. Bad design on bad organization is just going to turn roleplayers away because they won't be able to understand the ideas that you are communicating.

Easy on the eyes

Good design does not interfere with the reader’s ability to understand what they are reading. It enhances it. If your design makes it physically more difficult for readers to see your content, you are not practicing good design.

As an example: Many people have impaired vision and wear glasses. I personally have bifocals, which means that I need to tilt my head back to read through the bottom half of my glasses. There are a million beautiful and well-planned roleplays that I have passed over because I could not read the damn text. It was too small, or too pale, or a strange font that was hard to read for entire paragraphs. It was, in short, bad design – and bad design ruins perfectly good writing.

Here is a checklist of things to consider as you create your design:

Is the text large enough to read comfortably without squinting?

Anything smaller than the default font on a website will general be too small for most people to read comfortably for extended periods of time. However, you don't want to make your text too large, as people will spend a lot more time scrolling than reading!

Solution: Leave the font at RPN's default text size. Or, stick to a font size between 3 and 5 (10 and 14).

Consider how wide the lines of text are.

Think of newspapers. A line of text, unless it is a large headline, does not run across the entire width of the page. The newspaper is broken up into columns, and the columns are neither too wide nor (usually) too thin.

On large computer monitors, your roleplay content may stretch horizontally for days, and it will not look very professional. Newspapers and magazines are designed for maximum legibility, and there is a lot that we can learn by trying to emulate their designs.

Solution: Use a div with a max-width command to prevent your layout from going over a certain width. The Centerblock BBcode will also work.

Is there enough contrast between the color of the text and the background?

Too high a contrast such as pure white on pure black (or vice versa) strains the eyes. Contrast that is too low makes it too difficult to pick out the text from the background. Test your color scheme out first – make sure that your contrast is neither too high nor too low. I personally favor an off-white background with dark gray text, but each design is different.

If the background is patterned, does it create a contrast issues that makes the text difficult to read? A background pattern with high contrast, such as a bright flowers or space art, will make it difficult to discern the shape of the letters. Remember, anything that makes it harder to read the text is bad design.

Solution: If the background is a plain color, adjust the colors of both the font and the background until there is sufficient contrast. If the background is an image or pattern, use a translucent block to mute the entire background, or create a mostly-opaque backdrop for the text.

Is the font style easy to read?

Does each letter look like the letter it’s intended to be? Does anything about the style make it more difficult to read and slow down the reader? Script fonts, such as cursive and handwriting fonts are extremely difficult to read in entire paragraphs. They make excellent display fonts – fonts that are best used as headers or titles – but terrible body copy. The ideal body font for anything displayed on a screen is a sans-serif font such as Calibri, Helvetica, Tahoma, Verdana, Open Sans, etc.

Solution: Again, I recommend sticking with RPN's default font. If you want to experiment though, any font that more-or-less resembles Arial or Times New Roman will be good for body text.

All information is readily visible and available

There is a troublesome trend afoot, where users control the height of a section of their design, and then utilize a scroll bar within the post. Admittedly, it looks nice and tidy. However, it falls under what I consider superfluous aesthetic bad design – it looks nice but does it not contribute to good design. That is to say, it does not make your information easier to read. It makes it more difficult.

All your information should be openly visible. If you use a scroll bar within a section to control the height, you must accept that some users will not see the scroll bar, and thus will not see any of the information that gets cut off. It's best practice to have as few clicks between your content and your audience as possible. This includes scrolling.

Tabs, accordions, roll-over effects, alt-text – basically, if it’s an extra click, there’s extra risk that the information will be ignored, accidentally or otherwise.

Do not hide your content. Be proud of it.

Solution: If you can, avoid placing vital information in tabs, accordions, or height-controlled scroll boxes. If you insist, at least make sure that it's clearly visible to readers that they need to click somewhere to continue reading. For this reason, I suggest keeping scroll bars visible at all times.

Loads quickly

Elaborate scripts, multiple font styles, videos, and large images must be loaded from external sources. This increases the loading time of your thread. To make sure your thread loads as quickly as possible and doesn’t leave user’s hanging, make sure to use smaller or compressed images. Many image editing programs have a tool that estimates how long it will take for your image to load with various connection speeds.

If your image (or video, or external fonts and scripts) take longer than two to three additional seconds to load, you have too much material and your readers/users with slower connection speeds will be more likely to ignore your thread simply due to bandwidth issues.

As I’ve said in an old roleplay search thread: “If I need the entire collective bandwidth of North America to look at your thread because it’s got big-ass images and high quality GIFs everywhere, I’m not joining your roleplay.”

Solution: Stick to one to three fonts for your design - one for the body copy, one for sections headers, and then maybe a third font for special effects such as emulating a handwritten note. Avoid GIFs and videos when possible, or else stick to no more than two instances in a page. Avoid using images more than 1366px wide or 768px tall (common wallpaper size).

Displays correctly

This one’s always the kicker. Remember that everyone on RP Nation is using a variety of devices to look at the site. Some of us have large luxurious monitors that are over two thousand pixels wide. Some of us have standard 1366x768 laptop screens. Others view the site from smartphones and tablets.

Your design will shift and elements will float around as the forum layout automatically resizes the site for smaller and larger screens. I suggest resizing your browser window to see how different sized screens will affect your layout – and accept that it will not look exactly right on every screen, in every browser, on every operating system. It just won’t.

Solution: Similar to the solution for keeping text aligned nicely, consider using a div with a max-width measurement to control how your layout looks. Avoid min-width, as this will force mobile users to scroll horizontally... or maybe you want that, you sick bastard?

Questions?

If you have any questions about design and designing layouts (or just like the tutorial or see a way to improve it), please post here and ask away!

May 1 2017: Thread updated to add solutions to common issues, and address BBcode instead of HTML and CSS.
 
Last edited:
I've updated this thread with a new layout (finally) and some additional information on how to fix common issues with poor design!
 

Users who are viewing this thread

Back
Top