Boyles Web Design

People always ask me how to make a web site... so I made a video on how its done, by screen casting work I did for a client today. This is the whole web design process from my head to the computer. This was started as just a sketch on some paper and evolved as I worked. This is a really rough draft and will be touched up A LOT and added to. Just thought it would be cool to screen cast my workflow and process. It took about an hour and a half and turned it into about two minutes. Check it out at:
 
 

 

Oh, these eternal ineradicable alignment issues, that kill modular grid (and page appearence at the same time)! Hierarchy of paddings should be: a < b < c. Also try to make the bottom border a bit lighter. Shadows under recent work blocks are too bold, while they obviously should have the same look (opacity, size etc) as ones that are thrown by other elements of interface.

 
Hope that helps.

Not bad at all.
Couple of things though...
 


 
Remove the Apple logo from the monitor. No one likes brands shoved in their faces if they are trying to hire someone. Unless you work as a tech for Apple of course.
The image overlay on the monitor looks flat, try adding an unobtrusive inner shadow.
Up the line spacing on the 'Yes, I can do it all' line, it looks to squished as is.

I've attached a screenshot of what I'm seeing (Safari on PC), if that helps at all:
 

Made a quick and simple example here for you:
http://jsfiddle.net/LZL6m/
 
Im using ".animate" instead of ".css"
This way you dont need the slideToggle on the paragraph.

Hmmm, you have javascript files all over the place man. Looks a bit messy.
I'd advise you create a script.js file or something, then in that file have all your javascript. Unless its specific to a unique page...
 
Anyway, try doing this:
 

jQuery(".heading").click(function(){ if ($('.heading').hasClass('active')) { $("#portfx").css("height","150px"); $("#marco").css("height","150px"); $('heading').removeClass('active'); } else { $("#portfx").css("height","300px"); $("#marco").css("height","300px"); $('heading').addClass('active'); } $(".content").slideToggle(900); });

Try...
 
#content {
float:left;
padding:10px 62px 10px 68px;
width:480px;
margin-right:60px;
}
 
If you want I cleaned up your css a bit, this will also give your posts some spacing at the bottom...

