Skin style and aesthetics Guidelines

Skin style and aesthetics Guidelines
make your forum look nice

Many members are requesting a tutorial about making a skin. But the fact is that the process and variety of graphics are too large to make into a single tutorial, so instead of a tutorial, I made these guidelines to help you get started.

Summary

1. Required basics
   
2. Advice on making a new skin
   
3. Let's go ahead
   
   1. Font choices
      
   2. Colors choices
      
      1. Beware of saturation !
         
      2. Beware of text/background contrasts !
         
      3. Don't abuse textures !
      
      
   3. Pic choices
      
      1. Category bars
         
      2. Who is online button
         
      3. Rank bars
      
      
   4. Too much animation kills animation
   
   
4. Conclusion

1. Required basics

Creating a skin requires some graphical and technical skills :

• Good handling of a graphic software (Gimp or Photoshop) - I recommend you to look for written and video tutorials, in order to practice.
  
• Knowing a minimum how to modify your forum's colors and pics in your admin panel.

I also recommend to learn CSS, which allows you to personalize your skin even more. Here are a few links where you can learn CSS :

• w3schools
  
• csstutorials
  
• Newbies Paradise (XHTML/CSS section)

2. Advice on making a new skin

First of all, it is very important to know that you can only use a skin which belongs to hitskin and aren't copyrighted. Most skins offered by other communities aren't free (free speech, not free beer, dixit Richard Stallman) and are not compatible with forumotion. Be careful when adapting themes to forumotion. Using pics from a nonfree skin can lead you to your skin being deleted for violation of copyrights. A skin is free only if the author explicitely stipulates it !.

I also strongly recommend, if you are going to upload to hitskin, personalize your skin as much as possible. We see too many skins where only the banner and a few pics are modified.

3. Let's go ahead !

Its best to start with a default skin from hitskin (for ie: prosilver on phpbb). Remember that making a skin isn't just modifying pics and colors, but also following some basic design rules, to make your design aesthetic and ergonomic, so is the goal of these guidelines.

In 3 years of activity on Forumotion, I have seen numerous themes which were horrible, as much aesthetically as ergonomically, and this phenomenon isn't Forumotion-specific, since I have seen one case of horrible design on other phpBB-based platforms. So I want you to avoid these mistakes.
Now, you're ready for the styling guidelines !

3.1 Fonts choices

First of all, it is vital to know that the font family you will choose for the text will be visible only for those who have this font installed on their computer. It is better to use the default font , so if you were thinking about using the latest trendy gothic font you just downloaded from Dafont for your Twilight skin, you'll have to review your plans. Use them only for your buttons and banners.

Here is the list of font families you can use and which are present on most computers (default).

• Arial
  
• Arial Black
  
• Comic Sans MS
  
• Courier New
  
• Georgia
  
• Impact
  
• Times New Roman
  
• Trebuchet MS
  
• Verdana
  
• Tahoma

