Web Design Theory tutorial

[page=Introduction]
So, you've started working on a new innovative mod? Need a place to show off your hard work to the public? What you need is a good website. This tutorial will lead you through key tips and ideas for creating a functional and stylish mod website. Please take note, this is not designed to teach you web design in practice. Before we go through the bulk of this tutorial, let us review some basic tips about web design.

Tip List

• Simplicity is key


• Easy navigation


• Compatibility


• Plan before you act


• Interaction

Let the learning begin!

[page=Navigation]
Perhaps the most important aspect of a website is the navigation. This means the links or menus that take you to other pages and allow you to view other information.

There are three common types of navigation bars.

• The top navigation. This is when the links are either incorporated into the site banner or placed underneath the banner. This works well if you have a smaller amount of links and want them easily noticed.


• Left or right navigation. This is when the links are located to the left or right of the main content area. This is useful when you have many smaller links and don't mind if they aren't quite as noticeable.


• The mix. This is the method that Moddb.com uses. There is a top navigation area with simple links and a side navigation area with a more detailed link list. This is probably the best navigation set up for most pages unless you are in need of more content area.

Common pages included in a mod site are:

• Main/News (updates).


• Info (about the mod).


• Media (screenshots, videos, ect.).


• Downloads (mod, tech demo, patches, ect.).


• Team (short bios of the team members).


• Forums (the community section of the site where fans and staff can communicate).

Because mod pages have few links as show, the top navigation scheme often works best unless you are in need of lots of pages.

[page=The Look]
Though not quite as important as navigation, the look of your site should be pleasing to visitors. This will cause them to stay at your site and enjoy it more.

Web sites should have a general color scheme with around two colors and then different shades of those colors. Try to avoid clashing colors, overly bright colors, and plain colors. These will be hurtful to the visitor’s eyes.

Your site colors should relate to the mod. A mod with a darker more serious theme will have darker colors. A mod that is based around desert combat might have a sandy color. This is the best way to determine site colors

Here I will list key tips in aesthetics of a web site.

• Visible text. You want white on black not yellow on white.


• Simplicity. Filters and outer glows can look cool, but overuse of them is bad and gives your site a cheap look.


• Dark background. A dark background color with lighter content areas tends to look better.


• Watch and learn. One of the best things to do when developing your sites style is to look and professional site and gets ideas from them.


• Consistency. All pages of your site such share the same layout and color.

[page=Interaction]
The interactive features of your site will often be what keep viewers coming back. People enjoy being able to share there thoughts, ask questions, and just have general discussions online.

Important interactive features include:

• Forums. A place for members to talk with other site members and the dev team.


• News comments. You should allow comments on news posts; you can get opinions on developments to help determine future decisions.


• Polls. Not so important, but good to have. Polls/surveys can allow you to get input on specific decisions/issues.

As you may see, interaction isn't quite as big an aspect of a mod site as navigation or aesthetics, in fact it is not even required. Still, interaction is always good because it will keep viewers coming back to the site and therefore reading news updates and contributing to the community.

[page=Conclusion]
I hope this quick tutorial will help you get your site up and going. You can contact me (via PM or email) if you have any questions or wish for me to elaborate upon any points made in this tutorial. Before you leave here is a quick list of "Do Nots" in web design:

• Flash Intros. Damn are those things annoying. Don't waist you time making something most visitors will just skip


• iFrames. I'm guilty to this one, but don't use iFrames. They are not compatible with many older browsers. Still, now that IE canuse them, it is reasonable to have them.


• Visitor counters. These will make you look like an obvious internet n00b. If you want to see your visitor count use a hidden counter.


• Flash. Though Flash, can make your site look pretty, I would in general discourage use of it because it requires that you download a plug-in. Some visitors will just leave the site because they don't feel like downloading a plug-in. You can sacrifice visits from those few viewers though, if you wish to add the extra coolness to your site.


• Fixed Sizes. Use scaleable tables rather than fixed sized tables. This allows for better viewing on a range of ressolutions.


• Centered text. Centered text makes it hard to see paragraphs.

Good bye, and thanks for all the fish!