/* Theme Name: voidy Theme URI: http://www.diovo.com/links/voidy/ Description: <a href="http://www.diovo.com/links/voidy/" title="Voidy">Voidy</a> is a free wordpress theme, released by <a href="http://www.diovo.com" title="Diovo" target="_blank">Diovo</a>. Voidy is the perfect theme for your great blog. It is clean, clear and beautiful. It is minimalistic two-cloumn theme with the widgets all arranged in the right sidebar. Voidy was designed to make your content stand out and make everything else get out of the way. Check it out and you will fall in love with it. Version: 2.3.5 Author: Niyaz PK Author URI: http://www.diovo.com/about/ Tags: white, two-columns, fixed-width, theme-options, custom-menu, threaded-comments, translation-ready, silver, light, right-sidebar Last updated: 17:55 12-08-2010 The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php */ /* Slider */ .move{ padding-top:70px; padding-right:-00px; } #slider-wrapper { background:url(images/slider.png) no-repeat; width:917px; height:166px; padding-bottom:-10px; margin-left:-184px; } #slider { position:relative; width:917px; height:166px; margin-left:190px; background:url(wp-content/themes/voidy/img/loading.gif) no-repeat 50% 50%; } #slider img { position:absolute; top:0px; left:0px; display:none; } #slider a { border:0; display:block; } .nivo-controlNav { position:absolute; left:260px; bottom:-42px; } .nivo-controlNav a { display:block; width:22px; height:22px; background:url(wp-content/themes/voidy/img/bullets.png) no-repeat; text-indent:-9999px; border:0; margin-right:3px; float:left; } .nivo-controlNav a.active { background-position:0 -22px; } .nivo-directionNav a { display:block; width:30px; height:30px; background:url(wp-content/themes/voidy/img/arrows.png) no-repeat; text-indent:-9999px; border:0; } a.nivo-nextNav { background-position:-30px 0; right:15px; } a.nivo-prevNav { left:15px; } .nivo-caption { text-shadow:none; font-family: Helvetica, Arial, sans-serif; } .nivo-caption a { color:#efe9d1; text-decoration:underline; } /* Instructors */ .name{ background-color:#0b63c8; text-align:center; color:#FFF; font-size:14px; } .belt{ background-color:#072a52; text-align:center; color:#FFF; font-size:14px; } .entry_instructors{ clear:both; padding:10px 5px; width:618px; margin-top:-70px; margin-left:-45px; font-family: Georgia, serif; } /* End Instructors */ /* Elements */ * { margin:0; padding:0; } .logo{ margin-left:210px; margin-top:20px; } .top_header{ margin-left:6px; margin-top:-45px; } body { margin: 0; padding: 0; font-family: Arial, sans-serif; line-height: 1.5em; font-size: 10px; /* IE5 Win */ voice-family: "\"}\""; voice-family: inherit; font-size: 10px; /* easy scaling */ font-size: 0.76em; color: #000; background-image: url(img/bg-reapeat.png); background-repeat:repeat-x; background-color:#eeedf3; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-family: Arial, sans-serif; color: #777; } p, blockquote, ul, ol { margin-top: 0; padding-top: 0; margin-bottom:0.5em; } p { line-height:1.7em; font-size: 1.1em; margin-bottom: 0.9em; } pre { font-size:1.5em; } a:link, a:visited { color: #579; text-decoration:none; } a:hover,a:active { color:#79a; border-bottom:#79a 1px dotted; text-decoration:none; } img.left{ float:left; margin:0 1em 1em 0; } img.right { float:right; margin:0 0 1em 1em; } a img { border:0; max-width:100%; } blockquote { margin:1em; padding:5px 1em; color:#000; background:#f2f2f2; } fieldset { border:none; } dl { margin:1em 0px; } dt { font-weight:bold; } dd { margin:0.5em 1em; padding:0; } code{ font-size: 1em; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position: relative; font-size:0.6em; } sup { bottom: 1ex; } sub { top: .5ex; } /* Header */ #header { position:relative; width:930px; margin: 15px auto 0 auto; background:url(img/bg_header.png) no-repeat top center; } /* Logo */ #logo { float:left; height:47px; overflow:hidden; padding:65px 0 0 70px; } #logo #h1{ float:left; font-family:Georgia, serif; font-size:48px; } #logo #h2 { color:#777; float:left; font-size:13px; padding:5px 20px 10px; } #logo #h1 a { text-decoration: none; color:#999; border:0; } #logo #h1 a:hover, #logo #h1 a:visited, #logo #h1 a:link { border:0; } #header-icons { position:absolute; right:0; margin-top:10px; z-index:99; } #header-icons .twitter, #header-icons .rss{ height:27px; width:160px; margin:16px 25px; } #header-icons .twitter{ background: url("img/twitter.png") no-repeat scroll 0 0 transparent; display:none; } #header-icons .rss{ background: url("img/rss.png") no-repeat scroll 0 0 transparent; display:none; } #header-icons .twitter a, #header-icons .rss a{ padding:10px 80px; border:0; } #menu { background:url("img/menu-bg.png") no-repeat scroll 0 top transparent; clear:both; height:55px; margin:0 auto; margin-left:-65px; margin-top:-58px; width:930px; } /*.menu-bottom { background:url("img/menu-bottom-bg.png?m") no-repeat scroll 0 bottom transparent; padding-bottom:16px; }*/ #menu ul { background:url("img/menu-curve-bg.png") no-repeat scroll left top; list-style:none outside none; margin:0 5px; padding:0px 10px 0 -20px; text-align:; width:px; float:; /* margin-right:400px;*/ } #menu li { display: inline; padding:16px 0 16px; white-space:nowrap; position:relative; } #menu li.current_page_item, #menu li.current_page_item:hover { background-color: #316799; } #menu a { border:0 none; color:#000; font-size:14px; text-decoration:none; padding:10px 20px; line-height:50px; } #menu a:hover, #menu a:active, #menu li.current_page_item a:link, #menu li.current_page_item a:visited, #menu li.current_page_item a:hover, #menu li.current_page_item a:active{ color:#000; border:0; } #menu li:hover { background-color: #316799; } /* Main */ #main { background:url("img/bg.png") repeat-y scroll center center transparent; border:0 solid #eee; /*margin:0 auto;*/ background-color:#FFF; width:930px; } .title{ font-size:16px; } #main h2 { font-size: 1.6em; /* line-height:1.2em;*/ } #main h1, #main h2 { font-size: 2em; /* line-height:1.2em;*/ font-weight: bold; } #main h3 { padding: 4px 0px; font-size: 1.4em; /* line-height:1.2em;*/ font-weight: bold; } #main h1 a, #main 2 a { border:0; font-size:28px; font-weight:normal; color:#555; width:618px; display:none; padding: 4px; font-family:Arial, sans-serif; } #content ul { font-family:Georgia, serif; margin: 0.5em 0; width:618px; padding: 0 0 0 2em; list-style-type:none; } #content ul li { margin:0.75em 0; padding:0; /*list-style-image:url(img/bullet.png);*/ /* line-height:130%;*/ font-size:16px; } #main ol { margin:0; padding:0 0 0 4em; } #main ol li { font-size:16px; margin:0.75em 0; } #main .post{ margin-left:100px; } #main .page{ margin-bottom:50px; margin-top:30px; } #main .entry_aboutus { clear:both; padding:10px 5px; width:618px; margin-top:-84px; margin-left:-60px; font-family: Georgia, serif; } #main .entry_blog { clear:both; padding:10px 5px; width:618px; margin-top:-87px; margin-left:-100px; font-family: Georgia, serif; } #main .entry_calendar{ clear:both; padding:10px 5px; width:618px; margin-top:-100px; margin-left:-60px; font-family: Georgia, serif; } #main .entry{ clear:both; padding:10px 5px; width:618px; margin-top:-80px; margin-left:-60px; font-family: Georgia, serif; } #main .entry_home { clear:both; padding:10px 5px; width:618px; margin-top:-57px; margin-left:210px; font-family: Georgia, serif; } #main .entry p{ font-size:16px; /* line-height:140%;*/ overflow: auto; } #main .entry h2{ font-size:1.6em; } .post .meta p { font-family: Georgia, serif; font-size:16px; display:none; color: #aaa; } .post .comments, .page .comments { font-size:14px; color:#999; margin-left:-53px; padding-left:20px; background:url(img/icon_comments.gif) no-repeat left center; clear: both; } .post .comments a, .page .comments a { border-bottom:0px; color:#999; } .commentmetadata a{ border:0; color:#777; } ul.authorposts { margin:0; padding:0 2em; } ul.authorposts li { margin:0; padding:5px; } ul.authorposts li em { float:right; font-style:normal; } /* Content */ #content { float:left; padding:10px 62px 10px 68px; width:480px; margin-right:60px; } /* Column Two */ #sidebar1 { float: left; width: 120px; background-color:transparent; padding: 5px 21px; /* Moves Sidebar */ font-size:0.9em; margin:5px; } #sidebar2 { float: left; width: 120px; padding: 5px 20px; font-size:0.9em; margin:5px; } #main .sidecol { color:#777; font-size:14px; line-height:-5em; } #main .sidecol ul { margin:0; padding:0; } #main .sidecol li { margin:0 0 60px /* Alter Space between widgets */0px; /*background-image:url(img/widget-repeat.png);*/ padding:0; /* background-color:#e5e5e5;*/ /* width:60px;*/ list-style:none; width:270px; margin-left:-720px; margin-bottom:100px; } #main .sidecol h2 {/* Top Image */ color:#FFF; font-size:16px; font-weight:bold; height:42px; background-image:url(img/widget-repeat.png); background-repeat:repeat-x; padding:15px/* DONT CHANGE THIS */ 10px/* Text Position */ 110px /* Sidebar Content Pos*/ ; /*width:282px;*/ } #main .sidecol p, #main .sidecol form{ /*padding:0 10px 0 18px;*/ margin:0; background-color:none; } #main .sidecol p{ color:#777; padding-bottom:-20px; font-size:14px; font-weight:normal; background-color:none; font-size:14px; } #main .sidecol ul ul{ margin:-110px 0 0 13px;/* Link Position */ line-height:-10px; padding:0; } #main .sidecol ul ul ul{ margin:1px 0 0 10px; padding:0; } #main .sidecol li li { margin:12px 0; padding:0; } /* Sidebar2 */ #sidebar2 { float: left; width: 120px; padding: -10px 20px; font-size:0.9em; margin:5px; margin-top:-40px; } #main .sidecol2 { color:#777; font-size:14px; line-height:-5em; } #main .sidecol2 ul { margin:0; padding:0; } #main .sidecol2 li { margin:0 -50 -10px /* Alter Space between widgets */50px; /*background-image:url(img/widget-repeat.png);*/ padding:0; /* background-color:#e5e5e5;*/ /* width:60px;*/ list-style:none; width:270px; margin-left:-75px; margin-bottom:40px; } #main .sidecol2 h2 {/* Top Image */ color:#FFF; font-size:16px; font-weight:bold; height:42px; background-image:url(img/widget-repeat.png); background-repeat:repeat-x; padding:15px/* DONT CHANGE THIS */ 10px/* Text Position */ 120px /* Sidebar Content Pos ; /*width:282px;*/ } #main .sidecol2 p, #main .sidecol2 form{ /*padding:0 10px 0 18px;*/ margin:0; background-color:none; } #main .sidecol2 p{ color:#777; padding-bottom:-50px; font-size:14px; font-weight:normal; background-color:none; font-size:14px; width:200px; } #main .sidecol2 ul ul{ margin:-110px 0 0 13px;/* Link Position */ line-height:-10px; padding:0; width:200px; } #main .sidecol2 ul ul ul{ margin:2px 0 0 0px; padding:0; } #main .sidecol2 li li { margin:0px 0; padding:0; } /* End Sidebar */ /* Begin Calendar */ #wp-calendar { empty-cells: show; margin: 10px auto 0; width: 155px; } #wp-calendar #next a { padding-right: 10px; text-align: right; } #wp-calendar #prev a { padding-left: 10px; text-align: left; } #wp-calendar a { display: block; text-decoration:none; } #wp-calendar #today { border:#999 1px solid; } #wp-calendar caption { text-align: center; width: 100%; } #wp-calendar td { padding: 3px 0; text-align: center; } #wp-calendar td.pad:hover { /* Doesn't work in IE */ background-color: #fff; } /* End Calendar */ /* Comments */ #searchsubmit { background-color:#ddd; border: 1px solid; border-color: #999; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; height:22px; font-size:1em; padding:0px 3px; } #searchsubmit { font-size:0.6em; visibility:hidden; } input { height:25px; } #submit, input[type='submit'] { -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; background-color:#ddd; border:0; font-size:14px; height:35px; padding:3px 10px; color:#; font-family:Arial, sans-serif; text-shadow:1px 1px 0 #fff; font-weight:bold; -moz-box-shadow:0 1px 1px #AAAAAA; -webkit-box-shadow:0 1px 1px #AAAAAA; } #submit:hover, input[type='submit']:hover { background-color:#d5d5d5; } input.go { -webkit-border-radius:0 4px 4px 0; border-radius:0 4px 4px 0; -moz-border-radius:0 4px 4px 0; background-color:#ddd; border:3px solid #ddd; color:#999; font-size:13px; font-weight:bold; height:38px; margin-left:-4px; padding:3px 4px 3px 3px; text-shadow:1px 1px 0 #fff; vertical-align: middle; -moz-box-shadow:none; -webkit-box-shadow:none; } input.go:hover { background-color:#ddd; } input.textbox, input#s , input[type='text'] { -webkit-border-radius:4px; border-radius:4px; -moz-border-radius:4px; border:3px solid #ddd; color:#777; font-size:13px; height:32px; padding:0 5px; width:180px; vertical-align: middle; } input.with-button , #searchform input.with-button { -webkit-border-radius:4px 0 0 4px; -moz-border-radius:4px 0 0 4px; border-radius:4px 0 0 4px; } textarea{ width: 95%; padding:5px; height: 15em; border: 3px solid #ddd; font:1em Georgia, serif; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } input.textbox:focus, textarea:focus, input#s:focus, input[type='text']:focus { border:#bbb 3px solid; outline: none } #commentform { margin:0; } /* #commentform input { float:left; } #commentform p { clear:both; margin-bottom:10px; overflow:auto; } #commentform p.form-submit { overflow:visible; } */ #commentform p label { font-size:11px; margin-left:10px; font-family:Arial,sans-serif; } #main .commentlist { margin: 0; padding: 0; border-bottom:1px dotted #EEEEEE; } #main .commentlist li { list-style:none; margin: 0; padding: 1em; /*border-bottom:#ddd 1px solid;*/ font-size:1em; background-color: #fff; } #main .commentlist li p { font-family: Georgia, serif; font-size:14px; } #main .commentlist li cite { font-style:normal; font-weight:bold; font-size:1.1em; } #main .commentlist li.alt { background:#f9f9f9; } #main .commentlist li.comment-author-admin { background:#fdffd4; } #main .nocomments { font-size:0.9em; color:#999; text-align:center; } /* Footer */ #footer { background:url("img/bg_footer.png") no-repeat scroll center bottom transparent; border:0 solid #eee; height:52px; margin:0 auto 30px; width:930px; clear:both; } #footer p { color:#CCC; font-size:0.9em; margin:0; padding:11px 30px 0; } #footer p span { float:right; } #footer a:link, #footer a:visited { color:#FFF; border:0; } #footer a:hover, #footer a:active { color:#CCC; text-decoration:none; border:0; } #sidebar, #footer{ overflow:hidden; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .alignleft { float: left; } .alignright { float: right; } .wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; margin: 10px; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .wp-caption img { margin: 0; padding: 0; border: 0 none; } .wp-caption-dd { font-size: 11px; line-height: 17px; padding: 0 4px 5px; margin: 0; } .tags{ color:#999; font-size:0.8em; } .tags a{ color:#999; border:0; } .newer-older { text-align:center; } .newer-older a, a.more-link , a.post-edit-link, .post .navigation a, .page .navigation a{ background-color:#F1F1F1; color:#A1A1A1; font-weight:bold; padding:2px 10px 3px; font-size:13px; font-family:Arial,sans-serif; -moz-border-radius:15px 15px 15px 15px; border-radius:15px 15px 15px 15px; -moz-box-shadow:1px 1px 0 #AAAAAA; -webkit-box-shadow: #AAA 1px 1px 0px; } .newer-older a:hover, a.more-link:hover , a.post-edit-link:hover, .post .navigation a:hover, .page .navigation a:hover{ background-color:#e7e7e7; border: 0; } .post .navigation, .page .navigation { padding:15px; position:relative; height:20px; } .post .navigation div, .page .navigation div { float: none; display: inline; position:absolute; } .post .navigation div.alignright, .page .navigation div.alignright { right:120px; } .post .navigation div.alignleft, .page .navigation div.alignleft{ left:120px; } .comment-author { float: left; } .comment-author .fn { font-family: Arial, sans-serif; padding-left:10px; } .comment-author .says { display: none; } .comment-body .comment-author img { vertical-align:middle; } .comment-body .comment-meta { color:#999; float:right; font-size:0.7em; font-style:normal; font-weight:normal; margin:0; padding:0 1em; font-family: Arial, sans-serif; } .comment-body p{ clear: both; padding-top:10px; } .comment-body .reply { font-family: Arial, sans-serif; font-size: 10px; } #respond { clear:both; padding-top:15px; } .spacer { margin-top:37px; } /* Sub-Menu Animation */ #menu ul ul { background: none; border: 1px solid #E5E5E5; } #menu ul ul li { display:block; padding:0; text-align:left; } #menu ul ul.children, #menu ul ul.sub-menu { display:none; position:absolute; left:-1px; top: 100%; background-color:#fff; z-index:100000; padding: 0; margin: 0; } #menu ul > li:hover > ul.children, #menu ul > li:hover > ul.sub-menu { display:block; } #menu ul ul ul { left:100% !important; top:-1px !important; } #post { margin-bottom:40px; }