Whether you use the simplified colors management or the CSS stylesheet, I strongly recommend you to put at least three or four font families, separated by commas, so the computers who don't have the first font can load the second, then the third if the second isn't present. Always finish the list by sans-serif which is present on all computers. (this is the case of Linux users who haven't installed the Microsoft Core Fonts package to get the font families I mentioned above).

Take note that font names which contain spaces, such as Arial Black or Trebuchet MS, surround them with quotation marks.

Here is an example of a choice of 4 font families :

Code:


    "Trebuchet MS", Verdana, Arial, sans-serif

Also take note that if you use the Times New Roman font, Mac computers don't use the same name for this font. In their case, the name is simply Times and so, if you use Times New Roman, always follow it by Times :

Code:


    "Times New Roman", Times, Arial, sans-serif

Now you know how to insert font family choices, but you also have to know which ones are more appropriate following the type of text.

Some fonts like Trebuchet MS (my favourite), Verdana or Arial are the most appropriated for long texts because they are easy to read on a screen. And if you noticed, these three font families are all sans-serif-type. These fonts render better on a screen than serif-types who render better on printed media.

And if you are a Comic Sans MS fanboy/fangirl, I have a bad news for you : This font, unlike the other sans-serif-types mentioned above isn't very adapted for long texts and its use should be limited to short texts such as titles, for the simple reason that our eyes are less accustomed to this style of font which is fancier, compared to more classical fonts and so, our eyes get tired more quickly. The same rule applies to the other fonts of the list (Impact, Georgia, Times, Arial Black) and any font you downloaded from Dafont.

About the Courier New font, this should be reserved for displaying codes which render better with a fixed-width font. Follow it by Monospace, then serif.

By cleverly choosing your fonts, you'll contribute to better reading comfort for your visitors, and better aesthetics of your skin.

3.2. Colors choices

Choosing the colors for your skin isn't as trivial as we might think.

First of all, your color choices must depend of your subject. For a "generic" subject (without particular subject), the color palette choice is quite wide, as long as it stays harmonious. If your skin isn't monochromatic, I recommend you to learn the basics of the color wheel (Read the Wikipedia article) in order to help you in the process of choosing harmonious colors.

For a more defined subject, the chosen colors must be in relation with the subject. For example, you won't use Barbie pink in a skin for a heavy metal forum.
Your color choices must be also related to what ambiance you want your skin to transmit. To help you, you can view this link which lists the color meanings.

3.2.1 Beware of color saturation !

A long time ago, it was funny to stuff our websites with eye-splitting colors, but today, using saturated (even fluorescent) colors isn't recommended because it causes discomfort to the visitor's eye. So whether your skin is monochromatic or polychromatic, the main color musn't be too saturated. So, we'll choose a white color or a softened color. Then, as second color who will be in smaller quantity, we can go with a more saturated color, as long as the contrast isn't too violent.

Some colors, such as red, are harder to manipulate because of their aggressive temper and so, it's always preferable to soften it a bit. Other colors, such as blue, are more all-purpose because of their soft temper (as long as it doesn't go fluorescent). And finally, strongly attenuated colors, such as grey, brown and beige, are neutral colors which can bring a balance inside a design with saturated colors.

3.2.2 Beware of text/background contrasts !

We have to tend to all internet visitors including users who have vision problems (low vision, color perception problems), you have to make sure that your texts are readable. For example, a navy blue text on a black background will be very hard to read, because the contrast is very low. In this case, choose a lighter text color which will match with your design's hue (ex: light blue if your design uses a blue hue). Also make sure the contrast isn't too violent, in order to prevent eye tiredness.
Whatever the brightness used in the skin, also avoid using two hues of a same brightness, such as red text on a medium blue, because visitors who have color perception problems (such as daltonists), won't be able to read the text.
I give you a small tip to know if your texts are legible enough. Browse the page in a brisk way, and if you miss some text , it means that you have to heighten the contrasts a little bit.

3.2.3 Avoid abuse of textures !

This quaint practice must be used with much moderation. If you use a texture or a background pic, make sure it is attenuated enough so it won't cause reading problems and give an "overloaded" look to your style. Look out for wood immitation, Leather , rock, animal skin backgrounds. Also avoid using giant backgrounds that take a long time to load. Its also not recommended to use photos, or big landscape backgrounds.


3. Pics

Pics are another important element which mustn't be considered rashly, because pics also play a role in the visitors' navigation.

One of the most common mistakes is using HUGE icons which deform the forum pages and stretche them.
Making huge icons won't bring anything, instead uneasiness in your visitors' navigation, because of not only the fact that it makes pages load long, but it also takes space away from the other cells beside them.

So, you have to stay modest in your pic dimensions. To help you, here are maximum dimensions that I recommend:

• Banner : 780*150
  
• Full-image navlinks : Not more than 760px of width. For its height, between 30 and 50px is ideal.
  
