Report article RSS Feed Web Design Theory

Time to make a site! This tutorial will guide you through the theory behind making a good website for your mod.

Posted by Sallycin on Dec 18th, 2006
Basic Website.

[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!

Post comment Comments
PlayerCharacter
PlayerCharacter Dec 26 2006, 2:57am says:

Damn right about the Flash. Flash sites may occasionally look cool, but people don't go to websites to be wowed by animations and rollovers. Flash sites should always have a HTML equivalent.

+1 vote     reply to comment
Blackops67
Blackops67 Dec 28 2006, 6:37pm says:

yeah it always helps to have an HTML as well, for the slower connections.

+1 vote     reply to comment
xybernet
xybernet Dec 28 2006, 10:40pm says:

Hay! I have a flash website!

xybernet.tk

It's not that flashy or anything

+1 vote     reply to comment
Sallycin
Sallycin Dec 30 2006, 11:48pm says:

But even on my medium speed broadband wireless connection, it takes 1-3 minutes to load. I'm not even going to sit though that to see a site I don't much care about (No offense ;))

+1 vote     reply to comment
methy
methy Jan 2 2007, 5:18am says:

Nice tutorial!

+1 vote     reply to comment
Spector
Spector Jan 23 2007, 2:38pm says:

If you do them just right flash websites can be clean looking and load fast.

V-fuse.com

+1 vote     reply to comment
Sallycin
Sallycin Jan 24 2007, 6:38pm says:

It's a great flash site, minimal loading time. However, it still might scare away people who don't want to download flash.

+1 vote     reply to comment
crypto559
crypto559 May 16 2007, 8:27pm says:

well some dedicated modders out ther have not that big
of a pigy bank and what they need is a good web hoster except
freewebs . dont go ther .... peaple try to fund a good html tutorial its mandatory for a web site

+1 vote     reply to comment
JohnnydeBris
JohnnydeBris Aug 19 2007, 6:49am says:

Good document, contains some good tips indeed... The web site usually is the first thing people see of a mod, and if it's bad it can really be a reason to skip a mod, so it's good to at least explain some basic 'dos and don'ts' here... Some small remarks, however:

* I guess for mod teams it usually makes sense to start with a good Content Management System, rather than build your website from scratch. These usually provide features like forums, news sections, etc. out-of-the-box. Please take some time to find a CMS that suits your needs, or ask around what CMS other mod developers use. Do mind, though, that your web-hoster will have to allow you to run the server-side language used by the CMS for it to work (often this means they need to support PHP). Also, CMSses usually allow you to write content without having to know HTML. (They usually do require HTML knowledge for customizing the look and feel of the whole website, though! The remark about finding a good HTML tutorial will still be a very good one, even if you use a CMS.)

* Flash websites are usually a bad idea indeed, although for your audience (gamers!) I don't think it's _too_ important: they will usually run a decent browser (IE or Firefox or something) and have Flash installed (since most gamers use Windows anyway...). Having said that: it's _way_ easier to create a very bad site in Flash than it is in HTML. Don't do it if you're not very familiar with web design!

* Iframes are nowadays very commonly implemented (IE, Firefox/Mozilla, and I think also Safari/Konqueror and Opera support them) and relatively safe to use. I would say, if you have to choose between an iframe and a normal frame, go for the iframe. However, if you can easily avoid them, do so.

(I'm sure I have more tips, but can't think of much now... Perhaps more later. ;) )

Anyway, thanks for the tut, keep up the good work!

+2 votes     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Tutorial
Browse
Tutorials
Report Abuse
Report article