not a fan of scrollers in general but if you must, when you click on a tab/number I expect it to go to it and remain on it. Just when I've clicked to have a look and read the content it's moved :S

A little too big overall I think, I don't particularly have a problem with shadows, in fact I quite a shadow!
 
However they are too dark and the distance they cover is too large, and there are too many, don't use them on every item. Make them very subtle. Imagine how much of a shadow a piece of paper has when it is laid on a table, It is very fine. Use shadows sparingly on text to loose that idea of a piece of text being an inch off the screen (and keep them almost illegible, it does work). Shadows with no offsets can really make some type jump off the page, Like a fine bright white text shadow on black text sat on a cream background (I like it anyway)
 
The darker areas need some texture to them too (by that I mean add depth), and separation of the columns with a divider might be nice.
 
The logo looks funny where you have joined the K and Y, it's a bit wonky and the icons are a little lack luster, they need to be crisper and brighter.
 
You could try a more arbitrary way of displaying skill set? Like the braingame on Facebook, different robots depict different levels of skill. This way you're not saying I am not as good at this as that, it means you have to update it less too!
 
Waffle over, good luck.

To me I'm seeing two sites almost in a sense. You've got the nicely designed, modern looking top part with nice smooth fonts, the wood effect etc, it all looks pretty nice. Then you get to the main area and things go a bit low-fi. You've got basic big white Arial titles and big arial text on a plain background. It just seems a bit dull compared to the top design to me, but again, that is just an opinion. If it was me I'd be looking at some fancier fonts for the headings, making the main bodies of text smaller and maybe doing something with the background.
 