• Index folders : 60*60
  
• Topic folders : 50*50
  
• "Who is online" logo : 150*150
  
• Big buttons (New topic, post reply) : 130*40
  
• Small buttons : 70*30 (longer for the "search" button)
  
• Moderation buttons : 30*30
  
• Buttons for PM boxes (inbox, sentbox, outbox, savebox) : 40*40
  
• Mini-icons : 15*15

Then, all your pics must be in harmony with each other, and must also be in harmony with the colors. They must also be stand out enough for people to know they are buttons. Remember that the text on buttons must be readable at all times.

More, for a same image group, such as the index folders, always keep the same dimensions and the same style, in order to avoid page deformation. Images which are too odd, by their dimensions as well as their style, breaks the skin's unity and aesthetics.

3.1. category bars

A common mistake is to use images that don't repeat seamlessly when placed next to eachother. Do not use photos or images with a focus point on your category bars. Your category bars should be smooth and whats most important they HAVE to be seamless. Seamless means you can't see where the image starts and where it ends. Also in phpbb2, avoid using images that start on one side and are not symetrical on the other. In phpbb2 the category bar is not a single line. it is divided into 3 parts. An unsymetrical image is repeated in each cell making the category bar unbearable to look at. Its better to use a plain and simple, seamless category bar. If you make a fixed-width style, you can make a bar which has visible ends (such as rounded corners), but you must make the center seamless and make sure to make the pic wide enough to take the category bar's width, and for phpbb2-based styles, where some category bars are splitted in 3, you can reposition the pic with the background-position CSS property for some cell classes.

3.2. The who's online button

A big mistake is to post a giant image in the who's online. You cannot post an image that big. It slows down the browsing and it does not look good. Keep the image small, or try without an image. Sometimes not having the online image is far better than having one.

3.3. Rank images on posts

Administrators have to avoid ranks with borders. We see rank images that are in the .gif format and have a residue border which is usually white. On a black forum this looks awful !!! Make sure your rank images are properly cut out, without any residue... and the best idea would be to save them as .png.


4. Too much animation kills animation

Another common mistake we meet is abusing animated GIFs. The animations, are heavier to load than static pics, they distract the visitor (especially when used as a background!). And it's even worse when the blinking is violent (red to white or black, without transition), because in addition to it being annoying, it might cause seizures to some Internet users who are more sensitive (such as epileptics and children). So, I recommend you use animated GIFs with moderation, by choosing a discrete animation for only a few icons, such as hot topics, or the "New PM" button indicating the arrival of new PMs.
For backgrounds, always use a static image.

By the way, we're talking about animation, so I will also talk about Flash animations. Even if its effects makes a "wow it's too cool" effect to some people, Flash has a major flaw : accessibility issues : Not only Flash is heavy to load for small connections (yes, there are still 56k users, even in developed countries such as France, Canada or USA !), but in addition, some Internet users don't have the Flash plugin or use a screen reader (it's the case for blind people. further more your site will not be accessable by some netbooks and mobile phones, including palmtops), these resources are not replaced by your browser and they leave an empty spot. For these reasons, I don't recommend to use Flash for parts who are as vital as navigation menus. Keep it for much more secondary elements which won't harm the navigation for those who don't have the plugin.

5. Conclusion

With the advices I mentioned above, you will be able to make skins with a decent aesthetics. But before, don't hesitate to show it on forums where you are allowed to show your skin, in order to get advice on how to improve it. Also don't hesitate to seek help in the "Manage the appearance of your forum" section if you get stuck on a detail and don't find anything that fits your problem in the FAQ or tips forums.

And to finish, if you want a visual example of the mistakes to avoid, I suggest you click the link to this website which has a volontary horrible design, which shows the mistakes to avoid in web design.




Guidlines written by Cornelia
Edited and enriched by Jalokim
Additional help from GFX staff