Also I'm seeing some errors on the right hand side:
 

Warning: simplexml_load_file(http://jakeboyles.tumblr.com/api/read?type=photo&start=1&num=3) [function.simplexml-load-file]: failed to open stream: HTTP request failed! HTTP/1.1 503 Service Temporarily Unavailable in /homepages/12/d178860016/htdocs/NewJake/index.php5 on line 118 Warning: simplexml_load_file() [function.simplexml-load-file]: I/O warning : failed to load external entity "http://jakeboyles.tumblr.com/api/read?type=photo&start=1&num=3" in /homepages/12/d178860016/htdocs
 
Might want to look into that. On another note, why have you got "© 2010-2012", does the copyright end in 2012 because the world is going to end?

It's too wide for me screen, the feature goes off the page on a 1024 res. I think the text is a bit to bold for my tatse and i'm not a fan of the drop shadows. Some of the feature pics are pixelated. It does have nice structure and if the content fitted in I think it would be better.

Hey everyone. If this is against the rules feel free to delete mods . But anyway I am giving away Google Wave invites on my blog if someone is interested. All you have to do is leave a comment with your name and your email and youll be entered to win. Im giving away three invites so its pretty good chances. Link is http://sites.boyleswebdesign.com/wordpress/?p=188 and feel free to retweet if you would like

I'm taking leave of WDF, I will see you guys some time next year, by then I hope to have lots of work done.
 
Later all.

Well I've just got back from graduation, not really much point to this thread other than to brag about an amazing day. I looked the dogs ******* in all the gown, and I had a full suit on underneath which made me feel a million dollars. Apparently I carried the gown best out of everybody there (told by several lecturers, my friends, parents and people I know). Had a really good day, got photographed, spent some time walking around the gardens where it was at and went to the actual ceremony. My course only had 2 people there graduating, they called out the course title to a deathly silence, then my classmates name to another deathly silence, then they said my name and my family made a huge noise and all my friends graduating made a racket too.
 
Throwing my hat in the air and catching it again has to be the most memorable and satisfying thing I've ever done in my life.
 
As I said, not much point to this post other than bragging rights really but I had an incredible day! Job interview on Monday now, bit apprehensive but I've got a weekend with my girlfriend in Notthingham before then .

Not sure whether it's for me to say, but some people may not know how to use the rating system on the new forum, and I haven't seen any threads explaining how to do so.
 
You may have noticed that at the bottom right of every single post, there's a + and - sign, that will have a '0' in when it's first posted, if you press +, it'll go to '1', and if you press - it'll go to '-1' (assuming that nobody has pressed it), by doing this, it affects the rating of individuals in their profile, which can be viewed by clicking their username by the side of their posts, in the thread title etc.
 
How you should see it is a thanks system, similar to those on other boards powered by vBulletin, so every time you see a helpful post, you give it a +, if you see a negative, unfriendly post, give it a -, this should help to deter individuals from saying bad things or spamming, and encourage people to help, which is always the best thing for this forum.